Deconstructing a Decade of Responsive Web Design
Since its initial introduction in 1991, the World Wide Web has transformed from a desktop-only experience to one accessible via dozens of devices. As different screen sizes and situations emerged over the years, from one-handed use to voice interaction, web designers had to find a way to adapt to the change.
Enter responsive web design. The term and technique, coined by Ethan Marcotte in 2010, proposes designing for screens using a flexible foundation that is “meant to be viewed along a gradient of different experiences.”
To commemorate a decade of responsive web design, Ethan Marcotte joined Aquent Gymnasium Academic Director Jeremy Osborn for a deep dive into the concept and its history. Read on for key insights from the creator of RWD — and be sure to watch the full webinar here.
Smart Phones Get Smart
While the Internet of the ’90s and early aughts was designed with standard-sized desktop computer screens in mind, it became clear that a more inclusive approach was needed when the iPhone hit the shelves in 2007. As smartphones gained popularity, Marcotte recalls that clients began to request “iPhone websites” or “m-dot websites,” a process that required a separate code base for mobile. In practice, this led to double the work for developers and a substandard user experience that failed to translate across devices.
The solution? Responsive web design that can flex to fit any device, as outlined in Marcotte’s 2010 article. Using fluid grids, flexible images, and CSS3 media queries, Marcotte’s method showed designers how to specify different style properties based on screen size, resolution, orientation, and other device characteristics.
Marcotte’s article was influential in part because it blended theory and practice into a seamless approach. Take CSS media queries, for example; this browser feature had been in development for years, but his sample code gave readers the chance to see a real-world demo.
“[CSS media queries] allow us to ask questions about the device that’s trying to render our designs and say, are you above or below a certain screen width? Do you have a specific aspect ratio that I need to know about?” Marcotte explained in the webinar. “And so we can say, under those conditions, let’s change the design a little bit. Maybe increase the font size, or add another column, or maybe simplify the layout if we don’t have enough room.”
With this future-proof method, a given design can automatically adjust and scale to any resolution — from giant computer monitors to small smartphone screens and everything in between.
The New Normal
After its debut, RWD was seen by many as a disruptive technology with no shortage of pushback from clients, companies, and even designers. It was a rare example of a technological shift that dramatically affected users and website creators alike, albeit in different ways.
Users benefited from improved readability and a more seamless experience when switching between devices. On the creator’s side, a responsive strategy served to eliminate the need for maintaining two separate websites for mobile and desktop, resulting in lower costs and less maintenance. In addition, as users began expecting responsive sites, organizations began to provide them.
Responsive design’s status as an industry standard was solidified after the 2015 Mobilegeddon, a now-infamous event in which websites without a clear mobile strategy were penalized by Google’s newly-released SEO algorithm. The tech giant took it a step further by formally recommending responsive design techniques to create a mobile-friendly site, a move that took RWD from the fringe to the mainstream.
What’s Next?
In the conclusion of the original 2010 article, Marcotte wrote the following line: “Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences.” 10 years later, the definition of what these “experiences” are has evolved. Specifically, there is one area that Marcotte has defined as being particularly important: web accessibility.
“For me,” Marcotte said, “One tool that I try to work into my process as much as possible is asking myself, at multiple stages while I’m designing or building something, is, ‘What if somebody doesn’t browse the web like I do?’” This question is commonly interpreted as designing layouts for different sized screens and devices, but it’s clear that it means much more than that to Marcotte.
“A major challenge today, is that, for many people with common impairments, the web is completely broken. It’s completely inaccessible to them and I think that’s due to a number of reasons. I think a lot of teams and organizations don’t prioritize accessibility because setting aside time to actually care about and research accessibility is incredibly difficult.”
“Anything you can do to improve the accessibility of your digital product is going to pay off in dividends,” Marcotte said. “That could be auditing your color palette to see if there’s sufficient contrast in the interfaces you’re working with, or making sure that you can actually tab through your design and access all of the things that you would be able to access with a mouse.”
When Marcotte is working on a responsive navigation component, for example, he tests it on touchscreens, keyboards, and screen readers to experience the design from different perspectives. In addition, he is always keeping an eye on new accessibility-related browser features and adding them in when appropriate. He’s a fan of the Reduced Motion media query which allows designers and developers to support a person’s preferences for avoiding visuals that can cause motion sickness or dizziness. “We can actually hook into this media query with CSS and disable some animations if need be,” he said.
Although it’s tempting to think of RWD as an evolving series of web development techniques involving HTML, CSS and JavaScript, it goes beyond these boundaries. In sum, it’s a mindset and commitment to using all the tools at our disposal to improve the experience of the web for as many people as possible. While we have a long way to go, the principles of responsive web design provide a great roadmap.
Want to dig deeper into the ever-evolving world of responsive web design? Watch the full webinar or enroll in Designing Accessible and Responsive Websites, Gymnasium’s new course taught by Ethan Marcotte himself.
