{"id":5151,"date":"2019-01-24T09:53:30","date_gmt":"2019-01-24T09:53:30","guid":{"rendered":"https:\/\/www.register365.com\/blog\/?p=5151"},"modified":"2019-11-14T15:38:03","modified_gmt":"2019-11-14T15:38:03","slug":"design-your-website-to-be-responsive-by-learning-to-think-like-a-developer","status":"publish","type":"post","link":"https:\/\/www.register365.com\/blog\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/","title":{"rendered":"Design your website to be responsive – by learning to think like a developer"},"content":{"rendered":"

Are you a creative thinker with a flair for eye-catching layout? That\u2019s a great start for a website designer, but there\u2019s a lot more to it than that.<\/p>\n

The best websites work really well on any screen size. They work correctly on a smartphone without a lot of scrolling or resizing, and on a desktop they bring a product to life with high quality images and branding.<\/p>\n

There are also plenty of gotchas; design ideas that seem perfect, but which are not build-able in practice. To design a responsive website, you need to work closely with the developer; in fact, it will help if you can think like a developer.<\/p>\n

Planning for responsive websites<\/strong><\/h2>\n

Begin the design process by chatting with the development team lead. The team will have to turn your design into a working website so it\u2019s essential to agree how you will collaborate. Plan how and when you will walk through your design with them; this is a key stage that will tease out build-ability issues<\/p>\n

Understand what level of design is going to work best. Some teams need a full set of detailed breakpoint templates and a detailed style guide. Others may be used to a more agile workflow with close collaboration.<\/p>\n

Cross-site working makes collaboration especially difficult, so try to build on what has worked in the past – perhaps a daily VC with screen sharing.<\/p>\n

Agree how you will feed back comments. This is critical; you can burn a lot of time sending emails or raising tickets. Equally, some developers will hate having a designer looking over their shoulder or taking over the keyboard.<\/p>\n

Prototyping for responsive websites<\/strong><\/h2>\n

Long before you start to lay down designs, think how you will prototype. You will get significant benefits from observing end-users interacting with a functional prototype. If this is not possible, you will need to work harder (than usual) at understanding how they will use the website, their level of skill and their typical devices.<\/p>\n

Designing responsive websites<\/strong><\/h2>\n

You will know the range of devices you are targeting. Your job is to design a viewing experience that works well at each size. Being responsive means the end user shouldn\u2019t have to do a lot of scrolling or resizing the page. With this in mind, choose a set of breakpoint templates representing the range.<\/p>\n

Breakpoint templates will allow you make the best use of screen space on a desktop browser, but with an immersive viewing experience on a smartphone. It\u2019s useful here to think in terms of percentages of the display size, rather than in absolute numbers of pixels.<\/p>\n

Design for all scenarios, end users will interact with the website in ways that feel right to them, not necessarily following your optimum workflow.<\/p>\n

Some of the content will be outside your control. The site may need to present an image or product branding provided later by the client. Ensure that this content is presented well by testing with both best and worst case.<\/p>\n

Thinking like a developer<\/strong><\/h2>\n

Working closely with developers will tease out issues early in the design process and help you to understand what\u2019s possible. The more you collaborate, the better the website, and over time you really will begin to think like a developer.<\/p>\n","protected":false},"excerpt":{"rendered":"

Are you a creative thinker with a flair for eye-catching layout? That\u2019s a great start for a website designer, but there\u2019s a lot more to it than that. The best… Read more →<\/a><\/p>\n","protected":false},"author":89,"featured_media":5153,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[589],"tags":[],"class_list":["post-5151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"yoast_head":"\nDesign your website to be responsive - by learning to think like a developer<\/title>\n<meta name=\"description\" content=\"You will know the range of devices you are targeting. Your job is to design a viewing experience that works well at each size.\" \/>\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.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design your website to be responsive - by learning to think like a developer\" \/>\n<meta property=\"og:description\" content=\"You will know the range of devices you are targeting. Your job is to design a viewing experience that works well at each size.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/\" \/>\n<meta property=\"og:site_name\" content=\"Register365 Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/register365\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-24T09:53:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-14T15:38:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.register365.com\/blog\/wp-content\/uploads\/2019\/01\/Web-design-trends.png\" \/>\n\t<meta property=\"og:image:width\" content=\"945\" \/>\n\t<meta property=\"og:image:height\" content=\"425\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Leszek Chylarecki\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Leszek Chylarecki\" \/>\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.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/\",\"url\":\"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/\",\"name\":\"Design your website to be responsive - by learning to think like a developer\",\"isPartOf\":{\"@id\":\"https:\/\/www.register365.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.register365.com\/blog\/wp-content\/uploads\/2019\/01\/Web-design-trends.png\",\"datePublished\":\"2019-01-24T09:53:30+00:00\",\"dateModified\":\"2019-11-14T15:38:03+00:00\",\"author\":{\"@id\":\"https:\/\/www.register365.com\/blog\/#\/schema\/person\/73f7bdff12521c0493d97b7411af3fd5\"},\"description\":\"You will know the range of devices you are targeting. Your job is to design a viewing experience that works well at each size.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#primaryimage\",\"url\":\"https:\/\/www.register365.com\/blog\/wp-content\/uploads\/2019\/01\/Web-design-trends.png\",\"contentUrl\":\"https:\/\/www.register365.com\/blog\/wp-content\/uploads\/2019\/01\/Web-design-trends.png\",\"width\":945,\"height\":425,\"caption\":\"Website Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Register365\",\"item\":\"\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/www.register365.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Design\",\"item\":\"https:\/\/www.register365.com\/blog\/category\/web-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Design your website to be responsive – by learning to think like a developer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.register365.com\/blog\/#website\",\"url\":\"https:\/\/www.register365.com\/blog\/\",\"name\":\"Register365 Blog\",\"description\":\"Welcome to the Register365 blog! Keep up to date with our latest news and product updates, find out more about our Free Online Business Training, and share your comments with us!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.register365.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.register365.com\/blog\/#\/schema\/person\/73f7bdff12521c0493d97b7411af3fd5\",\"name\":\"Leszek Chylarecki\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.register365.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/935653a57ef5785e17e0b4a86ef760ac55ea3261a6dcd318d8a3fa80fb99116a?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/935653a57ef5785e17e0b4a86ef760ac55ea3261a6dcd318d8a3fa80fb99116a?s=96&d=identicon&r=g\",\"caption\":\"Leszek Chylarecki\"},\"url\":\"https:\/\/www.register365.com\/blog\/author\/leszek-chylarecki\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design your website to be responsive - by learning to think like a developer","description":"You will know the range of devices you are targeting. Your job is to design a viewing experience that works well at each size.","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.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/","og_locale":"en_GB","og_type":"article","og_title":"Design your website to be responsive - by learning to think like a developer","og_description":"You will know the range of devices you are targeting. Your job is to design a viewing experience that works well at each size.","og_url":"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/","og_site_name":"Register365 Blog","article_publisher":"https:\/\/www.facebook.com\/register365","article_published_time":"2019-01-24T09:53:30+00:00","article_modified_time":"2019-11-14T15:38:03+00:00","og_image":[{"width":945,"height":425,"url":"https:\/\/www.register365.com\/blog\/wp-content\/uploads\/2019\/01\/Web-design-trends.png","type":"image\/png"}],"author":"Leszek Chylarecki","twitter_misc":{"Written by":"Leszek Chylarecki","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/","url":"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/","name":"Design your website to be responsive - by learning to think like a developer","isPartOf":{"@id":"https:\/\/www.register365.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#primaryimage"},"image":{"@id":"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.register365.com\/blog\/wp-content\/uploads\/2019\/01\/Web-design-trends.png","datePublished":"2019-01-24T09:53:30+00:00","dateModified":"2019-11-14T15:38:03+00:00","author":{"@id":"https:\/\/www.register365.com\/blog\/#\/schema\/person\/73f7bdff12521c0493d97b7411af3fd5"},"description":"You will know the range of devices you are targeting. Your job is to design a viewing experience that works well at each size.","breadcrumb":{"@id":"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#primaryimage","url":"https:\/\/www.register365.com\/blog\/wp-content\/uploads\/2019\/01\/Web-design-trends.png","contentUrl":"https:\/\/www.register365.com\/blog\/wp-content\/uploads\/2019\/01\/Web-design-trends.png","width":945,"height":425,"caption":"Website Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.register365.com\/blog\/2019\/01\/design-your-website-to-be-responsive-by-learning-to-think-like-a-developer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Register365","item":"\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.register365.com\/blog\/"},{"@type":"ListItem","position":3,"name":"Web Design","item":"https:\/\/www.register365.com\/blog\/category\/web-design\/"},{"@type":"ListItem","position":4,"name":"Design your website to be responsive – by learning to think like a developer"}]},{"@type":"WebSite","@id":"https:\/\/www.register365.com\/blog\/#website","url":"https:\/\/www.register365.com\/blog\/","name":"Register365 Blog","description":"Welcome to the Register365 blog! Keep up to date with our latest news and product updates, find out more about our Free Online Business Training, and share your comments with us!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.register365.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.register365.com\/blog\/#\/schema\/person\/73f7bdff12521c0493d97b7411af3fd5","name":"Leszek Chylarecki","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.register365.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/935653a57ef5785e17e0b4a86ef760ac55ea3261a6dcd318d8a3fa80fb99116a?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/935653a57ef5785e17e0b4a86ef760ac55ea3261a6dcd318d8a3fa80fb99116a?s=96&d=identicon&r=g","caption":"Leszek Chylarecki"},"url":"https:\/\/www.register365.com\/blog\/author\/leszek-chylarecki\/"}]}},"_links":{"self":[{"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/posts\/5151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/comments?post=5151"}],"version-history":[{"count":1,"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/posts\/5151\/revisions"}],"predecessor-version":[{"id":5155,"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/posts\/5151\/revisions\/5155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/media\/5153"}],"wp:attachment":[{"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/media?parent=5151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/categories?post=5151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.register365.com\/blog\/wp-json\/wp\/v2\/tags?post=5151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}