CSS sprites for Responsive Web Design?

CSS sprites for Responsive Web Design?

Summary: Web designers use CSS sprites to reduce the number of requests made by a web page. Essentially a composite image, made up of many smaller images, is used as a common background for a slew of elements, and then the relevant image is ‘revealed’ using CSS.

SHARE:

Web designers use CSS sprites to reduce the number of requests made by a web page. Essentially a composite image, made up of many smaller images, is used as a common background for a slew of elements, and then the relevant image is ‘revealed’ using CSS.

Jake's CSS sprites
My paltry little CSS sprite for the social icons on my portfolio site

Nothing amazing, it was popularized back in 2004 by Dave Shea on A List Apart.

However, you may have heard of this responsive web design malarkey, whereby CSS media queries, a flexible grid and scalable images all combine to serve one web site to many platforms. God bless beep for letting such a genius genie out of the bottle.

Problem is, CSS sprites don’t scale out of the box. You could use the new CSS3 Background-size property but it isn’t supported in Internet Explorer 8 and below.

Or, you could use a web font. This brings vector goodness (ie scalable, colourable, drop shadowable graphics) to users of old web browsers. Font Awesome is the most spectacular collection of icons collected in one font and made for the Twitter Bootstrap boilerplate.

The beauty is two-fold: firstly, if you serve up different font formats using @font-face web fonts, you cover browsers back to Internet Explorer 5.5! (See Font Squirrel’s font formats for more info). Secondly, you can apply the latest/greatest/most-fashionable CSS3 effects such as rounded corners, opacity and text shadows, and it will all scale.

Fontomas - easy iconic fonts composer
Screenshot of Fontomas website

Another immensely useful online font tool is Fontomas, which enables you to upload a font and cherry pick just the characters/symbols you want, and then generate a 'minified' custom font. This results in a minimal file size for super fast download.

Font Forge screenshot
FontForge, cross-platform font outline editor. Back to the Future!

You can combine this with creating your own custom font. This is a lot easier than it sounds with the stalwart, cross-platform, open source font editor FontForge. Okay, it looks like software from the 20th century. But it does the job, and you can import SVG vector files fresh from Illustrator/Inkscape.h

Topic: Software Development

Jake Rayson

About Jake Rayson

A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text.

As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, and my working life reflects my commitment to open standards and accessible websites (ie accessible by everyone, regardless of browser, platform, ability or technology).

For web publishing platforms, I use WordPress for ease of use and Drupal for more complex solutions.

I am also learning about Ruby, Rails, Sinatra and CoffeeScript. I like the minimalist Ruby Way. To this end, my personal portfolio website is built with NestaCMS.

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Talkback

0 comments
Log in or register to start the discussion