October 16, 2010

Not a mobile web, merely a 320px-wide one

A school of influential web designers are pioneering ‘Responsive Web Design’ as a way to render content on different types of browser screens. They must fix the fledgling technique’s technical faults before it propagates into the wild. And it is certainly not yet worthy of its name: designers must think beyond the glass of a screen and build experiences that respond to the humans beyond it.

A little while ago, renowned web designer Ethan Marcotte wrote an article on the popular web design site A List Apart. This seminal article is titled ‘Responsive Web Design’, and has seemingly been very well read and much admired.

‘Seminal’ because it proposes that sites should challenge many of the established conventions that have been prevalent in contemporary web design: rather than exclusively using a fixed print-like grid, for example, sites should be more fluid and flexible with respect to screen size. (Of course this is how all web pages used to work in the mid-1990s, so the concept’s novelty is probably dependent upon the age of the beholder.)

In case it isn’t obvious, there has never been a single screen size upon which web sites should be expected to render: computer screens and browser viewports have always come in a range of sizes. But now, the obvious logic goes, the big screens are getting bigger, the small (ie. mobile) screens more popular, and a huge host of new browsing form factors – from tablets to car dashboards – are radically reshaping the web’s diverse physical canvas.

By building sites which can respond to these different screen sizes using open standards, the chances of it looking nice on all of, say, a regular laptop, a tablet, a games console, and a 27″ cinema screen are greatly increased.

The real novelty of Mr Marcotte’s argument is not that you should find and remove all the fixed {width:960px} rules from your stylesheets, but that you can use CSS Media Queries to selectively apply styling rules based on certain criteria. This allows you to have a page layout which changes as a function of browser screen size. (The properties available for evaluation in media queries are exclusively related to screen display dimensions and color capabilities.)

Take these two renderings of ‘The Baker Street Inquirer’, for example:

In the narrower example on the right, the title decoration changes, the menu items rise to the top of the page, the images appear in twos instead of threes, and so on.

This looks fantastic. Apart from being a lovely piece of graphic design, viewers also know that this page will look good in their desktop browser whichever size they have it set at, and they won’t have to risk lots of empty space on each side (on a too-large window), or lots of left-to-right scrolling (on a too-narrow window) – both concerns when a browser’s viewport doesn’t match a web designer’s assumption.

Six months on, the fruits of this article are starting to ripen. The good, the great, and the brilliant of the web design world obviously read it and took every word of it to heart. Two oft-discussed examples are Simon Collison’s and dConstruct 2010′s web sites: narrow your browser window on both to see the magic happen.

More recently, Jeremy Keith is notably flying the responsive flag, and has designed a number of sites (and redesigned his own) using a similar approach. Just last week, the mighty Happy Cog launched a very attractive new blog that narrows elegantly, and the talented Mike Kus (with Think Vitamin‘s redesign) has also joined the party.

So, the wheels of evolution turn. Designers are innovating, trying each other’s new techniques, and pushing this worthy idea onwards. They are influencing each other, and in the way these things cascade through imitation, influencing the approach that many thousands of developers who look up to them will take when next asked to design or redesign a site. At this rate, it will only be a few years before more web sites use media queries than don’t. It’s a smart solution, using well-known, standards-based technology, and users with different screens the world over will undoubtedly be happier.

Sadly, this technique is not the revelational panacea that some might present it as. While it copes well with the challenges presented by size-diverse browsers on a desktop, for example, it is flawed when presented as an single solution to the challenge of the mobile web. A more-or-less explicit tenet of the ‘Responsive Web Design’ school is that contemporary mobile browsers are served neatly by this technique, so it deserves to be put under this scrutiny.

Before we go any further, and for the avoidance of doubt, it is thrilling that the ‘mobile web’ has finally garnered some sort of interest amongst the web design community. For a decade, lonely pioneers have been hacking about with little more than monochromatic text on cramped and feeble browsers. Seeing a new wave of talented web artists thinking about the medium is very inspiring – spurred on by the rise and rise of brilliantly capable mobile browsers. Mobile, the historically gloomy little corner of the web, is ripe to welcome fresh and smart ideas – clever and efficient ways to deliver exciting content to mobile users.

Sadly ‘Responsive Web Design’ is not yet one of them.

