Once upon a time, web design was relatively uncomplicated: you’d design one website; it had to work in Netscape, and it had to work in Internet Explorer. So, you take your print design, make a few changes to fit the landscape shape of the screen, cut up your graphics, and a few cross-browser checks and tweaks later, you had a site. Those were the good old days, albeit, not all that long ago.
Before long though, it got a bit more complicated. New browsers like Opera, Safari and Firefox started hitting the scene. And with them, the screen size also changed, and it changed fast. The perfect site you designed for a 640 x 480 display suddenly looked like a tiny box floating in the empty sea of space that’s now your 1280 x 1024—or larger—display.
And then there was the sudden onslaught of “alternative devices” that may be used to access your site. Just when screens were getting larger and your sites had more and more real estate to build upon, there’s suddenly the three inch screen—the cell phone, iPhone, Blackberry and all the other handheld devices that are now likely to be visiting your site.
So what’s a web designer to do? Well, first thing is—change your mindset:
-
The concept of rigid site design is gone.
-
You can no longer think of your website like the design you drew up on a sideways sheet of paper.
-
Your site has to be served up in a plethora of browsers, screens of vastly varying sizes, and a multitude of devices that may or may not support your favorite technologies.
-
Some devices support Flash; others don’t. Some support background images; others don’t. And some devices may not support images at all.
So we need to stop thinking of your website as a layout. Rather, think of it first as a map. The foremost purpose of your website is to disseminate information to your site visitors. Actually this has always been the case, but as designs got more interesting and as capabilities expanded, the focus on aesthetics began to move to the forefront while the primary mission—the organization and presentation of quality and relevant information—began to move back, sometimes becoming secondary to design and aesthetics.
For the last several years I’ve seen many designs begin first with a piece of sideways paper and a drawing. But now, with the influx of small screens and text-based devices, the organization of information, simplification of navigation, and rich text content are again moving to the forefront of web design. In a way, it’s a step back to the old days when websites were mostly text based pages sprinkled with a few graphics here and there. Back in those days, the first thoughts were “sitemap” and “content.” The focus was to segregate and organize the information so a series of simple text-based links could be easily read and followed to find and retrieve rich and relevant information.
So how does this affect web design and how does this require a change of mindset? It’s back to the basics—a return to some good old-fashioned, old-school thinking (as if web design could actually be old fashioned). Before you begin with your sideways sheet of paper, refocus on the purpose and mission of the website and answer the following questions:
-
Which audience does the website address?
-
What information does this website need to present to be relevant to that audience?
-
How can this information be best organized to help visitors find what they are looking for with the least number of clicks and unrelated reading?
-
What is the best information I can put on the site to make the trip to this site worthwhile for those who come?
If you answer these questions before even thinking about aesthetics, you’ll have a solid base upon which everything else can be built. You’re far more likely to develop a well organized, content rich site that’s easily adapted for all the various output devices you’ll want to support. And there’s an added benefit: well-organized, content-rich sites rank far better in search engines. So this not only ensures your site will be flexible, it’s a good SEO practice as well.
This explains the basic concept: one website. The one website you need is the one that addresses the core questions above. Now what about: many designs? The many designs are the various designs you’ll need to create in order to tailor the display of that one website to function well on each of the various platforms and devices that visitors may be using to access your site.
These questions will be further addressed in Part 2: The Platforms and Devices, review of the browsers and various types of devices you should consider supporting, and why or why not you may choose to do so.