Responsive Media in HTML5

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

Responsive Media in HTML5

This ebook is included in a Mapt subscription
Alex Libby

Learn effective administration of responsive media within your website or CMS system using practical techniques
$10.00
$24.99
RRP $14.99
RRP $24.99
eBook
Print + eBook
Preview in Mapt

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