It used to be that the only devices supporting web pages were desktop computers with similar sized screens. Then came mobile devices. The resolution and size of the screen grew with leaps and bounds. 4K resolution and 32 or 42 size screens are commonplace. Now we have watches. Who knows what the future will bring. The future of the web is not necessarily tied to the browser window that you are using to code your designs. Chances are that it’ll be mobile or spanning multiple screens. Covering those screens, as this page does, from small to large, requires a complete separation between content and form, so that the same content can be rearranged to fit different viewports. The link is to the website, CSS zen gardens, and illustrates the separation between CSS and HTML, form and content, originating in 2003 to demonstrate the power of CSS.

Different devices and markets will use HTMl and CSS for all kinds of purposes. The content needn’t be displayed on a browser. Web services like Facebook, Twitter and the like have taken over a big chunk of the web, bypassing the browser, but still use the HTML and CSS display language.

And users create preferences for high contrast, dark mode, reduced motion, and more, so being responsive goes well beyond changes in the size of the viewport: the new responsive web design in a component-driven world

Scalable and Adaptive Designs

The task of the designer is to provide a consistent user experience across all these possible media. You need to see that the core information of the website remains accessible no matter what the device or how disparate the user. The Apple’s watch has a viewport of 320 x 357 pixels and large monitors eclipse 5K or five thousand pixels. The website needs to look as if it were designed for that specific screen be it postage sized or take up the entire wall of a building, for use with a mouse, voice commands, remote control, or a stubby finger.

Rethink Your World

A stubby finger is a lot different to design for than a mouse driven computer monitor. What does the User Experience look like to your fingers? How to greatly simplify the interface so it adapts to the ends of your fingers. Take another look at Apple’s human interface guidelines for all of their devices including mobile.

What makes for a good mobile site?

Google conducted a research study to answer this question.

The key takeaway:

Mobile users are very goal-oriented. They expect to be able to get what they need, immediately, and on their own terms.

How

The first attempt at responsive design centered on the em as a relative measurements connected to the font size of the document. Next was was to build entire websites using percentages: responsive design . Then they introduced media queries. That changed everything.

Twelve years on the web has expanded in myriad ways. People use CSS grid to build responsive websites and container queries. Who would have known? I can only assume that progress will continue and that there will be more ways to make the web responsive to its devices and users.