Websites have not always been as adaptable as they are today. For modern designers, “responsibility” is one of the most significant defining factors of good design. After all, we now cater to many users who frequently jump between mobile and desktop devices with different screen sizes.
However, the shift to responsive design did not happen overnight. Over the years, we have been tweaking the concept of “responsive web design” to reach the stage where we are today.
Today, we will take a closer look at the history of responsive web design.
Where Did Web Design Start?
When the first websites were first created, no one was worried about responsibility across a range of screens. All the sites were designed to fit the same templates, and the developers did not spend much time on concepts such as design, layout and typography.
Even with the widespread adoption of CSS technology, most developers did not have to worry about adapting content to different screen sizes. However, they still found some ways to work with different sizes of monitor and browser.
Liquid Versions
The two main layout options available to developers in the early days were fixed width, or liquid layout.
With a fixed width layout, the design would be more likely to break if your monitor did not closely match the one on the site design. You can see an example here.
Alternatively, liquid layout, invented by Glenn Davis, was considered one of the first revolutionary examples of responsive web design.
Liquid layouts may adapt to different monitor resolutions and browser sizes. However, content can also overflow, and the text will often break on smaller screens.
Secret-Dependent Layout
In 2004, a blog post by Cameron Adams introduced a new method for using JavaScript to swap stylesheets based on browser window size. This technique has been dubbed “solution-dependent layout”. While they needed more work from developers, a layout that relied on solutions allowed a finer control over the design of the site.
The solution-dependent layout essentially served as an early version of CSS breakpoints, before they became a thing. The downside was that developers had to create different stylesheets for each target resolution and ensure that JavaScript worked across all browsers.
With so many browsers to consider at the time, the demand for jQuery as a way to overcome the differences between browser preferences increased.
Rise of Mobile Blood
The introduction of concepts like solution – dependent designs was happening at about the same time as many mobile devices were becoming more internet – enabled. Companies were creating browsers for their smartphones, and suddenly developers had to account for these as well.
While mobile subdomains were intended to offer users the same direct functions that they could have from a desktop site on a smartphone, they were all separate applications.
Mobile subdomains, while complex, have had a number of advantages, such as allowing developers to focus specifically on SEO on mobile devices, and drive more traffic to a variety of mobile sites. At the same time, however, developers had to manage two changes to the same Web site.
Back at a time when Apple had just introduced its first iPad, a large number of web designers were still relying on this old – fashioned and clunky strategy to enable website access on all devices. In the late 2000s, developers often relied on a number of tricks to make mobile sites more accessible. For example, even a simple layout used the maximum width: a 100% trick for flexible images.
Fortunately, things started to change when Ethan Marcotte coined the term “Responsive Web Design” on Outsourcing. This article highlighted John Allsopp’s exploration of the principles of web design architecture, paving the way for all – in – one websites, which can function equally well on any device.
A New Era of Responsive Web Design
Marcotte’s article introduced three crucial components that developers must consider when creating a responsive website: fluid grids, media queries, and flexible images.
Fluid Grids
The concept of fluid grids introduced the idea that websites should be able to accept a variety of flexible columns that grow or shrink depending on the current size of the screen.
On mobile devices, this meant the introduction of one or two columns of flexible content, while desktop devices could typically display larger columns (due to more space).
Flexible Images
Flexible imaging introduced the idea that images, like matter, should be able to grow or shrink alongside the fluid grid in which they are located. As mentioned above, developers used something called the “maximum width” trick to enable this.
If you were keeping an image in a container, it could easily overflow, especially if the container was responsive. However, if you set the “maximum width” to 100%, the image will only change with its parent container.
Media Questions
The idea of “media questions” referred to SEC media questions, which were introduced in 2010 but were not widely accepted until they were officially released as a W3 recommendation two years later. Media queries are essentially SEC rules based on preferences such as media type (font, screen, etc.), and media features (height, width, etc).
Although simpler at the time, these questions basically allowed developers to implement a simple type of break – the kind of tools used in responsive design today. Breakpoints refer to when websites change their layout or style based on the browser window or device width.
Meta Viewport tags must in most cases be used to ensure that media inquiries work in the way that today’s developers expect.
Increase in First Time Mobile Design
Since Marcotte introduced Responsive Web Design, developers have been working on new ways to implement the idea as efficiently as possible. Most developers are now divided into two categories, based on whether they first consider the needs of the desktop device user, or the needs of the mobile device user. The trend is gradually moving towards the latter.
When designing a website from scratch and browsing for the first time, most developers believe that it is the mobile first choice. Mobile designs are often much simpler, and minimal, which is in line with many of the current web design trends.
If the mobile phone is to be adopted first, the requirements of the website must be considered from a mobile phone perspective first. You usually write your styles, using breakpoints as soon as you start creating desktop and tablet layouts. Alternatively, if you had adopted the first desktop approach, you would have to constantly adapt it to smaller devices with your breakpoint options.
Exploring the Future of Responsive Web Design
Responsive web design is not yet perfect. There are a large number of sites out there that still fail to deliver the same incredible experience across all devices. In addition, new challenges continue to emerge all the time, such as learning how to design for new devices like AR headphones and smart watches.
However, it is fair to say that we came a long way from the early days of web design.
Image featured by Pexels.
