Explore the Evolution of Responsive Web Design

In this article, we will explore the evolution of responsive Web design and how it became the dominant paradigm to design websites and Web applications. I’ll explain what responsive design actually is, discuss the rise of mobile and the dreaded matrix, then explore the rise of responsive design itself and touch on Bootstrap support.

The Rise of Mobile

For many years Web development meant developing for a personal computer medium. Laptops came along, but their display capabilities were pretty similar to desktop computers, so the same Web designs worked for both. But, over the last few years there was a big change. Mobile phones became ubiquitous, the Web evolved and became much more entwined in the day-to-day lives of most people. Many of these people wanted to access the Web on their phones. They want to buy shoes online, order pizza, make a reservation in a restaurant, check the weather and watch cats playing the piano. Many websites and Web applications designed for desktop/lap computers were either totally unusable or so annoying on phones that people just didn’t use them. That change came very quickly and companies paid attention.

The Matrix

Even before people used their phones to browse, the Web front-end developers had to deal with multiple targets being different browsers. IE6 in particular was the bane of front-end developers for years due to its prevalence and lack of standard support. When you add a large number of mobile devices with unknown form factors, you end up in a difficult spot as far as testing and quality assurance. Sometimes even more browsers were added because some devices shipped with custom mobile browsers, such as Opera, that weren’t very common on desktop and laptops.

What Is Responsive Web Design?

Responsive Web design is the practice of developing Web pages that look great on multiple devices with different form factors. Think about a desktop computer, a laptop, a tablet, a mobile phone, a smart watch and even full screen TV. People browse the Web on all these devices. It turns out that a single rigid design doesn’t fit all of them. Even if you use relative units and flexible grids. The key to responsive Web design is to detect the properties of the device, such as width, height, landscape/portrait mode and resolution. The developers then create multiple designs that looks great for multiple points in this multi-dimensional space.

The important principle here is that you detect the properties of the device and NOT the device itself. There are too many devices for you to chase, but all these devices belong to a space that you can cover adequately with a relatively small number of designs. The design itself is typically consists of style sheets.

Here is an example of a responsive Web design:

A different CSS style sheet will be selected on the fly depending on the browsing device’s screen width.

The Rise of Responsive Web Design

In 2010 Ethan Marcotte published an article called “Responsive Web Design” that started the ball rolling. All the elements of responsive Web design were clearly explained:

  • Fluid grids
  • Flexible images
  • Media queries

Over the following years, the concept sank in and more and more Web designers and developers subscribed to it. Initially, many companies had a regular website and a separate mobile site. But, those are not as common anymore and most companies switched a single responsive website.

Bootstrap and Mobile First

Twitter’s Bootstrap is arguably the most popular Web framework (HTML, CSS, JavaScript). Bootstrap has supported responsive Web design for a long time, but beginning with version 3, it introduced the concept of mobile first, which puts responsive Web design front and center. It is a testament for the importance of this paradigm.


Responsive Web design has been around for a while and it’s not going anywhere. If you a Web designer or a Web developer you should understand and follow it in order to design great websites and Web applications that looks great and are accessible.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin


The Latest

microsoft careers

Top Careers at Microsoft

Microsoft has gained its position as one of the top companies in the world, and Microsoft careers are flourishing. This multinational company is efficiently developing popular software and computers with other consumer electronics. It is a dream come true for so many people to acquire a high paid, high-prestige job

your company's audio

4 Areas of Your Company Where Your Audio Really Matters

Your company probably relies on audio more than you realize. Whether you’re creating a spoken text message to a colleague or giving a speech, you want your audio to shine. Otherwise, you could cause avoidable friction points and potentially hurt your brand reputation. For example, let’s say you create a

chrome os developer mode

How to Turn on Chrome OS Developer Mode

Google’s Chrome OS is a popular operating system that is widely used on Chromebooks and other devices. While it is designed to be simple and user-friendly, there are times when users may want to access additional features and functionality. One way to do this is by turning on Chrome OS