Flexible frontends

It's all too easy too find CSS builds that don’t adapt to changing font sizes or accommodate varying lengths of textual content. As an example of what I mean try increasing your font size on any of these sites:

• Apple.com
• Microsoftstore.com
• Orange.co.uk
• o2.co.uk
• Phones4u.co.uk
• Cnet.co.uk

As you can see the content quickly spills out of the design. This is a bad practice for two reasons:

• Accessibility - users who are hard of sight and browse the web at larger font sizes are going to have trouble reading the content as it breaks the design.
• Adaptability - even if a build is developed after any copy has been signed off there’s still no guarantee that it’s going to stay the same. Developing flexible frontends means your code won’t have to change when more content is added. This is especially important if the site is content managed.

The height property is evil

To be honest, given the visual fidelity demanded on the web, it’s somewhat understandable why so many sites fall foul of this rigidity. In order to achieve complex visuals across all browsers we often have to resort to the use of bitmap images which, by their very nature, aren’t flexible.

You’ll find many of the sites above possess this rigid characteristic due to the misuse of the height property. It can initially seem logical to set the height value to match that of the image being used to create the effect however this is a really bad practice and, in general, the height property should be avoided whenever possible...as I say, it’s evil.

CSS3 saves the day...or at least it will

I’d predict this rigidity will eventually become a non-issue with little conscious effort from web developers as CSS3 becomes more prevalent as, with properties such as border-radius, text and box-shadow, border-image as well as values such as rgba and background gradients we will be able to create high fidelity designs without the use of static images.

We’re not there yet however. Obviously sites are quite happily using CSS3 properties already but the decision to do so should be well considered as it could mean reduced visual integrity for a sizeable number of users given that any browser up to and including IE8 doesn’t support CSS3.

This means, on every new build, a decision has to be made regarding how detrimental the imposed visual degradation might be on the site’s design and how important this might be to the brand being portrayed.

If for a particular project you conclude it not to be acceptable to use CSS3 then all it not lost! During this transitional period we can still achieve flexible components whilst staying faithful to the visual design – we just need to put a little more thought into our use of images.

A quick google will churn up a plethora of techniques to achieve flexible rounded corners, drop shadows, gradients and the like – some are better than others however. Drawbacks often include the use of extraneous non-semantic mark-up, increased image requests or even a reliance on JavaScript, the latter being a really bad idea as it blurs the separation of presentation and behaviour. I feel however a happy medium can be found with the right techniques; at least until CSS3 support becomes ubiquitous.