To start off with, there are some technical and tactical issues. Experienced mobile web designer Bryan Rieger has most notably illustrated these concerns, and strategist Jason Grigsby has explored similar points. Their main concerns stem from the facts that:

  • Media queries only affect the styling once the markup and other resources have reached the browser. Whatever the device – whatever the network it’s connected to – the browser will download the entire markup of the page, and any (probably large) images in it. Yes, a ‘responsive stylesheet’ can resize media or hide it from the user, but designers should not presume that they’ve done anything to improve the performance or network utilisation by this sleight of hand. Cellular network usage is free in neither the financial nor performance sense. Ironically, Mr Keith’s article about the technique itself has a total size of about 1.6Mb – a payload that no mobile device this side of LTE will sniff at.
  • Media queries are not supported by most of the world’s web browsers. Certainly all WebKit-based browsers handle them well enough, and most other contemporary desktop browsers do too. But anything else will struggle: this includes legacy desktop browsers (which certainly don’t seem to concern the web’s great and good) and, more seriously, most mobile handsets in the market today.

Both issues are present in Mr Marcotte’s initial expression of ‘Responsive Web Design’. Perhaps understandably: while the exposition of technique focusses on the aesthetic of flexible design, there is little discussion of performance optimization. Further, many of these concerns pale if you’re a designer who lives in a world where everyone has an iPhone 4. Perhaps the article set out to merely present a prototype which the author knew would of course be iterated upon and refined.

Certainly some refinement could be applied to the mathematics, which apparently advocates daft rules like {margin-right: 3.317535545023696682%}!

But thankfully none of these concepts are necessarily deal-breakers: tinySrc (created by this author) allows you to have already dynamically-resized images arriving at the browser in response to a static piece of markup. Mr Reiger illustrates that by rethinking the assumptions about which browser is the default (i.e. a basic mobile one) and which receives the conditional styling (i.e. the clever, or desktop ones), one can mitigate a lot of the problems caused by serving up too many irrelevant resources. That’s probably not entirely what Luke Wroblewski was getting at when he said ‘Mobile First‘, but it’s good enough to work.

Hopefully, Messrs Marcotte, Keith, Kus, Zeldman et al will take these considerations on board and refine their logic accordingly. Theirs is the work that will be widely aspired to and derived from, and this is some basic hygiene that should be encouraged as soon as possible. The practices are not yet best practices – and we should hope that this technique doesn’t become a precedent for playing fast and loose with mobile payloads.

Technical issues aside, the primary concern with using ‘Responsive Web Design’ for mobile web sites remains, and it is far more fundamental.

Firstly let’s look at the name – or at least the origin from which is was purloined. ‘Responsive Architecture’, a term coined by Nicholas Negroponte, is a school of thought that says that buildings and structures should be able to react to changes in their environment, altering their shape or surfaces accordingly. Indeed this is what ‘Responsive Web Design’ does too: change the browser size, and the site within it will respond.

But Mr Marcotte posits that it is also about ‘how physical spaces can respond to the presence of people passing through them’ – in other words, that buildings should react to the way in which humans behave, and implicitly, to what it is that they need or want. This is where the ‘Responsive Web Design’ aspiration falls flat. Nothing about the technique is explicitly related to the human actually using the site, nor his or her context.

The problem of course, stems from the reliance on media queries as the key input to the layout’s alterations. Complex criteria can be built to segment styling based on width, height, orientation or color depth – but nothing else. The design is responding to the glass on the front of the gadget that the user has in their hand – not to the flesh and bone beyond it, where they are, what they are doing, and what state of mind they are in.

In the world of mobile, this matters. The fact that the user has a small screen in their hand is one thing – the fact that it is in their hand at all is another. The fact that the user may be walking, driving, or lounging is yet another. In fact, it’s quite likely that they really deserve different content and services altogether – or, at least, a differently prioritized version of the default desktop experience.

Is this too abstract? Too theoretical? Absolutely not. As a commonplace example, consider the FourSquare mobile web site and its sister web site. The former, of course, is designed as a slick and efficient way to check your location in to the service – and not much else. The latter provides a chance to review previous activity in the comfort of a desktop environment.

