An Introduction to Website Design

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, and 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, 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, Microsof Edge, etc.), type in the address of your favorite website, 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 website 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.

Device
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 Apple versus Microsoft, designers and developers 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.

Screen Resolution
Not to be confused with the screen size in inches, resolution is the dimension 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 — and high resolution, or Retina Displays can reach as much as 3072 x 1920. 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 on which the content is displayed.

Web Browser
The primary web browsers used today are Safari, Chrome, Firefox, and Microsoft Edge, 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.

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 “lightweight” 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 Wi-Fi 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.

This was an excerpt from chapter one of Principles of Web Design by Brian D Miller. For more, order the book on Amazon.