A Brief History of Responsive Web Design

A Brief History of Responsive Web Design


Web sites haven’t all the time been as adaptable as they’re as we speak. For contemporary designers, “responsivity” is without doubt one of the most important defining elements of a very good design. In any case, we’re now catering to a number of customers who regularly soar 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 finally attain the stage we’re at as we speak. 

Right this moment, we’re going to take a better have 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 apprehensive about responsivity throughout a variety of screens. All websites have been designed to suit the identical templates, and builders didn’t spend plenty of time on ideas like design, structure, and typography.  

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

Liquid Layouts

The principle two structure choices obtainable to builders within the early days have been fixed-width, or liquid structure. 

With fixed-width layouts, the design was extra prone to break in case your monitor wasn’t the very same decision because the one the location was designed on. You possibly can see an instance right here. 

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

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

Decision-Dependent Layouts

In 2004, a weblog put up by Cameron Adams launched a brand new methodology of utilizing JavaScript to swap out stylesheets primarily based on a browser window dimension. This system turned often called “resolution-dependent layouts”. Though they required extra work from builders, resolution-dependent layouts allowed for extra fine-grained management over the location’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 widespread as a strategy 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 changing into extra internet-enabled. Corporations 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 capabilities they’d get from a desktop website on a smartphone, they have been fully separate functions. 

Having a cell subdomain, although complicated, did have some advantages, akin 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 school and clunky technique for enabling entry to an internet site on each gadget. Within the late 2000s, builders have been typically reliant on a variety of methods to make cell websites extra accessible. As an example, even easy layouts used the max-width: 100% trick for versatile pictures.

Happily, all the pieces started to vary when Ethan Marcotte coined the time period “Responsive Internet Design” on A Record Aside. This text drew consideration to John Allsopp’s exploration of net design architectural ideas, 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 want to think about when making a responsive web site: fluid grids, media queries, and versatile pictures. 

Fluid Grids

The idea of fluid grids launched the concept web sites ought to be capable of undertake a wide range of versatile columns that develop or shrink relying on the present dimension of the display screen. 

On cell gadgets, this meant introducing one or two versatile content material columns, whereas desktop gadgets may normally present extra columns (on account of higher house). 

Versatile Photographs

Versatile pictures launched the concept, like content material, pictures 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 referred to as the “max-width” trick to allow this. 

When you have been holding a picture in a container, then it may simply overflow, notably if the container was responsive. Nevertheless, if you happen to set the “max-width” to 100%, the picture simply resizes with its father or mother container. 

Media Queries

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

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

Viewport Meta tags must be used most often to make sure media queries work in the best way as we speak’s builders count on. 


The Rise of Cell-First Design

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

When designing an internet site from scratch in an age of mobile-first looking, most builders imagine that mobile-first is the most suitable choice. Cell designs are sometimes a lot easier, and extra minimalist, which matches plenty 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 types usually, utilizing breakpoints when you begin creating desktop and pill layouts. Alternatively, if you happen to took the desktop-first strategy, you would want to continually adapt it to smaller gadgets together with your breakpoint selections.


Exploring the Way forward for Responsive Internet Design

Responsive net design nonetheless isn’t good. 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 easy methods to design for brand new gadgets like AR headsets and smartwatches. 

Nevertheless, it’s honest to say we’ve come a great distance for the reason that early days of net design. 


Featured picture by way of Pexels.


We will be happy to hear your thoughts

Leave a reply

Enable registration in settings - general