Websites today are more adaptable than ever before. Modern designers have grown used to responsive design, which is one of the main factors of a well-designed website. A broad range of users visit websites today; they use a variety of devices, including mobile and desktop devices that have various screen sizes.
Not many of today’s designers know the history of responsive design. They’re not aware of the long process it took get reach this point in web development and design.
In this article, we’ll take a quick overview of the history of responsive web design.
When Did Web Design Begin?
The first websites, back in the “ancient” days of the Internet, no one was concerned with responsive design to fit a broad range of screen sizes. Each site was designed to fit the same viewport, and developers didn’t have to be concerned so much about design, layout, and typography.
When CSS first was available, many designers and developers didn’t have to care too much about adapting their content to screens of various sizes. However, they were able to find ways to work with different monitor and browser sizes.
Liquid Layouts
In the early days of website design, developers could choose between two main layouts, including fixed-width and liquid layout.
Fixed-width layouts could lead to the design breaking if the monitor wasn’t the exact same resolution as the one the site was designed on.
Liquid layouts (the term was created by Glenn Davis) were one of the first examples of responsive web design. These layouts could adapt to different monitor resolutions and browser sizes.
However, liquid layouts could also cause content to overflow, with text often breaking on smaller screens.
Resolution-Dependent Layouts
Then in 2004, Cameron Adams wrote a blog post that introduced a new way to use JavaScript to change stylesheets based on browser window size. This method came to be called “resolution-dependent layouts.” While they required developers to do more work, the resolution-dependent layouts gave them more control over the site’s design.
The layout functioned as an early form of CSS breakpoints (before these existed). However, there was one downside; developers had to create different stylesheets for each target resolution and make sure JavaScript worked on all browsers.
Mobile Subdomains
Around the time more mobile devices were becoming more Internet-capable, concepts such as resolution-dependent designs were happening at the same time. It was at this time that companies started creating browsers for their specific smartphones. This meant developers also needed to account for these, too. These were called mobile subdomains.
The idea behind mobile subdomains was to offer users the same functionality on a smartphone as they would have on a desktop site. However, mobile subdomains were separate applications.
Mobile subdomains were complex but also provided benefits, including making it easier for developers to specifically target SEO to mobile devices, drive more traffic to a mobile site, and more. However, developers also needed to manage two versions of the same website. This was pretty challenging.
Over time, however, Ethan Marcotte created a term called “responsive web design” on A List Apart. The article drew attention to John Allsopp’s exploration of web design architectural principles and eventually led to all-in-one websites that worked on any device.
Responsive Web Design
Marcotte introduced three critical components developers would need for creating responsive websites: fluid grids, media queries, and flexible images.
Fluid grids introduced the concept that websites should adopt a variety of flexible columns that grow or shrink depending on the current size of the screen. On mobile devices, this meant it was necessary to introduce one or two flexible content columns for smart devices, leaving desktops with the ability to show more columns (they usually had larger screens).
Flexible Images
Flexible images created the concept that images should also be able to grow or shrink near the fluid grid they were located in (like content). In the past, designers used the “max-width” to enable this capability.
However, if the image was held in a container, it was possible for it to overflow. This was especially the case if the container was responsive. However, if the “max-width” was set to 100%, the image would then resize with its container.
Media Queries
The concept of media queries referred to CSS media queries, which were first introduced in 2010. However, they were not adopted widely until they were officially included in a W3 recommendation a couple of years later. Media queries are CSS rules that are triggered based on options like media type (print, screen, and more) and media features (height, width, and more).
The media queries back then were simpler than today’s; however, they made it easy for developers to implement a simple type of breakpoint. Breakpoints are used today in responsive design and refer to when a website changes its layout or style based on the browser window or device width.
Mobile-First Design
Since Marcotte introduced responsive web design, developers have been working to create new ways to implement the concept as easily as possible. Many developers today split into two categories based on whether they consider the needs of the desktop device user first or the needs of the mobile device user. We’ve seen the trend increasingly move toward the needs of the mobile device user.
Designing a website from scratch today, most developers choose the mobile-first option. These designs are usually much simpler and more minimalistic. These are both features that are currently trending in web design.
Choosing the mobile-first design involves determining the needs of the site user from a mobile perspective first. Styles are written normally, with breakpoints implemented once you start creating the desktop and tablet layouts of the site. On the other hand, if a designer takes the desktop-first approach, they need to constantly adapt it for smaller devices with breakpoint choices.
Summing It Up
It’s a fact that responsive web design isn’t perfect. Many modern sites fail to deliver the same experience across all devices. What’s more, as technology changes, developers are constantly faced with issues such as learning how to design for new devices such as AR headsets and smartwatches.
For these reasons, the future of responsive web design will continue to change and improve, providing a better experience for every user and their preferred devices.
