Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Responsive Media in HTML5
  • Table Of Contents Toc
  • Feedback & Rating feedback
Responsive Media in HTML5

Responsive Media in HTML5

By : Alex Libby
Buy this Book
close
close
Responsive Media in HTML5

Responsive Media in HTML5

By: Alex Libby
Buy this Book

Overview of this book

If you are a web designer with a good understanding of CSS, jQuery, and HTML, but new to creating responsive sites, then this book is for you. The prerequisite is a good understanding of CSS and HTML; the demos will suit those who have some prior knowledge of Less CSS, WordPress, or Bootstrap.
Table of Contents (7 chapters)
close
close
close
Preface
chevron up
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Working with Responsive Images
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
2
2. Adding Responsive Video Content
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
3. Mixing Content
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
4
4. Testing Responsive Media
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
5
5. Using Frameworks
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
6
Index
Index

What you need for this book

All you need to work through most of the examples in this book is a simple text or code editor and a browser (preferably Firefox with Firebug installed). I recommend installing Sublime Text—either Version 2 or 3—although if you have your own particular preference, that will be fine.

Some of the examples make use of additional software, such as WordPress or Crunch—the details of each are included within the appropriate chapter along with links to download the application from source.

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY