A Temporary Historical past of Responsive Internet Design

Web sites haven’t all the time been as adaptable as they’re immediately. For modern designers, “responsivity” is without doubt one of the most important defining components of a great design. In any case, we’re now catering to a number of customers who incessantly bounce between cell and desktop gadgets with various display screen sizes. 

Nevertheless, the shift to responsive design didn’t occur in a single day. For years, we’ve been tweaking the idea of “responsive net design” to ultimately attain the stage we’re at immediately. 

Immediately, we’re going to take a more in-depth take a look at the historical past of responsive net design.

The place Did Internet Design Start?

When the primary web sites have been initially created, nobody was frightened about responsivity throughout a variety of screens. All websites have been designed to suit the identical templates, and builders didn’t spend loads of time on ideas like design, structure, and typography.  

Even when the broader adoption of CSS expertise started, most builders didn’t have to fret a lot about adapting content material to totally different display screen sizes. Nevertheless, they nonetheless discovered a number of methods to work with totally different monitor and browser sizes.

Liquid Layouts

The main two layout options obtainable to builders within the early days have been fixed-width, or liquid structure. 

With fixed-width layouts, the design was extra more likely to break in case your monitor wasn’t the very same decision because the one the positioning was designed on. You can see an example here

Alternatively, liquid layouts, coined by Glenn Davis, have been thought of one of many first revolutionary examples of responsive net design. 

Liquid layouts might adapt to totally different monitor resolutions and browser sizes. Nevertheless, content material might additionally overflow, and textual content would incessantly break on smaller screens. 

Decision-Dependent Layouts

In 2004, a blog post by Cameron Adams launched a brand new technique of utilizing JavaScript to swap out stylesheets based mostly on a browser window measurement. This system turned referred to as “resolution-dependent layouts”. Despite the fact that they required extra work from builders, resolution-dependent layouts allowed for extra fine-grained management over the positioning’s design. 

The resolution-dependent structure mainly functioned as an early model of CSS breakpoints, earlier than they have been a factor. The draw back was builders needed to create totally different stylesheets for every goal decision and guarantee JavaScript labored throughout all browsers.

With so many browsers to think about on the time, jQuery turned more and more in style as a method to summary the variations between browser choices away.

The Rise of Cell Subdomains

The introduction of ideas like resolution-dependent designs was occurring at about the identical time when many cell gadgets have been turning into extra internet-enabled. Firms have been creating browsers for his or her smartphones, and builders immediately wanted to account for these too.

Although cell subdomains aimed to supply customers the very same features they’d get from a desktop website on a smartphone, they have been completely separate functions. 

Having a cell subdomain, although advanced, did have some advantages, comparable to permitting builders to particularly goal search engine optimization to cell gadgets, and drive extra site visitors to cell website variations. Nevertheless, on the identical time, builders then wanted to handle two variations of the identical web site.

Again on the time when Apple had solely simply launched its first iPad, numerous net designers have been nonetheless reliant on this old style and clunky technique for enabling entry to an internet site on each gadget. Within the late 2000s, builders have been usually reliant on a variety of methods to make cell websites extra accessible. As an illustration, even easy layouts used the max-width: 100% trick for versatile photographs.

Thankfully, every part started to alter when Ethan Marcotte coined the term “Responsive Web Design” on A List Apart. This text drew consideration to John Allsopp’s exploration of net design architectural rules, and paved the best way for all-in-one web sites, able to performing simply as nicely on any gadget. 

A New Age of Responsive Internet Design

Marcotte’s article launched three essential elements builders would wish to think about when making a responsive web site: fluid grids, media queries, and versatile photographs. 

Fluid Grids

The idea of fluid grids introduced the concept that web sites ought to be capable of undertake quite a lot of versatile columns that develop or shrink relying on the present measurement of the display screen. 

On cell gadgets, this meant introducing one or two versatile content material columns, whereas desktop gadgets might often present extra columns (as a consequence of larger house). 

Versatile Pictures

Versatile photographs launched the concept that, like content material, photographs ought to be capable of develop or shrink alongside the fluid grid they’re positioned in. As talked about above, beforehand, builders used one thing known as the “max-width” trick to allow this. 

In the event you have been holding a picture in a container, then it might simply overflow, notably if the container was responsive. Nevertheless, in case you set the “max-width” to 100%, the picture simply resizes with its dad or mum container. 

Media Queries

The thought of “media queries” referred to the CSS media queries, launched in 2010 however not broadly adopted till formally launched as a W3 suggestion 2 years later. Media queries are primarily CSS guidelines triggered based mostly on choices like media sort (print, display screen, and many others), and media options (peak, width, and many others). 

Although they have been easier on the time, these queries allowed builders to primarily implement a easy form of breakpoint – the form of instruments utilized in responsive design immediately.  Breakpoints discuss with when web sites change their structure or model based mostly on the browser window or gadget width.

Viewport Meta tags have to be used usually to make sure media queries work in the best way immediately’s builders count on. 

The Rise of Cell-First Design

Since Marcotte’s introduction of Responsive Web Design, builders have been engaged on new methods to implement the concept as successfully as potential. Most builders now cut up into two classes, based mostly on whether or not they take into account the wants of the desktop gadget person first, or the wants of the cell gadget person. The development is more and more accelerating in direction of the latter. 

When designing an internet site from scratch in an age of mobile-first shopping, most builders consider that mobile-first is the most suitable choice. Cell designs are sometimes a lot easier, and extra minimalist, which matches loads of the traits of present net design.

Taking the cell first route means assessing the wants of the web site from a cell perspective first. You’d write your kinds usually, utilizing breakpoints when you begin creating desktop and pill layouts. Alternatively, in case you took the desktop-first method, you would wish to always adapt it to smaller gadgets along with your breakpoint selections.

Exploring the Way forward for Responsive Internet Design

Responsive net design nonetheless isn’t excellent. There are numerous websites on the market that also fail to ship the identical unimaginable expertise throughout all gadgets. What’s extra, new challenges proceed to emerge on a regular basis, like determining how you can design for brand spanking new gadgets like AR headsets and smartwatches. 

Nevertheless, it’s truthful to say we’ve come a great distance because the early days of net design. 


Featured picture via Pexels.


The submit A Brief History of Responsive Web Design first appeared on Webdesigner Depot.

Select your currency