Graphic design for responsive sites
In 1996, many people involved in building the Web would have laughed at you if you had told them that less than 20 years in the future we would be developing websites that worked well on mobile phones, tablets, TVs, even cars and home lighting. But today it is very much a reality. This article provides a high level discussion aimed at helping you to choose the best option for your graphical needs.
Textual content is not a problem, as text boxes are innately responsive, but the picture starts to get ugly when you start including graphics and complex layouts on your pages — especially when those graphics and layouts need to adapt to different displays! This is why we have included an entire docs section covering each of these topics (the one you are currently in, and app layout.)
In addition, these days there are so many more technologies to choose from than your humble BMPs, JPGs, GIFs and PNGs. But what should you choose? This really depends on what target devices you have to support, how complex the graphics need to be, and how much interactivity your graphics require.
Serving images selectively via CSS
In general, you will use mostly the same graphical assets for different layouts in a responsive design, but you may well include slightly different ones dependent on context. For example, if your desktop layout includes a large header graphic and several programmatic graphics (e.g. CSS drop shadows and gradients), you may want to simplify or remove certain assets for the site's mobile layout, or even provide smaller assets to suit the smaller screen better. This is because in general mobile devices will have less processing power and bandwidth available, so you want to reduce the processing and downloads. In addition, mobile devices have smaller screen sizes, so it makes sense to reduce visual clutter on a mobile layout.
CSS media queries allow us to serve different CSS rules dependent on viewport dimensions, and you should consider using mobile first media queries where possible. This means that the default layout before any media queries are encountered in the CSS is the small screen/mobile layout, not the wide screen/desktop layout. So when the page is loaded on a mobile device, the mobile will only download the mobile assets, and not the desktop resource assets.
While the pixel size of an image resource doesn't change, there are a few ways to make HTML
max-width: 100% on an image allows the image to render at its normal size when space allows, without causing pixelation, while ensuring the image never exceeds the width of its parent container. Different image files can be served depending on viewport size using the
sizes attributes. The
<picture> element can contain multiple
<source> elements and one
<img> element to offer alternative versions of an image for different display/device scenarios. Always make sure your images include alternative text by including an
Coping with different resolutions
In this section we'll review different strategies for dealing with getting images to work across devices with different screen resolutions. The issue here is that raster images, when rendered on high res devices, are in danger of appearing tiny because the same number of pixels is being shown in a much smaller screen space. Most hi res devices apply a default zoom factor to the whole web page so that the content is a bit more legible, but the downside of this is that the images in question start to look pixelated and ugly because they have been zoomed in.
- high res and low res image copies
One option here is to create a hi res and a low res set of images, then use resolution media queries to serve the hi res images only to hi res devices.
- Programmatic images
You should also try to use programmatic/vector graphics as much as possible, as they theoretically scale infinitely so will still look crisp at high resolutions. You could use CSS properties for generating effects like drop shadows, gradients and rounded corners, and you could also consider using SVG for other UI elements, instead of raster graphics formats. Raster images within SVG files do have the same issues as other image types.
- Using fonts for icons
Another technique is web fonts for icons. Text is infinitely scalable on the web, and you can also use CSS text properties to style your web font icons, such as
color. Unfortunately, icon fonts are not by default accessible. If the user uses their own font, such as with the Dyslexia extension, your icons may not show. Additionally, every icon needs to be nested in an element that provides it with an accessible name, such as with
If your images need to feature some level of interactivity, such as links, other clickable areas, or animation, there are a number of options available.
As well as adding programmatic graphical effects to links (and anywhere else you might want them), CSS also allows you to write declarative animations and transitions.
You can create a canvas to draw interactive graphics on using the HTML
Canvas is very powerful, but it needs to be used with caution. It is good for the visuals of games and complex data visualizations, but for standard user interface elements it is not very efficient and completely inaccessible to screen reader users. Canvases are just raster images, so the text created inside them is not accessible. Also, they don't scale well.