Responsive design ensures pages are accessible and visually appealing across a variety of devices and screen sizes.
Whether viewed on a large desktop monitor, a tablet, or a small smartphone screen, the content will adjust to fit the screen size without losing functionality or readability.
This approach is important because it enhances user experience by providing consistent and optimized viewing, regardless of the device used.
Additionally, responsive design is beneficial for search engine optimization (SEO) as search engines like Google prioritize mobile-friendly websites in their rankings. By ensuring that all readers can access and interact with web content seamlessly, responsive design helps to reach a broader audience and accommodate the diverse ways people access the internet.
When planning responsive design, consider your audience’s age group. As people age, they become susceptible to various visual impairments, such as presbyopia (inability to see up close), cataracts, galucoma, and retinal degeneration. Styling type and images to be large on small cell phone screens makes a web page more legibile for older audiences.
“Page responsiveness” could be thought of in three zones, as listed in the table below.
| Responsive Design Strategies for Common Screen Sizes | ||
|---|---|---|
| Screen Width | Description | Responsive Approach |
| Full width (Desktop) |
A fixed-width page is set to 928px width, and the full width can be seen on a desktop monitor. | not needed |
| Reduced width (Tablet) |
The same page is viewed on a narrower browser window or tablet so that part of the content would be cut off. | Use of the “supplementary style” max-width shrinks the page width to match the browser window size. |
| Smartphone (≥750px) |
Assuming readers have an iPhone 8, SE, or newer, or equivalent Android phone, cell phone screens can be assumed to be 750px wide. The window can be styled to fit within the phone’s screen width using a media query. | use an @media query, e.g., @media only screen and (max-width: 750px) { [styles for cell phone] } |
Some beneficial styles for smartphones via the @media query include:
- making images full-width, e.g., width: 100%;
- increasing the type size and line leading
- stacking menu bar selections
| Variable Measurements | |
|---|---|
| Measurement | Description |
| % | percent of enclosing tag (cannot be used for height) |
| vw* | viewport width (0–100), percent of the browser window width |
| vh* | viewport height (0–100), percent of the browser window height |
| * vw can be used for height measurements, and vh can be used for width measurements | |
The blue <div> below was set to width: 100%, while the green was set to width: 100vw. Note that the blue div is 100% of the width of the enclosing tag, while the green is 100% of the browser window (“viewport”) width.