Responsive Design High Performance

Dewald Els

• Publisher: Packt Publishing
• Year: 2015
• eBook ISBN: 9781784390839
• Topic: Computer Science
• Subtopic: Web Development
• Index: Computer Science

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

Responsive Design High Performance

Copyright © 2015 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2015

Production reference: 1090415

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78439-083-9

www.packtpub.com

Credits

Author

Dewald Els

Reviewers

Younes Baghor (W3bwizart)

Rodrigo Encinas

Evan Mullins

Commissioning Editor

Dipika Gaonkar

Acquisition Editor

Usha Iyer

Content Development Editor

Mohammed Fahad

Neeshma Ramakrishnan

Technical Editor

Narsimha Pai

Copy Editors

Jasmine Nadar

Vikrant Phadke

Project Coordinator

Shweta Birwatkar

Proofreaders

Simran Bhogal

Stephen Copestake

Maria Gould

Indexer

Tejal Soni

Graphics

Sheetal Aute

Disha Haria

Production Coordinator

Manu Joseph

Cover Work

Manu Joseph

About the Author

Dewald Els is short, dark, hairy, and curious. He has extensive experience in PHP and JavaScript. He has worked in the corporate sector after some experience in video game development in C#.

After working in video game development, Dewald joined one of South Africa's top three ISP service providers. He was in the team that developed a solid backend for the ISP from the ground up, to better serve clients. After moving to Pretoria, he currently works for Vane Systems, maintaining their event sales website, http://www.ticibox.com. He takes the lead in developing new features for the site.

About the Reviewers

Younes Baghor (W3bwizart) is a freelance lead developer at KBC Touch. He started his career as a welder of trucks and containers and later became a maître d'hôtel. In 2007, he decided to become a programmer, and he graduated in 2010. Although educated in .NET, he was inspired by the Web and HTML5, JavaScript in particular. His experience with web technologies gives him an overall knowledge of the current technologies, libraries, and methodologies driving the modern web today.

Younes is not a guru or expert but knows JavaScript, AngularJS, HTML5, CSS3, mobile-first, progressive enhancement, and responsive design.

Rodrigo Encinas has worked for more than 12 years for companies in different fields, from advertising and television to world-class fashion brands and communication. Nowadays, he works a consultant for international companies, helping them develop web applications and improve user experience with best practices and modern patterns, such as HTML5, responsive web design, and single-page applications.

I would like to thank Packt Publishing for helping me do a great job, and I would like to thank you for your interest in this field. I would encourage you to learn how to build the Web for the future.

Evan Mullins has always been interested in both design and technology. He studied digital media and earned his BFA degree from the University of Georgia. While attending university, he also studied computer science, animation, and new media. Evan loves the cross-section of art and technology that he finds in the Web.

Professionall...

Table of contents

• Responsive Design High Performance