1. Start with the idea.

Start simple: write one or two sentences that define what people should take away or what action they should take. For example:

“I will show people how to tie a tie.”

“People will buy a tie from my online shop.”

When you have a goal, design a site that explains the message you want with no frills.

Above: By “anyone” we also mean “anything.” Old browsers, new browsers, screen readers, search engines, etc.

• Limit yourself to basic HTML elements. No JavaScript. No vendor prefixes. Less exotic = more universal. Less exotic ≠ upgradable.
• Pretend you support IE1. As much as we rag on browsers from previous eras, they’re good for testing compatibility.
• Craft graphics with vectors. It’s a safe bet you’ll need to edit those later.
• Use as little CSS as possible. You can get fancy in part two.

2. Play what-if.

Now it’s time to think about embellishments. How can we provide…? without changing the foundation?

If the user is using a smartphone, what can you do to take advantage of orientation, camera, or having a computer that’s also a phone?

If the user has a giant screen, how can you make use of that extra space? (“for more info…” additional images, larger text?)

If their bandwidth is great, can good video supplement the idea?

If they’re using a particular browser, what nifty features would make the page pop?

If they’re using a mouse instead of their finger, can you give more information or functionality with a useful hover effect?

If the user’s on a screen reader, not a sighted browser, can you change voices to denote different sections of the page (or at least break up monotonous text with with simulated conversation)?

3. Let it fall apart.

Users whose browsers allow special features get a different — an enhanced — experience. Does that mean others miss out? Yes and no. No, they don’t get the extras. But yes, they still get what you’re saying.

---