{"id":3585,"date":"2011-03-22T07:54:51","date_gmt":"2011-03-22T14:54:51","guid":{"rendered":"\/?p=3585"},"modified":"2017-01-22T19:45:24","modified_gmt":"2017-01-23T03:45:24","slug":"responsive-design-is-web-design","status":"publish","type":"post","link":"https:\/\/needmoredesigns.com\/responsive-design-is-web-design\/","title":{"rendered":"Responsive Design IS Web Design"},"content":{"rendered":"<p>I just stumbled across Jeremy Keith&#8217;s <a href=\"http:\/\/adactio.com\/journal\/4367\/\">Sea change<\/a> post about the inevitability of <a href=\"http:\/\/alistapart.com\/articles\/responsive-web-design\/\">Responsive Web Design<\/a> from last month. I couldn&#8217;t agree more.<\/p>\n<p>Responsive Design <a href=\"http:\/\/sixrevisions.com\/web_design\/understanding-the-elements-of-responsive-web-design\/\">has been described<\/a> as having three key features.<\/p>\n<ul>\n<li>The site must be built with a <strong>flexible grid<\/strong> foundation.<\/li>\n<li><strong>Images<\/strong> that are incorporated into the design must be flexible themselves.<\/li>\n<li><strong>Different views<\/strong> must be enabled in different contexts via\u00a0<a title=\"Media Queries - w3.org\" href=\"http:\/\/w3.org\/TR\/css3-mediaqueries\/\">media queries<\/a>.<\/li>\n<\/ul>\n<p>Some of our more <a href=\"http:\/\/onarestaurant.com\/\">recent<\/a> <a href=\"http:\/\/masusushi.com\/\">designs<\/a> have embraced the growing diversity of devices quite well, although I wouldn&#8217;t yet call them &#8220;responsive design.&#8221; It&#8217;s a gradual process, but it&#8217;s an inevitable one, and it&#8217;s nice to be able to show someone their website on a mobile device and have it perform smoothly and gracefully, looking much like they would expect. We&#8217;ve talked about this a lot in the past, so I won&#8217;t dwell on it here. But designing for more than just the desktop is, in a word, inevitable.<\/p>\n<p>In some cases, though, it&#8217;s sometimes a hard sell to clients. When one looks around at other web sites for inspiration, there&#8217;s not a whole lot that are built using responsive design principles, and these folks don&#8217;t necessarily own half a dozen different devices and look at everything on each of them.<\/p>\n<p>But there <em>is<\/em> a business case here. By many estimates, mobile browsing is expected to exceed desktop browsing in three to five years. That&#8217;s not really a lot of time, considering that we&#8217;re not starting from zero\u2014I probably spend an hour a day in Safari on my iPhone. And for certain types of businesses, certain devices may well already be approaching the majority, already passing desktop web browsers. This quote explains it well.<\/p>\n<blockquote><p>There\u2019s still a lot of resistance, though. That\u2019s why the idea of creating separate silos for \u201cmobile\u201d devices is initially so appealing. But that approach won\u2019t scale: it\u2019s just not practical to spend equal time and effort crafting different endpoints for iPhone, Android, Palm, Kindle, iPad, etc. The solution is to either reject part of your potential audience and concentrate only on a subset of users like, say, just iPhone users \u2026or you can\u00a0<a href=\"http:\/\/adactio.com\/journal\/1700\">embrace responsive design<\/a>. The first option is the cure that kills the patient. The second option might seem intimidating at first, but it\u2019s going to become increasingly accepted. <strong>Inevitable, even.<\/strong><\/p><\/blockquote>\n<p>Inevitable. That&#8217;s how we feel about this change, and we embrace it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3589 lazyload\" title=\"Framework\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"\/wp-content\/uploads\/2011\/03\/2b493eee26d64dd584d182f7e6b09b86_7.jpg\" alt=\"\" width=\"612\" height=\"612\" data-sizes=\"auto\" data-srcset=\"https:\/\/needmoredesigns.com\/wp-content\/uploads\/2011\/03\/2b493eee26d64dd584d182f7e6b09b86_7.jpg 612w, https:\/\/needmoredesigns.com\/wp-content\/uploads\/2011\/03\/2b493eee26d64dd584d182f7e6b09b86_7-410x410.jpg 410w, https:\/\/needmoredesigns.com\/wp-content\/uploads\/2011\/03\/2b493eee26d64dd584d182f7e6b09b86_7-50x50.jpg 50w\" sizes=\"(max-width: 612px) 100vw, 612px\" \/><\/p>\n<p>By the way, if you want to see some examples of responsive web design in action, here&#8217;s a few.<\/p>\n<ul>\n<li>Simon Collison redesigned <a href=\"http:\/\/colly.com\/\">his personal site<\/a> last year. Try resizing your browser window, or check it out on your phone. The look is different, but it works at many different sizes.<\/li>\n<li><a href=\"http:\/\/hicksdesign.co.uk\/journal\">The Hicksdesign journal<\/a> pulls off several very clever tricks, changing the location and visual arrangement of items at different sizes. Again, resize your browser, and see how it changes.<\/li>\n<li><a href=\"http:\/\/edenspiekermann.com\/\">Edenspiekermann<\/a> also does a great job at disparate display sizes, even with the navigation and nice slider.<\/li>\n<\/ul>\n<p>If this sounds interesting to you, talk to us. We&#8217;re very excited about the future of our industry.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I just stumbled across Jeremy Keith&#8217;s Sea change post about the inevitability of Responsive Web Design from last month.<\/p>\n","protected":false},"author":2,"featured_media":3589,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[18,51],"acf":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/needmoredesigns.com\/wp-content\/uploads\/2011\/03\/2b493eee26d64dd584d182f7e6b09b86_7.jpg","_links":{"self":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/3585"}],"collection":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/comments?post=3585"}],"version-history":[{"count":0,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/3585\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media\/3589"}],"wp:attachment":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media?parent=3585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/categories?post=3585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/tags?post=3585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}