Responsive design. One web. Semantic CSS.

A new buzzword hit the streets of web development lately: responsive design. But what is it? If I wouldn’t trust Wikipedia(not saying that I don’t) and I would have to give my own definition, I would say that it is the ability of a web site to adapt to the user’s browsing device and offer the optimal experience, look and feel.
As usual, from theory to practice, there is a long and hard way. When talking about implementation, responsive design is an umbrella for a series of web development techniques and patterns. I will try to describe some of them in the next lines.
First of all responsive design starts with user device browser detection. I already wrote an article on the matter and I will come to this subjects on future posts as well. Now I will just enumerate the main techniques without focusing on a specific framework.

• Device information repository. It is usually done on server side using the HTTP User-Agent header and mapping it against a database of devices. This database contains information about the device hardware and software like: name, manufacturer, input device (trackball, keyboard, touch screen), OS, browser, support for video, audio and image formats and many more. The most well known device repositories are OpenDDR (free), WURFL(free for non-commercial use) and DeviceAtlas (commercial). Apache DeviceMap is a new one, but it’s not on a stable release yet.
• Pattern recognition. If you need just basic device detection, like to distinct only between mobile and desktop, you can use the browser name and map it against a list of given patterns (e.g. contains iPhone or Android). Needless to say that this method has a high failure rate and it doesn’t give you detailed information about the device and its capabilities. This technique can be applied on the server side using HTTP User-Agent header or on the client side using the window.navigator JavaScript object and its properties (e.g. appName)
• Features recognition. This technique is applied on client side in JavaScript. This is only a part of a broader technique, progressive enhancements, which I will detailed it later on.

As soon as you’ve identified the user device, your website has several options on how to react. You can create different websites for mobile and desktop (and even one for tablets), you can create a desktop website and transcode it for mobiles/tablets or you can create only one, smart enough to adapt to all devices (existing and upcoming). And this is revealing the concept of One web. But what this concept implies, a concept for each W3C is lobbying as one of the most important guideline in web development? It is practically the same thing as responsive design, or I would say the best method to implement it, to have one website that can offer the best user experience no matter on the browser that it is accessing it.

Is it easy to implement? I would say so, but you need to have a few important things in mind. Let’s start with the most important one: content-layout separation. As we said you want to have only one website, which actually means one content. But the layout, how it is rendered and how it interacts with the user, is different for each device. If you’re familiar with the MVC concept, this is similar, but applied to your markup. The advantages are obvious: you will be able to maintain one content, your website can react differently if needed and you can clearly delimit the tasks between content editors and web developers.

As soon as we made the separation we can leave the content in the content editors’ hands and we can focus on the web development part. But do we really need to develop one layout for desktops and one for mobiles? And another one for tablets? Or even one for each type of mobile – featured, smartphone etc? Not quite. Again if you’re structuring and modularizing your website, you can get away much easier.

To easily plug in different layouts you definitely must use CSS. CSS Zen Garden is a clear example that proves its power, by rendering the same content in hundreds of different ways. But CSS alone is only a tool, you will need a technique that will enable you to unleash this power. And now we’re coming to the broader discussion of semantic CSS. Using it will gave you this level of pluggability and the good news is that to apply it you need just a mindset switch. Even though you’re developing a layout using CSS, think only at its semantics. This way it will become easy to link a content with the layout. Let’s say that you want to define the CSS class for the page title, which is displayed in blue, bold and with a double font. You will call that class title and not blue_bold_double_text. Sometime, this will not be as obvious as in this example, but always think first of the semantics and ask yourself the question: Why and when I would use this CSS class? Forget about specifics.
There are a few other related tips that you might find useful:

• Give your CSS classes short, but meaningful names. Even though shorter is desirable, do not trade meaning over size. Do not abbreviate, further down the road you or some other developer may forget the meaning.
• Use the semantic of HTML tags instead of defining new CSS classes, where appropriate. It is preferable to use H1 instead of .title and H2/3 instead of .sectionTitle.
• Use the new HTML tags instead of the deprecated ones. STRONG is preferable to B, as it is related to semantic instead of layout.
• Use as few CSS classes as possible. It will be harder to remember which class is for what if you have hundreds of them and when to use one over the other. Prefer using contextual references in CSS selectors or combining existing classes rather than creating new classes.

You structured your content and layout and now you have to develop it. There is an old concept, liquid layout, but I think it still can suit most needs. The idea is to develop a layout that can easily fit in different screen resolutions. This will translate mostly into using relative positioning and relative sizes instead of absolute ones.

We covered how a website should look like, but what about how it should feel, how it should interact with the user? I mentioned earlier about progressive enhancements and I already describe it in a previous post, so I will just restate it. The term sounds very complicated and futuristic, but it is not rocket science. It is not a framework or a new technology to learn and use. It is only a change of mindset. Mainly this applies to JavaScript and you have to keep in mind that some features that you’re going to use in your scripts could not be implemented on some devices/browsers.

To better understand the concept let’s take an example. Let’s say that you’re going to use geolocation on your website.

		navigator.geolocation.getCurrentPosition(locationHandler);
	

The above could be one option. But what happens if the user browser does not support geolocation. Your website will break and offer a poor user experience.
By simply adding an if you’re out of the trouble.

		if (navigator.geolocation)
			navigator.geolocation.getCurrentPosition(locationHandler);
	

You can even have some fail-over mechanism implemented on else branch. As I said nothing complicated, only a mindset change. Develop for the highest end browsers/devices, but think of all.

The same can be applied to CSS. If you want to implement CSS gradients you will have to do something like

		background-color: #00ff00;
		background-image: url(bg.jpg);
		background-image: url(bg.jpg), -moz-linear-gradient(90deg, #00ff00, #0000ff);
		background-image: url(bg.jpg), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00ff00), to(#0000ff));
	

This way you will be able to have a green to blue CSS gradient on both Mozilla and WebKit and just a plain green background on older browsers. Also if you have an image that one will be there as well. The browsers without CSS gradient support will just ignore the last two lines.

Another example will be pagination. If you want to implement a More like functionality (like the one from Facebook news feed) you don’t have to forget about non-Ajax devices and have a next/previous fallback.

Some other examples are JavaScript frameworks that implement features not yet supported on some browsers (read IE here), like Explorer Canvas or CSSPie.

Using progressive enhancements you can offer a better experience for advanced user devices, but without losing the low end ones. Remember that the 80/20 rule applies here as well. 20% of the users generates 80% of the traffic. You don’t want to lose the big amount of traffic, but you also don’t want to lose a big amount of users.

W3C is coming with new techniques to help you in your quest, like media queries. Using an easy syntax you can easily customize your CSS for different device characteristics, like resolution. And the good part is that media queries are becoming widely adopted, even though not fully. Another W3C standard worth to keep in mind for the future, but still draft, is CSS variables.

All these techniques apply mostly to your HTML content, but you should not forget about images. Image optimization is to be done mostly on the server side, after detecting device capabilities.

To be continued …

A short slide presentation on the topic you can find here.