Liquid? Elastic? Responsive ?

bulletproofIn 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.

CCS2 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 the recent drop in cost of LED monitors, meant visitors just went out and bought increasingly varied screen sizes, the cheeky blighters!

Not only that, users were changing browser their settings to magnify font size. This was partly due to so many websites at the time, being designed on Macs. Many developers seemed unaware that the relatively low pixel density of PCs made fonts were microscopic. It also meant a third of the bottom and right of the screen was 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!

wikilargescreen

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 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, and 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 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

EthanMarcotteIn 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…

2018-07-18T11:57:40+00:00Nov 6, 2011|Get Innovative|