The Dimensions of Web Design

The 5-dimensional Web

Today’s web has at least five dimensions:

1. Width
2. Height
3. Time – Site content is constantly changing and being added.
4. Hardware – Content needs to be usable on a variety of devices.
5. Software – Different users have different browser capabilities and settings.

Good websites embrace this complexity as a competitive advantage. Bad websites try to do things the old way and it doesn’t work.

The best part is that this mindset actually makes it easier to design websites. Taking advantage of the web’s best qualities means cutting with the grain*. Going with the flow. If you’re fighting to put a square peg in a round hole, you’re probably making your user experience worse anyway. Learn to let go and do things the web way.

Welcome to the future. The web is 5-dimensional. Here is your hypercube. Now let’s get to work.

*I mean like wood, not steak. Cut against the grain of steak so it’s more tender.

Content is God-Emperor

Let’s start with a goal. Every website has a different purpose, but it can always boil down to providing content. Even web applications like Gmail provide content: the added complexity is that you can interact with and create content as well.

Since all websites present content, all websites should do it well. Content should be easy to find and easy to understand. Content is King. In fact, Content is God-Emperor of Dune.

#1 goal of web design: Make it easy for people to find and understand your content.

Design is not just “make it look pretty”. Pretty things are good because they work better, but that’s just one way design can help you meet your goals. Good web design can make information easier to understand. It can make content easier to find. It can make it clear what you’re expected to do. It can inspire trust.

There is a lot that goes into designing good websites. The Elements of User Experience is a great book to read if you want to start at the beginning.

The Width and Height Dimensions

Web sites that stretch to fit different browser sizes have been around forever. We’ve called them fluid or liquid layouts for over 10 years. It was always a good idea. The primary thing that has changed is the explosion of mobile. Now fluid layouts are more appealing than ever.

In that case, what’s actually new here? Responsive Design is the new buzzword, but media queries are the new tech, since they let you serve CSS specific to the situation. Besides that, most of the layout is still being cobbled together using floats, percent-width columns, max-width images, and so on.

Media queries let you do a lot of things. But to be honest, the most important part is checking the viewport width. For example, you can use media queries to show a different number of columns for different screen sizes. It’s actually super easy. Well, it’s easy as long as your design process is willing to accommodate it. Think about this from the start: it’s much easier to design a layout where the number of columns can change than it is to take a static layout and figure out how to compress it onto a mobile phone. This is one reason why designing your mobile experience first is such a good idea.

The Time Dimension

Content changes. Even if you’re making a static site for a coffee shop, it’s likely their hours will change, or they’ll start serving breakfast, or they’ll get sued and have to change the “McMuffin” to the “Independently-operated Non-franchise Muffin”.

Content tends to expand. The web has the convention of vertically-scrolling sites for this reason. There is infinite room to expand vertically when new content is added, just as the site can stretch horizontally when the browser is resized.

It’s not just about adding new posts to a blog index, though. Your navigation was carefully designed with the whole of your content in mind, I assume? Every time your content changes, you need to make sure your navigation still makes sense. If you already have “Cocktails” and you’re adding “Beers”, maybe you should consolidate both into “Drinks”. Don’t just add new things wherever there’s space or eventually you’ll get a cluttered mess.

Part of this is doing the right thing when your content changes. Another part is making a design that can easily accommodate change. For example, lets say you have a menu that is 10em wide. You have to add a new menu item, but the text is longer than 10em. How easy is it to make this work? Do you have to change the CSS in 20 places to make the columns different sizes? Do you end up making the font size smaller to make it fit, despite the fact that the font size was already perfect? A good design is ready to evolve. A stylesheet language like Less can help you avoid redundancy, which makes the design easier to maintain.

The Hardware Dimension

