Fashion or function?

8 March 2014


It’s worth reviewing your website to see how it fares against the competition and how emerging trends might further increase profitability. Marc Prior, a designer with website development agency Ecce Media, reports.

One of the most exciting aspects of working in web development is the accelerating rate at which technology and technique changes. It makes regular reviews of these changes and how they can be applied to achieve your own business goals a must.

But while knowing what's happening in your market - and what advantages that may be affording your competitors - is valuable, take care not to get caught in a cycle of chasing fashionable fads.

One prominent example of this during the past year has been labelled "Flat design". Inspired by Apple's overhaul of their mobile operating system for iPad and iPhone, it's typified by removing gradients and texture to leave simplified pages of 'flat' blocks of colour. As a movement it proves to be distinct and recognisable, instantly identifying websites in this style as on trend and fashionable. But this level of recognition also adds an instant shelf-life to the design. This means that when fashions change you will be left with something instantly recognisable as being dated and in need of further redevelopment.

Picking long-term good practice and strategy from the fads making the headlines is tricky, and will differ from business to business. Here we attempt to pick out some of the underlying strategies we've seen emerge over the past 12 months.

One of the most important and widely known approaches is responsive design. The term and most of the underlying techniques involved have been around for over four years, but high-profile responsive redesigns of large, complex websites such as microsoft.com demonstrate what's possible for all online business.

For those unfamiliar with the term, responsive web design groups together techniques and the mindset for adapting a website to best fit the device it's displayed on. At the very least this will mean a fluid layout and images adjusting to make best use of the size of screen. Increasing mobile and tablet traffic share, together with impressive conversion rates for mobile optimised sites, make a good case for catering for non-desktop customers.

Website speed
There is also fresh emphasis on speeding up your website by improving its performance.

While often discussed in regards to optimising your site for mobile, speed is just as important for your desktop users, international customers in bandwidth-costly locations and it even factors in how well Google ranks you.

The situation has arisen with the increasing size of web pages over the past few years. By size we don't mean the physical length of the page, but the file size of the assets that make up your site: those high resolution images, large Javascript libraries powering animations and effects together with big frameworks like Bootstrap that all need to be downloaded before your site renders correctly. Where computers and broadband speeds have become faster some of the negative impacts have been masked to a point, but having as fast a site as possible should be on the agenda for any business.

This isn't to say that creativity must be stifled, just made more efficient. There are multiple techniques available to trim your pages, from the basics of housekeeping redundant code, and using more appropriate formats like scalable vector graphics (SVG) for icons, right up to server-side compression and caching. Endless scrolling, made popular on Tumblr amongst others, can be one way to speed up delivery of long web pages, only pulling in later blocks of copy when users scroll to the bottom of the page.

With all that is now possible, the difference between an approach working or not often comes down to the attention to detail in its design.

A case in point is Medium.com, the ideas and story-sharing site which recently redesigned the modern reading (and writing) experience on the web. A one-site showcase of some of the best approaches to take for displaying articles, it has off-screen navigation, careful use of legible web fonts, beautiful responsive banner images and has duly launched a thousand imitators over the last year.

What separates Medium out from its imitators, aside from its originality, is the care and attention to detail that underlies the polish. For example, highlight any passage from an article you're reading and share icons pop up. Choose to share on twitter and they'll pre-fill your tweet with the text you selected. They make the smart assumption that readers highlight text they consider significant, which in turn means they are likely to want to share its significance. Neat and unobtrusive it allows the removal of the clutter of social share icons until a reader acts as if they'd need them.

When updating your website follow Medium's example in spirit, rather than by the letter. Rather than duplicating this feature wholesale, find ways to make your own equivalent. Analyse how customers already use your site, find ways to make that process faster and easier and you can give them an experience they'll remember long after today's fashions fade.

  • Ecce Media founder Brant McNaughton is a judge for the TTJ Website of the Year Award. For more information on this year's Website of the Year Award contact Stephen Powney at spowney@ttjonline.com

This website for Oakley goggles is an impressive technical achievement but it is also notable for the resulting excessive page weight
Microsoft’s homepage adapts when viewed on a desktop (right) and mobile sized screen (left)
Medium.com shows attention to detail