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, 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:
<code> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)" href="small.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 760px)" href="medium.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 960px)" href="big.css" /> </code>
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
- 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
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.