If you caught my article on responsive web design you'll be aware I'm an advocate of such techniques already. There is today a strong argument of viewing the topic from a slightly different angle, that web app/ web site development should be mobile first. I'm going to use as the basis of this article the talk by Sean Wildermuth who gave a talk at dotnetconf 2013 on this very topic: Mobile-First Responsive Design.
It's a changing technological landscape: today more smartphones than PCs are shipped (though are smartphones PCs?) - let's re-state that as more smartphones are shipped than desktop of laptop personal computers. Some people only have a smartphone. Or a tablet.
Responsive Web Design (see my earlier post) advocates:
- Adapting a site to mobile devices rather than creating an entirely differently version of the site as used to be the preference when there was a greater gap between the capabilities of phones and laptop/ desktop PCs
- The approach taken has previously usually been to gracefully degrade to the mobile device
- There is a problem here - the solution is sub-optimal as the code goes to all devices, though it is not used in both places
- Such a subtractive solution therefore means non-optimal consumption of resources, particularly an issue for the mobile side
- For example, all the javascript code will be running on the mobile side, and hence on a platform that is less suited to handling it
- Further images are often still loaded (consuming bandwidth) but hidden
The solution is mobile first web development though is currently difficult to address al the above issues via the current technology toolset. The philosophy was created by Luke Wroblewski and focusses on progressive enhancement, scaling up rather than down and the aim, simply put, is to not include anything that isn't needed. Thus, ideally, you would add to stylesheets, images and script as scaling up.
Given the increasing prevalence of mobile devices considering mobile is likely to important if not critical to success. In fact it may now be the most important user base for you to consider but this will depend on your site/ application/ client base so it is important to be practical. Mobile first is important in most cases, but not all and it is also important to scale the effort to the size of the project.
Several techniques are required to follow mobile first:CSS design media queries to be additive
- use a minimum size instead of ranges in your CSS3 media queries
- load JS based on the device
- support different image sizes - there are lots of different techniques with no one being perfect (expect more from the W3C on this)
There are a number of device categories/ screen sizes/ resolutions you can target. Three are common nowadays - mobile, desktop and retina.
The Image Problem
As stated above there are a number of resolutions to the problem of needing multiple versions of images to support differing devices:
- you can use background images so they are loaded as required for the CSS rules - a workaround to the img src problem
- to solve the image quality issues we can use the data- HTML5 attributes and JS and swap the data source for the source
- you could also not include a src at all and swap in the correct version. Then only the one version will be loaded. Problem: need code to run even on the small device plus dependent on JS
- another option: only load JS and CSS on the non-mobile device
Solutions for CSS
What tools/ frameworks are out there to help with responsive design in general and including mobile first responsive design
AdaptJS
- injects CSS based on media queries
- list of screen sizes and match css to screen size
respondJS
Solutions for Javascript/CSS
EnhanceJS
- Injects CSS/JS based on media queries
- Issue - not maintained since 2010; also relies on cookies
Of course using the backend is still also a solution.
Solution for Images
ReponseJS
- defines width sets and uses markup to define images
I'll be following up on the above and as well as the conference video link above Sean has the slidedeck etc. up at his website.