ts-icons-and-the-web

View Github Repository Open presentation in a new window

betravis

See all presentation from betravis

ts-icons-and-the-web

0 0

ts-icons-and-the-web

On Github betravis / ts-icons-and-the-web

Icons and the Web

Bear Travis

* 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

Icons on Screens

* 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.
2013 iOS 7 * Icons are everywhere these days * 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 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
Code for America Style Guide * Web is interesting for its many screens * Variety in sizes, styles, this one has 48 for a single icon

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>
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.
* 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

Vector artwork may not scale cleanly to physical pixels.

The good news

High resolution displays make these issues less visible.

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
Anatomy of an icon font * Just replace one of the mapped vectors with our version of a pig 
@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 & Scalable

and well supported

✓ ✓ ✓ ✓ ✓ ✓ ✓ 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

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 ✓ ✓ ✓ ✓ ✓ 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 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" />
11 ✓ ✓ ✓ ✓ ✓ 4.3

SVG with Fallbacks

.icon-fox { background: url('fox.svg'); }
.no-svg-support .icon-fox {
    background: url('fox.png');
}

Which one should I use?

A quick recap

Icon Fonts

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

Raster Icons

What’s Good

  • Pixel-level control
  • Browser support

What’s Not

  • Fixed size & resolution
  • Limited packaging support

SVG Icons

What’s Good

  • Individual or packaged icons
  • Vector based
  • Some styling support
  • Use as image
  • Many tools available

What’s Not

  • Browser support

SVG is your best bet for most cases, especially when coupled with a raster fallback.

Use whatever makes your life easier.

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.