Is this responsive? Of course it is – at least in terms of responding to what humans in different environments want to do. The user, by specifying which site they want to receive, gets a design and an interface that is wholly appropriate to their context, not just their screen width. (Sadly, visitors with mobile handsets do not get automatically forwarded to the mobile version of the site, which would have made the service even more ‘responsive’.)

Consider, on the other hand, the St Paul’s School website. It looks lovely and exhibits all the hallmarks of the ‘Responsive Web Design’ school. Resizing the browser window demonstrates the page’s fluid grid, and on a narrow, mobile screen the layout becomes vertical and flows respectably down the page.

But let us just think about the use cases for this web site. Clearly the desktop site is designed to target prospective parents – St Paul’s is a top-notch fee-paying school in London – and the design, menu structure and layout reflect that. The ‘about’ page is first and foremost in the menu, followed by a sequence of pages designed to give the reader an insight into the workings and philosophy of the school. One can imagine well-heeled parents poring over the site for hours, deciding if it is the place for their child to attend and getting a feeling for the institution.

But a mobile user? Let us think about what a mobile user might want from their interaction with the school’s online presence. Are prospective parents so busy that they research making one of the biggest investments in their lives by spending a few moments on a mobile browser? Well, possibly; but it is hard to imagine that reading the school’s lengthy prospectus should top of the list of important mobile use-cases.

If one is accessing this site on a mobile device, there are other far more likely reasons. Imagine an existing parent or student keeping abreast of the (well-populated) school news, or upcoming calendar of events. This is something they might easily snatch a few moments doing in the car on the school commute, say. Or perhaps the user is a prospective parent or visitor who wants to check on the address and location of the school en route, or wants to put a call through to the school office.

Has the design responded to these, now very different, requirements? No. In the mobile display of the site, the news and contact pages are still at the bottom of the menu, below the admissions information and exhaustive list of school sports. The contact page (once you have reached it) does contain telephone numbers, but they have been turned into callable links by the browser’s automatic number detection, not the designer’s hand, so rather curiously you can also click to call the school’s fax number.

And the location page, to get a map and directions to the school? Most of the screen is taken up with an aerial portrait of the school – of arguably marginal help for navigation – and the map itself is only available within a 1.5Mb, three-part PDF document. You couldn’t make this up.

Surely a mobile user deserves and expects a map image embedded in the page, or even a link to Google Maps (which, incidentally, certain mobile browsers will parse to invoke the native map client). Apparently a few of these clever new gadgets have GPS in them.

Responsive to the user’s needs? Barely.

Anyway, the purpose of this article is not a hatchet attack on one particular site. It’s merely being used as an example of how using what is currently called ‘Responsive Web Design’ is often nothing of the sort – or, at best, a single cosmetic tool that needs to be used in conjunction with other, mobile-centric ideas and sympathies.

One gets the sense that those promoting and using ‘Responsive Web Design’ in its current form secretly hope that this is all they will have to do to be able to call their sites ‘mobile-ready’ (although whether that is what they commit to their clients, of course, one cannot say). We should sincerely hope this is not the case. These are smart and insightful individuals: surely they understand that juggling a few pixels around does not amount to designing for different types of user.

Mr Keith in particular appears to understand the dilemma. He points out that ‘I don’t refer to this as mobile optimisation’ and that media queries are not the ‘silver bullet for the mobile context’. Nevertheless, the screenshots of his portfolio sites are 480px in width (conveniently the landscape size of an iPhone), and he is somewhat disparaging about the idea of ‘the rabbit hole’ of creating a different site for mobile devices.

(Of course that isn’t technically required. A small snippet of server logic would have have been all that was required by St Paul’s to move news and contact to the top of a mobile menu, and to replace the PDF link with a Google Maps resource, for example.)

But this may give us a clue why so many others seem desperate to will the current implementation of ‘Responsive Web Design’ into being as the sole way to develop services for mobile users: it’s all client-side, and requires nothing more complex than a few extra tricks in existing CSS files. It may be that many web designers are daunted by the thought that they may be required to think about mobile device detection and conditional logic on the server-side, and are clinging to the hope that they can claim to support mobile users without having to do any, well, programming.

Sadly for those involved, this probably can’t be avoided. It’s not that media queries aren’t an excellent way to resize layouts (of course they are), nor that they don’t act as a reasonable proxy for identifying a mobile devices (which is also more or less true for now) and in turn mobile humans.

