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:
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.