Really responsive web design
Thinking beyond the screen size
Wikipedia
- Responsive Web design:
- Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices
As the Wikipedia quote above implies, the phrase ‘responsive web design’ has become synonymous with visual layouts that adapt in response to a particular viewing resolution. That's completely natural — it's generally technically simple, well supported and the most visible and understandable responsive web implementation. It's often also quite an easy ‘sell’ — one layout that works anywhere? Yes please!
I love the techniques that allow us to do this and I use them all the time. I firmly believe, however, that rather than being the definition of responsive web design, it is really just one implementation. Changing a site based solely on available screen real estate is really a sub–set of a what truly responsive web design could be and it's short sighted, even damaging, to think that will be enough going forward.
It's not new
Many people think responsive web design is a new ‘thing’. It's not at all really, we just have more sophisticated techniques and a collective name for some of the practises many people have been taking for years. Whenever we make a design decision based on what we know or suspect about the current state of a user's technology, we are designing responsively. When we add features targeted at a particular type of technology, we are designing responsively.
Whenever we make a design decision based on the current state of a user's technology, we are designing responsively.
Some examples
So, layouts that adapt to any given screensize are almost the rule rather than exception, and buttons or menus that are tailored for touch screens are very common, but what else can be done?
Enter the web APIs
There are a number of APIs at various stages of development that allow us get extended information about the state or environment of the users device, in a way we're accustomed to seeing in native apps. This offers potential to tailor design and function of sites and pages in a manner that is sympathetic to the users needs.
Battery API
Almost 40% of browsers globally support the Battery API. If we know a user's battery is running low, there is opportunity to reduce the use of non–essential battery intensive tasks such as animations and transitions. This could even go as far as use a light on dark colour scheme, reducing the power required to illuminate the screen.
Ambient Light
Whilst currently not as widely implemented as the Battery API, with current support at about 12%, development underway in Chrome, and under consideration for Internet Explorer, the Ambient Light API offers some potential for adjusting designs based on the user's environment. A dark colour scheme may be appropriate to increase contrast in bright conditions, or a more subdued scheme to reduce glare and battery use in lower light.
Page Visibility
The page visibility API has excellent browser support (about 80% at the time of writing) and provides a simple but important function; allowing us to test wether the our page is currently the active, focused browser tab. Animations, videos or audio could pause when not in view to save resources. If your web app uses push notifications, or times out after a period of inactivity, the page <title> element could update to inform the user of any changes.
Complete API list
These are just a couple of ways we can make pages and web apps respond to the users technology — the coming months and years will inevitably see growth in the variety of responsive design solutions beyond those which simply reformat layouts based on the screen size.