17th September 2012, by Edward Cant.
An evolution of the responsive design concept via on-the-fly viewport modification and media query driven style switching.
Responsive web design is exceedingly popular, with good reason. It makes a lot of sense to adjust an experience to accommodate its environment.
A popular CSS approach is to start with a core design that is progressively enhanced via Media Queries to take advantage of increasing viewport real estate.
This often results in two styling end points: small (mobile) viewports and those that are large enough to be considered full experiences, typically desktop screens.
It would be nice to be able to offer a choice between a core view and a full view on devices like the iPhone, since they are capable of rendering both.
Chris Coyier has expressed his thoughts on the subject, including a potential approach to what he calls ‘Opt-Out Responsive Design’.
I see the ability to respond both to viewport size and user preference as an opportunity to allow further responsive choice.
With this in mind, the system I present in this article was designed to offer a responsive design toggle, it's Opt-In and Opt-Out.
I hope ‘opt-out’ is not the term that becomes the community focus!
In terms of implementation, it would seem reasonable to suggest that if we can modify the viewport, we gain the flexibility we need.
As it turns out, it is possible to dynamically modify the viewport on many popular mobile devices, even after page load.
I've weaponised the idea in ReView, a dynamic viewport system. Demo, documentation and full feature list are available on the website.
The viewport meta tag was not intended for use in this manner. Any modification technique has to expect plenty of browser implementation inconsistencies on both mobile and desktop.
ReView attempts to overcome the issues, but is very much an exercise in progressive enhancement. It carefully avoids interfering with user expectations on devices that do not support or require it.
ReView analyses the initial viewport and meta tag if available.
It then decides the initial view mode,
If supported, the system then offers subsequent view changes without reloading the page. More details on the ReView site.
It is possible to apply ReView to a website with no viewport meta tag. This will provide Opt-In responsive design.
View preference is automatically stored for the duration of the browsing session via HTML5 sessionStorage.
A plugin mechanism is available to encourge future features, starting with conditional load dependent on view.
ReView takes a common sense, progressive approach,
The core website HTML and content stay the same. Nothing about the responsive design process changes.
If you already have a responsive website, the script enables a view switch mechanism that you previously didn't have.
ReView allows for more than just view switching.
Consider leveraging the responsive idea not just in terms of visual layout, but also in terms of bandwidth, energy usage and device capabilities.
ReView provides confirmation of either an automatic or user specified full experience and this can be used to trigger further enhancement.
For example, a high pixel density display can be detected and improved assets loaded in accordingly.
Benefits to the developer,
Pages that serve large numbers of requests via mobile websites like google can take advantage of less stress on servers, plus an instantaneous switch for the user which results in a perceived faster website.
Benefits to the user include,
I have tested on iPhone (Retina), iPad and a basic Android phone. I do not have the resources to test on many devices, so let me know how you fare.
Comments, suggestions or feedback via Edward Cant on Twitter please.
Follow the author on Twitter.
‘The Responsive Viewport. A dynamic viewport system that provides efficient responsive web design viewing choice’.
CSS @viewport rule or viewport meta tag? Read more.
The Responsive Viewport. Missing piece of the responsive web design puzzle? Read more.
Getting the Viewport Scale.
Hiding the iPhone Address Bar.
Orientation Correct Screen Width.
iPhone Title Modification.
Optimising for High Pixel Density Displays.
CSS3 Media Query Prototyping With ProtoFluid.
AJAX Kill Switch. Version 2.
All source code is provided for free.