Think Responsibly

Recent work requires a trip in the Responsive Ark, this is Responsive Web Design - in Practice.

The rising tide of mobile devices has been talked about for several years but the tipping point has only been fairly recent.  Even the terminology has matured with stakeholder and tech journalist alike evolving phraseology from Mobile phone to smartphone and finally to mobile device as the spring tide of Apple iPads finally brought tablets to the masses. and lo, the time came to build the web development ark. (Oh dear: theme detected...)

The first strategy to emerge for this market was the bespoke mobile web site - an offshoot of the main site sometimes so different in experience that it could feel like separate brand. However the emergent dominance of smart devices with various screen resolutions and a burgeoning mobile application market has eclipsed this technique. So we now have a choice of approaches. 

But which approach to take?

Apps

The clamour for native (iPhone and Android) apps has abated somewhat but I still find myself trying to talk clients out of the app for apps sake. They can be rich experiences and offer offline content but they also require the maintenance of a separate code-base are at the whim and mercy of proprietary censors and need at least two versions to hit the majority of the market - and the budget will feel it...

Mobile specific site

No censorship here but yet again its a separate code base to maintain and although they can run the same data as a main site and in doing so off the same instant updates - plenty of high end devices may lose out on that content as default.

Responsive Site

(oh finally...) 

A responsive site will have several benefits over the other options. It won't offer offline content like the app but in adapting its layouts and content it can reach a larger audience than an app, have a lower cost to market, escape censorship and deliver a consistent user experience across a multitude of devices from wide-screen TVs to the smallest mobile screens. All from the same code base.

All aboard the Ark then?

Oh like life is that easy... what is this responsive malarkey then?

Our brief:

Produce several co-branded 'micro sites' ( channel, content-hub, resource centre, multi-page advertorial..... by any other name....) which will perform on mobile devices and desktop alike.

The results of which you can see here:

office365.pcpro.co.uk, hp.cloudpro.co.uk, business.pcpro.co.uk

Our tools:

We've been working with our own Drupal distribution for over a year now so that CMS is a backdrop for everything - luckily it's extensibility as a framework allows much customisation.

Responsive design

A responsive design approach is a combination of methods used to build a website capable of responding to the device that it is viewed on. Essentially this an involves optimising functionality and layout for different screen resolutions.

The pioneer of this technique is Ethan Marcotte who defines this method:

"Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design"

Challenges ahead:

Detection:

Our first issue is detecting what our site is being viewed on and in particular it's resolution.

