Chapter 1, Harness the Power of Sass for Responsive Web Design, starts with the easiest walkthrough you'll ever read on how to install Sass; then we learn how to make Sass "watch" our SCSS files. Then, there are easy-to-understand explanations about basic Sass concepts such as variables, mixins, arguments, nesting, partial files, the @import directive, source maps, and Sass comments. We also learn to automate vendor prefixing and automatically compile our SCSS files with Prepros. We talk about creating mixins to address media queries as easily as possible, considering how content defines the breakpoints.

Chapter 2, Marking Our Content with HTML5, clarifies that HTML is a markup language, not code. Then, we talk about the most used HTML5 elements that allow us to markup our content semantically. Improving the accessibility of our builds with ARIA roles is also something we address in a simple way. We also talk about the different meta tags required for RWD, and then we have an example that brings everything together.

Chapter 3, Mobile-first or Desktop-first?, demystifies why and when mobile-first or desktop-first should be used. With examples, we will learn how to retrofit a site with Adaptive Web Design, and of course, with RWD. We will learn about Respond.js and conditional classes in order to support legacy browsers when building mobile-first.

Chapter 4, CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD, helps us understand what a grid is, how to use it, and why. With this understanding, we can make sound decisions when building a website or web app. We also create a custom CSS grid both with the floats technique and then by using Flexbox. We will use conditional classes again to address old browsers, and with the help of a small script, we can take care of the quirks from IE10 with an .ie10 specific selector.

Chapter 5, Designing Small UIs Driven by Large Finger, shows how usability and accessibility play a major role in this chapter. We also find explanations about the different sizes of our target zones, the location of our controls (links, buttons, form fields, and so on), and the touch zones in different devices. There are also three examples on how to create a menu button plus three more examples on mobile navigation patterns.

Chapter 6, Working with Images and Videos in Responsive Web Design, is one of the most interesting chapters of this book because images in RWD are a "thing". We will talk about different ways to serve different images with the <picture> element and the srcset attribute. Making videos responsive with CSS, jQuery, and JavaScript is also addressed in this chapter. We also learn about using vector-based files such as icon fonts and SVGs.

Chapter 7, Meaningful Typography for Responsive Web Design, talks about using relative units being ideal because they provide scalability, and this is what RWD is all about. The golden egg in this chapter is that we will learn how to use the Modular Scale to create a harmonious typographic scale. We will also use Flowtype.js to increase the legibility of our copy.

Chapter 8, Responsive E-mails, shows that e-mails are opened more on mobile devices than on desktops; that responsive e-mails have more engagement on mobile devices than nonresponsive ones; and that people click on e-mails on desktops more than on mobile. We will also create an e-mail template as an example. We'll learn to use a CSS reset block to normalize those quirky e-mail clients and learn that the best width for e-mails is not more than 600 pixels.

All these chapters have CodePen demos.

There are a few considerations to follow the examples in this book: a text editor or IDE (Sublime Text is used in this book), Internet access, and admin rights to your machine to install applications.

You may also need an image editing software such as Photoshop, Fireworks, or GIMP. If you use something else, that's totally fine.

If possible, you can use one or two types of real mobile devices in order to experience the examples and demos in the right context. Otherwise, using Chrome's DevTool's Device Mode feature would work as well.

If you already know some HTML and CSS and understand the principles of Responsive Web Design, this book is for you. There's something here for you to learn regardless of whether you're a web designer or web developer, or whether you're a beginner or a seasoned web professional.

A good understanding of HTML and CSS is required since RWD relies heavily on these technologies. Some understanding of jQuery is also recommended, but not mandatory.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "The sizes attribute can also be used with the <picture> element, but we're going to focus on using the sizes attribute with the <img> tag."

A block of code is set as follows:

*, *:before, *:after {
    box-sizing: border-box;
}

//Moble-first Media Queries Mixin
@mixin forLargeScreens($width) {
    @media (min-width: $width/16+em) { @content }
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

*, *:before, *:after {
    box-sizing: border-box;
}

//Moble-first Media Queries Mixin
@mixin forLargeScreens($width) {
    @media (min-width: $width/16+em) { @content }
}

Any command-line input or output is written as follows:

gem install sass

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "clicking the Next button moves you to the next screen".

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

If you have any questions, don't hesitate to look me up on Twitter via @ricardozea, I will be more than glad to help a fellow web professional wherever, whenever.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.