Responsive Website Today
Published on .
Responsive website cares about the user's screen size. Responsive website is like water. When you put water in a bottle, the water will shape like the bottle. The same goes for a responsive website. When you open it on your mobile device, it fits your device.
Responsive website is a website that is responsive to the user's preference.
The users change the default browser's font size (16px), and the website responds accordingly. If they change it to 20px, then the text should be larger. If they change it to 12px, then the text should be smaller.
The users prefer dark theme, and the website responds by giving a dark theme.
The users prefer not to see animations, and the website responds by stopping all animations.
The users want to visit the website, the website responds quickly by giving the content. In other words, the website loads quickly.
The users make the browser's window smaller, and the website responds by making the text and other elements fit the viewport.
The users prefer more contrast, and the website responds by using a high-contrast color scheme.
The users prefer less contrast, and the website responds by using a less-contrast color scheme. Also, the less-contrast color must satisfy the minimum contrast requirement from the Web Content Accessibility Guidelines (WCAG).
The users use an old browser, and the website responds by giving a minimum-viable experience. That is possible to achieve through progressive enhancement.
The users checked the "Do Not Track", and the website responds by not loading the tracking scripts or cookies.
In the future, if prefers-reduced-data is supported by browsers, the users who prefer fewer data consumption, the website responds by removing things. The things that can be removed are custom font families, decorative images and icons, and other non-essential things.
That is a responsive website today, ideally.
Resources
How a minimum viable experience produces a resilient, inclusive end-product - Andy Bell
What's new in responsive design by Rachel Andrew - YouTube
prefers-reduced-data - CSS: Cascading Style Sheets | MDN