The Evolution of Responsive Web Design: From Desktops to Smartphones

ETHAN MARCOTTE AND A LIST APART

“But the landscape is shifting, perhaps more quickly than we might like. Mobile browsing is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.” — Ethan Marcotte, Responsive Web Design, A List Apart

SO, WHAT EXACTLY IS RESPONSIVE WEB DESIGN?

“Responsive web design (RWD) is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google’s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images). Responsive design serves all devices with the same code that adjusts for screen size.”

FIXED VS. FLUID VS. ADAPTIVE VS. RESPONSIVE

THE CORE CONCEPTS OF RESPONSIVE WEB DESIGN

“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.” — Ethan Marcotte, Responsive Web Design, A List Apart

WHAT THE FUTURE HOLDS

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store