Elastic or Responsive ?

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

bulletproofIt encouraged every web designer to strip all formatting out of HTML pages and into CSS pages.
Along with this, Dan attempted to address the recent rise in low cost LED monitors which had led to visitors using increasingly varied screen sizes (the cheeky blighters!).
Dan pointed out users were changing browser settings to magnify font size. This was partly due to high numbers of websites at the time, being designed on high-res macs.
Developers were unaware that on PCs, fonts were microscopic, whilst a third of the bottom and right of the screen was left mysteriously blank !

‘Liquid’ layouts

Dan’s solution was ‘liquid’ layouts. Heights and widths are set as a percentage of the window dimensions.
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!

‘Elastic’ design

The alternative was ‘elastic’ design. 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 means column width stretches to roughly the same number of words per line. 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 problems.
So what’s the answer. Ignore it? Ever tried buying a track on Apple’s i-tunes with a netbook, moving the horizontal scroll 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

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, when a layout ‘breaks’ at a specific window size, layout and typography are totally redesigned. This has only really been possible with the advances in CSS.
For hand-held devices, with limited screen space and reduced navigation, you just want core info. So just hide the rest. The latest version of Internet Explorer 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-04-24T11:58:07+00:00 Nov 6, 2011|Fad or Innovation?|