Preface

The pixel-perfect web is dead. The days of positioning elements on a web page and expecting them to always display how we wanted are a distant memory; we now cope with the constant barrage of new and varied devices that our designs need to look fantastic on.

This book aims to get you started understanding and using the suite of CSS and HTML tools for responding to this new world of devices. It will introduce you to the building blocks that help your pages adapt to different devices, take this a step further with grids, show you how to make text and images readable on all devices, and, in the final chapter, cover how to utilize more esoteric device capabilities.

Let’s get started.

Who Should Read This Book

This book is for web designers and front-end developers. You’ll need to be familiar with HTML and CSS, but no previous responsive web design experience is required. Some JavaScript familiarity is useful for the latter parts of the book.

Conventions Used

You’ll notice that we’ve used certain typographic and layout styles throughout this book to signify different types of information. Look out for the following items.

Code Samples

Code in this book is displayed using a fixed-width font, like so:

<h1>A Perfect Summer's Day</h1>
<p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p>
			

If the code is to be found in the book's code archive, the name of the file will appear at the top of the program listing, like this:

example.css

.footer {
  background-color: #CCC;
  border-top: 1px solid #333;
}
				

If only part of the file is displayed, this is indicated by the word excerpt:

example.css (excerpt)

.footer {
  background-color: #CCC;
  border-top: 1px solid #333;
}
				

If additional code is to be inserted into an existing example, the new code will be displayed in bold:

function animate() {
  new_variable = "Hello";
}
			

Where existing code is required for context, rather than repeat all of it, ⋮ will be displayed:

function animate() {
  ⋮
  new_variable = "Hello";
}
			

Some lines of code should be entered on one line, but we've had to wrap them because of page constraints. An ➥ indicates a line break that exists for formatting purposes only, and should be ignored:

URL.open("http://www.sitepoint.com/responsive-web-design-real-user-testing/?responsive1");
			

Tips, Notes, and Warnings

Supplementary Materials

• The book’s code archive contains downloadable code and sample videos to accompany the examples presented.
• https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky web problems.
• [email protected] is our email address, should you need to contact us to report a problem, or for any other reason.