Universal Web Design
A design for the web should look good on all sorts of platforms, devices, and screens, and be usable for all of its users. In short: A site shouldn’t just look good, it should work. Although recent trends in web design have tried to answer this challenge, they all seem to only focus on a part of the problem.
Before I go any further, I want to make this extremely clear: If a design doesn’t look right or work well, regardless of the way it was viewed, it’s your fault (You are a web designer, right?). If a browser is unable to render your design correctly, or a user is unable to navigate around it effectively on their phone, you have failed at your job.
Now before you call me crazy: It would be ridiculous to say that your fancy HTML5/CSS3 site powered by jQuery should work on your decade-old PalmPilot. However, by understanding your target audience you can make sure that your site works on all devices used by your visitors. If you have any sort of analytics set up on a site, this information isn’t hard to find. By using this information, and checking your site across a multitude of devices, you can make sure that all of your audience has the best experience possible.
If you’re at all current in the web design world, I’m sure you’ve heard about or used what I am describing below. Bear with me, though, because they all play a part in what I’m getting at.
Responsive web design
Yes, that thing with the @media queries. This is a great way to use web technologies how they were meant to be used: HTML for content, CSS for presentation. By making sure your site scales flexibly across a variety of screen sizes, you can cover a large portion of your audience.
Further reading
- A List Apart: Responsive Web Design
- What The Heck Is Responsive Web Design?
- MSDN Magazine: Responsive Web Design
Progressive enhancement
The opposite of graceful degradation. After creating a site that works on your audience’s worst device or browser, add in the enhancements that make it look even better on platforms that support the fancy stuff. Rounded corners is a great example of this. Don’t make a site’s HTML or CSS unnecessarily complicated just to make it look pixel perfect across every device imaginable.
Further reading
- Understanding Progressive Enhancement
- Progressive Enhancement: What It Is, And How To Use It?
- Browser Support? Forget It!
Universal Accessibility
Did you know that about 1 in 12 men are colorblind? Depending on your target audience, a fairly substantial portion of them may have trouble navigating your site because of the colors used.
Online services like this one make it extremely easy to check against any type of color blindness. Beyond color blindness: What about people who are blind? Is your site easily navigated by a screen reader? Making sure your site works for any user is not only easy, but it ensures a better experience for everyone involved.
Further reading
By our powers combined…
This much is clear: The web is in a state of constant evolution. Mobile use is on the rise and expected to overtake the traditional model of viewing the web in a few years (or sooner). Apple’s latest Retina MacBook Pros are dragging us forward into another new realm of pixel density. Amidst all this excitement, however, there are still a huge amount of users who are given a degraded or completely unusable experience when using the web.
A website in its presentation is no longer a fixed absolute, but more of a relative concept with similar features throughout its execution on all platforms. It doesn’t need to be pixel perfect across everything, but it should look good and work well regardless of screen size, pixel density, OS, browser, and whatever limitations a user might have. Although we have best practices to adress these concerns, they only seem to focus on a part of the main issue.
When used together as a coherent set of principles, however, we can continue moving the web forward.