As web continues to evolve, it is harder than ever to build sites that remain technically relevant. Here are some tips in architecting designs that meet the needs of the visitor community now and in the future.
Recently, I had the pleasure of discovering that a former client of mine completely redesigned the website I had designed and built some years ago. At some point, this happens to all freelancers and agencies; a client pursues another vendor without telling you, for reasons you’ll never know. This is, like, whatever. But what irks me is that they replaced my version with a code-bloated, table-driven leviathan that utterly fails whatever test of best practices you want to measure it against:
- 515 Kb page size (38 Kb just for the HTML)
- 7.08% code-to-content ratio
- Tables nested up to eight levels deep
- No accessibility, and metadata that sucks donkey tail
- All old URLs now generate 404 errors
We’ve all seen websites that go from great to suck. These sites have taken a massive step backward in time, and have become less accessible, less findable, less manageable and ultimately less prepared for the future.
Which begs the question: what can we as website builders be doing to ensure our work greets with open arms the next generation of browsers, search engines, and social networking tools? Of course we can create designs that rock, but this is subjective; if the CEO’s wife gets tired of the design, you’re screwed no matter how much awesome sauce you poured on it.
Instead, what are the tactical development tools we can deploy today to build for future browsing technology?
Mobile Style Sheets
Media-specific styles sheets are the new style switchers. Forget changing colors on your website; trade in the gimmicks for serving Crackberries, iOwnz and Palm Pees versions of the site that work effectively on a small screen. Not sites that can be stretched and rotated and pinched for squinty viewing, but sites that actually take advantage of the CSS-friendly environment while optimizing the design for reduced real estate. Example: foxnews.com is awesome on an iPhone, but bbc.co.uk is a nightmare.
The trend toward netbooks shows that people are acutely interested in smaller, cheaper, web-powered devices. The average screen size for the leading models is 10.1” — a resolution of 1024×600. Yes, some d0rk5 have rows of 1600×1200 in their home office command center, but the world is regressing in screen real estate, so keep those designs nice and tight.
Microformats and RDFa
The age of embedded data structures is emerging from the paleozoic, and we’re entering the phanerozoic. If you are not already using microformats in your work, best to start now. The recent endorsement by Google is big (maybe), so take a cue and complement your standards-friendly HTML with a layer of truly semantic markup that makes your work more findable.
The F Word
A lot of recent noise about this one. All kinds of people regressing to HTML 4 and using semantic class names, all in the name of getting ready for HTML 5. (Others are justifying their choice for lamer reasons, but whatever.) I don’t fully understand this trendy backlash against XHTML; in my mind, an XML-driven web is the future, but too many people are globbing onto HTML 5 and just not letting go. There are not a lot of tactical to-do’s here except pay attention.
As search and social media aggregate more and more of the Intarweb’s traffic, it is imperative to produce findable and shareable websites, and then providing the means to quickly share that content. Providing links to 900 social bookmarking apps is a start, but providing easy access to e-mail notifications and RSS feeds will be as important as ever. (This thing does a pretty good job if you don’t feel like rolling your own.) People continue to spend more and more time inside “social media” applications, so make sure you get part of the action.
This is the gotcha that too many sites fall into. I’ve seen libraries of good content become utterly lost when the website was redesigned, the URL structure changed, and nothing was ever redirected. This is especially problematic for media sites, where news articles simply disappear without explanation — sometimes within days of publishing — and it takes deep archive spelunking to find them.
These are just a few of the things that struck me going through this rebuilt client site as they utterly failed on every front.