RWD: just getting started

This article first appeared in issue 236 of .net magazine – the world's best-selling magazine for web designers and developers.

These are exciting times to be a web dev. Regular browser updates deliver improved web standards support, meaning we can build better user interfaces for our site visitors. As web technology evolves, new site build techniques, such as RWD, are made possible. The ‘one site fits all’ technique uses CSS media queries to adapt our page design to the user’s browser. They also get a single URL for bookmarking both mobile and desktop versions of the same site.

We’re only just getting started using this technique, and I see a lot of potential to develop it in future to suit our needs and those of our visitors. But only when we overcome our current reliance on JavaScript can we evolve web standards to build sites that better adapt to users’ needs.

Improved response

Currently we use JavaScript to patch functionality lacking in HTML5 and CSS3. We need to use the right technology to build sites, so we have a solid foundation for the future. Notably, as the <img> tag is not up to the task of displaying responsive images that adapt based on media queries, we require a temporary solution, such as the picturefill polyfill. The draft W3C <picture> element specification proposes a proper, markup-based solution to address this deficiency.

Similarly, applying CSS styles to elements based on a browser’s scripting support currently requires a JavaScript-based solution, but the problem should really be solved within CSS. Thankfully, the emerging CSS Level 4 Media Queries specification proposes a new script media feature to address it. This specification also promises the ability to alter applied page styles based on the size, type, and capabilities of a user’s input device. This means we could create larger target areas for users with touch-based input devices, and smaller ones for those with a mouse or stylus. Reducing our current reliance on JavaScript will allow us to build more reliable and accessible solutions for our users.

We need to ensure web standards evolve to adapt content as well as design. We’ll need a solution for how we should handle secondary page content, so mobile users who wouldn’t see it don’t download it. Using Ajax relies on JavaScript to solve what I see as the lack of an appropriate solution within HTML. We might evolve the <link> tag to point to secondary content at an external URL associated with a media attribute: the browser would only load content if it will be displayed. But however we solve the problem, web standards must continue to evolve to address more than design.

Sense and accessibility

The proliferation of mobile devices with sensors capable of geolocation and motion detection suggest a future wave of sites whose designs adapt to real-world environments. Imagine being able to increase font sizes and button target areas if the motion sensor suggests the user is browsing while walking or running. We might consider adapting our layout based on our visitor’s geographic region or on ambient light or sound levels.

If we want to build sites that are truly responsive to users’ needs, we must separate our user interface from our site’s underlying services and data. This frees us up to tailor interfaces to different types of device. We have an exciting opportunity to use a voice server with VoiceXML markup, allowing the public to use their phones to dial into our site using only voice commands. This would bring about a paradigm shift in accessibility, allowing site access without the prerequisite of an internet connection or the usual computer literacy skills.

The ultimate goal of responsive design is to provide a site that adapts to users regardless of browser, device or abilities. We can progress this ‘one site fits all’ idea by continually evolving web standards, and addressing users’ needs more personally as we do so.
 

Discover 50 amazing examples of HTML5 at Creative Bloq.