Fluid web design is a recent design discipline that’s really caught fire over the last two years. It’s a fairly in depth development procedure that allows your website to adapt itself to the screen size it’s being viewed on.
Therefore, the user will be presented with different layouts, depending on whether they are accessing the website from a desktop or a mobile device. It even resizes itself if you make the browser more narrow. This site is based upon fluid design; grab the corner of your browser and drag it around for a demo!
The rise of mobile search
The rise of mobile searches, which in some cases can be up to 40% of a websites total traffic, presents a whole host of problems to a designer. Mobile devices come in a huge range of screen sizes and resolutions, so creating separate websites for each and every one would be impossible. This is where fluid design comes in; with a layout that auto adapts and calculated in percentages, rather than fixed pixels, the website is future proofed on the release of new devices.
Controlling fluid web design with media queries
Part of the solution is the use of media queries, a part of CSS3 that basically inspects the device characteristics and adjusts styling information ‘on the fly’. At its most basic, a media query asks the device how wide it is, looks through your CSS style sheet and finds the prewritten media query, using the styling information below that to adjust accordingly.
As well as width, media queries can be tailored to produce different effects within the fluid layout.
- Is the device being held in landscape or portrait orientation?
- What is the device, and should extra content be displayed – i.e. retina screens and Apple hardware?
- Should we switch off page elements, depending on screen size?
Break points in fluid web design
Break points allow the developer to tailor the display for specific devices. As an example, we know that the portrait view of the iPad is 768 pixels in width. Therefore, using media queries, we can tell our navigation system to go from one long horizontal row which looks daft on anything with a small screen, to a two column block that’s neatly laid out. But we also know that this would be difficult to use for the average human finger on a smartphone; so, using media queries again, we tell any device that’s 480 pixels wide or smaller to break this down to one column and make the buttons bigger for those with big thumbs.
The downsides to fluid web design
The very nature of fluid web design is that everything is in a constant state of flux. The state of play for most web designers over the last decade or two has been ultimate control over fixed width designs that can (given browser differences) be controlled to the last pixel.
Fluid web design is not a pixel perfect discipline. It’s a relatively new way of thinking about design and layout, and as such there are imperfections. Image handling, in particular, is lacking and requires workarounds.
This doesn’t mean that there has to be compromises to the design; rather, new ways of thinking about how you handle fluid web layouts need to be achieved.