{"id":10255,"date":"2015-12-01T22:24:59","date_gmt":"2015-12-02T06:24:59","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=10255"},"modified":"2021-08-08T01:04:46","modified_gmt":"2021-08-08T08:04:46","slug":"a-better-responsive-web-design-process-for-the-future","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/","title":{"rendered":"A Better Responsive Web Design Process for the Future"},"content":{"rendered":"<p>The fixed-width approach to website design may have served you well for years, but the process falters when applied to responsive websites.<\/p>\n<p>If you want to design websites responsively, here are the changes required to bring that workflow up to date as we enter the new year. The advice is based on my 15 years as a web designer, agency Creative Director, and design instructor at The University of Rhode Island.<\/p>\n<h2>Rethinking the Web Design Process<\/h2>\n<p>Updating your workflow for responsive web design starts with rethinking your design process.<\/p>\n<p>Creating static desktop-centric comps in Photoshop, dumping in some placeholder Lorem Ipsum text, and then presenting those comps to a client for their review does not work well in responsive environment because those static design do not show interactivity or the way the user experience will change for different screens.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-10257\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image012.png\" alt=\"image01\" width=\"660\" height=\"443\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image012.png 853w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image012-447x300.png 447w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><i>Photo credit: <\/i><a href=\"https:\/\/www.uxpin.com\/\"><i>UXPin<\/i><\/a><\/p>\n<p>As explained in the free guide <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/responsive-web-design-best-practices\/\">Responsive Design Best Practices<\/a>, a better responsive design requires modern\u00a0processes like:<\/p>\n<ul>\n<li>Thinking Content-First and Mobile-First<\/li>\n<li>Presenting lower-fidelity design options earlier in the process<\/li>\n<li>Showing responsive prototypes instead of static comps<\/li>\n<li>Working with the most extreme cases that your design must accommodate<\/li>\n<\/ul>\n<h2>Content-First Design<\/h2>\n<p>When a designer creates packaging for a tangible product, they often have a fully-developed prototype (or even the actual product) to create context for their design.<\/p>\n<p>The shape of a product, the weight, and all the use cases are just a few of the factors that the designer will consider during their design process. Without a definitive idea of what a product is, a designer is hard-pressed to create appropriate packaging, yet web designers have had to do just this for years.<\/p>\n<p>Starting a website design without content is like creating packaging design without the product. You can do your best, but who knows if the end content or product will truly fit into what you create?<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10261\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/2602771507_f6e1d90f58_o.jpg\" alt=\"2602771507_f6e1d90f58_o\" width=\"720\" height=\"494\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/2602771507_f6e1d90f58_o.jpg 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/2602771507_f6e1d90f58_o-437x300.jpg 437w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><em>Photo credit: <a href=\"https:\/\/www.flickr.com\/photos\/27620885@N02\/2602771507\/in\/photolist-4XZThP-4XZSVK-7pRKX2-GkUew-zkuB7-8AWYjK-46MmdN-Biyw4-aUdHZc-21u5LT-BVXqv-7GCv8P-aDgAgv-8vGnwi-4Y59dC-4r2uVB-5K9GAX-9kJcHw-5K9GgM-aDgAqK-aDgAf2-rj83Cc-j6X45u-v9rYRY-9p3Eqt-bjfhvK-7pVFWw-aDgAhH-aF5gpL-8N7GH9-5dyUXJ-5LHaT5-4u1QzU-57GhqK-qQCY8T-wLKEpU-a5oFHk-7GCvaB-7GGr6Y-yugogH-7Ytzx7-7GCv7r-4Y597y-4Y58Rb-9dT2Ub-9dT2QN-9dPYiR-rRjess-9dTbKu-9dQ8bt\">SOCIALisbetter<\/a>. <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">Creative Commons<\/a>.\u00a0<\/em><\/p>\n<p>A website\u2019s design is more than a template into which clients will dump content. Starting with content allows you to decide how to best present it to users. In a responsive environment, starting with content also allows you to prioritize what is most important. This content hierarchy will become critical to the layout decisions you make for the various breakpoints in your responsive website.<\/p>\n<p>Requiring content at the start of a website design process sounds great, but the reality is that clients rarely have their final content at the start of a project. This is fine. You do not need the final, production-ready copy. You simply need an idea of <b>what the content will be<\/b> and <b>some actual samples<\/b> of a first draft. This is similar to the packaging designer working with a prototype.<\/p>\n<p>Talk to your clients about content at the very start of a project and bring in whoever is helping them with content strategy. Whether your agency is providing that service or if it is being handled by another team, make them a part of your process immediately. In lieu of a first draft, you can even use copy from competitor sites to start estimating your space constraints.<\/p>\n<h2>Mobile-First Design<\/h2>\n<p>With actual, thought-out content in hand (as opposed to some placeholder Lorem Ipsum text), you are now set up to think about how that content should be presented and prioritized. This is best done by using <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\">a Mobile-First approach<\/a>.<\/p>\n<p>Mobile-First is a departure from the traditional web design process where you would begin with a desktop-centric design layout. Because there is only so much screen real estate to work with, starting small forces you to determine what elements and content are most important. It can also show you what content may not be necessary at all and therefore be eliminated from all versions of the design.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10256\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image002.png\" alt=\"image00\" width=\"720\" height=\"230\" \/><\/p>\n<p>As a result, you scale up an experience that feels 100% rather than degrade an experience down to smaller screen sizes.<\/p>\n<p>During your Mobile-First process, start with wireframes of the site\u2019s content. You can then assign a priority to each section\/content in the wireframes. A section\u2019s priority will help you determine how and where to present it for different breakpoints.<\/p>\n<\/section><section class=\"related-books-section\"><h3>Grab design ebooks created by best designers<\/h3><p class=\"section-desc\">All for free<\/p><ul class=\"related-books-list\"><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/responsive-web-design-best-practices\/\" class=\"action-get-ebook\" data-name=\"Responsive Web Design Best Practices\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/the-book1.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book1\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/the-book1.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/11\/the-book1-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/responsive-web-design-best-practices\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Responsive Web Design Best Practices\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\" class=\"action-get-ebook\" data-name=\"Web UI Design Best Practices\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Web UI Design Best Practices\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices-210x300.jpg 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Web UI Design Best Practices\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-ux-design-process-and-documentation\/\" class=\"action-get-ebook\" data-name=\"The Guide to UX Design Process &#038; Documentation\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"372\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-UX-Design-Process-Documentation-262x372.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"The Guide to UX Design Process Documentation\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-UX-Design-Process-Documentation.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/The-Guide-to-UX-Design-Process-Documentation-211x300.jpg 211w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-ux-design-process-and-documentation\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"The Guide to UX Design Process &#038; Documentation\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-consistency-web-ui-design-elements\/\" class=\"action-get-ebook\" data-name=\"Web UI Design for the Human Eye\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-for-the-Human-Eye.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Web UI Design for the Human Eye\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-for-the-Human-Eye.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-for-the-Human-Eye-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-consistency-web-ui-design-elements\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Web UI Design for the Human Eye\">Download<\/a><\/li><\/ul><\/section><section class=\"related-books-section-single\"><section class=\"post-content-wrapper\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-for-the-Human-Eye.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Web UI Design for the Human Eye\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-for-the-Human-Eye.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-for-the-Human-Eye-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><article><h3>Do you want to know more about UI Design?<\/h3><p>Download 'Web UI Design for the Human Eye' <span>FOR FREE!<\/span><\/p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/visual-consistency-web-ui-design-elements\/\" class=\"btn btn-flat btn-darker action-get-ebook\">Download e-book for free<\/a><\/article><\/section><a href=\"#closeEbookPanel\" class=\"icon-close action-close-ebook-panel\">Close<\/a><\/section><section class=\"post-content-wrapper\">\n<h2>Using Style Tiles<\/h2>\n<p>Designers have traditionally used image editors like Photoshop to establish the look and feel of web elements. The problem with this approach is that Photoshop creates very high-fidelity examples of a design when, at the start of a process, you should be focused on bigger-picture decision like typefaces, colors, and interface elements like buttons, menus, and input controls.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-10260\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image041-1024x757.png\" alt=\"image04\" width=\"660\" height=\"488\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image041-1024x757.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image041-406x300.png 406w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image041.png 1369w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><em>Photo: <a href=\"http:\/\/styletil.es\/\">http:\/\/styletil.es\/<\/a> <\/em><\/p>\n<p><a href=\"http:\/\/styletil.es\/\" target=\"_blank\" rel=\"noopener noreferrer\">Using Style Tiles is a better way to present and decide on these design elements<\/a>. Created by Samantha Warren, \u201cStyle Tiles establish a direct connection with actual interface elements without defining layout.\u201d<\/p>\n<p>The process of using these tiles is simple:<\/p>\n<ol>\n<li><b>Listen<\/b> to what the client\u2019s needs and what their brand identity requirements are<\/li>\n<li><b>Interpret<\/b> those needs into decisions you can use in your project<\/li>\n<li><b>Define <\/b>a visual language for the website<\/li>\n<li><b>Iterate<\/b> on those decisions, which you can do far quicker using Style Tiles than if you worked with a series of high-fidelity Photoshop files.<\/li>\n<\/ol>\n<p>These high-level design elements help you make more informed art direction and design decisions. You can create style tiles in parallel to wireframing since both processes will feed into your prototype and later hi-fi designs.<\/p>\n<h2>Responsive Prototypes<\/h2>\n<p>Presenting static design comps does not work for responsive websites. Static comps fail to show a design\u2019s true user experience because they cannot change their layout based on screen size the way an actual website will.<\/p>\n<p>To combat this challenge, many designers create a series of comps showing different possible breakpoints. But this can significantly increase the time they spend in the design process, and it does not show a site\u2019s full responsiveness or interactivity.<\/p>\n<p>For responsive websites, you should present actual, responsive examples for a client\u2019s review. This is where responsive prototypes can be valuable to your process.<\/p>\n<p>Using responsive prototypes is not the same thing as designing in the browser, a practice which many web designers feel <a href=\"http:\/\/www.sazzy.co.uk\/why-i-cant-design-in-the-browser\/\">stifles their creativity<\/a>. You can still use your graphics program of choice to establish some visual direction and layout choices, but you should then translate those choices into an interactive presentation.<\/p>\n<p>Let\u2019s examine a workflow that incorporates mobile-first responsive prototyping:<\/p>\n<p>1. Based off whatever rough content exists (as long as it\u2019s not placeholder text), map out your content across the whole site. You can list it out by page, or use this spreadsheet <a href=\"http:\/\/maadmob.com.au\/resources\/content_inventory\">offered by Maadmob<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10259\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image03-1024x440.png\" alt=\"image03\" width=\"720\" height=\"309\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image03-1024x440.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image03-700x300.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image03.png 1190w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>2. Now that you have your \u201craw materials\u201d, start prioritizing the content on each page for a mobile viewport. What will your visual hierarchy look like? Consider the <a href=\"http:\/\/www.lukew.com\/ff\/entry.asp?1514\">5 common responsive layouts<\/a> as advocated by Luke Wroblewski.<\/p>\n<p>3. With a content hierarchy in mind, start laying out the design with a content wireframe. If you use <a href=\"https:\/\/www.uxpin.com\">UXPin<\/a>, you\u2019d simply start by selecting the 320 viewport. As shown below, the goal is to map out the blocks of content first. Next, add some more detail (the standard boxes and arrows) to carve it into a lo-fi wireframe.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10258\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image02-1024x686.jpg\" alt=\"image02\" width=\"720\" height=\"482\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image02-1024x686.jpg 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image02-448x300.jpg 448w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/image02.jpg 1418w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>4.\u00a0You can now add basic interactions so your responsive prototype reflects the core <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\">user flows<\/a>. Buttons and menus should link to their respective pages. By connecting your pages with basic interactions, you\u2019ve created a lo-fi prototype that you can immediately start testing with at least 5 users.<\/p>\n<p>5. To test the prototype, you can either use the built-in tool offered by UXPin or use an outside service like <a href=\"https:\/\/www.usertesting.com\/\">UserTesting<\/a>.<\/p>\n<p>6. Repeat steps 1-5 as you scale up to larger viewports. Iterate based on the user feedback.<\/p>\n<p>7. Basing the visual design off your style tiles, you can now refine the visual design with Sketch, Photoshop, or whatever tool of choice.<\/p>\n<h2>Working With Extreme Cases<\/h2>\n<p>When designing web pages, there is a temptation to work on the easiest pages first so that you have some deliverables to show your stakeholders. This quicker turnaround may be nice, but in your design process you should focus on the most challenging and extreme scenarios.<\/p>\n<p>Take the common example of designing a page that displays articles (blogs, press releases, case studies, etc). That page is sure to have a title near the top. What happens to the design when that title is two or three times longer than what you have designed for?<\/p>\n<p>A title that reads:<\/p>\n<p><i>\u201cResponsive Web Design Tips\u201d<\/i><\/p>\n<p>Is going to display in a layout template much differently than one that reads:<\/p>\n<p><i>\u201c10 Absolutely Essential Tips and Techniques for More Effective and Successful Responsive Website Designs\u201d<\/i><\/p>\n<p>Plan for extreme cases like this across all screen sizes. It is not enough to ensure that the extreme case works well on large-screen displays that have ample space. They must also work appropriately on small screen devices and everything in between.<\/p>\n<h2>Next Steps<\/h2>\n<p>People today expect websites to work on many devices. Responsive web design has gone from a question of \u201cif\u201d we should to \u201chow\u201d we should, and the process is what sets apart successful sites from the rest.<\/p>\n<p>An important part of this process is looking at the workflow that you have used to create static, fixed-width sites and updating your practices to present project deliverables that are in-line with the needs of a responsive, multi-device Web.<\/p>\n<p>If you found this guide useful, you can start refining your responsive prototyping in UXPin with a <a href=\"https:\/\/www.uxpin.com\">free trial<\/a>.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9141\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/Blog_Prototypingdark_720x316.png\" alt=\"Blog_Prototyping(dark)_720x316\" width=\"720\" height=\"316\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/Blog_Prototypingdark_720x316.png 720w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/10\/Blog_Prototypingdark_720x316-684x300.png 684w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive designer and instructor Jeremy Girard teaches techniques for futureproof responsive design. Based on 15 years experience.<\/p>\n","protected":false},"author":52,"featured_media":10274,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18,8,15,11,4,6,7],"tags":[],"class_list":["post-10255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-process","category-prototyping","category-responsive-web-design","category-tutorials","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"","yoast_metadesc":"Responsive designer and instructor Jeremy Girard teaches techniques for futureproof responsive design. Based on 15 years experience.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Better Responsive Web Design Process for the Future | UXPin<\/title>\n<meta name=\"description\" content=\"Responsive designer and instructor Jeremy Girard teaches techniques for futureproof responsive design. Based on 15 years experience.\" \/>\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.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Better Responsive Web Design Process for the Future\" \/>\n<meta property=\"og:description\" content=\"Responsive designer and instructor Jeremy Girard teaches techniques for futureproof responsive design. Based on 15 years experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-02T06:24:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-08T08:04:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/unnamed.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Girard\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Girard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/\"},\"author\":{\"name\":\"Jeremy Girard\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/652d08f74f03e9d71c243a3b9fdd24cd\"},\"headline\":\"A Better Responsive Web Design Process for the Future\",\"datePublished\":\"2015-12-02T06:24:59+00:00\",\"dateModified\":\"2021-08-08T08:04:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/\"},\"wordCount\":1565,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/unnamed.png\",\"articleSection\":[\"Blog\",\"Process\",\"Prototyping\",\"Responsive Web Design\",\"Tutorials\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/\",\"name\":\"A Better Responsive Web Design Process for the Future | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/unnamed.png\",\"datePublished\":\"2015-12-02T06:24:59+00:00\",\"dateModified\":\"2021-08-08T08:04:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/652d08f74f03e9d71c243a3b9fdd24cd\"},\"description\":\"Responsive designer and instructor Jeremy Girard teaches techniques for futureproof responsive design. Based on 15 years experience.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/unnamed.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/unnamed.png\",\"width\":720,\"height\":200,\"caption\":\"unnamed\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/a-better-responsive-web-design-process-for-the-future\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Better Responsive Web Design Process for the Future\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/652d08f74f03e9d71c243a3b9fdd24cd\",\"name\":\"Jeremy Girard\",\"description\":\"Jeremy Girard is the Head of Web Design &amp; Development for the Rhode Island based Envision Technology Advisors. He also teaches website design and front-end development at the University of Rhode Island.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jeremygirard\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Better Responsive Web Design Process for the Future | UXPin","description":"Responsive designer and instructor Jeremy Girard teaches techniques for futureproof responsive design. Based on 15 years experience.","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.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/","og_locale":"en_US","og_type":"article","og_title":"A Better Responsive Web Design Process for the Future","og_description":"Responsive designer and instructor Jeremy Girard teaches techniques for futureproof responsive design. Based on 15 years experience.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/","og_site_name":"Studio by UXPin","article_published_time":"2015-12-02T06:24:59+00:00","article_modified_time":"2021-08-08T08:04:46+00:00","og_image":[{"width":720,"height":200,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/unnamed.png","type":"image\/png"}],"author":"Jeremy Girard","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jeremy Girard","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/"},"author":{"name":"Jeremy Girard","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/652d08f74f03e9d71c243a3b9fdd24cd"},"headline":"A Better Responsive Web Design Process for the Future","datePublished":"2015-12-02T06:24:59+00:00","dateModified":"2021-08-08T08:04:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/"},"wordCount":1565,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/unnamed.png","articleSection":["Blog","Process","Prototyping","Responsive Web Design","Tutorials","UI Design","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/","name":"A Better Responsive Web Design Process for the Future | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/unnamed.png","datePublished":"2015-12-02T06:24:59+00:00","dateModified":"2021-08-08T08:04:46+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/652d08f74f03e9d71c243a3b9fdd24cd"},"description":"Responsive designer and instructor Jeremy Girard teaches techniques for futureproof responsive design. Based on 15 years experience.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/unnamed.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/12\/unnamed.png","width":720,"height":200,"caption":"unnamed"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/a-better-responsive-web-design-process-for-the-future\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"A Better Responsive Web Design Process for the Future"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/652d08f74f03e9d71c243a3b9fdd24cd","name":"Jeremy Girard","description":"Jeremy Girard is the Head of Web Design &amp; Development for the Rhode Island based Envision Technology Advisors. He also teaches website design and front-end development at the University of Rhode Island.","url":"https:\/\/www.uxpin.com\/studio\/author\/jeremygirard\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/10255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=10255"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/10255\/revisions"}],"predecessor-version":[{"id":31232,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/10255\/revisions\/31232"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/10274"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=10255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=10255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=10255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}