{"id":2311,"date":"2012-03-30T11:41:45","date_gmt":"2012-03-30T11:41:45","guid":{"rendered":"http:\/\/sunpig.com\/mt-entry-2311.html"},"modified":"2012-04-02T18:56:48","modified_gmt":"2012-04-02T18:56:48","slug":"a-responsive-experience-begins-on-the-server","status":"publish","type":"post","link":"https:\/\/sunpig.com\/martin\/2012\/03\/30\/a-responsive-experience-begins-on-the-server\/","title":{"rendered":"A responsive experience begins on the server&#8230;"},"content":{"rendered":"<p>&#8230;But it doesn&#8217;t <em>end<\/em> there.<\/p>\n<p>On <a href=\"http:\/\/mobiforge.com\/\">MobiForge<\/a> a few weeks ago, Ronan Cremin pointed out that <a href=\"http:\/\/mobiforge.com\/designing\/blog\/server-side-device-detection-used-82-alexa-top-100-sites\">most top sites use some form of server-side detection to send different HTML to different devices<\/a>. In a follow-up article, he takes Google as a specific example to show just <a href=\"http:\/\/mobiforge.com\/designing\/story\/anatomy-a-mobile-web-experience-google-com\">how widely its content varies between an iPhone, a BlackBerry Curve, and a Nokia 6300<\/a>.<\/p>\n<p>I&#8217;m not arguing against server-side detection, and sending different content to different devices. I think it&#8217;s an essential part of an adaptation strategy. But I just want to quickly point out a few reasons why it&#8217;s not <em>enough<\/em> in order to cover the whole spectrum of browsers. Here are a few things that <em>you won&#8217;t know<\/em> when a browser makes its first request to your web server:<\/p>\n<ul>\n<li><strong>The height and width of the viewport being used.<\/strong> (Including the device&#8217;s portrait\/landscape orientation.) If you detect a mobile device, you will be able to look up the device&#8217;s &#8220;standard&#8221; dimensions in a device database, but the user&#8217;s actual viewport may be different. If you place a web app on your iPhone&#8217;s home screen, and run it without browser chrome, it will send the same user-agent string as when it is running in a browser with chrome (thus reducing the available height). The user may be viewing your site in a browser panel embedded in a separate app, which may present a different viewport. As Stephanie Rieger explained in &#8220;<a href=\"http:\/\/stephanierieger.com\/viewports-all-the-way-down\/\">Viewports all the way down&#8230;<\/a>&#8220;, <em>anyone<\/em> can create embed a web view of arbitrary size in a home-made ebook.<\/li>\n<li><strong>The zoom level.<\/strong> Lyza Gardner wrote about how <a href=\"http:\/\/blog.cloudfour.com\/the-ems-have-it-proportional-media-queries-ftw\/\">zoom levels and different text sizes can mess up pixel-based responsive layouts.<\/a> A user-agent string contains no information about whether a user has changed the default font size in their browser. It does happen, and probably more often than you think.<\/p>\n<li><strong>Whether the user has cookies, and\/or JavaScript enabled<\/strong>. <a href=\"http:\/\/sunpig.com\/martin\/archives\/2011\/05\/10\/the-spectrum-of-commonly-disabled-browser-features.html\">I mentioned some of the reasons people <em>disable<\/em> JavaScript last year<\/a>. I think that on mobile devices, which are commonly bandwidth-capped and\/or rate-limited, people have a greater than normal incentive to disable JavaScript. (I don&#8217;t have any statistics to back this up, though; it&#8217;s just a feeling.) Lack of JavaScript can play havoc with some client-side detection techniques. (And lack of cookies will trip you up in many more ways; treat that as a general personalization problem.)<\/p>\n<\/ul>\n<p>Basically, just because the user-agent string says &#8220;iPhone&#8221; doesn&#8217;t automatically mean you&#8217;re dealing with 320 x 480. Server-side detection alone will not give you the full picture, and only doing adaptation client-side robs you of the opportunity to perform really useful server-side optimizations. The best approach is a blend of the two, as Luke Wroblewski describes in &#8220;<a href=\"http:\/\/www.lukew.com\/ff\/entry.asp?1392\">RESS: Responsive Design + Server Side Components<\/a>&#8220;.<\/p>\n<p>RESS is MORE.<\/p>\n<h3>Further reading:<\/h3>\n<ul>\n<li>Dave Olsen: <a href=\"http:\/\/www.dmolsen.com\/mobile-in-higher-ed\/2012\/02\/21\/ress-and-the-evolution-of-responsive-web-design\/\">RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design<\/a><\/li>\n<li>Ronan Cremin: <a href=\"http:\/\/mobiforge.com\/starting\/story\/mobile-web-content-adaptation-techniques\">Mobile web content adaptation techniques<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>&#8230;But it doesn&#8217;t end there. On MobiForge a few weeks ago, Ronan Cremin pointed out that most top sites use some form of server-side detection to send different HTML to different devices. In a follow-up article, he takes Google as a specific example to show just how widely its content varies between an iPhone, a &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sunpig.com\/martin\/2012\/03\/30\/a-responsive-experience-begins-on-the-server\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;A responsive experience begins on the server&#8230;&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-2311","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/posts\/2311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/comments?post=2311"}],"version-history":[{"count":0,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/posts\/2311\/revisions"}],"wp:attachment":[{"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/media?parent=2311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/categories?post=2311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sunpig.com\/martin\/wp-json\/wp\/v2\/tags?post=2311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}