basic concepts en Responsive Web Design, RESS and Mobile-only <div data-history-node-id="3" class="node node--type-blog-post node--view-mode-rss ds-1col clearfix"> <div class="field field--name-dynamic-token-fieldnode-custom-submitted field--type-ds field--label-hidden field__item"><p>Submitted by <a href="">Andrej Galuf</a> on 31. October 2015.</p> </div> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>If you've been browsing web pages and blogs or read about modern web design lately, you've surely come across the term "Responsive Web Design" more than a few times. Wikipedia defines it like so:</p> <blockquote> <p><b>Responsive web design</b> (<b>RWD</b>) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).</p> </blockquote> <p>Well, that was a mouthful. But what is it really and how does it benefit you?</p> <h3>The age of 960-pixel grid</h3> <p>To answer this, let's go back a few short years, to 2007. The internet was already awesome, web pages were growing left and right and everyone who had access to a desktop computer could view them. It was the golden age of the 960-pixel grid - almost all serious websites had a fixed width of 960 pixels, no more, no less. Why? Three reasons:</p> <ol><li>Common desktop size was at or above 1024 pixels width, meaning this size could be fit into most of them</li> <li>960 is a curious number - it can be divided by 2, 3, 4, 5, 6, 8, 10, 12, 15 and 16, which made it a perfect candidate to calculate column widths. For instance, you could divide the main page content to 12 equal columns, of which 3 would be a sidebar and 9 the main content. At the same time, you could create a footer with three elements, each 5 columns wide.</li> <li>Much of the more elaborate website styling was done with images and a fixed 960-pixel grid gave web designers a fixed width to create pixel-perfect designs that looked great on most desktop monitors.</li> </ol><h3>Birth of the mobile age</h3> <p>But in 2007, something changed when Steve Jobs presented a small device to the world. It wasn't the first of its kind and many would argue it wasn't even the best. But this new device - the <a href="" target="_blank">iPhone</a> - opened a Pandora's box that would change the world forever and spell the end of the desktop internet. Sudenly, internet was facing a new dilema. There had been attempts at a mobile internet before, but they were crude and simple, little like the internet that one could access through desktop computers. However, the iPhone and other similar <em>smartphones</em> that emerged shortly thereafter had the ability to read standard websites and present them to users at a reasonable speed. But there was a catch - their screens were nowhere near 960 pixels wide. Even in landscape position, the original iPhone merely reached 480 pixels, forcing its users to magnify the viewed content, which was a cumbersome user experience at best.</p> <p>The first attempts to deal with this new emerging world were crude - attempting to build second websites with tailored content intended for smartphones. But as more and more mobile devices appeared, it was obvious that this wasn't going to work in the long run. The width spectrum soon spanned everything from 200 to 5000 pixels and the tailored content proved to be a dead end - unlike expected, users were actually using the smartphones to do most of the tasks previously performed by the desktop computers. The age of the mobile devices had begun.</p> <h3>Responsive Web Design emerges</h3> <p>A little less than three years after the launch of the original iPhone, in 2010, <a href="" target="_blank">Ethan Marcotte posted an article on A List Apart</a>, combining a set of emerging methods under the term "Responsive Web Design". Instead of fixed width grids, this new method embraced fluid layout that adapted itself to the width of the screen. Combined with a style tool called media queries, this allowed the websites to change their layout depending on a set of conditions, most importantly the device's width. Responsive Web Design did away with separate websites for separate devices in favour of one website adapting itself to the user's device. Whether you browsed with your desktop computer, your phone or your tablet, you were always viewing the same page.</p> <p>The advantages were instantly clear - instead of maintaining a set of websites of different sizes and facing new problems whenever screen sizes changed, one could now write one content for one website and everything else would just magically happen on its own. Since june 2012, this is <a href="" target="_blank">Google's recommended configuration</a> and since April 2015, they <a href="" target="_blank">actively punish you for not having a mobile solution</a>.</p> <h3>RESS - Responsive design with server-side components</h3> <p>Of course, Responsive Web design wasn't the end of the road. One obvious problem faced by early RWD was the problem of image and other media sizes. The speed of the website is directly related to its success and even a very small delay in response can cause considerable page abandonments. On one occasion, Amazon calculated that a delay of just one second could cost it upwards of $1.6 billion in sales per year.</p> <p>Since Responsive Web Design turned the same desktop page with big images into a tiny mobile page, this resulted in greatly increased page sizes for mobile devices, which considerably increased the response time on slower wireless connections. This time, web developers stepped in, saying "We'll take this one." Instead of blindly serving the same media to different devices, the web servers took over the task of adapting the media beforehand. Once they knew what device size they were talking to, they grabbed a smaller or larger image and sent that one instead. Since everything happens on the server side, authors can still upload just one large image and server takes over the resizing. Needless to say, most modern CMS systems either have or can easily be extended with some variant of RESS to deliver their media content.</p> <h3>Mobile only?</h3> <p>This is all nice and interesting, but what does it have to do with your company? So there are some geeks using their phones to browse the internet, so what? Well, that's the thing - it's not just some geeks. Depending on the part of the world you live in, the use of mobile devices either caught or is short before catching the use of desktop devices to browse the internet. This is a lot of potential customers you can lure to yourself if you offer them a great experience. More importantly, many of those using mobile devices may only infrequently use a desktop anymore. According to Luke Wroblewski, as many of 22% of all UK internet surfers have already gone <em>mobile only - </em>and this number keeps increasing daily. So without an effective mobile strategy today, your business may well be doomed.</p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="/tags/basic-concepts" hreflang="en">basic concepts</a></div> </div> </div> <div class="field field--name-dynamic-token-fieldnode-comments-title field--type-ds field--label-hidden field__item"><span>Comments</span> </div> <section class="field field--name-comment field--type-comment field--label-hidden comment-wrapper"> <a id="comment-3"></a> <article data-comment-user-id="0" about="/comment/3" typeof="schema:Comment" class="comment js-comment by-anonymous"> <mark class="hidden" data-comment-timestamp="1455192821"></mark> <footer class="comment__meta"> <article typeof="schema:Person" about="/user/0" class="profile"> </article> <p class="comment__submitted"><span rel="schema:author">Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">Bill (not verified)</span> on Thu, 02/11/2016 - 00:43</span> <span property="schema:dateCreated" content="2016-02-10T23:43:53+00:00" class="rdf-meta hidden"></span> </p> <a href="/comment/3#comment-3" hreflang="en">Permalink</a> </footer> <div class="content"> <h3 property="schema:name" datatype=""><a href="/comment/3#comment-3" class="permalink" rel="bookmark" hreflang="en">There&#039;s definately a lot to…</a></h3> <div property="schema:text" class="clearfix text-formatted field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>There's definately a lot to know about this<br /> issue. I love all of the points you've made.</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=3&amp;1=default&amp;2=en&amp;3=" token="0OyyOQQqaGvdq26UA1cWNzmOvoFjuLoAqp4RXqYk6XA"></drupal-render-placeholder> </div> </article> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=3&amp;2=comment&amp;3=comment" token="Y85zpvOo0idsDualBn4IsyXXwzfA_2wor3FCVaO8Mgo"></drupal-render-placeholder> </section> </div> Sat, 31 Oct 2015 13:49:11 +0000 admin 3 at