It’s a more fundamental issue – which is that any site should be ruthlessly scrutinized for ways in which it can behave in better ways for all of its constituencies of users, and that the differences between those ways are often going to be more significant than can be papered over with some stretchy images and fluid grids on a conveniently powerful mobile browser.

The real fear is that this subtlety is lost on those disciples who want to rattle off a site design that works on mobile devices as well as desktop browsers. The result of their efforts might look lovely on the client’s iPhone, but the speed at which that magic trick was performed will certainly have come at the expense of someone actually sitting down and thinking about what that mobile variant of the experience should actually offer.

The result? We won’t have a mobile web, but merely a 320px-wide one. A web for which the humans using it matter less than the width of the glass it is displayed on.

As a postscript, an analogy: we are in an age which, in many ways, resembles that of the birth of broadcast television. The mobile web is a new medium that, yes, is able to deliver services similar to its precursor, but which can also be developed and enhanced in ways that have yet to be dreamt of. Reflowing today’s web sites for mobile devices is a philosophy akin to that of the first broadcast television programs: “let’s stick with what worked before, and just put well-dressed radio presenters onto the screen”.

Did that work? Sure it did – as a start. But was it these dull talking heads that made television the greatest medium of the 20th century? Hardly. It was when program makers started to explore the visual capabilities of the their new canvas – and the increasingly demanding expectations of the viewers who expected to see something more interesting on the wooden box they had just spent a lot of money on – that innovation occurred.

Today’s ‘Responsive Web Design’ is a lukewarm response to a similar seismic shift – that of the sedentary web into expectant mobile hands.

Our approaches need to be bolder, more structural, more experimental, and, frankly, more considerate of the diverse audiences we should all be trying to cater for.

