Responsive Media in HTML5

Table of Contents

Responsive Media in HTML5

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 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. Working with Responsive Images

Getting started

Beginning with fluid images

Catering to vendor prefixes and image formats

Catering to different platforms

Catering to HD or retina images

Using sprites to display responsive images

Determining the available viewport for use

Using CSS to set our viewport

Getting the viewport using JavaScript

Working out media queries

Using pure JS to determine page breakpoints

Using data tags to allow bandwidth constraints

Working with the tags

Maintaining the tag in our code

Working with the SVG image format for scalability

Using image icons for scalability

Building a responsive carousel

Creating responsive maps using Google Maps

Summary

2. Adding Responsive Video Content

Getting ready

Determining support for

Choosing the right format

Embedding HTML5 video content

Determining an available viewport for use

Catering to fallback support

Using JS libraries to provide support

Catering to different platforms

Allowing for vendor prefixes

Displaying full-size videos

Summary

3. Mixing Content

Mixing video and image content on the same page

Considering the pitfalls of mixing content

Using preloaders to reduce delays

Adding lazy loading support to our pages

Making allowances for mobile devices

Creating responsive images automatically

Automating the shrinking process

Summary

4. Testing Responsive Media

A starting point for testing

Using Google Chrome or Opera

Using Firefox

Using Internet Explorer

Considering pitfalls of responsive testing

Testing responsive sites with online tools

Using tools to determine speed

Analyzing results

Digging further into the code

Revealing all

Fixing the problem

Summary

5. Using Frameworks

Introducing our three examples

Adding responsive media to a CMS

Adding responsive media manually

Fixing a responsive issue

Using plugins to add responsive images

Adding responsive videos using plugins

Using plugins to embed videos

Implementing responsive media in Bootstrap

Using Bootstrap's CSS classes

Using Less CSS to create responsive content

Working through the code in detail

Transferring to production use

Summary

Index

Responsive Media in HTML5

Responsive Media in HTML5

Copyright © 2014 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: December 2014

Production reference: 1201214

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-696-8

www.packtpub.com

Credits

Author

Alex Libby

Reviewers

Tristan Denyer

Vaibhav Kanwal

Marija Zaric

Acquisition Editors

Harsha Bharwani

James Jones

Content Development Editor

Rohit Kumar Singh

Technical Editors

Pragnesh Bilimoria

Shruti Rawool

Copy Editor

Laxmi Subramanian

Project Coordinator

Mary Alex

Proofreaders

Simran Bhogal

Maria Gould

Ameesha Green

Indexer

Monica Ajmera Mehta

Production Coordinator

Nilesh R. Mohite

Cover Work

Nilesh R. Mohite

About the Author

Alex Libby has a background in IT support. He has been involved in supporting end users for the last 18 years in a variety of different environments and currently works as a technical analyst, supporting a medium-sized SharePoint estate for an international parts distributor based in the UK. Although he gets to play with different technologies in his day job, his first true love has always been the open source movement, in particular, experimenting with CSS/CSS3 and HTML5. So far, he has written several books for Packt Publishing, including one on HTML5 video and another on the jQuery UI. This is his eighth book.

I'd like to thank family and friends for their help and encouragement and the reviewers for providing lots of constructive comments—without them, I am sure I wouldn't have been able to produce this book!

About the Reviewers

Tristan Denyer is a UX designer for web and mobile, including web apps and portals, e-commerce, online video players and widgets, games (online, iPhone, and board), marketing sites, and more. He's also a UI developer and a WordPress theme developer. He is currently leading the UX/UI for the product team at a start-up in San Francisco. He recently wrote A Practical Handbook for WordPress Themes, CreateSpace Independent Publishing Platform to help owners and operators of self-hosted WordPress websites get the most out of their themes.

His passions include prototyping, web security, writing, carpentry, burritos, and maintaining his popular jQuery plugin on GitHub that helps duplicate a section of a form. He can be found on Twitter at @tristandenyer and on GitHub at https://github.com/tristandenyer, and he blogs at http://tristandenyer.com/.

Marija Zaric is a web designer living in Belgrade with a focus on individual and commercial clients who demand websites that are clear, modern, creative, simple, and responsive. She works with clients from the USA and all over the world, helping them present their services in a unique yet professional way.

Years ago, she started experimenting with Dreamweaver, CSS, and XHTML. She became very fond of coding and retro design. This influenced her to create her first website and achieve subsequent successes. Today, she is a relentless learner. What she loves the most about web design is the constant changes in the field, especially its evolution in the last 3 years when she got inspired by its simplicity, great images, typography, and the possibility to optimize a single website for various devices.

She redesigned and incorporated these styles into her own website and called it Creative Simplicity. With the development of HTML5, she made free templates that are used all over the world in order to advertise her work and share the knowledge. She predicts that in 2015, flat and modern web design will be here to stay, supported by nice photography, responsive design, and strong typography. Her projects can be found at http://www.marijazaric.com/ and http://creativesimplicitywebstudio.com/.

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

Take a straw poll of one hundred users and it is likely you will find that a good proportion have viewed the Internet from a mobile device at some point in the past. Use of these devices to access the Internet has exploded massively over the last few years. This has highlighted the need to design sites that work well on a variety of different devices and platforms.

First coined as a term by Ethan Marcotte back in 2010, responsive web design is the art of designing such sites. A key element of responsive web design is the addition of images and videos. Throughout this book, we're going to take a look at the tips and tricks you need to get ahead in adding responsive media to your sites. We'll see how the lack of a common W3C standard means the field is wide open for different solutions and that catering for different platforms means understanding their limits and making suitable allowances for each type of device.

We'll work through a number of practical examples, with both images and videos, and see the importance of testing both to ensure your content displays as expected on any device. We'll then make use of some of the tips and tricks in several real-world examples, using popular frameworks such as WordPress or Less CSS—you'll see that adding responsive media isn't actually that complicated!

Question