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

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.

Professionally, Evan has worked with a slew of start-ups, small businesses, and agencies that build websites: Cartoon Network, Ogilvy & Mather, and Brand Fever. He is currently the lead web developer at Brown Bag Marketing. He is continually busy designing and developing interesting things online.

Since 2004, Evan has maintained a circlecube studio (http://circlecube.com/2007/01/welcome-to-circle-cube-studio/), a freelance web studio and playground for open source experiments, examples, and tips that he simply shares as he learns along the way. The blog's content centers on interactive development principles and technologies. He shares what he learns online as well as at conferences.

Evan is happily married and a proud father of four. He enjoys spending time away from work at his real job—his family. He's also busy volunteering for his church and enjoys camping, playing soccer, and playing music.

www.PacktPub.com

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and, as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On-demand and accessible via a web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.

Preface

Is it responsive? With a growing number of hardware devices that access the web, building a website that is responsive has almost become expected. This can be both good and bad, as responsiveness is a daunting task when not understood properly. So, let's talk about it.

What is responsive design, anyway?

Simply put, a responsive website adapts its layout according to the device being used to access it. The website will dynamically change its layout depending on the device's screen size and orientation.

Some examples of this include menus that collapse, images that resize, and column structures rearranging (for example, a two-column layout converging into one column).

The goal of this book is to make designing and building a website less of a daunting task for the ever-growing number of devices that we use to obtain information from the Internet. We access the Internet from so many different devices, ranging from smart watches to mobile phones and desktops with large high-resolution displays, that responsiveness has become an almost essential feature in web design and development nowadays.

There are prerequisites for a site to qualify as a responsive website. Fluid grids, media queries, and flexible images are a few of them. Additionally, a distinction does need to be made between an adaptive layout and a responsive layout.

Adaptive Layout

An adaptive layout uses fixed-width grids or columns that are triggered at specific and static points.

Responsive Layout

A responsive website makes use of fluid grids; in other words, the grids resize as the viewport size changes.

What this book covers

Chapter 1, The Good, the Bad, and the Ugly of Responsive Web Design, covers