Responsive Media in HTML5

Learn effective administration of responsive media within your website or CMS system using practical techniques
Preview in Mapt

Responsive Media in HTML5

Alex Libby

Learn effective administration of responsive media within your website or CMS system using practical techniques
Mapt Subscription
FREE
$29.99/m after trial
eBook
$10.50
RRP $14.99
Save 29%
Print + eBook
$24.99
RRP $24.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$10.50
$24.99
$29.99p/m after trial
RRP $14.99
RRP $24.99
Subscription
eBook
Print + eBook
Start 30 Day Trial

Frequently bought together


Responsive Media in HTML5 Book Cover
Responsive Media in HTML5
$ 14.99
$ 10.50
Responsive Web Design with HTML5 and CSS3 - Second Edition Book Cover
Responsive Web Design with HTML5 and CSS3 - Second Edition
$ 31.99
$ 22.40
Buy 2 for $28.00
Save $18.98
Add to Cart
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 

Book Details

ISBN 139781849696968
Paperback128 pages

Book Description

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.

Table of Contents

Chapter 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
Working out media queries
Using pure JS to determine page breakpoints
Using data tags to allow bandwidth constraints
Working with the <picture> tags
Working with the SVG image format for scalability
Using image icons for scalability
Building a responsive carousel
Creating responsive maps using Google Maps
Summary
Chapter 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
Chapter 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
Summary
Chapter 4: Testing Responsive Media
A starting point for testing
Considering pitfalls of responsive testing
Testing responsive sites with online tools
Using tools to determine speed
Summary
Chapter 5: Using Frameworks
Introducing our three examples
Adding responsive media to a CMS
Implementing responsive media in Bootstrap
Using Less CSS to create responsive content
Summary

What You Will Learn

  • Add responsive images and video content to your site
  • Understand some of the pitfalls of mixing responsive images and videos, and how to alter your development to ensure both co-operate together
  • Incorporate responsive media in popular frameworks such as WordPress, Less CSS, and Bootstrap
  • Test responsive sites to ensure content displays correctly on different iOS and Android devices
  • Discover how to make allowances for mobile devices, and use tools to improve speed of access
  • Utilize tools such as YSlow and other online tools to determine speed of the sites
  • Employ preloaders to counter delays in loading

Authors

Table of Contents

Chapter 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
Working out media queries
Using pure JS to determine page breakpoints
Using data tags to allow bandwidth constraints
Working with the <picture> tags
Working with the SVG image format for scalability
Using image icons for scalability
Building a responsive carousel
Creating responsive maps using Google Maps
Summary
Chapter 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
Chapter 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
Summary
Chapter 4: Testing Responsive Media
A starting point for testing
Considering pitfalls of responsive testing
Testing responsive sites with online tools
Using tools to determine speed
Summary
Chapter 5: Using Frameworks
Introducing our three examples
Adding responsive media to a CMS
Implementing responsive media in Bootstrap
Using Less CSS to create responsive content
Summary

Book Details

ISBN 139781849696968
Paperback128 pages
Read More

Read More Reviews

Recommended for You

Responsive Web Design with HTML5 and CSS3 Book Cover
Responsive Web Design with HTML5 and CSS3
$ 23.99
$ 4.80
Bootstrap Site Blueprints Book Cover
Bootstrap Site Blueprints
$ 26.99
$ 18.90
Object-Oriented JavaScript - Second Edition Book Cover
Object-Oriented JavaScript - Second Edition
$ 29.99
$ 21.00
Learning Bootstrap Book Cover
Learning Bootstrap
$ 26.99
$ 18.90
JavaScript and JSON Essentials Book Cover
JavaScript and JSON Essentials
$ 17.99
$ 12.60
HTML5 and CSS3 Responsive Web Design Cookbook Book Cover
HTML5 and CSS3 Responsive Web Design Cookbook
$ 26.99
$ 5.40