Slides from May's London Web Meet-up Joe Harrison, Lead Designer currently working for Great Fridays who talked about Iconography and the Responsive Web. You can view the video here: https://vimeo.com/96571680 "Icons have become the native language of modern day devices. They are the most efficient way to communicate information in a limited space, and are universally ingrained into the digital and physical worlds. Icons can enrich a user’s experience of a product or service, and express character and feeling. But iconography needs to adapt for the future. Retina displays, responsive websites and a multitude of screen sizes pose new challenges and opportunities for both designers and developers. How can we achieve crisp, legible and scalable icons that are perfectly optimised for every device? This talk will focus on current solutions from leading experts in the field, and will reveal what the future might have in store."

1. Iconography and the
Responsive Web
@joe_harrison

3. greatfridays.com

4. Why Icons?

5. 1. What are icons?
2. Icons in design
4. Current techniques
5. The Future
3. Responsive Icons

6. 1
What are icons?

7. Icons are graphic symbols
that represent objects,
concepts or functions.

8. Ideograms App IconsPictograms

9. Icons inform us

11. They signpost

13. They warn us

15. They express emotion

16. (Icons by Justin Pervorse)

17. They transcend language

19. They save space

21. Inform WarnSignpost
Transcend
language
Express
emotion
Save
space

22. Icons in design
2

23. Typeface
Design
Logo
Design
Icon
Design

24. Typeface
Design
Logo
Design
Icon
Design

28. Typeface
Design
Logo
Design
Icon
Design

32. Typeface
Design
Logo
Design
Icon
Design

33. The modern web poses
new challenges

34. (Image credit: Brad Frost)

35. Retina Revolution

37. 72 dpi Retina Future

39. Responsive Design
High Screen Resolutions
Multiple Devices

40. Responsive Icons
3

45. iconsbyhour.co.uk

51. @media (max-width: 1000px) {!
! #icon_1 {display:block}!
}!
!
@media (max-width: 900px) {!
! #icon_2 {display:block}!
}!
!
@media (max-width: 800px) {!
! #icon_3 {display:block}!
}!
!
..

53. responsiveicons.co.uk

54. 20,000+ views
in 24 hours
30,000
15,000
Oct 20 Oct 27

55. 3,000+ tweets

62. Re-implimentation

63. Collaboration
(blogs)
(Pen by Nicholas Hoizey)

66. Changeicon
Change complexity

68. (Article by Ilya Pukhalski)

69. Collaboration with developers
produces the best results.
Never be afraid to release a
prototype, even if unfinished.

70. Current Techniques
4

71. 1. Icon fonts
2. Pure CSS Icons
3. SVG Icons

72. 1. Icon fonts
2. Pure CSS Icons
3. SVG Icons

73. .icon {!
font-family: ‘icon_font’;!
color: 6CC254#!
}

75. Icon fonts
Positioning
inconsistencies
Easy to change
CSS properties
Limited complexity
(e.g colour)
Single file for
all icons

76. 1. Icon fonts
2. Pure CSS Icons
3. SVG Icons

77. #packman {!
width: 0px; height: 0px;!
border-right: 60px solid transparent;!
border-top: 60px solid #009cdf;!
border-left: 60px solid #009cdf;!
border-bottom: 60px solid #009cdf;!
border-top-left-radius: 60px;!
border-top-right-radius: 60px;!
border-bottom-left-radius: 60px;!
border-bottom-right—radius: 60px;!
color: 6CC254#;!
}

78. (CSS icons by Louis Harboe)

79. Require CSS
knowledge
Maintenance
difficulties
No asset
needed
Pure CSS Icons
Easy to change
CSS properties

80. 1. Icon fonts
2. Pure CSS Icons
3. SVG Icons

81. Raster Vector
.png .svg

82. (Icons by Nick Frost & Greg Lapin)

84. PNG fallbacks
SVG Icons
Compatibility with
old browsers
Detail & colour
flexibility
Simple to make
Easy to animate
Low file size

85. The Future of icons
5

86. Adapting to
New Technology

87. 3D Printing

88. Duplicate
product
Materials
low
Nozzle
jam
Product
glitch
Fingerprint
verification
Product
lifespan
Fume hood
required
Order
materials

89. Adapting to
Future Human Needs

91. Proximity-sensitive icons

92. What are icons?
Icons in design
Current techniques
The Future
Responsive Icons Story

94. Thank you
@joe_harrison