Application: Florida Country Tile

As I explained briefly in the section called “The Design Process,” much of what I do when I design a new web site or print item is subconscious. I can usually tell you on a choice-by-choice basis why I made specific decisions, but it doesn’t come naturally to verbalize the procedures I follow. So, for me to explain how I applied graphic design principles to create a layout for a new web site, for example, is a little difficult unless I have an example to help me break the process into steps.

Enter: Florida Country Tile, a real company and a real client. Florida Country Tile is a small, Florida-based tile and stone installation company whose owners have agreed to let me use the web site design project on which I worked with them as an example here. Currently, the company doesn’t have an online presence; the only real identity collateral it has is the logo you see on the business card in Figure 1.31.

Figure 1.31: The business card of “Ed” from Florida Country Tile

I’ve altered the company contact information on the business card above, but that’s all—other than that, this card is identical to the cards the business uses. As you can tell, this scenario isn’t all that different from the one I introduced at the beginning of this chapter: the organization hasn’t established a very strong visual identity.

Usually, clients have specific ideas about what the site should look like. Depending on the client, these preconceptions can either help or hinder the design process—more often, the latter. However, on this project, I’ve been given free rein to make all design decisions, and I plan to design the site using the principles we’ll cover in each chapter of this book. Hopefully, “Ed the Client” will be happy with the results, and “You the Reader” will get a clearer picture of the design process I described so vaguely earlier in this chapter.

Screen Resolution

In comparison to the fixed-versus-liquid debate, the arguments about designing for particular screen resolutions are much more tame. When designers say that a site is designed, or optimized, for a particular screen resolution, they’re actually talking about the resolution of the viewer’s monitor. The debate has centered around whether or not we should design sites in such a way that people using a monitor resolution of 800×600 pixels could see the entire width of the content area with their browsers in full-screen mode. Given that we must account for sidebars and browser borders, this approach would see us design a content area that’s approximately (or that could be resized to approximately) 750 pixels wide.

As of July, 2006, W3Schools’ screen resolution statistics showed that the number of W3Schools users who set their screen resolutions to 800×600 pixels had dropped, but not to the point that it could be safely ignored—see Figure 1.30.At the time, this resolution still accounted for 17% of users, but that number had dropped by 3-5% every six months for the previous two years. Does this mean that as soon as those displays set to 800×600 have been replaced, we can all start to design sites that are 1024 pixels wide? Hardly. Even if everyone was using a resolution of 1024×768 pixels or more, not everyone will use your site with the browser window maximized.

Figure 1.30: W3Schools’ screen resolution statistics

Although statistics like those provided by W3Schools help to give us reason to design for higher resolutions, the most important factor in web design is the end user. If the web site you’re building is for web professionals and people who are likely to use the latest computer equipment and high resolutions, it may be safe to push the design envelope and create designs that are wider than 800 pixels. The goal, though, is to prevent users from needing to scroll from left to right in order to read content. So, even if you decide to design beyond the 800-pixel standard, do not alienate the few 800×600 users you have by forcing them constantly to scroll from left to right and back again just to read your site’s content. You’ll only make them sea-sick!

The August 2005 redesign of design web site A List Apart provides a great example of how a design that’s wider than 800 pixels can remain accessible to users with 800×600-pixel displays. Even though a horizontal scrollbar displays on the site at an 800×600 resolution, you can see all of the real content without scrolling. At 1024×768 pixels, the horizontal scrollbar disappears, and another column becomes visible on the right, displaying search functionality, topic links, and advertising. This extra column adds functionality and structure to the design of the site, but doesn’t always need to be visible.