Pro tips to breathe new life into your website
2nd May 2009 | 08:00
How a quick design refresh can be as effective as a full redesign
Going back to basics
As the global economy continues to stutter its way through 2009, companies are increasingly fighting to be heard.
In recent months, investment has shifted abruptly from traditional media and 'real world' environments to the internet, which provides the means to reach the largest possible audience in a relatively cost-effective manner.
In theory, this is great news, but in practice the picture isn't entirely rosy. As Clearleft's managing director Andy Budd explains: "Many people view a website as a one-off project, rather than an ongoing concern. Organisations often go through a big redesign and then let a website fall into disrepair."
Instead, he recommends training yourself and your clients to think of a website as a staged process, which should be updated every three to six months: "That way, it'll always be up to date and will last longer, rather than spending the majority of its life underperforming."
Instead of tearing a site down and rebuilding it from scratch, figure out ways to make the existing site work harder.
"Breathing new life into a site through a design refresh is one such option," suggests Budd. "Smart companies also explore usability improvements to help conversion rates – small tweaks to registration and checkout processes can see conversions skyrocket and pay for themselves in no time."
The trick is in knowing the difference between an expense and an investment. While some sites are too outdated to make do with subtle tweaks and need a radical revamp, you can often do a lot with a little, thereby finding yourself in tune with companies cutting back on large capital expenditures.
Back to basics
Even if you only want to make small changes, Alex Willcocks, creative director at Engage Interactive, recommends approaching your site refresh with an open mind. "Sometimes going back to the beginning and thinking from that standpoint can bring surprising results," he says, "especially with the number of resources available to web designers increasing all the time."
However, there are certain tried and tested considerations that will almost always play a part, including tweaking content, amending graphic design and integrating new components.
It's essential to consider how each element works in a modern context, especially if a site is long out of date. "Users want information quicker than ever before and if you don't supply it, their interest will move elsewhere, regardless of whether you're a trusted brand or resource," argues Tim Gibbon, director at Elemental.
Gibbon reckons there's a desired immediacy to website content and structural revamps must take this into account. Now isn't the time to be coy; tweak homepages so they enable users to rapidly access the most important current content, rather than making them hunt for it.
Alec East, director of Do Tank Studios, adds that immediacy in modern sites sits alongside a certain informality. Often, just changing the name of a site's sections results in something more contemporary.
"There's a move away from 'catalogue' and 'about us' to more descriptive and cognitive terms, such as 'men's shorts'," East says. This assists users in finding specific types of content in a more intuitive manner than when generic terms are used and improves things from an SEO perspective.
And on the subject of search engines, East points out that they've become the only way many users find information online. "Since most people find a site via a search engine, they could enter anywhere," he says.
Consequently, during refreshes, it's important to consider whether it's obvious how to navigate straight away, regardless of where you enter, and whether basic information about the organisation needs to be available site-wide (such as in the footer), so new users immediately know a little more about the site they're visiting.
Content and style
The oft-wheeled-out mantra in web design circles is 'content is king', but text is no longer the absolute ruler it once was – something to be mindful of during refreshes.
As CEO of Modera Siim Vips notes: "Scaling down text content is popular, since there's too much information available online anyway and excessive copy can negatively impact on a website." Elliot Lewis, creative director of No Two the Same, adds: "A CMS of some sort is becoming a prerequisite, but this puts copy in the hands of clients, which isn't always a good thing."
Ultimately, the level of control clients should have regarding copy comes down to their skills and designers need to guide clients who don't have appropriate in-house resources available, helping them outsource to copywriters where necessary.
For any components that can be edited, you need to keep the refreshed text succinct and avoid duplicating information, both so users don't get bored and so clients have less scope for fiddling!
Graphical refreshes also offer a huge range of options, although they can be tricky to get started. "Clients tend to want to hold onto something that's been successful for them," argues Lewis, adding that, while stagnation is dangerous, so is "jumping on any current trend – such as shiny surfaces – that may make a site look tired very quickly."
Vips adds that, although consumers generally like to see progress, they're typically shocked by sudden, radical changes. He suggests making subtle visual refreshes that are small and gradual, such as amending backgrounds, while East reckons designers should consider the merits of craft-based design. "I'm not just talking about hand-drawn elements," he adds, "but also letterpress-style typography."
Style with substance
For some, though, a site refresh provides the opportunity for a more drastic visual overhaul. It can often be tempting to pepper 3D, video and animation components about the place, or to update tired-looking components such as forms with spangly new CSS and imagery.
Whether you should use such technologies or not depends on their relevance and the site's intended audience. "3D and video can quickly bring a message across that would have taken many paragraphs of text to explain, but these things can also be distracting and should only be used when they serve a communicative goal," recommends Webjam user experience designer Sjors Timmer.
"And if convergence is your goal, it may be wise to leave standard web components such as form elements the way the browser renders them, so people can recognise them immediately and understand how they work without explanation."
In contrast to streamlined static copy, the amount of content integrated into commercial websites via social media is likely to grow substantially during 2009 as businesses catch up with the masses – something savvy designers can take advantage of.
"Social elements are becoming very important, with users increasingly expecting to see other people's recommendations, share content and interact with brands," says Ané-Mari Peter, managing director of on-IDLE.
She suggests that site refreshes should, to some extent, centre around user experiences becoming one-on-one, rather than the old-fashioned 'one-to-broadcast' style that most sites cling to. "Adding a newsfeed – with relevant content – or a blog increases the currency of a site and helps to develop a deeper relationship with a site's users," she says.
And whether you're going for an off-the-peg or bespoke solution, these aren't massively expensive components to set up and integrate. It's also possible to use blog headlines and Twitter updates for portions of a homepage, ensuring that a site appears to update on a regular basis between major events such as product launches.
The biggest danger with social networking is that some companies see it as an easy option during a refresh, not fully understanding what it entails. Forums might, on the surface, seem an enticing prospect, potentially reducing support queries and getting users to help each other, but they can be costly to maintain and police and shouldn't be seen as a replacement for existing services.
There's also the risk of, as Peter puts it, "keeping up with the Joneses", whereby companies buy into social media only to rapidly lose interest when the costs, in terms of time and input, become clear. "If you want to start a blog and get on Twitter, make sure you've got something to say and be prepared to listen to feedback," advises East.
"Don't do it if you can't commit to regularly updating it." As long as that's understood, companies should be taught to embrace social media as fully as possible, even going so far as encouraging users to use Twitter to give feedback, rather than just sending questions via email.
Brands must also be made aware that immersing themselves in social media can backfire massively if they attempt to subvert it. "Users have become adept at sniffing out planted reviews and information," warns Peter.
"Companies must avoid abusing their 'new toys' and designers should provide guidelines before unleashing social components during site refreshes."
One of the biggest advantages of social media during site revamps is that the relevant platforms already exist. If you're working with Twitter, the tool is built, ready and waiting.
If you're setting up a blog, various solutions exist that can be integrated into a site in a relatively short space of time.
Designer Chris Garrett thinks this is a major advantage: "In times of financial uncertainty, clients are less likely to want to be tied into proprietary platforms. Utilising open platforms with documented APIs can help win business because the client knows they'll be able to continue working with the platform if their supplier goes under."
Also, for smaller components, ready-made tools can increase a site's usability for little cost. During the 1990s, designers toiled for hours to craft fairly unhelpful location maps, but now Google Maps can be welded to a site with almost no effort.
So if a client asks for a solution to a problem during a refresh, search around to see if a relevant and freely available component already exists before considering building one from scratch.
"However, business owners must examine legal and consistency risks before integrating third-party APIs," warns Vips. He argues that to minimise risk you must have a contingency plan in case services drop or vanish – not least because many APIs are in a perpetual state of beta.
Garrett argues that such risks are outweighed by potential rewards. "APIs have gained massive traction in web applications, but 2009 will no doubt see even more widespread adoption," he says.
"Simply adding an RSS feed to a website enables people to repurpose content in a plethora of ways, increasing your reach exponentially and for little cost. With a cut in marketing spend, making your content open and reusable can be a cheap, effective way of reaching new consumers."
Of course, structure, content and even component integration aren't new, even if they're being used in new ways – they've been around since the dawn of the popular web. Today's market, however, finds a major new spanner in the works when it comes to refreshing websites: mobile.
Usability guru Jakob Nielsen confidently predicts, "The trend towards increased use of mobile websites is no doubt the most important challenge facing web designers in 2009."
People are clearly shifting from desktops to mobile environments for browsing and many upcoming refreshes will largely avoid the 'main' website and concentrate on targeting mobile users. "That prompts a big strategic question," says Nielsen. "Whether to design a separate mobile site or make the main one mobile-friendly."
The direction to take depends on your target audience. Although it's easy to assume that mobile users mostly browse on the move, plenty of people prefer general surfing using an iPhone rather than a laptop. Therefore, find out how your site's users interact with content and develop accordingly.
Nielsen says that a dedicated mobile site with fewer features is best. This should be optimised for smaller screens and pointer/finger-based input, with links to the 'main' site for users who require more advanced features.
However, a client may balk at the cost and there is another way. During a refresh, ensure the main site has clean, semantic markup and a layout driven by CSS, then create a style sheet specifically for mobile (using relevant code to 'sniff' mobile browsers such as Safari that effectively consider themselves desktop browsers).
It'll be the same site, but you can simplify the design and make content more readable and usable for mobile devices by adjusting text size and the positioning and visibility of page sections.
East goes further than that, arguing that designers should take advantage of a refresh to make a site work on everything: "Not just IE, Firefox and iPhones, but other mobile devices and the Nintendo Wii. It could be years before your next refresh and web-enabled next-gen TVs will arrive before then. Don't deny them access!"
Perhaps an awareness of that simple fact – that the web was always supposed to be about accessible information – is the biggest advantage you'll have this year when it comes to reworking websites, whether for yourself or your clients.
First published in .net Issue 188
Liked this? Then check out Tomorrow's trends in web design revealed
Sign up for the free weekly TechRadar newsletter
Get tech news delivered straight to your inbox. Register for the free TechRadar newsletter and stay on top of the week's biggest stories and product releases. Sign up at http://www.techradar.com/register