Liquid? Elastic? Responsive ?

Dan Cederholm wrote a trailblazing book in 2008, ‘Bulletproof Web Design’

bulletproofCSS2, launched in 1998, meant you could now strip out all formatting within HTML pages and place them in a single style sheet file. Despite massive development time savings, in 2008 Internet Explorer was still not compatible.

The recently launched Firefox and the 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.

Big Screens. Small Fonts

In addition, at the time the recent drop in cost of LED monitors, meant visitors were using increasingly varied screen sizes (the cheeky blighters!).

Users were also changing browser settings to magnify font size. This was partly due to high numbers of websites at the time, being designed on Macs.

Developers appeared to be unaware that on PCs, fonts were microscopic, whilst a third of the bottom and right of the screen was left mysteriously blank !

Screen percentages with ‘Liquid’ layouts

Dan’s solution was ‘liquid’ layouts. Column widths and heights are set as 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 will struggle 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!


Scaling by type size, with ‘Elastic’ design

The alternative Dan suggests is ‘elastic’ design. Here, columns grow in proportion to type. Instead of setting column widths in pixels, Dan suggested using ’ems’: a typographical unit based on the width of the capital ‘M’ in any typeface.

This does tackle the previous problem experienced with liquid layouts. Column widths stretch to roughly the same number of words per line. So, whichever font size a user chooses, it should work. The trouble with ems(having fully embraced the new way to code) is, after testing each level of magnification in each browser, you can still run into layout problems.

So what’s the answer. Ignore it? Try buying a track on Apple’s i-tunes with a netbook. How annoying is it, that you have to horizontally scroll the bar across, to purchase an item.

That was 2008. 12 years ago in web years ! There is always someone in the web world coming up with a smarter solution.

Responsive Design – The 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’.

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.

So long as you give something a class or ID, that means 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 just hide the rest.

Microsoft is losing the latest Browser War

The latest version of Internet Explorer still doesn’t understand responsive design! but the brighter kids in the class do: Chrome, Firefox, Safari and Opera.

We are entering into a new golden era of web usability for the professional website designer where knowing which content to display will set you apart from those who fail to question this with their clients.

Exciting times…

2017-09-29T17:33:04+00:00 Nov 6, 2011|Fad or Innovation?|