Chris Converse |
Friday, May 09, 2014
As mobile and tablet Internet usage continues to grow, responsive web design becomes more and more important. Some reports suggest that mobile Internet usage may actually surpass desktop usage this year. For any website not taking advantage of responsive design, this means a loss of traffic and fewer conversions.
When creating a responsive website, it’s especially important to know the best practices for images and media. In this article, we’ll talk about bitmap-based web graphics, including JPG, GIF, and PNG, as well as video.
One of the easiest ways to make your graphics responsive is to use percentage-based values for your images. In the past, designers used pixels to determine height and width, but this isn’t a viable solution anymore with so many different types of devices and screen sizes. Specifying 100% as the width value for your <img> elements in CSS provides a quick fix for responsive images, allowing them to smoothly resize to fit their container when the page is resized.
When creating a responsive website, using fluid images and adaptive media will go a long way to help your site smoothly adapt to different screen sizes, and provide a much better user experience for visitors. Scaling and replacing images are two popular ways to achieve this. Scaling an image (as in the example image above) to fit within a specific layout may work well for many images and layouts. Other designs may be better served by loading alternate graphics altogether. Loading an additional graphic allows you to change the scale, positioning, and crop of the image.
Watch a video: Learn to replace a background image with CSS based on the user’s screen size.
Another aspect to consider is high-definition graphics. Many of today’s screens have high pixel density displays, consisting of 166 ppi and higher. This means standard-sized web graphics are being represented with two, three, or fourtimes the number of physical pixels, so graphics can begin to look soft or blurry when viewed on these devices. To fix this, use larger images, and set the size appropriately in HTML or CSS. This allows browsers to use the extra detail in yourimage file, on devices that support it.
Watch a video: Learn to create high-definition graphics.
When considering high-definition graphics, you should also consider download as well. Larger graphics mean larger file size, and longer downloads. One approach that can help is to use CSS3′s device-pixel-ratio property to determine whether a high-definition graphic will benefit your user. If you know the pixel ratio of the device that’s viewing your images, you can use the same image-swapping technique discussed earlier to replace our graphics with higher quality versions.
Watch a video: Learn to detect high pixel displays with CSS.
In addition to inline media elements, using the iframe element in a webpage allows video, maps, social media feeds, and other interactive experiences to be inserted into your page as well. And as with video, the iframe’s dimensions need to be specified to match the content it’s loading. When your content has to be displayed proportionally, you can’t just rely on a width percentage alone and hope for the best.
Watch a video
The Future Looks Bright
The future of responsive design and fluid media is bright, offering far greater control over how we deliver web content. W3C recommendations being considered for the future include support for bandwidth testing, which would allow us to send assets based on Internet connection speeds, and optimize media for the viewers’ bandwidth. Another W3C recommendation being considered is a new HTML5 picture element, which would allow varying image sources (like we do for video) with web graphics. This solution would provide the best of both responsive image techniques covered in this article. Although these improvements would certainly be welcome, there’s still plenty that you can do today to make your images and rich media responsive in an increasingly mobile world.
Tags: Chris Converse, CSS, Responsive design, Responsive Images, Responsive Web Design, Web Design
Check out these popular Web courses.
Thanks for signing up.
We’ll send you a confirmation email shortly.
Sign up and receive emails about lynda.com and our online training library:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.