Fluid widths in responsive websites.
Front End Design Principle Rambles #1
I’ve recently worked with the team behind the Derby University website [https://www.derby.ac.uk/] and one of the details that I really like about the implementation of the design is that it features more than just fluid widths, it also features fluid font sizes. I’ll get onto what that means in another post, but for now I want to talk a little about using fluid widths.
Fluid widths — Pros & Cons
Pros
There more variations to device size than can be reasonably handled with media queries and fixed or pixel-based widths, so fluid widths are a more practical and thus more useful for website layout and making the best use of the screen viewport.
Using fluid widths you can reasonably expect your layout to remain as intended, and expand or shrink elements predictably, even if you haven’t designed the website for a specific resolution.
Cons
When fluid and fixed width elements meet there are issues. A commonplace and difficult issue to resolve is consistently achieving readable and balanced text within a fluid width design. Fixed font sizes equate to a fixed height, with individual variable character widths.
Maximum and minimum text line lengths are recommended for readability, but sticking to these has the effect of setting fixed width upper and lower width bounds for any block of text, even if you’re aiming for a fluid layout.
Media queries and fluid gutters between elements are popular strategies for coping with the challenge of matching fluid widths and fixed font sizes, but they’re often just clever tricks to fill the gaps with whitespace. Wouldn’t it be nicer if the font sizes scaled with the page instead?
