Synook

Adventures in responsive design

This site is but a few days old, and I am already trying to improve the design. Oh well. The first thing on my site improvement agenda is to try to make the design “responsive”. Basically, a responsive web design is one that is able to adapt, or respond, to different browsing environments, namely, different screen resolutions (and to an extent, different pixel densities, but more on that later). This is of course, great, since then even people with really small screens can still view the site, and perhaps most importantly it negates the need for a dedicated mobile version.

The basic way to make a web design responsive is to use CSS to specify certain styles that only apply at different screen resolutions, through the use of the @media directive:

@media screen and (max-width: 980px) { }

Using these “conditional” selectors, if you like, it is possible to make elements change width or font-size, or hide themselves altogether, without the need for JavaScript. Using these selectors is quite easy: I found the hard part was designing the markup of the pages so that they could be modified easily using CSS. For example, I wanted the sidebar to become a footer at low widths (as the links on the sidebar are secondary, the breadcrumbs providing the primary navigation). However, this meant I had to ensure that the sidebar HTML was entirely after the markup of the main content.

Read more…