Designing for the Web: The Basics

There’s an old legend in the world of football that says Vince Lombardi, head coach of the Green Bay Packers, started every season with a speech to his players about the game of football. He began the lecture by holding up a football and saying, “Gentlemen, this is a football.” He proceeded to describe its size and shape, talk about how it could be thrown, kicked, and carried. Then he’d point down at the field and say, “This is a football field.” He’d walk around, describing the dimensions, the shape, the rules, and how the game was played.

The message from the two-time Super Bowl-winning coach was simple: to truly be effective at anything, one can never forget the basics. This simple demonstration stripped away the complexities of the game and reduced it to its essence. In doing this, Mr. Lombardi refocused his team’s attention on what was truly important about succeeding at the game of football.

Taking a cue from Vince Lombardi, I’d like to conduct a similar exercise for you: Turn on a Web-enabled device (PC, laptop, tablet, mobile phone, etc.), open the Web browser of your choice (Safari, Chrome, Firefox, Internet Explorer, etc.), type in the address of your favorite Web site, and behold — this is the Internet. The Internet is a series of interconnected computers, called servers, that enables companies, brands, organizations, governments, religious groups, and individuals to share information on a worldwide scale in real time. The World Wide Web, or Web, for short, is actually only a portion of the Internet, which also includes all aspects of computer-to-computer communication like email, messaging, and file serving, just to name a few.

When an Internet user types the address of a Web site into his or her Web browser, the device transmits a signal to a server, and the server responds by sending bits of information back to the computer. This information includes images, raw content, and instructions for the computer to reassemble the layout, called markup (the M in HTML). The computer then takes that information and configures the files based on two things: the markup and styles that came from the designer/developer, and the preferences and limitations of the Web browser and device itself. When a device reassembles a Web page that it has received from a server, the following factors influence exactly how that page appears on the screen.

Connection Speed
The connection speed is the speed with which a computer or device can connect to the Internet and download the assets required to build a page. This has been an on-again, off-again issue through the years. The first computers to connect to the Internet did so with modems that used phone lines, which were very slow, causing the need for “light-weight” pages — pages created mostly of text and color, with few images. Then came DSL and cable modems, making high-speed Internet possible, and Web page design evolved to include large amounts of imagery. Enter the cell phone, and people began browsing the Web with slower connection speeds, until wifi and high-speed mobile connections evolved. While the connection speed of a user browsing a site won’t have a direct effect on how a site looks, it will definitely have an effect on the person’s experience of the site.

Screen Resolution
Not to be confused with the screen size in inches, resolution is the dimensions in pixels measured horizontally and vertically on a screen. Most desktop monitors range from 800 pixels wide by 600 pixels high to 1024 pixels wide by 768 pixels high. Tablets have similar resolutions, while mobile devices can be as little as 320 pixels wide. Because of this dilemma of differing screen resolutions, designers and developers created the idea of responsive design. Discussed further in Chapter 3, responsive design displays different layouts for a single Web page in response to the screen resolution, making it possible to maximize legibility and usability regardless of the size of the screen the content is displayed on.

Operating System
The type of device and version of the operating system (OS) the audience is using to browse a site can have an effect on how a site is seen. The number of operating systems has increased over recent years. Instead of focusing on Macintosh versus Microsoft Windows, designers and developer now have mobile platforms to contend with — iOS (Apple), Windows Mobile, Android (Google) and to some extent Blackberry. A primary difference between operating systems is how typography is handled, including the fonts that are available natively and how smoothly the fonts are rendered. Chapter 6 takes an in-depth look at typography.

Web Browser
The primary Web browsers used today are Safari, Chrome, Firefox, and Internet Explorer, both desktop and mobile versions. A Web browser is an application whose function is to receive layout and styling information from a host and display that information on screen. Because these are different applications developed by different companies, they all interpret this information slightly differently. Added to this, the language that makes up Web styling — cascading style sheets, or CSS — is always evolving; therefore, Web browsers are constantly updating to keep up with the latest styling attributes.

To complicate matters, beyond these inherent system-based influences, individual user preferences also can affect the way a site looks. In this image we see the “Content” preferences in the Firefox Web browser. These controls allow a savvy Web user to change the fonts, the minimum size for type (this is an accessibility feature for users with impaired vision), the colors used for links, and even whether links are underlined. In some cases, these user preferences can even override the design decisions a designer has made for a page.

It is this aspect of disassembling a design and allowing the user to reassemble it under a varying set of circumstances that makes Web design a unique and challenging form of design. These unique factors create added limitation considerations, and new possibilities, for the designer. Dealing with these factors and the potential issues they can cause in the clear communication of a message or a brand image requires a specific process. This book focuses on the three phases of the Web design process — plan, design, and analyze — with each phase aligning with the constituents of a Web site: the user, the designer, and the client.