Responsive design shouldn’t be just about checking screen width and removing stuff on mobile devices, even though this is what it often amounts to. I also admit to doing this myself. Designing with a mobile first approach is sensible, but we run into problems with the typical wireframes/photoshop/html pixel-perfect workflow.
Stephanie Rieger made this excellent presentation on pragmatic responsive design with lots of good points.
You should check out her other presentations too.
Solid, semantic and accessible HTML markup matters. When most people look at a web page, it doesn’t make much difference to them whether headings are coded with proper <h1> and <h1> tags or <span style="font-size: 20px">. Still, for someone using a screen reader, not to mention search engines and feed readers, it can make all the difference in making sense of a document. Luckily this specific issue is now rare, but in a world of plugins and cool themes that generate semi-adequate markup, we’re often not using HTML and CSS to their full potential in building solid, accessible and search engine friendly sites.
By we I mean me of course. WordPress is awesome, and it’s one of the few CMS’s around that has committed to accessibility on the admin end (I’m not saying it couldn’t be improved). Unfortunately tight schedules and the very fact that its so easy to whip up a site using a few plugins and occasionally ready-made themes means its very tempting to be lazy.
So here goes: I hereby promise to continue to build usable sites, with a renewed commitment to good semantic and accessible markup. Because the web should be for everyone (and there’s nothing like some sweet, elegant HTML is there?).
This is a follow-up to last week’s post, Should we design for wider screens?. In this post I’ll demonstrate with a simple example how easy it is, with CSS and a bit of jQuery, to make layouts that adapt to the many different screen sizes out there.
At the top level, my example HTML page has a #wrapper div, which contains a #header, #main div containing all the interesting stuff, and a #footer. The main section has #content, #primary, #secondary and #tertiary divs for the different content areas of my page. The first two content areas, #content and #primary are wrapped up in an additional #container div, but your own markup may obviously differ.
https://gist.github.com/5175785
The basic idea here is to have different CSS styles for each width. The styles could be changed directly through jQuery, but that would quickly result in a lot of messy code. Instead, we’ll use jQuery only to change one class attribute. Initially I’ve added the class ‘normal’ to the body element to ensure a sensible default for browsers with JavaScript disabled, but we’ll also need styles for ‘wide’, ‘slim’ and ‘narrow’. This is easy to do with CSS descendant selectors:
https://gist.github.com/5175787
Unfortunately versions 7 and older of Internet Explorer deal differently with percentage widths compared to most other browsers, and can result in some funny behaviour. I see two primary ways to deal with it: either feed IE 6 and 7 it’s own rules (e.g. a tested, fixed-width layout) or just make sure that the percentages never add up to 100 %. A nice explanation of this annoying feature can be found over at OJTech.com.
First of all I need to include jQuery, and perhaps the easiest way is to use Google’s jQuery for this. The main bit is a function, checkWidth() that (you guessed it) checks the width of the browser window and sets the body class attribute accordingly. The code below should be pretty self-explanatory.
https://gist.github.com/5175788
In addition to this, all I need is some code that will tell the browser when to run the checkWidth() function.
https://gist.github.com/5175791
That’s it! View the finished demo EDIT: I’ve managed to lose the demo at some point in time. Anyway a better and more flexible way of doing this is CSS3 Media Queries, and you should use them.
After starting to write this post, I read the latest issue (#200) of .net magazine and noticed a mention of a very cool way to do a similar trick using only CSS media queries! Media Query demo by Bruce Lawson. Haven’t tried it out yet, but I definitely will.
Hope you liked the post, feel free to tweet it, or leave a comment below.
I decided to experiment with some of the new elements in HTML 5 and built my blog theme from scratch (with the help of the Carrington framework though). I’m now rolling article, section, header, footer and other stuff. Because IE needs a Javascript hack to enable support for these elements, I wouldn’t consider doing this in any client work, but hey, this is MY blog! Continue reading “Experimenting in HTML5 and CSS3”