Liquid layout best suited to the desktop?
I’m breaking my radio silence to talk about something that has been bothering me about web design lately: Mobile / small screen web design layout.
I’ve been using my Nokia e51 to browse the web on a daily basis for the last six months or so. A lot of the sites I visit have mobile versions of their content: Twitter, Facebook, Flickr, BBC, Amazon. These mobile versions are not just about mobile stylesheets but entirely different templates with different navigation systems which often put a wall around the core features of the site so you can’t stray into areas that haven’t been optimised for mobile or simply aren’t suitable. The majority of websites don’t have mobile versions of their sites but are still viewable in most modern mobile phones and small screen devices that support HTML and CSS.
There’s an oft-debated argument about fixed-width -vs- fluid layout. It usually revolves around the need of the designer to have control of the canvas, to be able to absolutely position elements on a page so that the design comes together as a cohesive piece. Whilst this approach might look rather nice if the user has the same display / browser setup as the designer this is rarely the case. A lot of web design is about just letting go. Maybe accepting the loss of control is the mark of a good web designer? So we should all be using fluid layout designs, where possible, in our website design. But what about mobile or small-screened devices?
Viewing a liquid layout website on my Webkit-powered Nokia browser is not a pleasant experience. Imagine a simple layout with the main content occupying 60% of the viewport with the remaining 40% given over to peripheral sidebar style navigation elements. 60% of an 800 pixel viewport is 480px, leaving 320px for the sidebar. This seems reasonable enough. Large screens, with max-width techniques for line-length legibility employed can look good too using this ratio.
Switch to a small screen of 240px and the story is rather different. 60% = 144px / 40% = 96px. Whilst we have no horizontal scrollbars in this instance, the columns are extremely narrow are difficult to read. This is a simple two column layout. Imagine what happens when we throw three or four liquid columns into the mix (4 x 25% = 4 x 60px)! I’ve actually found that fixed-width layouts optimised for 1024px widths render much better on my mobile phone. Granted I get a horizontal scrollbar but Nokia’s browser is intelligent enough to recognise blocks of content and to wrap them within the viewport for me. To get to the sidebar I need to scroll right but, once there, the content wraps nicely. The same is true for liquid designs where a min-width is defined.
So for me, on my Nokia e51, fixed width websites work better than percentage-based liquid designs that don’t have a min-width defined. I don’t have an iphone so can’t comment about that but would be interested to know of your experiences on a range of different small-screened devices that attempt to render HTML and CSS.
So, in addition to the excellent advice from Roger Johansson on setting a max-width, I’d like to suggest that all liquid layouts need a defined min-width for viewing on small screens.
To understand what I’m talking about, make your browser really small for the following liquid-width websites:
Tags: Web design