On mobile devices, this meant introducing one or two flexible content columns, while desktop devices could usually show more columns (due to greater space). The concept of fluid grids introduced the idea that websites should be able to adopt a variety of flexible columns that grow or shrink depending on the current size of the screen. Marcotte’s article introduced three crucial components developers would need to consider when creating a responsive website: fluid grids, media queries, and flexible images. This article drew attention to John Allsopp’s exploration of web design architectural principles, and paved the way for all-in-one websites, capable of performing just as well on any device. For instance, even simple layouts used the max-width: 100% trick for flexible images.įortunately, everything began to change when Ethan Marcotte coined the term “Responsive Web Design” on A List Apart. In the late 2000s, developers were often reliant on a number of tricks to make mobile sites more accessible. However, at the same time, developers then needed to manage two variations of the same website.īack at the time when Apple had only just introduced its first iPad, countless web designers were still reliant on this old-fashioned and clunky strategy for enabling access to a website on every device. Having a mobile subdomain, though complex, did have some benefits, such as allowing developers to specifically target SEO to mobile devices, and drive more traffic to mobile site variations. Though mobile subdomains aimed to offer users the exact same functions they’d get from a desktop site on a smartphone, they were entirely separate applications.
Companies were creating browsers for their smartphones, and developers suddenly needed to account for these too. The introduction of concepts like resolution-dependent designs was happening at about the same time when many mobile devices were becoming more internet-enabled. With so many browsers to consider at the time, jQuery became increasingly popular as a way to abstract the differences between browser options away. The downside was developers had to create different stylesheets for each target resolution and ensure JavaScript worked across all browsers. The resolution-dependent layout basically functioned as an early version of CSS breakpoints, before they were a thing. Even though they required more work from developers, resolution-dependent layouts allowed for more fine-grained control over the site’s design. This technique became known as “resolution-dependent layouts”.
In 2004, a blog post by Cameron Adams introduced a new method of using JavaScript to swap out stylesheets based on a browser window size.
However, content could also overflow, and text would frequently break on smaller screens. Liquid layouts could adapt to different monitor resolutions and browser sizes. You can see an example here.Īlternatively, liquid layouts, coined by Glenn Davis, were considered one of the first revolutionary examples of responsive web design. With fixed-width layouts, the design was more likely to break if your monitor wasn’t the exact same resolution as the one the site was designed on. The main two layout options available to developers in the early days were fixed-width, or liquid layout. However, they still found a few ways to work with different monitor and browser sizes. All sites were designed to fit the same templates, and developers didn’t spend a lot of time on concepts like design, layout, and typography.Įven when the wider adoption of CSS technology began, most developers didn’t have to worry much about adapting content to different screen sizes. When the first websites were initially created, no one was worried about responsivity across a range of screens. Today, we’re going to take a closer look at the history of responsive web design. For years, we’ve been tweaking the concept of “responsive web design” to eventually reach the stage we’re at today. However, the shift to responsive design didn’t happen overnight. After all, we’re now catering to a host of users who frequently jump between mobile and desktop devices with varying screen sizes. For modern designers, “responsivity” is one of the most significant defining factors of a good design. Websites haven’t always been as adaptable as they are today.