Doing Responsive Web Design: yes, but easily!

 Version française disponible

Not so long ago, I was talking about the “Mobile theme” feature included in the Jetpack plugin to ensure that your WordPress blog is accessible on mobile devices by making its content legible.

I will not change my mind about this great plugin because it works very well and each new version of Jetpack brings lots of improvements. Also, the fact that there is nothing to configure, just a button to activate the theme is a big advantage, you can hardly do better. Yes, but… if you are not scared of doing some programming, there is something even better!

I’m talking about Responsive Web Design, a very trendy concept that is not going to fade away. With Responsive Web Design, the site is unified on all platforms and automatically adapts to the screen size. The identity of your site remains the same (theme, images, colors…) and it saves you from maintaining different versions: desktop, mobile, tablet… The management of your site is simplified and its maintenance becomes much easier.

Before, there were few screen resolutions available (usually people were using a 1024 x 768 resolution or, for the lucky ones, a 1280 x 1024 resolution), it was the time of the 17 and 19 inch CRT monitors (ouch, my eyes are hurting… ok I am talking about ancient history). Today, there are hundreds of different sizes and resolutions on the market, Internet is everywhere on your TV, in your car or even in your fridge (well I guess I see a little bit too far, but this all-connected world is maybe not so far). In short, it is no longer possible to work on fixed resolutions on a case by case basis.

Of course, in the case of a specific application, there are arguments against the Responsive Design. A web application will have slower performance compared to a native app. But it is not the point here. I want to focus on general websites with a broad target audience (a newspaper, an online shop…). These websites need to be available on mobile devices and they should avoid using dedicated mobile versions (I am talking about the famous URL beginning with “m”). For instance m.facebook.com, m.linkedin.com or m.lequipe.fr which will disappear sooner or later.

Test by yourself

Right now, you can change the size of your browser window, you will see that this blog will automatically adapt (if you see bugs or have any idea for improvement, let me know!)

CarmaBlog in 1024 x 768

CarmaBlog in 400 x 768

You have probably noticed it, there are different changes as the width of the window decreases:

• The main menu becomes smaller before being replaced by a drop-down list.
• Some blocks are moving on a new line (RSS icon and search box).
• The secondary content disappears in favor of the principal. On a small screen, we want to get to the point (articles in my case) and avoid too much scrolling.
• The shadow effect and the background disappear. On small screens, dozens of pixels can represent 10% of the whole size, you have to take care of that.
• Images are resizing dynamically to avoid excessive disproportions.

Plenty of Responsive frameworks…

Many frameworks exist to help you achieve a responsive site. The best known is probably Bootstrap, by the way that’s the only one I already used on a project. There are plenty of others:

• Foundation
• Gumby
• Unsemantic
• Skeleton
• Pure
• KnaCSS

Home-made Responsive

It is also possible to make Responsive Web Design by yourself, without any framework. Actually, my blog is a good example. Some code of CSS, some code of Javascript and a few hours of work, that’s what you need. The final result may be not compatible with IE6, it certainly does not show great and smooth animations, but it will be more than enough in most cases.

The secret is to use media queries available from CSS3, below are some code samples:

@media all and (max-width:1000px) {
	.sidebar div {
		display:none;
	}
}

If screen width is less than 1000 pixels, the right and left sidebars are hidden.

@media all and (min-width:870px) and (max-width:975px) {
	#menu ul li {
		font-size:.7em;
	}
	#header_image {
		height:150px;
	}
}

If screen width is between 870 pixels and 975 pixels, the header and the menu are smaller.

@media all and (max-width:870px) {
	#menu {
		display:none;
	}
	#menuselect select {
		display:block;
	}
	#header_image {
		height:80px;
	}
}

If screen width is less than 870 pixels, the menu is replaced by a drop-down list. The header image is shrunk a second time.

@media all and (max-width:585px) {
	img:not(.fixed):not(.avatar):not(.wp-smiley):not(#sb-player) {
		height:auto !important;
		max-width:80%;
		min-width:70px;
	}
}

If screen width is less than 585 pixels, images are minimized. Images with CSS classes “wp-smiley”, “fixed”, “avatar” or with the ID “sb-player” are not affected. I had to do that because I had the problem of having some icons like smileys getting magnified, also some strange behavior with the embedded slideshow of Shadowbox.js player… I also add a restriction on the height (because I think you need a good view to see the content of an image smaller than 70 pixels).

Note: I use the “!important” keyword to redefine a style already present. The value specified with the “!important” will always overwrite the others.

I also wrote some Javascript to create the drop-down list that replaces the menu. I do not show the code here (it is very specific to my site), but be aware that the function have no more than 15 lines. I took advantage of the fact that jQuery was already included in the project, to save me from some additional lines of code.

All put together, to make my site responsive, I wrote more or less 200 lines of CSS code (with the format above so many lines with only one closing brace). It is not as complicated as you might think.

There is one last important thing. In the header of your pages, add this meta tag to indicate that your site is suitable for mobile devices:

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Inspection

At the end, the longest and tedious part was to refine styles depending on the resolution. There is no secret, this is an iterative and manual process: change the CSS, refresh the page and check results.

To help you, you can use Responsinator, a good tool to test a site with the most common screen resolutions corresponding to famous devices. You can also install Firesizer, a Firefox extension to know the resolution of the browser window, very useful when building your media queries.

Related posts

Maven Site, one step further Devoxx UK 2018 – Day 2 Computing jobs simplified overview Microservices architecture – Best practices