Implementing Responsive Design with Media
This chapter is from the book
This chapter is from the book
This chapter is from the book
Look! We’ve figured it seventeen different ways, and every time we figured it, it was no good, because no matter how we figured it, somebody don’t like the way we figured it.
—BUDDY HACKETT AS BENJY BENJAMIN IN IT’S A MAD MAD MAD MAD WORLD
When it comes to rich experiences online, we have a love/hate relationship. On one hand, beautiful images and interesting videos help to provide a deeper, more pleasant experience. On the other hand, including many images and videos on a page results in a slow loading time, which can be very frustrating. It takes careful consideration and planning to give our users the best of both worlds: a beautiful experience that loads as quickly as possible.
Using the methods outlined in the first three chapters, we’ve built ourselves a responsive site. It looks good on desktops, on tablet devices, and on smartphones. Users can resize the browser window to their hearts’ content, and the layout will adjust accordingly. If delivering a responsive approach were this easy, this book would be short indeed. There’s still plenty of room to tidy things up. The images, in particular, are an issue.
In this chapter, we’ll discuss:
- Why performance matters
- How to conditionally load images
- What responsive image solutions are available, and their limitations
- How to swap out background images without downloading multiple images
- How to conditionally load web fonts
- What’s ahead for responsive images
- How to make embedded video scale while maintaining its aspect ratio
- What to do with responsive advertising
What’s the problem?
Once we hit the final breakpoint (1300px), the images associated with the “More in Football” section look a little worse for wear. Other than that, the images appear sharp and crisp.
We could probably improve the lead-in photograph for small screens. If the small version of the image were more tightly cropped, the image would maintain its initial impact, even when scaled down on the small screen. As it is, the flag and foot start to get lost at such a small size (Figure 4.1).
)
Figure 4.1. On small-screens, the flag and foot in the main image start to lose their impact.
The main problem though is not in how the images look, but in how much they weigh, how much demand they place on performance. Currently, the same images are being loaded regardless of the device in use. That means, for example, the 624px lead-in image is being downloaded even on small screens where a 350px image is all that’s needed. The page performance is suffering, and that’s a big deal to people visiting the site.
Performance
Unfortunately, performance is treated as an afterthought on many projects. A quick look at the data reveals that it should be anything but.
Most of us working with the Web have faster connections than the average Internet user. As a result, we experience the Web differently. Our users, however, are keenly aware of how painful it is to use a poorly performing site.
In 2009, the major shopping comparison site Shopzilla improved its page load time from 4 to 6 seconds to 1.5 seconds. The results were stunning. The site’s conversion rate increased by 7 to 12 percent and page views jumped a whopping 25 percent.1
Mozilla found similar results when it trimmed page load time by 2.2 seconds: download conversions went up by 15.4 percent, which translated into an estimated 10.28 million additional downloads of Firefox per year!2
The situation is much more dire for mobile phones. Networks are slower, hardware is less capable, and you have to deal with the messy world of data limitations and transcoding methods. In spite of all this, user expectations remain the same. In fact, 71 percent of mobile users expect sites to load on their phones as quickly as or faster than on their home computers.3
This is bad news for our site as it currently stands. Both the logo and article lead-in photo are very large. The article lead-in photo is 624px wide and weighs around 50KB. The small-screen layout could get away with using a much smaller image (somewhere around 300px), but we’re still passing along the large desktop image instead of something more appropriate. Removing the amount of data sent down the pipe is an important consideration, and one we can’t afford to ignore.
A quick assessment of the page reveals the following images that could be optimized:
- The images for the “More in Football” section. Each of these is only 300px, but they’re really not needed on the small screen. In fact, they take up a lot of screen real estate and look out of proportion with the content (Figure 4.2). On the small screen, users have a better experience if only the headlines are displayed—not the images.
Figure 4.2. The images in the “More Football” section take up a lot of precious screen real estate on small-screen devices.
- The article lead-in image. The lead-in image is a whopping 624px and weighs in at just under 50KB. On small screens, an image half the size would work just as well. In addition, if the small-screen version of the image was more tightly cropped, the visual focus on the flag would be stronger.
- The logo. The logo weighs in at 10KB, so it’s much lighter than the lead-in article. It is, again, about twice as big as it needs to be.
)