Art direction: Responsive images and graphics

- The final piece of the build phase puzzle is responsive images and graphics. This is an area where the web design world is undergoing a significant shift and staying at the cutting edge of these developments will put you and your project well ahead of the competition. When adding images and graphics to your site, you should, whenever possible, utilize modern techniques and technologies. These improve load and rendering time and lessen the volume of data that needs to travel from the server to the visiting device while still retaining the highest quality image possible.

Before we move on to the post-build testing phase, let's take a look at three techniques and technologies that will make your images and graphics truly responsive. Out-of-the-box images are static elements. They have a fixed width and height and are best displayed at their native size and resolution. The nature of the screens they will be displayed on is the opposite. Screens have an almost infinite variation of sizes and resolutions also vary greatly.

Our challenge is to find a way of serving every visiting device the image that best suits the screen size resolution and bandwidth restrictions. To conquer this challenge, we have the new source set and sizes attributes for the image element as well as the picture element. Combined, these allow us to serve up different image files depending on screen size, resolution, and bandwidth to meet the demands of the modern browser market.

Using these new tools also allows us to rethink images on the web. Because we literally serve up different images depending on the screen they are displayed on, we can also customize those images themselves to fit those particular screens. Maybe a large screen would get the whole image while the smaller one would get a cropped image with only the important details. This is a new area of expertise where web design and art direction techniques more commonly attributed to magazine design finally merge.

It's exciting and worth diving into head first. Source set sizes and the picture element are for regular images, but web graphics often use computer-generated images and icons. For these, we have other options. For icons, we can now use custom icon fonts. These graphics allow us to apply font-specific CSS to flat icons and serve up scalable icons that look crisp and clear on all screens and all resolutions, and because they are fonts, they are light to load and easy to render for the web browser.

For more complex graphics and animations, we can now use scalable vector graphics or SVGs. The amazing thing about these graphics is that they are individual XML documents that draw lines and curves based on numbers and mathematical formulas. That means we can style their individual elements using CSS and, more impressively, interact with them and change them using JavaScript. We're truly entering a brave new world of web design and these three techniques and technologies open the door for almost unlimited possibilities.

How to use them goes far outside the scope of this course, but these other Lynda.com courses will get you on your way. For icon fonts, check out Creating Icon Fonts for the Web and Deploying Icon Fonts for the Web both by James Williamson. To get a first look at SVG, check out Design the Web: SVG Rollovers with CSS by Chris Converse.