I recently was asked to prepare some articles on a technical topic with which I was totally unfamiliar. The client provided me with a few links to some background information and I was soon surfing the ‘net, finding a lot more. I was intrigued, because (a) it was a topic that I should have been familiar with, or at least more aware of, and (b) it was nice and geeky. And I love gettin’ my geek on!
The topic was RWD, or responsive web design. You may also have heard of it as adaptive website design. It deals with the techniques of site design to ensure that the site’s pages will display properly on whatever device is requesting the page. And it’s also the method that Google recommends for resolving this issue.
For those that were designing sites before mobile devices became so commonplace… I’m talking pre-tablet or smartphone here… you might say that the advent of mobile surfing made website development a bit “challenging”. In this context, challenging means: a tremendous time-sink, with only limited benefits.
And of course the users of those tablets and smartphones got mighty frustrated, too, trying to view fragmented websites and scrolling back and forth to read even the shortest captions and headlines, let alone a full page of copy.
So what did the most intrepid developers and webmasters do? They built a mobile version of their site, as well, with display criteria that were specific to whichever device they thought their users were most likely to be using.
If that happened to mean that they tailored their mobile site for display on a Samsung Galaxy tablet (1024 x 600), then users with the Galaxy S smartphone (480 x 800) would be sadly disappointed. And as the number of different mobile devices and viewports increased, how many different mobile sites could a site owner expect to have to build and maintain?
When W3C finally put their blessing on HTML5, its coupling with CSS3 brought us a step closer to a universal design, but the final ingredient was the media query. Finally, there was a way to determine which viewport width to present to, and serve the page in a fluid layout, specifically for a given device.
Lest you jump to the conclusion that implementing HTML5+CSS3 is a complex process, let me set your mind at ease. You will need to have some basic knowledge of CSS and HTML, but the process is really a lot simpler than you might think:
- First your header, footer, content and widgets will be encompassed in a page-wrap container. This will allow the width of that container to be modified by the CSS3 to suit different viewport widths;
- Next, you’ll reset your HTLM5 elements to block. That will establish the block of elements that will handled;
- You’ll have to build your main CSS, of course, setting the width and float of the various elements within the block;
- Then you can build your media queries. These are what will determine which CSS3 will be followed, once the target viewport has been identified;
- Now you can set up your fluid layout, by setting the percentage of max width of the target viewport for each individual element that you set in your main CSS;
- Finally, you can set the width for images and embedded videos, also as a percentage of the display’s maximum width.
You can build as many different CSS3 files as needed to suit the variety of mobile viewports you wish to accommodate. The beauty of this system is that you only design once, for a basic display on a large resolution PC monitor, then just add new mobile viewport capabilities as they arise.
Your usability needn’t suffer, and accessibility can be maintained in all viewports, subject only to device limitations. Plus, the addition of a new viewport to the market only requires the addition of a simple CSS3 file and a new media query. Changes in content or configuration to your website only need to be made once, as well.
With the ability to display properly on any platform, whether it’s a 2560px PC monitor or a 320px iPhone, HTML5+CSS3 is the way to go. Let your media queries do the work for you, and keep your business in front of all those mobile users out there.
In case you’re wondering what the end result can look like: