Mastering Responsive Web Design

Book Preface

Before the days of Responsive Web Design, web designers’ and frontend developers’ efforts were pretty much focused on translating print layouts into websites and applications. Elements and dimensions were rigid, and the need for them to adapt and scale wasn’t part of the concepts we mandatorily have to account for today.

Devices come in many shapes and sizes. All sorts of screen densities, aiming our work for operating systems and browsers that support (or don’t support) certain HTML, CSS and JavaScript technologies, UX principles, usability best practices, and knowing how mobile devices affect the world we live in are now an “intricate” part of what we do as web designers and frontend developers.

In this book, I provide a lot of information, technical and conceptual, about how RWD provides a pathway to better websites and web apps. Installing and using Sass, handling images and videos, and creating a solid typographic scale to building responsive e-mails are a few of the content gems you’ll be able to read in this book.
Time to level up!

What this book covers
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.

What you need for this book

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.

Who this book is for

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.