{"id":2801,"date":"2021-10-15T14:39:41","date_gmt":"2021-10-15T14:39:41","guid":{"rendered":"https:\/\/blog.productcart.com\/?p=2801"},"modified":"2025-02-26T20:37:07","modified_gmt":"2025-02-26T20:37:07","slug":"productcart-mobile-responsive","status":"publish","type":"post","link":"https:\/\/blog.productcart.com\/index.php\/2021\/10\/15\/productcart-mobile-responsive\/","title":{"rendered":"ProductCart and Mobile Responsive Design"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_row _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;]<\/p>\n<p>Your e-commerce website usability is vital for your website\u2019s success! Shoppers need to be able to visit your website whenever the need arises, from whatever device they have available. Often times, the most readily available device is a cell phone. Due to this, a major topic during the website build conversation is mobile optimization and mobile responsiveness of websites. ProductCart customers should understand how mobile responsive design in a website\u2019s theme is just as important as the e-commerce solution used to sell its products!<\/p>\n<h2>The Quick History of Mobile Responsive Design<\/h2>\n<p>As of the late 2000\u2019s and 2010\u2019s, more and more websites were designed to be \u201cmobile friendly.\u201d However, that isn\u2019t the same as mobile responsive. A Mobile Responsive Design is defined as a website design that can be displayed on a mobile device and will automatically adjust its size, layout, and proportions in a legible way to fit the specific device you\u2019re on. Basically, if you have a website, the code in the sites <em>theme<\/em> when built will decide if it automatically resizes and functions well on certain mobile devices\u2026or not. A website\u2019s theme is the framework of the site. It includes the layout and style of your website design. It\u2019s the code used to create your website that provides the structure, style, and design of a website. All ProductCart designed sites are created to be mobile responsive, now.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_2,1_2&#8243; _builder_version=&#8221;4.16&#8243; custom_margin=&#8221;-25px||||false|false&#8221; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_image src=&#8221;https:\/\/blog.productcart.com\/wp-content\/uploads\/2021\/10\/Untitled-design-63.png&#8221; alt=&#8221;Mobile responsive websites are the current and the future&#8221; title_text=&#8221;Mobile responsive websites on tablet and smartphone&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][\/et_pb_image][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;]<\/p>\n<p>Over the years, the ProductCart team has followed best practices in web design to provide customers with an e-commerce store that has as much mobile functionality as possible. How a website displays in the mobile environment, on smart phones, tablets, and other small devices, is an also an important consideration for a site&#8217;s search engine ranking, or SEO ranking. Because mobile display is such an important factor for both customers usability and SEO value, it\u2019s important to ProductCart!<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.16&#8243; custom_margin=&#8221;-25px||||false|false&#8221; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;]<\/p>\n<p>Though ProductCart software works with mobile optimized websites, the software cannot make a site that is not currently mobile optimized, function responsively on mobile devices.<\/p>\n<h3><strong>ProductCart Customers and Their Sites<\/strong><\/h3>\n<p>So what does all of this mean for your ProductCart site or third party site with ProductCart software? Here are the details!<\/p>\n<h4>ProductCart Versions 5.0 and Beyond<\/h4>\n<p>In earlier versions of ProductCart &#8211; everything before the arrival of version 5.0 &#8211; mobile usability was provided through the use of a separate set of display files that were used when the site was accessed on a smart phone browser. The mobile display files were a limited approach, however, and required considerable additional work to correctly implement.\u00a0 All versions since ProductCart 5.0 &#8211; <a href=\"https:\/\/blog.productcart.com\/index.php\/2021\/08\/10\/productcart-update-released\/\" title=\"New Version 5.4 of ProductCart Released!\">including the new v5.4 release<\/a> &#8211; replace the mobile file set with a single display file set, or theme, that uses a mobile-responsive approach to the site design. Mobile-responsive design gives a single theme the ability to display accurately on a wide range of devices by using the popular Bootstrap framework as the basis for all user-facing pages.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_2,1_2&#8243; _builder_version=&#8221;4.16&#8243; custom_margin=&#8221;-25px||||false|false&#8221; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_text _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;]<\/p>\n<p>But\u2026and this is an important caveat, ProductCart&#8217;s use of a mobile-responsive design framework doesn&#8217;t mean that your website will magically become properly mobile-responsive just because you&#8217;re running version 5-whatever of the software. Think of ProductCart&#8217;s Bootstrap framework as &#8216;responsive design ready&#8217; and you won&#8217;t be far off the mark. If your website\u2019s theme <em>is<\/em> mobile responsive, an online store powered by ProductCart will render your website on mobile devices!<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_image src=&#8221;https:\/\/blog.productcart.com\/wp-content\/uploads\/2021\/10\/Untitled-design-62.png&#8221; alt=&#8221;Magical starburst on smart phone&#8221; title_text=&#8221;ProductCart doesn&#8217;t magically make your old website mobile responsive!&#8221; align=&#8221;center&#8221; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;][et_pb_text _builder_version=&#8221;4.27.4&#8243; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h4>Mobile Responsive Design for Custom Websites with ProductCart<\/h4>\n<p><span>If you use one of ProductCart&#8217;s four standard Bootstrap themes, in a mobile environment the website will work properly without any more adjustments.<\/span> For custom site designs, we recommend starting with the framework of the stock Bootstrap Clean theme and building out the customizations from that design core. You&#8217;ll want to make sure your site&#8217;s designer or developer has good working knowledge of both the general principles of mobile-responsive design and of the Bootstrap framework. Otherwise, even with the mobile-responsive capabilities built-in to the framework, you&#8217;ll end up with a site that doesn&#8217;t always display correctly across the full range of mobile devices and screen sizes.<\/p>\n<p>[\/et_pb_text][et_pb_cta title=&#8221;Is your ProductCart website mobile optimized?&#8221; button_url=&#8221;http:\/\/www.productcart.com\/contact.asp&#8221; button_text=&#8221;Contact Us Today!&#8221; _builder_version=&#8221;4.16&#8243; header_font_size=&#8221;30px&#8221; background_color=&#8221;#3367ce&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#000000&#8243; button_bg_color=&#8221;#ffffff&#8221; button_border_width=&#8221;5px&#8221; global_colors_info=&#8221;{}&#8221; theme_builder_area=&#8221;post_content&#8221;]<\/p>\n<p>Was your website built recently? Is it mobile responsive? If you\u2019re not sure, contact us! The ProductCart team can review your current ProductCart website or create a new one for the latest mobile optimized experience!<\/p>\n<p>[\/et_pb_cta][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Your e-commerce website usability is vital for your website\u2019s success! Shoppers need to be able to visit your website whenever the need arises, from whatever device they have available. Often times, the most readily available device is a cell phone. Due to this, a major topic during the website build conversation is mobile optimization and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2819,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[6,13],"tags":[165,163,162,164,23,167,166],"class_list":["post-2801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-about-productcart","category-mobile","tag-ecommerce-websites","tag-mobile-freidnly","tag-mobile-responsive-design","tag-mobile-responsive-websites","tag-productcart","tag-productcart-ecommerce","tag-productcart-websites"],"_links":{"self":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/posts\/2801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/comments?post=2801"}],"version-history":[{"count":15,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/posts\/2801\/revisions"}],"predecessor-version":[{"id":2899,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/posts\/2801\/revisions\/2899"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/media\/2819"}],"wp:attachment":[{"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/media?parent=2801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/categories?post=2801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.productcart.com\/index.php\/wp-json\/wp\/v2\/tags?post=2801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}