{"id":1148,"date":"2018-10-22T12:24:22","date_gmt":"2018-10-22T11:24:22","guid":{"rendered":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/?p=1148"},"modified":"2023-08-03T15:03:02","modified_gmt":"2023-08-03T14:03:02","slug":"visual-imagery-and-responsive-web-design","status":"publish","type":"post","link":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/","title":{"rendered":"Visual imagery and responsive web design"},"content":{"rendered":"<p>Mot companies and businesses now know that their <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/the-importance-of-responsive-web-design\/\">websites need to be responsive<\/a>. Not only do their consumers expect it, but Google itself will use the quality of this responsive design to rank the website appropriately. Especially when a user is searching on a mobile device. So in order to rank highly, and get the majority of the traffic, a well designed, responsive website is a must. But what exactly is a responsive design? And how does this relate to visual imagery? Well, here at\u00a0 <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\/typography-for-user-friendly-web-design\/\">web design experts<\/a>. And we work with companies and businesses across the region to provide top quality, effective, <a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/advantages-and-disadvantages-of-sidebars-in-web-design\/\">web design solutions<\/a>. Including\u00a0<a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-blackburn\/\">Blackburn<\/a>\u00a0and\u00a0<a href=\"https:\/\/www.pumpkinwebdesign.com\/web-design-chorley\/\">Chorley<\/a>. As a result, we have produced this guide to visual imagery and responsive web design.<\/p>\n<h2>What is responsive web design?<\/h2>\n<p>A responsive website is designed to alter the contents on the screen, depending on the screen size and orientation of the device used to view it. This means that your website will automatically change and adapt to give the users the best possible experience for the device they are using. And all content will need to be adjusted to achieve this, including images, text, links and videos.<\/p>\n<p>Since the the introduction of the mobile first algorithm, Google is focused on ensuring the best possible results for users. And this means that the higher ranking websites, will be the ones that\u00a0are fully optimised and accessible on mobile devices.<\/p>\n<h3>Visual imagery and responsive web design<\/h3>\n<p>As the nature of responsive design means that the rotation, and size of the content displayed, will change and alter, this can have a negative impact on the visual imagery. In fact, the imagery is one of the key considerations you need to take into account when creating any responsive website. This includes:<\/p>\n<ul>\n<li>hero images<\/li>\n<li>video content<\/li>\n<li>image links<\/li>\n<li>icons<\/li>\n<li>typography<\/li>\n<\/ul>\n<h3>Hero images<\/h3>\n<p>While hero images are stunning attention grabbers for desktop users, they might not be necessary at all for mobile design. After all, people who pick up their mobile to search for information, generally want to find immediate answers. So for mobile design, instead of wasting the above the fold space with a large image, you could consider instead adding a persuasive feature or call to action to this part of the website instead. This should be something that can be altered using responsive design.<\/p>\n<h3>Video content<\/h3>\n<p>Mobile screens are a lot smaller than desktops or laptops, which goes without saying. But this size difference can have a knock on effect on the quality of the video playback. You will need to make sure that your video is suitable for all screen sizes, and triple check the outcome when using different devices to watch the playback.<\/p>\n<h3>Icons<\/h3>\n<p>Generally speaking, icons are small to begin with. So when transferring these to mobile design, it isn&#8217;t always practical. In some cases it can be better to remove the icons altogether, from a mobile website. This is because they are often too small to be clicked on effectively. And this can be frustrating for users.<\/p>\n<p>For more information or advice about visual imagery and responsive web design, or for professional web design support, get in touch with the experts today, here at <a href=\"https:\/\/www.pumpkinwebdesign.com\/website-designers-manchester\/\">Pumpkin Web Design Manchester.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mot companies and businesses now know that their websites need to be responsive. Not only do their consumers expect it, but Google itself will use the quality of this responsive design to rank the website appropriately. Especially when a user is searching on a mobile device. So in order to rank highly, and get the [&#8230;]\n","protected":false},"author":2,"featured_media":995,"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>Visual imagery and responsive web design - 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\/visual-imagery-and-responsive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual imagery and responsive web design - Pumpkin Web Design Manchester\" \/>\n<meta property=\"og:description\" content=\"Mot companies and businesses now know that their websites need to be responsive. Not only do their consumers expect it, but Google itself will use the quality of this responsive design to rank the website appropriately. Especially when a user is searching on a mobile device. So in order to rank highly, and get the [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Pumpkin Web Design Manchester\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-22T11:24:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-03T14:03:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/09\/laptop-2443749_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1279\" \/>\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\/visual-imagery-and-responsive-web-design\/\",\"url\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/\",\"name\":\"Visual imagery and responsive web design - Pumpkin Web Design Manchester\",\"isPartOf\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website\"},\"datePublished\":\"2018-10-22T11:24:22+00:00\",\"dateModified\":\"2023-08-03T14:03:02+00:00\",\"author\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual imagery and responsive web design\"}]},{\"@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":"Visual imagery and responsive web design - 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\/visual-imagery-and-responsive-web-design\/","og_locale":"en_GB","og_type":"article","og_title":"Visual imagery and responsive web design - Pumpkin Web Design Manchester","og_description":"Mot companies and businesses now know that their websites need to be responsive. Not only do their consumers expect it, but Google itself will use the quality of this responsive design to rank the website appropriately. Especially when a user is searching on a mobile device. So in order to rank highly, and get the [...]","og_url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/","og_site_name":"Pumpkin Web Design Manchester","article_published_time":"2018-10-22T11:24:22+00:00","article_modified_time":"2023-08-03T14:03:02+00:00","og_image":[{"width":1920,"height":1279,"url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-content\/uploads\/2018\/09\/laptop-2443749_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\/visual-imagery-and-responsive-web-design\/","url":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/","name":"Visual imagery and responsive web design - Pumpkin Web Design Manchester","isPartOf":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#website"},"datePublished":"2018-10-22T11:24:22+00:00","dateModified":"2023-08-03T14:03:02+00:00","author":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/#\/schema\/person\/b2a999c4885984c18f9525b21a017d28"},"breadcrumb":{"@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/visual-imagery-and-responsive-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/"},{"@type":"ListItem","position":2,"name":"Visual imagery and responsive web design"}]},{"@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\/1148"}],"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=1148"}],"version-history":[{"count":2,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/1148\/revisions"}],"predecessor-version":[{"id":12790,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/posts\/1148\/revisions\/12790"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media\/995"}],"wp:attachment":[{"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/media?parent=1148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/categories?post=1148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pumpkinwebdesign.com\/web-design-manchester\/wp-json\/wp\/v2\/tags?post=1148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}