06
Aug
10

/Culture/ Futureproof your website

How do you keep your website up to date and relevant, without having to constantly overhaul the design, content and code? Craig Grannell quizzes industry talent about the best ways to ensure your website doesn’t expire through neglect

When it comes to futureproofing your site, the obvious starting point is to write, clean, semantic, standards-compliant code. “Proper separation of content, presentation and interaction means your site’s content will always be available on new devices,” says Opera web evangelist Bruce Lawson. “And if you have to tweak things, such as adding media queries to support mobile devices, it’s easier to find the right place.” But while standards-compliant code may be a necessity, it’s not enough in itself to ensure your site is future proof.

With the adoption of new standards being held back by browser issues, and the growing adoption of cutting-edge technologies like CSS3, a more subtle approach is needed. And the buzzphrase of the moment is ‘progressive enhancement’.

Progressive enhancement begins with a baseline of usable functionality, then increases the richness of the user experience depending on the support for enhancements offered by the browser. “When it comes to futureproofing a website’s front-end, it’s an indispensable concept,” stresses Easy Designs principal Aaron Gustafson.

“Focus squarely on page content and assemble your markup in the most appropriate way. That forms the baseline level of support for all users and will work no matter what user agent or operating system is accessing that content.

“With the baseline established, apply styles progressively, providing varying levels of design based on the capabilities of a user’s system. For some, that may mean more basic typography, and for others a beautiful multicolumn, layered layout using RGBa. Similarly, scripts can test whether they should run before attempting to do so, creating more potential levels of enriched user experience.”

It’s vital not to forget the ‘enhancement’ aspect of progressive enhancement, adds Digital Marmalade managing director Marcus Brennand. “By all means use CSS3,” he says, “but not for a site’s integral parts. The trick is to ensure people using older browsers aren’t aware they’re missing anything, and your enhancements shouldn’t impact on a site’s usability.”

The important thing is to at least start exploring the possibilities. By working with new technologies now, a site is more likely to remain contemporary for longer, without major overhauls.

Furthermore, Lawson notes that browser manufacturers have more impetus to implement standards people demand: “If no one used, say, border-radius, it wouldn’t have been a priority for browser vendors to implement.” That said, he suggests covering all the bases when working with experimental properties, adding whichever vendor prefixes are available along with the current ‘standard’ prefix. That way, you’re covered now and when the specification stabilises.
Access all areas

Gustafson argues that progressive enhancement also solves the oft-moving goalposts of accessibility demands, due to the emphasis on content and the user’s ability to engage with it. However, he suggests keeping tight reins on interface and contrast, ensuring they’re accessible to all.

In the UK at least, things appear to have calmed down in the accessibility space, and while, as Lawson notes “bad legislation mandates specific techniques that can go out of date”, British legislation merely requires you to “not make it harder for people with disabilities to use your site, as long as that requires only ‘reasonable’ adjustment”. Utilising aforementioned good coding practices from the start of your project, along with sensible, coherent navigation and layout, should therefore ensure radical changes aren’t required accessibility-wise in the future.

Less predictable is SEO – something designers wish they could futureproof against, but it’s an uphill task. “SEO is an ever-changing beast,” says designer and developer Soh Tanaka. “There’s little you can do aside from keeping up to date and implementing the latest techniques and strategies. Having said that, if a site’s as dynamic as possible – running on a CMS where content, title tags, etc, can be edited on the fly, and pages can be named in an SEO-friendly manner – it will be flexible enough to accommodate trends SEO will go through.”

Tanaka adds that the only true constant for search engines is relevance: “Search engines want to drive users to the most relevant pages for their searched terms,” he points out “Constantly adding and maintaining relevant content helps ensure quality inbound links and therefore high search engine visibility.”

Pod1 technology and operations director Mark Hopwood adds that search engines now also integrate live search results from the likes of Twitter and Facebook, so sites wanting to futureproof themselves must push out content to appear in these results.

When coding, you also mustn’t forget your team and yourself, rather than solely concentrating on users and search engines. “Always design your work with a view that if you’re not around the next day, someone can pick up where you left off,” says Brennand. He recommends aiming for clean, tidy, commented code, using descriptive class and ID names for CSS, rather than shorthand, to help legibility. “For more complex programming, produce full documentation,” he adds, “and this should be updated during further developments. This may sound obvious, but when new developers get their hands on code, they sometimes don’t maintain documentation.”

As a final thought in this area, Lawson suggests moving as much of your work as possible to open formats, especially when it comes to storage: “Ensure your documents can be imported using a variety of programs, so you’re not tied to one file type supported by one vendor.”
Going mobile

The benefits of open standards versus proprietary ones were starkly thrust into the spotlight with Apple’s iPhone and iPod touch. Despite Flash’s ubiquity on the desktop, a lack of support from Apple devices resulted in many sites effectively being incompatible with them.

And even mobile platforms that do support Flash don’t always provide a great web experience, largely because designers have for years worked on the assumption that monitor sizes will always increase over time – and have therefore designed accordingly.

Mobile platforms and tablets are real game-changers, creating the greatest device divergence in web design’s history. And while smartphones are currently playthings for the relatively affluent, it’s clear that cheaper technology will increasingly have web access.

