The Importance of Adaptive Web Design
A website must be designed to fit the screen size on which it will be accessed. Before the mass adoption of mobile devices, the only concern of the front-end developer was how his work would look on a desktop PC or laptop. Given how small the mobile market was, it would not have been very sensible for a developer to build a webpage for a mobile device. But mobile devices play a larger role in people’s lives than ever — even overtaking the web developer’s initial focus, the desktop PC. In a world unconquered by any one screen size, our original strategies left much to be desired. Thus, developers adopted new ones, often called “adaptive” or “responsive” web design techniques. Let’s look through both statistical and academic sources to show how developers came to practice adaptive web design, what it means in practice, and the benefits of adaptive web design for both the developer and the end user.
Mobile devices are bigger than ever.
According to statista.com, the mobile web browser Safari took up more than one-third of the United States internet browser market share in early 2023. And people aren’t just relying on their mobile devices more, but they are also relying on them to do more. The growing m-commerce market shows this. Many of us cannot imagine going one day without using our devices for something without consciously deciding to abstain from using them. This time — when we rely on our mobile devices for as many internet tasks as our personal computers — took effort to get to. One of the greatest efforts of the early mobile web was the push for responsive websites.
To understand why responsive web design was (and is) so important, we must understand its predecessor. Before mobile devices took over, web designers would use a process called pixel-perfect web design. It was a process in which a designer would draw a mockup of a webpage in a graphics editor, and that mockup would be recreated with pixel-perfect precision in HTML and CSS. This method was serviceable when there wasn’t any variation in screen sizes among internet users. “responsive web design” refers to techniques used to create web pages that adapt to the screen on which they are viewed. Responsive web design emerged in the early 2010s as mobile devices gained momentum.
In 2010, the mobile internet boomed. Traffic to mobile websites grew 600% after growing by 300% in 2009. The number of smartphone shipments was rising so much that in 2011, it would surpass the number of PC shipments globally. The drastic growth of mobile web users helped to bring the mobile web experience into the minds of web designers. Not so coincidentally, this was the year that web designer Ethan Marcotte coined the term “responsive web design” in one of his articles. Had this to say:
. . . 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 . . . 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.
Another one of the most famous (and possibly the most influential) quotes about web design from the early 2010s came from Eric Schmidt, the chairman of Google at the time. “The simple guideline is whatever you are doing — do mobile first.”
There are several issues that an end user could come across when trying to access an incompatible website through a smaller screen. For example, because the aspect ratio of the webpage itself would not fit the aspect ratio of the screen, users would often have to go through a clunky process of pinching and scrolling to read the page’s content. Another issue was that the interactive experience of the webpage could have been improved. This is due in equal parts to the screen size and the thumb’s inaccuracy, both of which made it harder to interact with small buttons or hyperlinks. Another (admittedly dated) issue is that smartphones didn’t have the processing power to handle all of the elements of a page designed with a desktop PC in mind. Developers had to design web pages to detect when a mobile client was being used and resize their elements accordingly.
The most immediate of these issues were those related to the page layout. At the time, the most common monitor size for a desktop computer was 1024x768 pixels (Desktop Screen Resolution Stats Worldwide, 2023). To put this difference into perspective, the iPhone 4 — released in 2010 — had a screen resolution of 960x640 pixels. The different resolution and aspect ratio would lead to a page looking squished, forcing the user to pinch and scroll their device to be able to read the content of the page.
One strategy to overcome these issues was to have two separate web pages: one for desktop access and one for mobile access. A mobile website was typically indicated by an “m” in the subdomain of the URL. So, assuming that there was a desktop website with the URL “https://samplewebsite.com,” the mobile equivalent of that website would have been “https://m.samplewebsite.com.” Mobile web pages are still used today. They are less common because more developers know how to accommodate different screen sizes without using different domains.
Literature Review
Hearing about the buzz of responsive web design leads to a burning question: What did experts say about its adoption?
In Responsive Web Design, Discoverability, and Mobile Challenge, Bohyun Kim — Associate University Librarian for Library Information Technology at the University of Michigan — highlights RWD’s advantages and disadvantages for libraries. For one, she argues that responsive webpages make the jobs of maintainers much easier. This is because only one set of web pages is necessary to provide an adequate experience to desktop and mobile users, and as a result, only one set of pages would need to be kept up to date. She states that another advantage of responsive webpages is that libraries would not have to advertise their mobile pages, nor would they have to put links to their mobile page inside their desktop page — a task Kim believes libraries have failed at. She cites four examples of library pages that failed to put a mobile-accessible link on their desktop web pages. In these cases, the mobile link is a small icon that would be nearly impossible to find on an equally small display.
Despite their benefits, she also states some of RWD’s drawbacks. One of these is poor load times. Firstly, she cites Smashing Magazine, which compared Mitt Romney’s mobile campaign website and Obama’s responsive campaign website during the 2012 presidential race. The results showed that Romney’s mobile site loaded almost three times faster than Obama’s responsive site — a disparity that Kim claims results from one being responsive and the other being a separate mobile site. Another piece of evidence she provides is a study by web researcher Guy Podjarny (now founder and president of Snyk). In his research, Podjarny accessed 347 responsive websites through mobile devices and desktops/laptops. He found that close to 86 percent of these websites did not perform better when viewed through a small screen than when viewed through a large screen. This means that for most responsive websites, load times are slower across the board compared to separate mobile & desktop sites.
Similarly to Kim, Gabrielle Turner-McGrievy et al. state that responsive websites are easier to maintain. They look at it through a business-oriented perspective, writing that responsive websites are alluring to m-commerce companies due to their maintenance not being very labor-intensive — and, therefore, less expensive.
In Exploring the website object layout of responsive web design: results of eye tracking evaluations, Jason C. Hung & Chun-Chia Wang analyze a study to learn how web designers can use RWD to optimize the user experience of M-commerce websites. The study involved 45 volunteers who had their eyes tracked as they looked over sets of different web pages. The goal was to see which parts of web pages people were more inclined to look at and for how long they would look at them. The study found that in a crunch, elements that either A) Attract the user the most or B) Give the user the most information. Hung and Wang concluded that RWD techniques are essential for commercial websites to grab the attention of mobile users.
Takeaway
As with any practice change, responsive web design was met with both support and criticism. Often, valid criticism. But when you look at how beneficial it has been for the quality
