Responsive Media in HTML5

About This Book

• Learn how to add images and videos to your site using responsive techniques such as sprites and JavaScript libraries
• Understand some of the pitfalls of creating responsive media, such as "format not supported," and how we can avoid these issues during the development process
• Apply the basic techniques of creating responsive images and video content to popular frameworks such as WordPress, Bootstrap, or Less CSS

Who This Book Is For

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.

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

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.