Responsive Web Design with HTML5 and CSS3 Essentials电子书

Responsive Web Design with HTML5 and CSS3 Essentials

Responsive Web Design with HTML5 and CSS3 Essentials

Credits

About the Authors

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Introducing Responsive Web Design

Getting started with RWD

Exploring how RWD works

Understanding the elements of RWD

Controlling the viewport

Creating flexible grids

Making media responsive

Constructing suitable breakpoints

Appreciating the importance of RWD

Making our site accessible and intuitive

Organizing our content

Comparing RWD to adaptive design

Preparing our development environment

Considering a suitable strategy

Exploring best practices

Designing for touch

Setting up a development workflow

Discovering the requirements

Planning our site

Designing the text

Sketching our design

Prototyping and creating our design

Testing our design

Exploring mistakes

Summary

2. Creating Fluid Layouts

Introducing flexible grid layouts

Understanding the different layout types

Setting the available viewport for use

Balancing viewport against experience

Considering viewport units

Exploring the benefits of flexible grid layouts

Understanding the mechanics of grid layouts

Implementing a prebuilt grid layout

Exploring the use of flexbox

Taking a closer look

Visiting the future

Implementing a basic gallery grid

Exploring what happened

Taking it further

Summary

3. Adding Responsive Media

Making media responsive

Creating fluid images

Implementing the <picture> element

Using the srcset attribute

Exploring the sizes attribute

Manipulating the HTML5 <picture> element

Putting it all together

Exploring what happened

Creating a real-world example

Taking things further

Making video responsive

Embedding externally hosted videos

Introducing the new HTML5 video element

Embedding HTML5 video content

Exploring what happened

Building a practical example

Exploring what happened

Exploring the risks

Making audio responsive

Taking things further

Making text fit on screen

Sizing with em units

Using rem units as a replacement

Exploring use of viewport units

Taking things further

Summary

4. Exploring Media Queries

Exploring some examples

Understanding media queries

Exploring the available media types

Listing the available media features

Introducing operators in our queries

Identifying common breakpoints

Creating custom breakpoints

Understanding the rationale

Taking care over our design

Removing the need for breakpoints

Putting our theory into practice

Creating some practical examples

Making it real

Exploring what happened

Detecting high-resolution image support

Exploring how it works

Examining some common mistakes

Exploring best practices

Taking things further

Summary

5. Testing and Optimizing for Performance

Understanding the importance of speed

Understanding why pages load slowly

Optimizing the performance

Starting with Google

Taking things further

Testing the performance of our site

Working through a desktop example

Viewing on a mobile device

Best practices

Providing support for older browsers

Considering which features to support

Let the user choose what they want

Do we need to include a whole library?

Considering cross-browser compatibility

Outlining the challenges

Understanding the drawbacks of JavaScript

Providing a CSS-based solution

Testing site compatibility

Working out a solution

Exploring tools available for testing

Viewing with Chrome

Working in Firefox

Exploring our options

Following best practices

Summary