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.
Even before people used their phones to browse, 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, weren’t very common on desktops 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 smartwatch, 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 look great for multiple points in this multi-dimensional space. Additionally, many businesses are striving to have an ADA compliant website so that it can be accessible to individuals with visual impairments.
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 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 to a single responsive website.
Bootstrap and Mobile First
Responsive Web design has been around for a while and it’s not going anywhere. If you are a Web designer or a Web developer you should understand and follow it in order to design great websites and Web applications that look great and are accessible.