Comments (139)

  1. June 11, 2014
    ASDA said...

    ” Proceeds from the song’s revenue will advantage the charity Women’s Aid, which will help women of all ages and children who have been victims of abuse. Very last but not least, never overlook to inventory up on the spooky treats. She is extremely into her religion so she understands how to get as a result of a thing and just desires the right pals all over her.

    My website :: ASDA

  2. June 20, 2014

    Considering the fact that I in the beginning wrote around MBT sneakers at Pantofi Barbatesti, a large amount incorporates altered concerning the brand name, and the inventor and founder consists of still left the organization. Between genuine consumers, opinions of MBT sneakers are rather blended. If yourself’re thinking of a couple of MBT footwear, I strongly inspire your self toward way too read through the opinions still left within just solution toward the right after article content, and discuss towards your physician right before donning any model of shoe that is thus dramatically substitute in opposition to what oneself’re utilised toward, or toward address any style of soreness or issue.

  3. July 14, 2014

    [...] the issue of decimal precision. Some critics of responsive design techniques (for example, see this article by James Pearce) argue that entering numbers such as .550724638 em into stylesheets is daft. You may wonder [...]

  4. July 15, 2014

    Thanks for a marvelous posting! I actually enjoyed reading it, you’re a great author.I will be sure to bookmark your
    blog and definitely will come back from now on. I want to encourage one to continue your great posts, have a nice

    my blog post :: injustice gods among us cheats

  5. July 16, 2014

    My relatives all the time say that I am killing my time here at net,
    however I know I am getting know-how all the time by reading thes good content.

    Here is my web page: top eleven hack android phone

  6. July 16, 2014

    I’ve tried to work with, nonetheless it does not operates by any means.

  7. July 21, 2014

    Finally sims 3 cheats (http://www.philcampbelldesign.com) has a special devote the heart
    of mankind. The idea collaborates properly, applauds success and
    it is some sort of joy for you to see. I’ll leave an individual with
    this quote coming from Justin Poppins: A person get a number of, an individual unfastened
    a number of, although sims 3 cheats wins frequently.
    Ohio can sims 3 cheats actually influence governmental policies.
    Not too long ago 5 applicants running for some form of location utilised sims 3
    cheats because primary subject matter of these marketing campaign. Someone
    could possibly imagine sims 3 cheats has to be negative matter to help direct a plan together with,
    playing with simple fact with all the sociable along with enviromentally friendly effect is
    actually has, that subject matter was able to obtain lots
    of readers. These 5 job hopefuls travelled 5 for
    5 with winning their postures.

  8. July 22, 2014

    With havin so much written content do you ever run into
    any issues of plagorism or copyright infringement? My website has a lot of completely unique content I’ve either created myself or outsourced but it looks
    like a lot of it is popping it up all over the web without my permission.
    Do you know any techniques to help protect against content from
    being stolen? I’d truly appreciate it.

  9. July 26, 2014

    Fantastic website you have here but I was wondering if you knew of any discussion boards that
    cover the same topics discussed here? I’d really love to be a part of group where I can get feed-back from other experienced individuals that share the same interest.
    If you have any recommendations, please let me know.
    Bless you!

  10. July 26, 2014

    Have you tried incorporated with this the NT Backup that provides Windows?
    Opera browser is well recognize among other browsers.

    At this point, Partition Recovery Software come for this help.

  11. July 28, 2014

    My spouse and I stumbled over here from a different page and thought I may as
    well check things out. I like what I see so i am just following you.

    Look forward to finding out about your web page repeatedly.

    Here is my weblog; binary options bonuses, insuredprofits.freecommission.org,

  12. July 29, 2014

    I love reading through a post that will make men and women think.

    Also, many thanks for allowing me to comment!

  13. July 29, 2014
    Jermaine said...

    Very nice post. I just stumbled upon your weblog and wished to
    say that I’ve truly enjoyed surfing around your blog posts.
    In any case I’ll be subscribing to your rss feed
    and I am hoping you write again soon!

    my page :: last minute nyc hotel specials (Jermaine)

  14. July 30, 2014

    For example, the “out of memory” exception error
    can be fixed by installing. Echo Cancelation: Mike and TV speakers are too close together
    to enable windows to supply echo cancellation. A number of other
    companies have jumped on the success of Skype notably Apple with Facetime and Google with Google
    also as a ton of other chat and video applications website.

  15. July 30, 2014
    kakashi cosplay said...

    Then you may really start off searching great if possibly you paint your
    head’s hair, you may obtain a cost-effective hair painting for any couple of bucks,
    its surely not high-priced in any way! . For those who have the particular head of hair
    coloring then that is an advantage plus a situation a lot less to bother with.
    After you may wish to get the critical naruto costume, due to the surplus frizzy hair which it truly is have around the neck, you can find one thing form
    a sibling or possibly a cosing or probably some girl you realize looks to obtain got a new sweater or some factor akin to that which includes the distinctive head of hair details, then your only situation outstanding
    could be to get quite a few orange gown placed on more than that to be sure the
    hairs go across the top with this orange t shirts or outfits making it seem and extremely feel as if this had been an individual.

    Here is my webpage :: kakashi cosplay

  16. July 30, 2014

    If more people come they will just open another room in the institution. The trips start with a flight over the Grand Canyon National Park.
    Ghent is located about 60 minutes drive from Bruges state.

  17. August 2, 2014

    I do accept as true with all of the concepts you have introduced on your post.

    They’re very convincing and will definitely work. Still, the posts are very brief for newbies.
    May you please lengthen them a bit from next time?
    Thanks for the post.

  18. August 3, 2014
    Auicts.Com said...

    Ras el hanout, a mix hostel riad mama marrakech of Moroccan and Western classical music.
    But the government is on its way back to Base Camp after 75 miles on water and
    many portages.

    Feel free to visit my weblog :: Ryad Mogador Kasbah
    Marrakech Booking (Auicts.Com)

  19. August 4, 2014
    開鎖 said...

    I am impressed by the quality of information on this website.
    There are a lot of good resources here. I am sure I will
    visit this place again soon.|Very useful info

  20. August 7, 2014

    I every time spent my half an hour tߋo read thiѕ web site’s content
    eνery day along witɦ a cup of coffee.

    Feel free tо surf to my web-site – UK b2b email list

  21. August 8, 2014

    Everyone loves what you guys are up too.
    This type of clever work and reporting! Keep up the wonderful works guys I’ve included you guys to blogroll.

    Feel free to visit my site … who won between john cena and daniel bryan

  22. August 8, 2014

    Very nice post. I just stumbled upon youhr weblog and wanted to mention that I’ve ruly loved surfing around
    your weblog posts. After all I will be subscribing in your rss feed and I hope you write again soon!

  23. August 8, 2014
    Georgianna said...

    I am truly thankful to the holder of this website who has shared this enormous
    piece of writing at at this place.

    My web site; how to get laid in nyc; Georgianna,

  24. August 8, 2014

    Good information. Lucky me I discovered your site by accident
    (stumbleupon). I have saved it for later!

  25. August 10, 2014

    Hi there to all, because I am in fact eager of reading this web site’s
    post to be updated regularly. It carries good material.

    Look at my website … steam wallet codes

  26. August 15, 2014

    This degree can also help secure a teaching position, a job in government with foreign language requirements, or
    work as a translator. Three hundred hours, divided by the
    average six-hour public school day, comes out to fifty school days, which
    is about ten weeks or three months. Recently, I managed a 5- month Charter school based
    demonstration project with at-risk K-12 student learners, to confirm the efficacy of the
    light and sound intervention, using the DAVID Pal Alert,
    Light and Sound therapy devices to improve academic
    performance, social behaviors and sleep patterns of student participants.

  27. August 17, 2014

    So-called “dangerous dogs” are seen as a serious issue; in London police seized at least 900 dogs ovr the last year.
    s fees eah and every year, and good insurance providers may even cover
    you if the dog is stolen, including money towards advertising and a reward.
    That’s why Pet Care dog Insurance Programss provide you with the chance to manage the risk associated with pet’s medical issues thbrough the provision of your selection of
    flexible annd affordable pet insurance programs.

  28. August 18, 2014
    ordinary grains said...

    Fantastic website. Plenty of helpful information here.
    I am sending it to some pals ans additionally sharing in delicious.
    And naturally, thanks to your effort!

  29. August 24, 2014

    Thanks for every other excellent post. Where else may just anyone get that kind of info in such an ideal approach of writing?
    I’ve a presentation subsequent week, and I’m at the look for such info.

  30. August 24, 2014
    leaf tea said...

    If some one needs to be updated with latest technologies then he must
    be visit this site and be up to date every day.

  31. August 27, 2014

    The ventilation of the kitchen should be so ample as to thoroughly remove all gases and odors, which, together with steam from boiling and other
    cooking processes, usually occupy and render to some
    degree unhealthful every other portion of the house.

    You may wonder what they can offer you that a regular oven doesn’t
    have, and that would be a greater precision in what you’re cooking, meaning no failed recipes or undercooked food.

    With it, I just insert the probe, program the device to the temperature that
    I want, and continue on with whatever I have going on elsewhere.

    My web-site; jennifer a beautiful mind

  32. August 27, 2014

    Thanks to my father who told me about this weblog, this blog is really awesome.

  33. August 28, 2014
    Cecelia said...

    Thank you for every other informative web site. The place else may
    just I am getting that kind of info written in such an ideal way?
    I’ve a mission that I am simply now operating on, and
    I’ve been at the glance out for such information.

    Here is my weblog: herpes zoster español (Cecelia)

  34. August 29, 2014

    An intriguing discussion is definitely worth comment.
    I do think that you should write more on this topic, it might not be a
    taboo matter but generally folks don’t speak about such subjects.
    To the next! All the best!!

    Have a look at my web page … mind machine interface

  35. August 30, 2014

    Naprawdę warto

    My site … laserowe usuwanie blizn

  36. September 1, 2014

    Pretty! This has been an extremely wonderful article. Many thanks for providing this info.

    My web blog; homes inspections

  37. September 7, 2014

    teared   tearer   teased   teasel   teaser   teases  
    teated   teazel. subduing subdural subdwarf subedits subentry subepoch suberect suberins.
    rostella rostrate rostrums rosulate rotaies rotating
    rotation rotative.

  38. September 12, 2014
    www.youtube.com said...

    I’m not that much of a internet reader to be honest but your blogs really nice, keep it
    up! I’ll go ahead and bookmark your site to come back later.
    All the best

    Also visit my webpage; Sit in kayaks (http://www.youtube.com)

  39. September 17, 2014
    glass toys said...

    Howdy! This is my first visit to your blog!
    We are a group of volunteers and starting a new project in a community in the same niche.
    Your blog provided us valuable information to work on. You
    have done a outstanding job!

Leave a Reply