To that end, anyone interested in futureproofing online projects must be mindful of multiple platforms. With this requirement still new, various methods are mooted.

Hopwood suggests you “ensure the basics work on most phones,” likening such development to accessibility. “If your site loads in a textonly browser, it’ll work on a phone – and your main concern is providing people with access to key functions.”

However, owners of flashy mobile devices expect more than the bare minimum. “Devices like the iPhone are good at displaying most websites, but you’re better off building an iPhone-specific version or an app that provides users the ability to perform tasks or use your services,” says Brennand.

On sites for mobile, Lawson reminds us that standards can again help – “CSS3 media queries enable you to serve styles to specific devices based on attributes such as screen width” – and he notes that utilising vector graphics and SVG is worth considering “because images are drawn mathematically and therefore look sharp on any device”.

Aside from staying away from Flash, a mobile website must take into account the nature of the device (more than likely having a touchscreen interface one interacts with by prodding a finger rather than clicking a more precise mouse pointer) and where it’s used (in places with slower web connections).

“Reduce file sizes where possible, make links and buttons highly visible, and maintain a smaller grid to minimise horizontal scrolling,” recommends multimedia designer Mike Precious. And Fully Illustrated founder Michael Heald adds that when you’re including JavaScript-reliant effects and Flash on websites, you need to ensure they aren’t key to the design or interaction.

“This means when a device that can’t handle the technologies lands on the website, it still offers a great experience.” he explains. “I try to increasingly rely on static visual impact – something that’s viewable on almost every device.”
Design movements

Careful consideration regarding graphic design components should, of course, extend to all platforms, since a site can be dated by its visual appearance alone, preventing it from being futureproof. “Concepts should drive a design rather than trends,” explains Phase 2 Technology senior web designer Samantha Warren. “A popular technique can date a design if it becomes popular during a specific time period.”

She cites the ‘wet floor effect’ that’s currently endemic online, saying reflections of this kind will soon be associated with the ‘Web 2.0’ movement of the past couple of years.

Trends will always exist, tempting designers to cram in as many as possible. Brennand thinks the key to relatively timeless design is to “ensure everything you put in a design and every decision you make through the design process is done for a reason”. He adds that with close attention to detail and solid, well thought-through design, your sites will remain contemporary and fresh as trends come and go.

In terms of specifics, two major fundamental rules for a futureproof creation appear to be: 1) keep things simple, and; 2) ensure your work is relatively scalable.

“I always aim to create layouts that can bend and shift, that can carry amendments, subtractions and new creative elements, and embody a revolution over time without degrading,” says Precious. He recommends considering grid systems, noting that ‘compartmentalising’ works now and will work in the future, enabling quick, simple modifications to a website.

On simplicity, Keith Robinson, creative director of Irata Labs, adds: “Having graphic design that’s easily refreshed is a big help. A clean, classic look where subtle changes can be made to keep things fresh eliminates the need for redesigns.” Heald notes the modular nature of web design means amendments may even only take a few seconds to implement once a new graphic component has been created: “Where possible, I design sites where a large background image makes the most of the visual impact. This enables me to significantly change a site by creating a new kick-ass background.”

Ultimately, though, the main considerations with futureproof graphic design are your client, the brand and the consumer. “Designing for these things rather than any fad reduces the likelihood that radical changes will be needed in the future,” argues Hopwood. “Design trends will always change and evolve, and so it’s most important to focus on the brand values of the client.”
The importance of content

The last element in the futureproofing mix is by no means the least – content. Content is hugely important – and yet it’s something many web designers consider secondary to visual appearance or under-the-hood technical proficiency. Too often, content is something ‘forced’ out of clients, hacked into a site and subsequently ignored. “But to keep a website current and relevant, you must provide constantly updated, current and relevant content – futureproofing technology and design without addressing content is pointless,” argues Robinson.

He believes a maintenance plan should be part of every site’s content strategy. “Plans will vary from site to site, but it’s always important to routinely review and update existing content, and resources should be allocated accordingly.”

With budgets tight in the current financial climate, minimising effort and the need to update is essential. Mike Precious recommends you “stay away from bringing content into the context of a particular season, day or moment in time,” adding that “content without time stamps can maintain more perceived relevance in the long-term”. Regarding layout, the utilisation of flexible grid structures ensures pieces of content can be added or removed without a major redesign.

Increasingly, clients request the ability to update aspects of their own sites, and this should be encouraged. It frees up designers to do what they enjoy most, and provides clients with the means to keep content current. (That said, the content maintenance plan should still involve the designer, who can check to see if content is being updated and advise the client accordingly.)

Having a content management system is therefore a must for most modern sites, although Brennand warns against just taking something off the shelf, without fully considering the ramifications: “A CMS must be as intuitive and user-friendly as the site’s front-end, otherwise a client will struggle and not update a site as often as they should.”

Brennand recommends giving departments access only to elements they’re tasked with maintaining, ensuring clients don’t rely on IT staff for site updates, and providing easily applied templates: “To keep a site’s news current, staff should be able to quickly integrate images or video, and, if relevant, have headlines appear throughout the site – all managed efficiently via a straightforward interface.”

Advertisements

1 Response to “/Culture/ Futureproof your website”



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Categories


%d bloggers like this: