I cannot start this theme without citing Ethan Marcotte, who released the book Responsive Web Design in 2011, which has become a reference for many other books and articles from across the frontend community.

In my understanding of Marcotte's book, the meaning of responsive web design is to provide different experiences for the user to see the same site depending on the available screen area. Technically speaking, it involves the use of the following three main techniques:

More details about each technique will be shown later, but just to clarify this concept visually, have a look at the following example, which represents a website as displayed on a small device (smartphone) on the left, medium device (tablet) in center, and on a large screen (desktop) on the right:

We will talk about many minor and major challenges throughout the book. Some of them are:

Responsive web design is a little different from fluid design. Fluid design is about adjusting the website's structure and dimensions automatically (by using relative units for widths, such as em or percentage) but does not offer a varied approach to the user to see the content layout.

Also, it would be fair to say that responsive web design is not a unique solution for all mobile device challenges. As we saw before, responsive web design is an idea, and can give the user a better experience when implemented correctly, but it may not work for everyone or every device. This is the reason we should improve our knowledge of new technologies.

There is a quote that I like very much, written by Aaron Gustafson, the author of the Adaptive Web Design book:

There are many ways to implement adaptive features. The following are the most common practices to achieve them:

Diego Eis, a Brazilian known to disseminate some best practices and the creator of the Tableless.com.br website, drew up an excellent comparison between responsive web design and non-responsive web design in one of his articles. Imagine if we were planning to travel to two or more destinations, you would certainly organize many clothing combinations such as jackets, pants, shorts, and shirts which would result in one big heavy bag. This is because you never know what the climate will be like in each place. In the same way, to be prepared for all events, sometimes it can slightly reduce the performance of the website..

Luke Wroblewski, author of popular web design books and a good reference for many articles, posted a recent device-sizes classification announced by technology companies as follows:

Labels such as smartphone are just friendly labels as long as we know that the responsive web design makes the structure respond to the device's screen resolution, not to the type of device. But, we must analyze if it is better to offer a different approach for a specific width. This is the improved feature of this module, where CSS2.1 was focused on media types such as print, screen, and handheld; in CSS3, the focus is on media features.

Media queries are mostly used and most browsers adopt it natively (Firefox 3.6 and above, Safari 4 and above, Chrome 4 and above, Opera 9.5 and above, iOS Safari 3.2 and above, Opera Mobile 10 and above, Android 2.1 and above, and Internet Explorer 9 and above). And now, here comes the question: what about IE6-IE8? For these browsers there is a known lightweight solution called Respond, which helps a lot when support for old browsers is needed (more in Chapter 10 , Ensuring Browser Support).

Trying to keep concise on this topic, the following are the features mostly used when we are specifying media queries:

Check the following CSS code for a better understanding of the use of media queries and their syntax:

/* Standard desktop screens */
@media only screen and (min-width:1025px) {
 CSS GOES HERE
}
/* Tablets */
@media only screen and (min-width:481px) and (max-width:1024px) {
 CSS GOES HERE
}
/* Smartphones */
@media only screen and (max-width:480px) {
 CSS GOES HERE
}

Just to clarify this code, the following figure is a visual interpretation of this code, where it shows that the layout could be displayed in different ways depending on the device's screen:

Let's start this section by analyzing the use case of this project:

This result is commonly seen when the project starts with desktop-first, and the web design creation just fills the blank space with banners or pictures, less relevant links, animations, and so on. We are probably forgetting the obvious and basic flow that the user follows. We know that sometimes these other items look important to the project, but it is evident that this project design requires an information architecture review.

In the previous example, we can notice (on the right side) how simple the communication with the user can be, and it may be more efficient with less visual clutter. And that is the trend: make it simple. The next quote by Bill DeRouchey summarizes it:

In this case, when the mobile-first concept was applied, a specific link could be found only on the interior pages. However, the objective of the homepage is to direct the user to the correct page, following the website flux information. For non-relevant links this scenario is acceptable.

Take a look at the following screenshot, and notice the many differences about the organization of information and focus on important links in a desktop version:

Wireframe is a visual guide that helps to craft your website structure, and its main focus lies in functionality, behavior, and priority of content. It should be the first step of any project because it makes it easier to analyse the information architecture and arrangement of the visual elements.

Wireframe.cc (http://wireframe.cc/) is an easy way to start our project. This tool is great to do something quick but with low fidelity. For detailed works, there are better tools such as Balsamiq Mockups or Pencil.

The usage of Wireframe.cc is very simple. After entering in the tool's site, perform the following:

Visit http://mediaqueri.es/ and take your time to get inspired. Let's start our website project creating three website wireframes for these dimensions: smartphone, tablet, and desktop, by applying the mobile-first concept.

The following three wireframes will be used as reference for Exercise 1:

In this chapter, we reviewed the concept of responsive web design. We have also learned what mobile-first is. We learned about the media queries and how they can be different on our site implementation. We also created a wireframe drafting our site. This will connect us to the next chapter which will code this wireframe.

Now, let's move on in our project by learning how to use the three distinct responsive grid systems: Fluid Baseline Grid, 1140 Grid, and my favorite Foundation4 Grid. Also, we will look at adapting the website's behavior by using JavaScript. All of these topics will be explained in the next chapter.