The Web Is Not Print

The Web is the Web
When we first started our company in 2004, Flash websites were not only popular, they were awesome. Everyone wanted to create a moving, sound-emitting website “experience” for their visitors, and we knew how to give them what they wanted. My partner, a film major in college and an all around creative person, was always pushing for more “show,” more movement, and more of the “experience.” I’d tell him, jokingly, that “it’s a website, not a movie.” Even back then, we believed that there were specific uses and functions for websites, and that websites were certainly not movies. We pushed in the direction of a great experience, but we never sacrificed quick and smart access to information for showy fluff.

Now, almost 8 years later, it would appear that everyone has realized that websites aren’t movies. Now that people are used to browsing the Internet, they want and need certain things to stay interested. Nearly everyone (except the restaurant industry) has done away with intro videos and sitewide music, but it’s still really hard for people to break away from another medium that the web tends to impersonate. Print design.

The Web is Definitely Not Print
At their core, print and web are very similar. Both mediums convey a message, both aim to lead the viewer around a “page” or “canvas,” and they both need good design to do so. The web, though, has a number of really useful traits that print doesn’t have- things like an unlimited canvas size, the ability to hide and show information, and the ability to adjust design based on user preference- to name a few. The boundaries of print design are defined by the medium’s lack of these traits. As of today, those same boundaries are (for some reason) being placed on web design.

What I’d like to propose is that the web doesn’t have the inherent boundaries that print has, so we need to stop treating web design like it’s print design. We need to stop thinking about the web in terms of print, and we especially need to stop talking about the web using print terminology. Remember (and I know it’s hard), that the web is not print.

Even though there are a lot of reasons why the web should not be thought of in print terms, I want to focus on a couple important reasons just to get you thinking.

The Canvas
You know why we call it a “web page”? It’s because we’re referring to a page, like a page of print. A page, however, has a fixed size. It has edges that limit it because it’s physical. In print design, if we have a lot of information to get across to a user, and we only have a small page, we’re forced to shrink all of the information to fit on that single page. Good designers know how to organize that information so that it still looks friendly, readable and carries a brand, but at some point the limits of a physical page can really hurt an otherwise perfect set of information.

A website, though, in a browser window, is a virtual and essentially limitless space on your computer monitor with no such constraints. Clients are always asking us to keep information “above the fold,” even if that means shrinking font sizes or reducing image sizes. But when designers try to cram information above the fold on one computer screen, another smaller screen still hides information and a larger screen looks empty with a ton of white space at the bottom. The web isn’t meant to have a fold. It’s movable, and it’s meant to be interacted with.

The Andersson-Wise website is a great example of how a design should react to screen size, not be constrained by it. Resize your window to different proportions to see it in action.

Instead of treating a website as a page, it’s better to think of it as a window– a window that looks into a sea of information that can be scrolled, moved, scaled, etc.

User Preference and Control
Another trait that print lacks is the ability to cater to user preference. Some like their words big, others very tiny. Some even prefer to read text that’s white on black, so it’s easier on the eyes. The modern browser allows us to control these things, but the modern web designer tries as hard as possible to override these settings, sticking to a strict, pixel-based font size and a fixed site width. We even purposely cut a design off on each edge and leave a bunch of unused “background” just because it’s a constraint that we’re all used to. (Don’t get me wrong, I know we have to do these things sometimes, but hopefully you’re starting to get the point here.)

That’s only one example of a user preference. Think about the user who has thirteen windows open on their screen at once, so your website is only a tiny square in the corner of their screen. Where’s the fold for them? How’s your font size look there?

And what about mobile?!

The Point
The point here is not to run out to your web design firm and overhaul all of your fixed-pixel font sizes, opting instead for a percentage-based font system that scales to a user’s browser window. (That would be awesome, though.) The point is really to start looking at the web as the living, breathing, interactive organism that it is. The more your users control their experience, the happier they are. It’s scary as a designer, as we tend to be control freaks, trying as hard as we can to finesse each and every pixel until our composition is “perfect.” But we need to design for the unknown. It’s even got a name: Responsive Design. Some consider it a zen-like philosophy towards web design, because it just goes with the flow. One “design” can work on a huge TV screen and on a tiny smartphone equally well.

I’ve found that the challenge of creating a design that can move and react and still look great is exponentially more fulfilling than creating a static, non-changing, single layout. Learning to embrace the spontaneous design moments that happen as our images and text slide and scale is essential to a more user-friendly and evolved World Wide Web. It’s more challenging, but it’s more rewarding. The sooner we all stop thinking about the web as print design, the faster the web can progress as its own new and different medium, with its own set of capabilities and possibilities.

Additional Information

Andersson Wise – a great example of what the web can be and where it’s going.
http://anderssonwise.com/

Responsive Web Design by Ethan Marcotte – If you’re a coder and are interested in responsive design, this book is a quick read and a great resource… in fact, the author coined the term “responsive design.”
http://www.abookapart.com/products/responsive-web-design

A Dao of Web Design by John Allsopp – Great article (from 2000!) that explains some philosophy relating to the web as its own medium.
http://www.alistapart.com/articles/dao/

For designer/coders – A Smashing Magazine compilation of tricks and techniques that we’ll start to see as more designers start embracing the web for what it really can be.
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/