We’re used to varying screen resolutions, but displays are increasingly variable in even more ways. With different pixel densities, aspect ratios, and physical sizes, it has become impractical to design for specific configurations. It’s more important to focus on adaptability in general. Make sure the font sizes are big enough on small screens. Use the viewport meta tag. Consider scalable graphics with icon fonts and SVG: these will not pixelate on high density displays, such as Apple’s Retina Display.

Touch input is a major consideration for mobile, and even some non-mobile displays. It’s important to use large enough touch targets: Microsoft suggests at least 38×38, Apple suggests 44×44. You don’t have to think of this as chore that’s just for mobile users: big targets are nice when using a mouse too. In the end, making sure your UI elements are properly sized will be helpful everywhere.

The Software Dimension

Different browsers, especially different versions of browsers, have different features. The nice thing, though, is that most of these new features were designed to not break the page if the browser doesn’t support them, or if the user turned them off. Progressive enhancement is the strategy of starting with the basic content and functionality of a page that works anywhere, then layering on enhanced features when supported. This works for fancy HTML5 application features like Geolocation and WebSockets, but it also works for design. CSS3 contains a lot of cool new properties for fancy styles, but you should always make sure your site works without them.

Modernizr is great for writing CSS that is aware of browser support. It adds classes to the html element that explain what features are and are not natively supported. You can use these classes in your CSS to write styles specific to different situations.

The ultimate test of Progressive Enhancement is to view your site with a screen reader, or at least with JavaScript and CSS disabled. If it’s still useable, you’re probably on the right track.

Things that get in the way

By learning to let go, web design can be easier than ever. It’s very Zen, don’t you think? Sure, we’re dealing with more variables than ever, but the technology and tools have improved so much! Let’s look at some things that just get in the way and waste your time.

It must work on old browsers!

Supporting old browsers can make a project take several times as long as it would otherwise. It’s easy to say “We have to support IE7, no matter what!” It’s hard to say “We have to support IE7, even if it takes 8 extra weeks of development time!” Be realistic about what browser support does to your schedule and costs. I’m not saying you should never bother supporting old browsers. I’m saying it’s a tradeoff that requires careful consideration.

It must look the same on all platforms!

You’ll never get your site to look the same on all platforms. And that’s fine. Remember goal #1: make it easy for people to find and understand your content. Users don’t care if your site looks slightly different in someone else’s browser. If you’re worried about consistency, make sure you can tie that worry to a real objective. How much does it matter? Is it worth the additional development cost?

Look at platform inconsistency as an opportunity to look and behave in a familiar way. Some input controls look different on different browsers. This reflects the user’s choice to use a certain browser over another, so you should embrace it. In OSX, using touch input, you can scroll the site in a way that shows a gray background “behind” the site. I’ve actually seen people try to prevent this in their web designs. This is part of how the user’s operating system works, it’s what they’re used to, so you should go with the flow.

Pixel Perfection

Pixel perfection doesn’t matter, and is harder than ever. On a 1024×768 display there are 786,432 pixels. On every possible display between 240×320 (HTC Tattoo) and 2880×1800 (Apple 15″ MacBook Pro) there are 6,455,828,464,800. There are too many pixels. If that menu item is 2 pixels to the left in Firefox, will users have a harder time finding it? If you just focus on the content, you may find that some little tweaks just aren’t that important.

Magic Ratios

Did you know the Google homepage is perfect because it uses the golden ratio to achieve ultimate Feng shui? Actually I just made that up. Relying on magical ratios and proportions is superstition. Your web design is a way to display your content, and your content probably doesn’t adhere to a mystical formula. Maybe the number 1.61899 is particularly beautiful, but don’t prioritize it over your content. If a column needs to be wider to fit the content, just do it.

Conclusion

Design for the web is tricky because there are a lot of variables, and a lot of organizations just aren’t used to the new way of doing things yet. We’re all evolving though, because the web is evolving, and if we keep up, we’re rewarded with an incredible new way to access any information and do anything, anywhere. Even in the fifth dimension.