3. Mixing Content | Responsive Media in HTML5

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Responsive Media in HTML5

By : Alex Libby

Responsive Media in HTML5

By: Alex Libby

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

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. 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. 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. 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. 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

Index

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Considering the pitfalls of mixing content

Responsive design has become hugely popular over the last few years, with visitors browsing content on the Internet using a variety of devices. This increases the pressure on developers to ensure that their sites work well on a range of different devices and platforms. A recent study by eMarketeer illustrates that four out of every five people will access content via a mobile device and that this figure is projected to increase over the next three years.

Region	2014	2015	2016	2017
Middle East and Africa	94.0	94.0	95.0	96.0
Asia Pacific	87.4	90.0	92.6	93.9
Central and Eastern Europe	72.4	80.6	86.6	91.7
North America	64.3	69.8	74.4	79.2
Western Europe	67.8	78.2	85.0	90.6
Latin America	58.5	65.0	70.1	75.2
Worldwide	79.1	83.6	87.3	90.1

The figures in the preceding table are percentage values taken from eMarketeer in December 2013.

So that we don't fall into the trap of producing a responsive site that...

Search

Your notes and bookmarks