icons-and-the-web

View Github Repository Open presentation in a new window

betravis

See all presentation from betravis

icons-and-the-web

1 3

icons-and-the-web

Talk on using icons on the web

On Github betravis / icons-and-the-web

Icons and the Web

betravis / bear_travis bear.me/icons-web

* Hello there, I'm Bear Travis * You can find me on github, where I've posted the slides * Or on twitter, where you can ask any questions you might have * Today, I would like to talk to you a little bit about icons, from how they are made, to how they are packaged and then delivered to your screen

About Me

* I work on the Web Platform team at Adobe * Our job is to help make the web a better creative medium

What is an Icon?

* Let's start out by laying some groundwork, what exactly is an icon?

Icons are visual metaphors that help users navigate an interface.

* Let's start with a working definition. * Icons are visual representations of an idea, that help users navigate a graphical interface. * Paraphrasing the parts I like from Wikipedia * If we go back to the first slide, these cursors help the user maintain the map between their physical mouse location and their virtual screen location. * A kind of "you are here" idea. * Think of them as signposts.

Why do we need them?

* But it might be a little more helpful to talk about what problems icons solve, and how they are useful. * We're going to step back into the history-mobile. Q: Lead in with the Vannevar Bush Memex?
1973 Xerox PARC Alto * Imagine, if you will, a time when computers for everyday people were just starting to gain traction. * One of the first personal-ish computers was the Xerox PARC Alto * This is the file browser * The Alto was experimenting with more visual approaches to file browsing * The mouse was still relatively new * But while this may be easier to navigate than a command line, there is still a lot going on * A lot of text, and it's tricky to sort all of this information * "I want to play a game", "I want to delete a file", "I want to work on that document for work"
1984 Apple Macintosh * If we fast-forward a decade we get the Apple Macintosh * What we are seeing here is a trend towards more visual, less textual navigation * Things take up more space, but are more readily understood * One of the big differences here are visual metaphors, and key among those are the icons * You'll see the trash can to help you delete files, folder icons to help navigate and sort information.
2013 iOS 7 * And if we jump forward just a little bit more, we get to modern devices * Smaller screens, packing more information * One helpful way to sort all of that is to pack it into pictures, often paired with text * We can also see how varied their use can be. On the right, we have icons to help navigate options while performing a specific task. * On the left, we have icons to provide branding and differentiate between entirely different tasks. * We see icons on the top to indicate signal strength, wifi, battery power. * Icons are everywhere! * Icons work best when they are quickly understood -- you need to have a reason to take up all that visual real estate, especially when you are working with small screens. * Context is part of it -- top left tells us signal strength, probably less understandable in a different context * Top right tells us battery power * Imagine if these were both just percentages, maybe with "Signal" and "Battery Power" instead * Same information, but this is packaged in less space and less visually cluttered * Smaller screens are also probably part of why we are seeing so many of these

Icons should help users navigate an interface

So to summarize

Icons on Screens

* Icons are small enough that you have to start thinking about actual pixels * Always a danger if you design and display at a different size

Pixel Perfect

* Icons have a limited amount of visual real estate in which to communicate an idea
16 x 24 icon * Let's revisit that cursor arrow icon I showed earlier. * It's only 16 x 24 pixels in dimension. * That's 384 pixels to communicate an idea, and most of them are empty to give space.

Ideal

Pixels

* Icons often begin as an idealized form that is then translated to pixels. * Although you generally can't go wrong with icon design, the smaller the icon will be, the more necessary simplicity becomes. * Small details won't make it into a translation that's only 16 pixels wide. * During the translation, you can do some clean-up to make * This cursor icon, for example, is designed to fit into 16x24 pixels. * That's not that many, so it's important to get every single one right.

Vector

Raster

* Icons often begin as an idealized form that is then translated to pixels. * Although you generally can't go wrong with icon design, the smaller the icon will be, the more necessary simplicity becomes. * Small details won't make it into a translation that's only 16 pixels wide. * During the translation, you can do some clean-up to make * This cursor icon, for example, is designed to fit into 16x24 pixels. * That's not that many, so it's important to get every single one right.
16x24, 24x36, 32x48 * If we have the original form in vector format, * We can render it at each size we want, and then potentially correct the pixels * We have to be careful if this is done automatically for us. * In this case, the ideal was authored on a 16x24 grid * When translated to a 24x36px grid, some coordinates start to fall on half pixel boundaries. * If you look at the middle icon, you can see that the left edge isn't crisp, both the white and black edges have antialiased. * Although slight, artifacts like this will cause icons to look blurry.
icon on 20 x 20 grid * I want to show you one more example of what can happen when you render vectors * Take this example of an image icon, drawn as a vector on a 20x20 unit grid.
result of 0.5px offset * If the vector is rendered not on a pixel boundary, all of the lines become antialiased. * This will result in a blurry looking icon, and has significantly altered the icon's appearance (the outline is much different), and can therefore affect how the icon looks wrt other icons in the set.

The bad news

* So we kind of have some bad news / good news

Icons may lose clarity when working with anything other than the exact pixels.

The good news

High resolution displays make these issues less visible.

Icon Delivery

Icons should be

Scalable

Stylable

Accessible

"rabbit"

Packagable

+ + + + =

Performant

* Should have minimal footprint * Preferable to load only what you need, in one resource request * No script DOM manipulation

Easy to author & use

Raster Icons

* This method is probably the most widely supported * Uses a pixel-based image format, such as png, gif, jpg * When designing these, you know exactly what each pixel will be * Provided it displays at the intended size 
<img class='icon' src='icon-cow.png'>
.icon { /* formatting */ }
.icon-cow {
    background: url('icon-cow.png');
}
<span class='icon icon-cow'></span>

Minimizing resource loads

Stylesheet Embed

.icon-cow {
background: url(data:image/png;base64,...);
}

Spritesheet

.icon {
    background: url('spritesheet.png');
}
.icon-cow {
    background-size: 80px 24px;
    background-position: -64px 0;
}

What’s Good

  • Pixel-level control
  • Browser support

What’s Not

  • Fixed size & resolution
  • Limited packaging support

Icon fonts

Anatomy of a font * A font maps a character or set of characters to their visual representation (glyph). * Generally vector based for clean rescaling * Package for a set of vector artwork * Mapping taken care of by the browser to replace source characters with their vector representation

&#112; p

* A font takes a code point, the numerical representation of the letter on the computer, and maps it to a visual representation * Here we have the code point 102 as an HTML entity translating to 'F' * There are several different encodings that represent the mapping between a number and a letter, in general the one you're going to be working with is probably Unicode * Font formats like OTF support the Unicode code point mapping

&#112;

* So why not just replace the visual representation with our icon (yay!) 
@font-face {
    name: icon-font;
    src: url(icon-font.woff) format(woff);
}
.icon { font-family: icon-font; }
.icon-pig:before { content: 'p'; }
<span class='icon icon-pig'></span>

Stylable

and well supported

5 32 37 7 24 8 4.1 Tested on current versions of evergreen browsers, plus older verions of others CR(37), S(7), FF(32), IE(11 down), O(24), iOS(8), A(4.1.2, 4.3), mCR(31)

but it’s still a hack…

Sizing & positioning

Fallbacks & accessibility

Pig

vs

p Pig

vs

 Pig

What’s good

  • Scalable
  • Stylable
  • Solid browser support
* http://filamentgroup.com/lab/bulletproof_icon_fonts.html * Thoughts: http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/ * Browser font adjustments: a little bold, a little light, antialiased, whatever -- not as much control * Positioning can feel a little awkward, absolute, line-height * Fallbacks can be weird * Square peg, round hole and all that * BUT, especially if you are interspersing icons and text, can work well * And, supported as well as fonts on the web -- pretty well (need to test) * But it's still pretty hacky

What’s not

  • Imprecise size & positioning
  • Verbose accessibility & fallbacks
  • Difficult to author fonts

SVG

* SVG, scalable vector graphics * Define paths that will scale, so they'll look great at any size 
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100">
    <path fill="#DA727E" d="…"/>
</svg>
* Some very quick highlights about SVG * It is its own xml-based document format. It's similar to HTML, but slightly different. * It was designed to describe scalable vector artwork. * Because it has its own format, there are a couple interesting things you can do with it, which we'll get to in a second.

Support

9 30 27 5.1 23 6.1 4.4 * One of the reasons we're starting to see more excitement around SVG is that browser support is reaching critical mass * Older browsers that don't support it are less prominent today, and supporting browsers represent a good section of the market * Data from caniuse: Android has partial support back to 4 (no masking)

Including SVG

Inline 

<html>
  <p>Some text</p>
  <svg [xmlns="http://www.w3.org/2000/svg"]
    viewBox="0 0 100 100">
    <path d="…" />
  </svg>
</html>
* You can use it inline, just drop the svg right into your html * Note that you still have to refer to the svg namespace 
p { color: blue; }
path { fill: blue; }

Linked 

<img src="rabbit.svg">
.icon-rabbit { background: url(rabbit.svg); }

SVG as Package

Icon Stacks

+ + + + = 
g { visibility: hidden; }
g:target { visibility: initial; }
<g id="rabbit"> … </g>
<g id="chicken"> … </g>
<g id="cow"> … </g>
<img src="resources/animals.svg#chicken">
9 32 37 7.1 24 8 4.3

Icon Symbols

Internal Symbol 
<defs>
    <symbol id="chicken">
        <path d="…" />
    </symbol>
</defs>
<use xlink:href="#chicken" />
External Symbol 
<html>
<svg xmlns:xlink="…">
    <use xlink:href="animals.svg#chicken" />
</svg>
</html>
<use xlink:href="animals.svg#chicken" />

Accessibility

<svg xmlns:xlink="…">
    <title>Chicken</title>
    <desc>A chicken icon</desc>
    <use xlink:href="animals.svg#chicken" />
</svg>

Stylable

<use xlink:href='…#rabbit' fill='blue' />
11 32 37 7 24 8 4.3

What’s Good

  • Individual or packaged icons
  • Vector based
  • Use as image
  • Many tool options

What’s Not

  • Browser support

Summary

Use whatever makes your life easier. I recommend SVG where possible.

Thanks!

Bonus Reel

Web Components

<icon set="animals.svg" name="fox" />

Responsive icon design

* One more problem worth mentioning is that finer details may get lost as a design is scaled down * Want to design for size used
Microphone from Iconic * Here we can see the microphone icon from the set Iconic. * They're trying to create general-use icons that look excellent at any size. * What you can see them doing is thinking about the amount of detail you can have in an icon at any given size. * You probably won't have the time to design all of these, or even use all of these * But, it is important to try to understand how your icons will be used. There is a big difference between an icon used at 25, 50, or 100 pixels.