Media-queries are part of the CSS3 specification and allow us to write specific styles which are only used when certain resolution criteria ,which we specify, are met. Java-script can also be used for this task or to fill in for browsers either too old or too stubborn (yes - I'm looking at you IE8!) to respond to media-queries.

User-agent: One attribute we can also use is the user-agent . This string of info is sent to the server before any content is sent back and identifies OS, browser application and installed extensions.

One major issue here that we'll move onto is what content to serve to whom - and what content to hide.

CSS and JS are both executed at the client side and this can be after the horse has bolted if you wanted to serve a smaller file to a mobile for example.

This is where WURFL comes in - a dedicated library of 'every' user agent which we can the use ensure the right horse bolted (ok, too far...)

Optimise for whom?

Ok, so we can detect the resolution but what do we serve - we could endeavour to employ a fluid grid and let everything settle where it may. From a design perspective I certainly feel we should retain control of the elements we can in order to utilise our talents as merchants of design and deliver a refined user experience.

To do this we need to identify which resolutions to target - define breakpoints.

We decided upon small mobile (300px) smart phone(<768px), tablet portrait (760px), tablet landscape (1024px). We could have added a larger break for wide screen but as the brands didn't cater for this we haven't as yet.

Also worth baring in mind view-port settings and pixel density at this point - each with they're own spanners to fling - mainly do you control the zoom or fix it? Bare in mind that images are effectively scaled up by higher pixel density devices (like the iphone)

Our Fall From Graceful Degradation

(Oh please...)

Web development life has been a tale of beautiful layouts ruined in stages by poor non-standard browsers - one could be forgiven for posturing.

We have already spent our Web Industry lives catering for some seeming quite capricious approaches to employing the latest web standards (HTML, CSS, JS). Working smoothly and forgiving in the latest WebKit browsers (Chrome, Safari) and the stuff of lucid waking night-terrors in terms of IE6 - (those of us who remember IE5.5 on a mac still rely on drugs and therapy...).

So now we need to optimise for hundreds of devices sporting a further myriad of browser variations, but this seemingly desperate situation has forced an excellent approach which I believe will aid business development and user experience.

Progressive Enhancement and 'Mobile first'.

Given the soon-to-be greater number of mobile devices accessing our designs we are right to put the mobile device first - and instead of starting with a desktop site and stripping various parts away until it merely 'works' ono a mobile, we start with the mobile forcing us to concentrate on what the key functionality, content and navigation ought to be, considering where a user might be when using this service (think searching for reviews in a shop) and from this re-focused approach progressively adding to the web experience for larger resolutions where they are more appropriate and lend themselves to the desktop or tablet experience.

In short Mobile first requires:

• Forced Focus on most valued Elements
• Prioritise functionality and content
• Simplify , distill, key areas that will stack up when needed.
• Strip navigation down: larger interactive hit areas for chunky digits

In doing this we gain an inherent boost usability and accessibility. By increasing hit area's, adding padding and catering for swiping on touchscreens we ensure these are also easier for the average mouse user and visually impaired alike. Generally helping the user in reference to Fitts law:

"Time required to rapidly move to a target area is a function of the distance to the target and the size of the target"

Those larger padded buttons on all the Google services Gmail, Docs etc already exemplify this.

This also ensures a continuity across platforms which is crucial in manufacturing a coherent Brand Experience and a positive user experience overall.

When to Serve and When to Hide?

With WURFL we can detect an agent string an provide different content and with Media-Queries we can then establish breakpoints and hide/reveal different portions of code with CSS. Think switching from portrait to landscape on a tablet or smart phone for example.

Our content serving issues are the sure to put a dampener on this party however.

Whilst we can, and have integrated the WURFL library into Drupal's Context functionality - meaning we can provide different content dependant on the user agent string - we still have issues such as a tablet in portrait mode being served content that is then hidden with media queries - far from ideal.

Also consider

Ads: The online ad market need to mature into the HTML5/CSS3 market rapidly from it's flash based roots or at least the ad-serving side does - in app ads are very productive in terms of Click Through Rate and well designed CSS / JS animated ads ought to complement mobile optimised layouts and take advantage of advance tablet and mobile browsers - iOS Safari and Support CSS animations already compared to IE which promises it on the desktop for IE10. Modernizr would be effective here too.

Images

Ideally we do not want to waste bandwidth scaling larger images on smaller screens - which is where images.js comes into its own although I haven't implemented ourselves as yet.

Video

Quite an issue! - We eventually settled on the MP4 format which can be served either by HTML <video> tag or fallback to Flash player - this seems to cover most bases. We have used the JW Player which has a peculiarity of Flash falling back to HTML to accommodate Chrome - but if that's sounds crazy it's a barometer for the number of combinations of format / Codec/ player that we endured. Easy HTML 5 Video proved very useful as well

Let me out!

Provide options - a large percentage use fast wireless at home but get stung for data charges the rest of the time - ideally give an opportunity to switch between mobile/desktop user agent determined choices.

Process: Are we doing it right?!

From our specific business point of view the mobile first approach should be all pervasive to be most effective - specifically all the various caching issues which probably has various sysadmins weeping gently even now.

Our Move to RWD is first to shift the focus to mobile from a design and front end dev point of view but even that has serious ramifications to truly make the most of the advantages RWD can give you in the busy web marketplace.

Work flow

User Experience and the planning thereof often starts with the use of personas and much wire-framing ensues - this needs to shift to a location based mobile approach to complement the desktop but this will indeed help focus minds further regarding key functionality and content hierarchies.

Design

Whilst I think the freedom of your favourite Adobe should be the first port of call (waters back - heh...) I think after a general look and feel direction has been decided and wireframes and ad placements decided it time to move to the browser ASAP - yes - Design in the browser! After all typography will generally play an even larger structural role when bandwidth is an issue but if we accept that @fontface is one feature I really don't think it's worth compromising on and can again re-focus a designers eye on the key aspects of proportion and relative scales - designing in EMs can be a fruitful lesson here too.

The Promised land

(here we go - what's next, the olive branch of version control - streuth...)

The adoption of responsive web design can only add to the core values of universality that the web holds at its core.

An approach that accommodate 99% of browsers can only be admired - some using a wind-up laptop in the Peruvian desert with dreadful bandwidth and IE6 will still get perfectly prioritised content and functionality by receiving the 'mobile' version.

As was pointed out in an excellent riposte to the tweet by Alan Balkan that he would only support current browsers, John Allsop quite correctly quotes Tim Berners-Lee:

"The power of the web is in its universality"

Absolutely, and responsive web design may well represent the ark we require to achieve this universality in the face of a flood of web capable devices.

Please attempt to leverage any biblical / nautical references you can if you comment.