graphicPUSH: Futureproofing Websites

Futureproofing Websites

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.

Width Management

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

With more and more content being delivered over mobile, using Flash for gratuitous animating flangdingies, useless scrolling bizzfnoggles, rotating banner jimmyjams and other thought-retarding “wow factor” will become even a worse idea than it is now. Proprietary plug-ins suck. Bandwidth-hogging files suck. Inaccessibility sucks. Let JavaScript libraries do the cosmetic work, and save Flash for the areas where it really shines: video delivery and banner ads with dancing wizards.

HTML 5?

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.

Socially Acceptable

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.

301

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.

Comments.

Robert: wrote the following on Monday June 15, 2009

What’s so lame about:

1. Not using a technology that is unsupported in the most popular browser (and instead opting to utilize a cross-browser solution)?

2. Not using a technology in a transitional mode that renders differently than when in non-transitional mode (that you can’t use 100% of the time because the most popular browser doesn’t support it)?

Calling someone out for having a “lame” argument really sounds much better if you provide good counter arguments (or any at all would suffice).

For the record, here is your site served as application/xhtml+xml like it ought to be if you really feel like you are a proponent for XHTML: http://robertdot.org/files/graphicpush.php

I’m not saying XHTML is bad. Every tool has a function. By 2006, when I wrote the blog post, XHTML’s functionality in practice made it a good tool in a limited set of circumstances. Three years later, I’ll still stand by the arguments I made in my lame blog post until someone comes up with something better (like X/HTML5).

Raina Gustafson: wrote the following on Saturday August 8, 2009

I feel your pain in terms of watching a client shoot themselves in the foot. I’ve been through that with San Francisco web design clients, too. I’ve even taken them back after they felt the pain of having their meta data, traffic and sales crippled -- only to have them walk away again when I wouldn’t entertain their desire to imitate a competitor’s all Flash site.

I was raised with the ‘if you don’t have anything nice to say don’t say anything at all’ mentality, and it’s really hard for me to stand my ground sometimes. But as you’re suggesting here -- far better to channel our energy into productive activities for ourselves and clients who recognize (and reward) the value we provide!

Blind Acre Media: wrote the following on Thursday October 1, 2009

You bring up very valid points. I have found it helpful to subscribe to media and technology newsletters to keep up with changing trends.

I also tell my clients from the beginning how important the layout of their website is including easy navigation, organization and search engine optimization. If they are weary of seo, I show them examples on how it can improve their business…that usually works.

Great article.

Joey: wrote the following on Monday October 5, 2009

Think we’ve all had this happen to us at some point – on the positive side at least your name wasn’t at the bottom of the page in the credits.

A similar but worse situation is when a new client says that they want a website similar to the dated / ineffective one you described, and won’t take no for an answer. You have to learn to just grit your teeth and start designing sometimes!

graphicpush

Futureproofing Websites

Mobile Style Sheets

Width Management

Microformats and RDFa

The F Word

HTML 5?

Socially Acceptable

301

Comments.

Metadata.

Synopsis

Tags

Socialize

Sponsors

Job Opportunities

Supporting