Chapter 1, Introducing Responsive Web Design, kicks off our journey into the world of responsive design, with an introduction into the basics of the concept; we explore the importance of RWD in today's environment and examine how it works as a concept.

Chapter 2, Creating Fluid Layouts, takes a look at creating flexible grid layouts as a key element of our design process; we explore the benefits of using them, and take a look at creating some examples using prebuilt styles.

Chapter 3, Adding Responsive Media, walks us through how to make our media responsive. We cover some of the tips and tricks available for use and examine why, in some cases, it is preferable to host content externally (such as videos)—if only to save on bandwidth costs!

Chapter 4, Exploring Media Queries, leads us to explore media queries and how we can use them to control what content is displayed at particular screen width settings. We cover the basics of creating breakpoints and examine why these should be based around where content breaks in our design and not simply for specific devices we want to support.

Chapter 5, Testing and Optimizing for Performance, rounds off our journey through the essentials of responsive web design with a look at how we can test and optimize our code for efficiency. We explore some of the reasons why pages load slowly, how we can measure our performance, and understand why even though the same tricks can be applied to any site. It's even more critical that we incorporate them when designing responsively.

All you need to work through most of the examples in this book is a simple text or code editor, an Internet browser, and Internet access. Many of the demos use Google Chrome, so it is ideal if you have this installed; other browsers can be used, although there may be instances where you have to change the steps accordingly.

The book is for frontend developers who are familiar with HTML5 and CSS3, but want to understand the essential elements of responsive web design. To get the most out of this book, you should have a good knowledge of HTML and CSS3; JavaScript or jQuery are not required for the purposes of running the demos in this book or understanding the code.

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

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Go ahead and extract a copy of coffee.html and save it to our project area."

A block of code is set as follows:

img {
   max-width: 100%;
   height: auto;
}

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

@media only screen and (min-device-width: 768px) and (max-device-width : 1024px) and (orientation : landscape)

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Click on the cog, then select Share and embed map"

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in 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 at www.packtpub.com/authors.

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.