{"id":3098,"date":"2022-11-11T17:02:17","date_gmt":"2022-11-11T17:02:17","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=3098"},"modified":"2023-06-27T15:11:48","modified_gmt":"2023-06-27T14:11:48","slug":"creating-responsive-product-pages-for-websites","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/","title":{"rendered":"Creating responsive website product pages"},"content":{"rendered":"<p>With a large majority of website users now browsing from a mobile device or tablet, responsive web design is critical. But when designing a website to be responsive, many companies and businesses focus on the landing pages. And for eCommerce websites, this could be a big mistake. There are a number of things that can go wrong for users, if the product pages themselves are not effectively designed to be responsive. But what are these problems? And what should you consider when creating responsive product pages for websites?<\/p>\n<h2>What are the important steps for creating responsive website product pages?<\/h2>\n<p>Some of the most important tips for creating responsive website product pages are:<\/p>\n<ul>\n<li><em><strong>Removing any hover features-<\/strong><\/em> allowing users to zoom in on your product images is a great way to add interactive content that can enhance the user experience. However, many websites use a hover feature to zoom in on the image, and this is unfortunately impossible on a mobile device. As a result, you should consider having a &#8220;click&#8221; feature instead of a hover feature on both versions of your website for a fully cohesive approach.<\/li>\n<li><strong><em>Optimized images-<\/em><\/strong> although this should be the first thing you consider, many companies neglect to ensure that product images and video content is optimised for the screen size of various devices. And this means that while your product pages are fully functional, and aesthetically pleasing on desktop or laptop screens, mobile users may will not be able to access the page properly. This is usually because the images are too large for the screen, and make scrolling very difficult. Images that are too large and not optimsed also increase the loading time for any mobile website too, which can contribute to driving users away. As a result, you should ensure that all images are optimised, and scaled based on screen size.<\/li>\n<li><em><strong>Button design-<\/strong> <\/em>clicking through to the checkout process from the product page is essential for sales and sign ups. However, functionality of this button can be greatly reduced if this is not designed to be responsive, to adapt to different screen sizes and orientations. As a result, mobile users may not be able to buy your products, because of buttons that are too small or incorrectly placed. This means that ensuring buttons work on all screen sites, and testing appropriately, is vital.<\/li>\n<li><em><strong>Orientation design-<\/strong><\/em> finally, for any product page to be effective on a mobile screen, it needs to be able to change orientation while maintaining functionality and design. This should be something that you consider when planning layout and text caption placement, as well as button placement.<\/li>\n<\/ul>\n<p>Here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester<\/a>, we are Manchester&#8217;s leading <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/advantages-of-animation-in-web-design\/\">web design<\/a> experts. We work with companies and businesses across Manchester, and the surrounding area, including <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-wigan\/\">Wigan<\/a> and <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-southport\/\">Southport<\/a>, to provide web design solutions that can help businesses grow. For more information and advice, get in touch with Manchester&#8217;s leading web design professionals today.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>With a large majority of website users now browsing from a mobile device or tablet, responsive web design is critical. But when designing a website to be responsive, many companies and businesses focus on the landing pages. And for eCommerce websites, this could be a big mistake. There are a number of things that can [&#8230;]\n","protected":false},"author":2,"featured_media":2286,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Creating responsive website product pages - Pumpkin Web Design Manchester<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating responsive website product pages - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"With a large majority of website users now browsing from a mobile device or tablet, responsive web design is critical. But when designing a website to be responsive, many companies and businesses focus on the landing pages. And for eCommerce websites, this could be a big mistake. There are a number of things that can [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-11T17:02:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-27T14:11:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2019\/05\/ipad-820272_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pumpkin Web Design Manchester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/\",\"name\":\"Creating responsive website product pages - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2022-11-11T17:02:17+00:00\",\"dateModified\":\"2023-06-27T14:11:48+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating responsive website product pages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Full service digital agency\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\",\"name\":\"Pumpkin Web Design Manchester\",\"description\":\"Providing top notch web design, across Manchester, since 2009\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating responsive website product pages - Pumpkin Web Design Manchester","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/","og_locale":"en_GB","og_type":"article","og_title":"Creating responsive website product pages - Pumpkin Web Design Manchester","og_description":"With a large majority of website users now browsing from a mobile device or tablet, responsive web design is critical. But when designing a website to be responsive, many companies and businesses focus on the landing pages. And for eCommerce websites, this could be a big mistake. There are a number of things that can [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2022-11-11T17:02:17+00:00","article_modified_time":"2023-06-27T14:11:48+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2019\/05\/ipad-820272_1920.jpg","type":"image\/jpeg"}],"author":"Pumpkin Web Design Manchester","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pumpkin Web Design Manchester","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/","name":"Creating responsive website product pages - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2022-11-11T17:02:17+00:00","dateModified":"2023-06-27T14:11:48+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/creating-responsive-product-pages-for-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Creating responsive website product pages"}]},{"@type":"WebSite","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/","name":"Pumpkin Web Design Manchester","description":"Full service digital agency","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28","name":"Pumpkin Web Design Manchester","description":"Providing top notch web design, across Manchester, since 2009","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/author\/g4oyprjmpvh3epn\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3098"}],"collection":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/comments?post=3098"}],"version-history":[{"count":4,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3098\/revisions"}],"predecessor-version":[{"id":11645,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/3098\/revisions\/11645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/2286"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=3098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=3098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=3098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}