Cover image for Responsive Media in HTML5

Responsive Media in HTML5

Author Alex Lib
Release Date: 2014/12/01
ISBN: 9781849696968
Topic:
0%
58
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

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

In Detail

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.

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

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Responsive Media in HTML5
    1. Table of Contents
    2. Responsive Media in HTML5
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    8. 1. Working with Responsive Images
      1. Getting started
      2. Beginning with fluid images
      3. Catering to vendor prefixes and image formats
      4. Catering to different platforms
      5. Catering to HD or retina images
      6. Using sprites to display responsive images
      7. Determining the available viewport for use
        1. Using CSS to set our viewport
        2. Getting the viewport using JavaScript
      8. Working out media queries
      9. Using pure JS to determine page breakpoints
      10. Using data tags to allow bandwidth constraints
      11. Working with the <picture> tags
        1. Maintaining the <picture> tag in our code
      12. Working with the SVG image format for scalability
      13. Using image icons for scalability
      14. Building a responsive carousel
      15. Creating responsive maps using Google Maps
      16. Summary
    9. 2. Adding Responsive Video Content
      1. Getting ready
      2. Determining support for <video> formats
      3. Choosing the right format
      4. Embedding HTML5 video content
      5. Determining an available viewport for use
      6. Catering to fallback support
      7. Using JS libraries to provide support
      8. Catering to different platforms
      9. Allowing for vendor prefixes
      10. Displaying full-size videos
      11. Summary
    10. 3. Mixing Content
      1. Mixing video and image content on the same page
      2. Considering the pitfalls of mixing content
      3. Using preloaders to reduce delays
      4. Adding lazy loading support to our pages
      5. Making allowances for mobile devices
        1. Creating responsive images automatically
        2. Automating the shrinking process
      6. Summary
    11. 4. Testing Responsive Media
      1. A starting point for testing
        1. Using Google Chrome or Opera
        2. Using Firefox
        3. Using Internet Explorer
      2. Considering pitfalls of responsive testing
      3. Testing responsive sites with online tools
      4. Using tools to determine speed
        1. Analyzing results
        2. Digging further into the code
        3. Revealing all
        4. Fixing the problem
      5. Summary
    12. 5. Using Frameworks
      1. Introducing our three examples
      2. Adding responsive media to a CMS
        1. Adding responsive media manually
        2. Fixing a responsive issue
        3. Using plugins to add responsive images
        4. Adding responsive videos using plugins
        5. Using plugins to embed videos
      3. Implementing responsive media in Bootstrap
        1. Using Bootstrap's CSS classes
      4. Using Less CSS to create responsive content
        1. Working through the code in detail
        2. Transferring to production use
      5. Summary
    13. Index
3.144.124.232