0203 150 3141
In 2008, Dan Cederholm published a trailblazing book, ‘Bulletproof Web Design’. It documents how to use CSS2, stripping out formatting from HTML pages and placing them in a single style sheet file.
CSS2 was launched in 1998. Despite massive development time savings, in 2008 Internet Explorer was still not compatible! The recently launched Firefox and soon to be released Google Chrome were. Dan’s timely book recommends we no longer wait for Microsoft to catch up and jump on board with CSS2.
Microsoft is losing the latest Browser War
Internet Explorer’s latest version still doesn’t understand responsive design. Microsoft’s wasted enough of our time already. Instead of pandering to the lowest common denominator, lets design for the brighter kids in the class, get CSS2: Chrome, Firefox, Safari and Opera who are taking more of the market share. On that note, we have more pressing issues to deal with.
Big Screens. Little Fonts
In addition, at the time of writing, the recent drop in cost of LED monitors has meant visitors have gone out and bought increasingly varied screen sizes, the cheeky blighters!
Not only that, users are changing their browser settings to magnify font size. This is partly due to so many websites still being designed on Macs. Many developers seem unaware that the relatively low pixel density render fonts on PCs microscopic. It also means a third of the bottom and right of the screen is left mysteriously blank !
Solution 1: Liquid Layouts
Dan describes his solution as liquid layouts. You set the column widths and heights to a percentage of the full window size. Many very high profile sites have taken this up, despite being fundamentally flawed.
As any graphic designer worth his salt will tell you, having more than 7-12 words per line makes it awkward to read. Your eye struggles to scan left again, to pick up the next line.
To see a real life example of this, take a look at Wikipedia on a large screen. 45 words anyone!
Other Solutions
Solution 2: Elastic Design
Moving on, Dan suggests something else that should solve the words per line usability issue. With Elastic Design, however much a user increases font size, columns grow in proportion to the type.
Instead of setting column widths in pixels, you use ’ems’: a typographical unit based on the width of the capital ‘M’ in any typeface. Column widths stretch to roughly the same number of words per line. However, having fully embraced the new way to code, testing each level of magnification in each browser, I have found you can still run into layout problems.
It’s Too Hard… I Give Up!
Should we ignore the issue? Try buying a track on Apple’s i-tunes with a netbook. You have to horizontally scroll the bar across, to purchase an item. How annoying! That was websites in 2008. That’s about 12 years in web years ! There’s always someone in the web world coming up with a smarter solution.
Responsive Design – A Perfect Solution
In May 2010, Ethan Marcotte in his a list apart article introduced us to media queries and ‘responsive design’.
As a hand-coder, who enjoys creating layouts based on absolute dimensions, this made the most sense. Instead of letting a layout stretch and shrink to fill the space, it’s fixed at set ‘breakpoints’.
Different Screen, New Layout
When a layout ‘breaks’ at a specific window size, layout and typography are totally redesigned. This has only been possible with recent advances in CSS.
This holds limitless design possibilities. You can create completely different layouts for different screen sizes. And, so long as you give something a class or ID, you can chose what to display within those breakpoints(or media queries). For hand-held devices, with limited screen space and reduced navigation, you just want core info. So hide the rest.
It’s Getting Better
We are entering into a new golden era of web usability for the professional website designer where knowing which content to display and how will set you apart from those who fail to question this with their clients.
Exciting times…
