Chapter 1. Responsive Web Design

I still remember, back when I was a kid, a mobile phone came with a mere tiny size monochromatic screen. All we could do at that time was make a phone call, text, and play a simple game. Today, mobile devices have drastically advanced in many ways.

New mobile devices are built with varying screen sizes; some even come with higher DPI or resolution. Most new mobile devices are now equipped with a touch-enabled screen, allowing us to interact with the device conveniently using a tap or a swipe of fingers. The screen orientation is switchable between portrait and landscape. The software is also more capable compared to older devices. The mobile browser, in particular, is now able to render and display web pages that are as good as a browser in a desktop computer.

In addition, the number of mobile users has exploded in the last couple of years. We can now see many people around spending countless hours facing their mobile devices, a phone, or a tablet, doing things such as running their businesses on the go or simple Internet browsing. The number of mobile users is likely to grow in the years to come and may even outnumber the total number of desktop users.

That is to say, mobiles have changed the Web and changed the way people use the Internet and enjoy websites. These advancements in mobile devices and the increasing mobile Internet usage prompts questions on a new paradigm to build websites that are accessible and function well in varying circumstances. This is where Responsive Web Design comes in.

In this chapter, we will cover the following topics:

• Glance at the basics of responsive web design, viewport meta tag, and CSS3 media queries
• Take a look at the responsive frameworks that we will use to build responsive websites in the following chapters