Experiments with liquid CSS layouts
We all know liquid is important, right? (Doctors recommend 1.5-3 litres per day :P)
Some of you may have been fooled into thinking liquid and elastic layouts died as soon as browsers deployed native zoom a few years back. I’ll assume you understand – with a fair degree of knowledge – the technical and usability ramifications of implementing fixed-width, liquid, and elastic web layouts. If not, then the following should briefly clear the haze:
Fixed-width layout
Dimensions have a fixed-width pixel (px) measurement.
... this is only a preview.
Read the full post →
One usability faux pas I often discover with websites (I’ll add the example website in question [here] when I remember the URL) is clickable areas moving when I try to target them. Here’s a good example of a fly-out menu that’s actually quite effective, unfortunately just not that well executed graphically:
http://www.headandshoulders.co.uk/
Published on
January 13, 2012 in
Design.
Tags: Animation, Design, Interactive, Interface Design, JavaScript, jQuery, Tools, Usability, User Experience (UX), Video.
Most product websites will layout a bunch of images and text content on the page (maybe even a slick video if you’re lucky) and expect users to make sense of it all. Flow (by MetaLab) on the other hand uses some simple, fun, animation effects to facilitate a visual point of reference, narrating (or aptly: ‘flowing’) the user through the rest of their product experience; discovering more about this task management app – great stuff!
BHS.co.uk (URL valid 28/12/2011) are utilising a great product image zoom feature, making superb use of screen real estate. The logic is if you’re viewing a photo in detail you can’t read at the same time, so why show text? – a progressive disclosure feature of interface design I’m a fan of since it compliments simplicity well.
http://www.bhs.co.uk/mall/productpage.cfm/bhsstore/3770523 (URL valid 28/12/2011)
I’ve only just noticed it – perhaps it’s existed for a while? – but I’m favouring the contextual tooltip execution in SoundCloud.com‘s app.
It appeals to my love of large clickable areas and a functional form. It’s almost possible to action most tasks (e.g. ‘Go to track’, ‘Save to favourites’, ‘Download’ etc.) by using a scroll wheel movement or vertical trackpad gesture by itself, leaving my cursor hand free to scratch things with – great stuff!
Great fullscreen use of carousel.
Recent Comments