Responsive Design High Performance电子书

Responsive Design High Performance

Table of Contents

Responsive Design High Performance

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What is responsive design, anyway?

Adaptive Layout

Responsive Layout

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. The Good, the Bad, and the Ugly of Responsive Web Design

The good – appearance and management

Appearance

Management

The bad – slow load times and unresponsive interactions

Slow load times

Browser requests

Unresponsive interactions

The ugly – the effects of slow performance

Effects on the end user

Effects on business

Summary

2. Tweaking Your Website for Performance

Resource placement on the DOM

Scripts with $(document).ready()

Scripts that change the layout

The welcome section

The information section

The about section

Adjusting the sections

Improving the output

DNS prefetching

The purpose of DNS prefetching

Too many DOM Elements

Summary

3. Managing Images

Choosing the correct image format

Optimizing images

Progressive images

Adaptive images

Conditional loading

One-to-many DOM elements

Specifying sizes and media queries and introducing sprite sheets

Caching

Scaling

Retina displays

Summary

4. Learning Content Management

Style sheets, media queries, and viewports

Sassy CSS, SASS, and LESS

CSS

SCSS

SASS

LESS

Background images and media queries

Using JavaScript to ease the load

AngularJS

Conditional content management

The server side with PHP

Parallel downloads

Content Delivery Networks

Fonts

Summary

5. The Fastest HTTP Request is No HTTP Request

Reducing the number of requests

Sprite sheets

So, what is image framing?

Combining files

Server-side optimization with Apache

Compression

ETags

Expires headers

File concatenation

AppCache

Summary

6. Testing, Testing, and Testing!

Beginning your testing adventure

Step 1 – planning

Step 2 – testing

Step 3 – assessing results

Step 4 – tracking bugs

Back to the responsive stuff

Summary

7. Speeding Up Development with Design Concepts, Patterns, and Programs

Design concepts

Graceful degradation and progressive enhancement

Object-oriented CSS (OOCSS)

Separating structure from styling

Separating the containers and the content

OOCSS and SASS/SCSS (even LESS)

Patterns and templates

Media query templates

Plugins and software

Grunt

package.json

Gruntfile.js

RequireJS

Summary

8. Using Tools for Performance

Planning

Developing

CodeKit

Prepros

Managing code changes

Summary

A. Taking the Next Steps

An overview of what we've covered so far

A few references for further reading

Ethan Marcotte

Paul Irish

Brad Frost

Ask the people who know

Summary

Index