{"id":3771,"date":"2014-01-07T10:24:26","date_gmt":"2014-01-07T10:24:26","guid":{"rendered":"http:\/\/blog.cloudfour.com\/?p=3771"},"modified":"2016-07-06T22:16:33","modified_gmt":"2016-07-06T22:16:33","slug":"defining-responsiveness","status":"publish","type":"post","link":"https:\/\/cloudfour.com\/thinks\/defining-responsiveness\/","title":{"rendered":"Defining Responsiveness"},"content":{"rendered":"<p>When people say that something is responsive, what do they mean?<\/p>\n<p>I\u2019m not being facetious. I think many of us think we know what is meant, but when you dig deeper, there is disagreement about what it means for something to be responsive.<sup><a href=\"#defineresponsivefn1\" class=\"FootnoteLink\">1<\/a><\/sup><\/p>\n<h3 id=\"clear-definition\"> Responsive web design has a clear definition<\/h3>\n<p>To his credit, <a href=\"http:\/\/unstoppablerobotninja.com\/\">Ethan<\/a> <a href=\"http:\/\/alistapart.com\/article\/responsive-web-design\/\">defined responsive web design<\/a> clearly with three technical pieces:<\/p>\n<ul>\n<li>Fluid grids<\/li>\n<li>Flexible images<\/li>\n<li>Media queries<\/li>\n<\/ul>\n<p>That seems simple enough. But when it comes to defining what is responsive, things get a bit fuzzier.<\/p>\n<h3 id=\"googleplus\">Is Google Plus responsive?<\/h3>\n<p>The best way to understand where the differences of opinion exist is by looking at an real life example: is <a href=\"http:\/\/plus.google.com\">Google Plus<\/a> responsive?<\/p>\n<div class=\"FlexEmbed\">\n<div class=\"FlexEmbed-ratio FlexEmbed-ratio--16by9\"><\/div>\n<p>  <iframe loading=\"lazy\" class=\"FlexEmbed-content\" width=\"420\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/eEqEj0lWumo?rel=0\"\n   frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>It looks like it might be responsive. The layout varies from one, two or three columns depending on the width of the page. The size of elements on the page change as well.<\/p>\n<p>Let\u2019s look at some reasons why Google Plus might not be responsive.<\/p>\n<h4 id=\"separatesite\">Reason #1: Google Plus is not responsive because it has a separate mobile site<\/h4>\n<p>The first time I cited Google Plus as responsive example, I was told that it didn\u2019t qualify as responsive because it doesn\u2019t go all the way down to support small screens.<\/p>\n<p>This is silly to me. Nothing in Ethan\u2019s article says that responsive web design has to support any possible screen resolution.<\/p>\n<p>We\u2019re perfectly happy calling things responsive designs that have a fixed width past a certain point on wide screens. And we praise the efforts by the BBC, Guardian, People and others that build a responsive mdot site that will eventually replace their main site.<\/p>\n<p>So why would the fact that Google Plus doesn\u2019t support small screens preclude it from being considered responsive?<\/p>\n<h4 id=\"nomediaqueries\">Reason #2: Google Plus doesn\u2019t use media queries<\/h4>\n<p>Google Plus isn\u2019t using media queries the way you might expect.<\/p>\n<p>As far as I can tell<sup><a href=\"#defineresponsivefn2\" class=\"FootnoteLink\">2<\/a><\/sup>, none of the major layout changes you see in Google Plus are handled by media queries. They are controlled in JavaScript.<\/p>\n<p>This is similar to <a href=\"http:\/\/sonspring.com\/\">Nathan Smith\u2019s<\/a> <a href=\"http:\/\/adapt.960.gs\/\">Adaptive.js<\/a> library which puts breakpoints in JavaScript instead of CSS.<\/p>\n<p>So by definition, Google Plus is not a responsive web design. It may look like one, but it doesn\u2019t contain the three technical pieces necessary to be a responsive web design.<\/p>\n<h4 id=\"technicality\">Getting off on a technicality?<\/h4>\n<p>So I exaggerated a bit. Google Plus is using media queries. But as I said, they aren\u2019t being used the way we normally think of them.<\/p>\n<p>All but one of the media queries is looking at viewport height instead of viewport width. The one that looks at viewport width only applies at less than 340px; only adjusts a single icon; and I can\u2019t get the rest of the page to adapt to less than 340px so the entire media query seems moot.<\/p>\n<p><em>But perhaps<\/em> we can give Google Plus a pass as a responsive web design because it technically has media queries even if they aren\u2019t being used to make the design responsive?<\/p>\n<p>Nah, that\u2019s cheating. And even if we did let Google Plus off on this technicality, it would still leave us with designs that use JavaScript like Adaptive.js and wondering what we call them.<\/p>\n<h3 id=\"whenstopbeingrwd\">When does something stop being a responsive web design?<\/h3>\n<p>What happens when you use responsive web design, but add to it things that seem to be at odds with the philosophy of responsive design?<\/p>\n<p>For example, do any of these change whether or not something is a responsive web design:<\/p>\n<ul>\n<li>Device detection used to select the best-sized source image?<\/li>\n<li>Redirects based on user agent string to a mobile site that is responsive?<\/li>\n<li>Less content on small screens with more content on larger screens? What if the developer uses AJAX to pull in the additional content? What if they use device detection to make decisions before the page loads and then AJAX after?<\/li>\n<li>A couch-mode design that only worries about resolutions from 720p to 1080i but uses responsive web design techniques for those resolutions?<\/li>\n<\/ul>\n<p>These questions may seem crazy, but I\u2019ve seen people use the presence of device detection as a reason to discount a responsive web design.<\/p>\n<p>When people are looking for reasons why a given implementation doesn\u2019t fit their perspective on what responsive web design is good for, it is pretty easy to find reasons why any given site isn\u2019t a \u201cpure\u201d responsive web design.<\/p>\n<h3 id=\"doingrwdwell\">Doing responsive web design well often requires more than responsive web design<\/h3>\n<p>When a client comes to us to help them make their existing site or app responsive, we know that we\u2019re going to be using fluid grids, flexible images and media queries.<\/p>\n<p>But we also know we\u2019re going to be using much more than just those three techniques. The best responsive web designs are doing much more. And when we teach workshops or train client teams, much of what we\u2019re discussing are the things that you do after you\u2019ve got the three techniques down.<\/p>\n<p>Which led me to the idea that there is a difference between \u201cbeing responsive\u201d and responsive web design. That responsiveness was something bigger.<\/p>\n<p>So I asked Ethan for his thoughts.<\/p>\n<h3 id=\"webappropriate\">A more web appropriate design<\/h3>\n<p>As you might expect, Ethan had great thoughts on this topic. I\u2019m republishing part of our email exchange here with his permission, but this is just a fraction of his insights. I hope he gets the time to share his thoughts in more detail.<\/p>\n<p>I suggested that \u201cbeing responsive\u201d or \u201cresponsiveness\u201d might be characterized by larger principles such as:<\/p>\n<ul>\n<li>Designs that utilize the size of the viewport to determine the layout.<\/li>\n<li>Designs that adjust the layout and the size of the elements in the layout as the size of the viewport changes.<\/li>\n<li>Designs that ensure content parity across devices.<\/li>\n<li>Designs that treat URLs as sacrosanct and ensure they work across devices.<\/li>\n<\/ul>\n<p>Now, Ethan disagreed there was a need to revise the original definition. But he replied:<\/p>\n<blockquote><p>\n  All of them\u2014but the last two especially\u2014seem to me to be pretty foundational tenets of good web design, full stop. If an interface doesn\u2019t adapt to the display\u2014be it responsive or device-specific\u2014its utility is pretty limited; if it doesn\u2019t honor and respect URLs\u2014be it responsive or device-specific\u2014its utility is pretty limited; and so on, and so on.<\/p>\n<p>  The web\u2019s still digging itself out of the constraints of the printed page, in many ways, and we\u2019re still\u2014some twenty years on\u2014trying to articulate the best way to design for this medium. What you\u2019re describing feels bigger and more foundational to me than responsive design. It really feels like you\u2019re describing the way the web wants to be: fluid, addressable, and accessible to all.<\/p>\n<p>  So Google Plus, to use your closing example, might not be responsive, but maybe it\u2019s adopting a more web-appropriate design model. And maybe that\u2019s enough.\n<\/p><\/blockquote>\n<p>I think Ethan is right. In the long run, \u201cbeing responsive\u201d is simply designing for the web the way it was intended.<\/p>\n<p>But in the short run, I find myself struggling to describe the new toolbox and mindset that is required to do responsive web design well. And I see people talk past each other because of their mistaken belief that they have a common understanding of what responsive means.<\/p>\n<p>I\u2019m left with Justice Potter Stewart\u2019s definition for whether or not something is responsive, \u201c<a href=\"http:\/\/en.wikipedia.org\/wiki\/I_know_it_when_I_see_it\">I know it when I see it<\/a>\u201d, which is wholly unsatisfying.<\/p>\n<p>I take comfort ignoring the definitions and instead asking these questions about a design and its implementation:<\/p>\n<ul>\n<li>Does it adapt to screen size? <\/li>\n<li>Does it take advantage of device capabilities? <\/li>\n<li>Is it accessible anywhere? <\/li>\n<li>Does it work well? <\/li>\n<\/ul>\n<p>For our users, those are the things that matter.<\/p>\n<hr>\n<ol>\n<li id=\"defineresponsivefn1\">\nNot addressed in here is the fact that responsive is also used in the web performance community to refer to something entirely different.\n<\/li>\n<li id=\"defineresponsivefn2\">\n<p>Google Plus CSS and JS is quite complex. I\u2019ve done my best to confirm they are using media queries only in the ways I\u2019ve described here, but I can\u2019t guarantee I\u2019ve got it right.<\/p>\n<\/li>\n<li id=\"defineresponsivefn3\">\n<p>Don\u2019t get me started on the definition of adaptive design. Unless I\u2019m talking to <a href=\"http:\/\/aaron-gustafson.com\/\">Aaron Gustafson<\/a>, I <i>know<\/i> I <i>don\u2019t know<\/i> what someone means when they say that.<\/p>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>When people say that something is responsive, what do they mean? I\u2019m not being facetious. I think many of us think we know what is meant, but when you dig deeper, there is disagreement about what it means for something to be responsive.1 Responsive web design has a clear definition To his credit, Ethan defined [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[236,3,241],"tags":[],"class_list":["post-3771","post","type-post","status-publish","format-standard","hentry","category-essentials","category-mobile-web","category-rwd"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts\/3771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/comments?post=3771"}],"version-history":[{"count":0,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts\/3771\/revisions"}],"wp:attachment":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/media?parent=3771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/categories?post=3771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/tags?post=3771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}