As a web designer with a couple decades of experience, I’ve witnessed the transformative journey of the internet. In the early days we were building static pages by nesting tables and laboriously adding font tags to every single line of text. We already had to check and double-check whether or not our websites were looking sharp in different browsers (shout out to those 640×480, 800×600 screen resolutions!) but when mobile devices became more popular, we had a whole new frontier to conquer.
Håkon Wium Lie first proposed CSS in 1994, but responsive web design didn’t become mainstream until 2010, and even then it was a battle! It was tough to convince some clients that their websites needed to be viewable on phones and tablets.
Liquid Layouts
I first got into Liquid Layouts, created and popularized by Glenn Davis. He was the founder of the Web Standards Project and I remember listening to him and Jeffery Zeldman talk about how rapidly the web design space was changing.
Liquid layouts were helpful in that they allowed us to define the regions of a page that could resize and reflow to accommodate different screen sizes. It was revolutionary, but it wasn’t a perfect solution by any means. The content could still overrun its area and the text could break, especially on smaller screens. And as screen resolutions got bigger, we sometimes ended up with wayyyy too much white space, making the content difficult to read.
Resolution Dependent Layouts
Something I found too cumbersome to employ often was the idea that we could use JavaScript to call different stylesheets based on the user’s screen resolution.
It was a really cool idea, first popularized by Cameron Adams way back in 2004. It was more work for web developers, but it almost functioned like the current CSS breakpoints before they had been invented.
If we were working on really big sites, it often meant we had to write multiple stylesheets for every possible screen size. This began to feel like we were going backwards and reminded me of the days when we had to manually update hundreds of static HTML pages whenever a menu item changed. Plus, we ran into a lot of headaches if users had disabled JavaScript in their browsers–worse back than the many different browsers handled code, including JavaScript in different ways.
Mobile Subdomains
Speaking of headaches, I think I might have PTSD from the popularization of mobile subdomains.
Right when everyone started carrying a Nokia or Blackberry around, we had an even bigger challenge. Screen sizes and screen resolutions had been growing, but all of a sudden they started shrinking. The iPhone came out with its own browser and I swear, the world imploded. Just kidding… it was really neat! But also caused a lot of developers to bang their heads on their keyboards.
In an attempt to make sites accessible on the explosion of mobile devices, we started creating a mobile-specific site, often hosted on a subdomain. If you visited Facebook on your desktop, you’d be taken to facebook.com. But if you visited it on your handheld device (this was before apps!) you’d be redirected to m.facebook.com.
Mobile subdomains remain in use today and, I grudgingly admit, they still offer some advantages. They ensure swift loading and reduced mobile data consumption. This approach allows developers to fine-tune SEO for mobile devices, driving more traffic to the mobile site.
However, there are downsides, including the need to maintain two separate websites and potential user frustration when being redirected to mobile versions–if you ever clicked on a m-dot link on your desktop you might have find yourself scratching your head. Why did Facebook look broken? Because, my dear, you were on the mobile site.
Developers historically used techniques like checking user agents and browser window width to manage redirection, but with the evolving device landscape, this led to the development of modern responsive web design, which builds upon past practices to create a more versatile solution.
Responsive Web Design
Responsive web design began to gain prominence in the late 2000s as the standard approach for ensuring websites functioned seamlessly on various screen sizes.
In 2010, developer Ethan Marcotte (also a member of the Web Standards Project) introduced a groundbreaking concept in a A List Apart article, which proposed a new framework for flexible web design. This framework, now widely recognized as responsive web design, comprises three key elements: fluid grids, flexible images, and media queries.
Ethan combined the most ingenious techniques of the past. He initially delved into the realm of flexible grids, a well-established best practice in web design. By diligently coding fluid grids to adapt to varying viewport widths using percentage-based grid columns and strategic styling, he achieved a significant milestone—creating websites that remained functional on both desktop and mobile browsers with a unified CSS codebase. While mobile viewing might lead to a snug fit, it ensured content remained accessible.
However, challenges persisted, particularly with images that often extended beyond their designated containers. Marcotte tackled this issue by incorporating the flexible images technique, introducing a straightforward CSS rule to resolve the matter.
img {
max-width: 100%;
}But I think Ethan’s crowning achievement was the introduction of media queries, inspired by Cameron Adams’s aforementioned resolution-dependent layouts. With the emergence of media queries in web browsers, Ethan recognized an opportunity to create adaptive layouts without relying on complex JavaScript solutions, embracing the evolving capabilities of CSS.
This groundbreaking concept enabled the establishment of one set of styles for smaller screens and another for larger screens, eliminating the need for distinct codebases. Media queries allowed developers to craft a series of rules for devices below a specified width, such as 400 pixels, and another set of rules for larger devices. This resulted in two distinct designs within a single codebase, with fluid grids and flexible images seamlessly accommodating everything in between.
Responsive design emerged as one of the most significant breakthroughs in web design history, building upon the work of the past and embracing the innate adaptability of the web.