A Web for Humans

If your website faces the general public, it will be visited by someone on a mobile device. In 2021, around 15% of Americans rely exclusively on a smartphone to access the web. What device one uses to access the web is bound up with one's education, income, and race. If you design a web page that looks great on your desktop computer but is unusable on a mobile device, you will perpetuate the inequities that have divided humans for centuries. Do not do this.

You must not assume that your users are like you. Your webpages must support the full spectrum of humans with all their various abilities and in all their various environments. Some humans might need high-contrast colors to read your content. Others might become sick when they see flashing animations.

Beyond the humans themselves, the devices they use have different capabilities. Some graphics cards may only support a limited color palette. Some devices use touch rather than a mouse. Some have portrait orientation, while others have landscape orientation.

One solution to meeting the needs of your various users is to make many versions of your webpage. However, with multiple versions, you soon have inconsistencies. A better solution is to make a single webpage that adapts to its humans and their many devices.

A webpage that adapts to its visitors is responsive. In a responsive web page, you write the content once in semantic HTML and apply styles conditionally. Some styles will make the page accessible to visitors who need high-contrast colors. Some to visitors who don't have a mouse. Some to visitors who are on a small display. If a visitor doesn't need an accommodation, the associated styles are not applied.

Making a web page that accommodates humans must involve the humans that you are trying to serve in the design process. You may not have access to humans in need of visual or physical accommodations. Guessing at what they need is a hostile practice. The readings and exercises ahead therefore pursue the less noble but still important task of accommodating both mobile users and desktop users.

Consider these significant differences between the displays of desktop computers and the displays of mobile devices:

1. Desktop displays tend to be large and are often rotated in a landscape orientation. Mobile displays tend to be smaller and are often rotated in a portrait orientation.
2. Content on spacious desktops tends to be organized in multiple columns. Text may contain inline images. On a cramped mobile device, the content tends to be arranged in a purely vertical stack.
3. Desktop users tend to have a mouse that can hover over elements and point precisely at targets. Mobile users tend to use their meaty fingers, which only touch the screen momentarily and do so with much less precision.
4. More of the content is within easy reach on a desktop display. Mobile users, on the other hand, tend to have to do a lot more scrolling to move around a page.

In the next several readings, you will learn how you can make a single webpage that adapts to these different modes of interaction with responsive styles.