Responsive Media in HTML5

Alex Libby

• Publisher: Packt Publishing
• Year: 2014
• eBook ISBN: 9781849696968
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Development
• Index: Computer Science

Rapid growth in the use of mobile devices to access the Internet has forced designers to adapt to creating content that is easily viewable on a wide range of different devices. The key is to make images and videos responsive to the platform used, enabling them to be resized automatically when displayed on mobile devices or desktops.

This book is a fast-paced, hands-on guide that shows you how to apply some simple techniques to add images and video content to your site, which may be a simple, one-page portfolio, or a complex content management system. The book starts with showing you how to display images. You will learn about browser support and different platforms, and alternatives for high- and low-resolution images. Moving on, the book covers techniques to add responsive video content. You will get to know about adding images and videos and test the media using online sites and tools. The book also explains the use of plugins and responsive frameworks.

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 <picture> tags

Maintaining the <picture> 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 <video> formats

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

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 abou...

Table of contents

• Responsive Media in HTML5