Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library 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
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
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Working with Responsive Images
chevron up
Icon
1. Working with Responsive Images
Icon
Getting started
Icon
Beginning with fluid images
Icon
Catering to vendor prefixes and image formats
Icon
Catering to different platforms
Icon
Catering to HD or retina images
Icon
Using sprites to display responsive images
Icon
Determining the available viewport for use
Icon
Working out media queries
Icon
Using pure JS to determine page breakpoints
Icon
Using data tags to allow bandwidth constraints
Icon
Working with the tags
Icon
Working with the SVG image format for scalability
Icon
Using image icons for scalability
Icon
Building a responsive carousel
Icon
Creating responsive maps using Google Maps
Icon
Summary
2
2. Adding Responsive Video Content
Icon
2. Adding Responsive Video Content
Icon
Getting ready
Icon
Determining support for
Icon
Choosing the right format
Icon
Embedding HTML5 video content
Icon
Determining an available viewport for use
Icon
Catering to fallback support
Icon
Using JS libraries to provide support
Icon
Catering to different platforms
Icon
Allowing for vendor prefixes
Icon
Displaying full-size videos
Icon
Summary
3
3. Mixing Content
Icon
3. Mixing Content
Icon
Mixing video and image content on the same page
Icon
Considering the pitfalls of mixing content
Icon
Using preloaders to reduce delays
Icon
Adding lazy loading support to our pages
Icon
Making allowances for mobile devices
Icon
Summary
4
4. Testing Responsive Media
Icon
4. Testing Responsive Media
Icon
A starting point for testing
Icon
Considering pitfalls of responsive testing
Icon
Testing responsive sites with online tools
Icon
Using tools to determine speed
Icon
Summary
5
5. Using Frameworks
Icon
5. Using Frameworks
Icon
Introducing our three examples
Icon
Adding responsive media to a CMS
Icon
Implementing responsive media in Bootstrap
Icon
Using Less CSS to create responsive content
Icon
Summary
6
Index
Icon
Index

Chapter 1. Working with Responsive Images

"A picture tells a thousand words…"

These words used in an advert dating from 1913 for the Piqua Auto Supply House of Piqua, Ohio, still ring true over a hundred years later. The only difference is the advent of technology—with the increasing use of mobile phones, tablets, and portable devices comes a need to display content on smaller devices. While text might be easy to display, images are less so, but are still just as important. Throughout this chapter, we're going to look at some of the tips and tricks you need to learn in order to display images of the right size and quality on a variety of different devices.

Creating responsive images can be as easy or complex as needed. In this chapter, we will cover a host of topics, which include:

  • Working with fluid images, icons, and sprites
  • Catering to vendor prefixes, image formats, and different platforms
  • Catering to HD/Retina images and using the <picture> tags
  • Determining an available viewport for use
  • Working out media queries using CSS, JavaScript, or data tags
  • Building a responsive carousel and creating responsive maps

Curious? Let's get started!

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Responsive Media in HTML5
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

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

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon