SMART DESIGN - icon fonts, svg, and the mobile influence Fast, simple, SMART. Mobile devices have forever changed the way we interact with content. Now we have to consider many things such as HiDPI graphics, responsive design, speed, UI/UX patterns, touch target sizes, gestures, and more. All while not losing track of what’s important: Content. We’re going to discuss the influence of mobile on design trends and learn implementation techniques of smart design such as icon fonts, svg, and other helpful tips.

1. SARA CANNON HTTP://RAN.GE
SMART DESIGN
Icon Fonts, SVG, & the Mobile Influence

2. Sara Cannon!
CO-FOUNDER / CREATIVE DIRECTOR AT RANGE
HTTP://RAN.GE @SARACANNON SLIDESHARE.NET/SARACANNON

4. Styles &
Trends

5. Skeuomorphic

13. synth76.com

14. Flat Design

15. Hyperlink
Button

16. Clippy Calendar by
Ricardo Carlet

21. http://sachagreif.com/flat-pixels

22. Skeuoflat

23. Eyedrop.me

28. What Is Smart
Design?

29. Mobile First

30. FAST

31. SPEED
!
AWESOME
V.S.

32. CONNECTIONSPEED
IMAGE SIZE

33. CONNECTIONSPEED
IMAGE SIZE

34. INFORMED

35. USER
EXPERIENCE

36. ANALYTICS

40. USER
EXPERIENCE
TESTING

41. USERTESTING.COM

42. SILVERBACKAPP.COM

43. A/B TESTING

44. OPTIMIZELY.COM

45. OPTIMIZELY.COM

47. REFINED

48. Touch &
Gestures

50. How Is It Held?
image via http://thetechblock.com/visual-language-designing-for-touch

52. http://maniacdev.com/2012/05/
open-source-library-for-easy-
clear-app-style-and-more-
folding-transitions-between-
any-uiviews/
http://
markpospesel.wordpress.com/
2012/05/10/anatomy-of-a-
folding-animation/

56. Motion As
Refinement

57. Medium.Com/Design-Ux/926Eb80D64E3
Pasquale D’silva

61. Iconfonts

62. Licensing

63. make.wordpress.org/themes/guidelines/
guidelines-resources

64. GPL


65. SIL

Open Font License

66. Creative
Commons


69. CSS-TRICKS.COM/EXAMPLES/ICONFONT

70. Genericons
genericons.com
GPL

74. CSS
!
HTML
content: 'f400';
!
!
<div class="genericon genericon-search">
</div>

75. function twentythirteen_scripts_styles() {
...
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() .
'/fonts/genericons.css', array('genericons'), '2.09' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );
Functions.php

76. .tags-links a:first-child:before {
content: "f302";
position: relative;
top: -1px;
}
style.css

77. function twentythirteen_entry_meta() {
....
$tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) );
if ( $tag_list ) {
echo '<span class="tags-links">' . $tag_list . '</span>';
}
...
function.php

78. @font-face {
font-family: 'genericons';
src: url('../fonts/genericons.eot');
}
style.css

79. @font-face {
font-family: 'Genericons';
src: url('font/genericons-regular-webfont.eot');
src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/genericons-regular-webfont.woff') format('woff'),
url('font/genericons-regular-webfont.ttf') format('truetype'),
url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
font-weight: normal;
font-style: normal;
}
style.css

80. <link href="path/to/genericons.css" rel="stylesheet">
header.php

81. function twentythirteen_scripts_styles() {
...
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() .
'/fonts/genericons.css', array(), '2.09' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );
Functions.php

84. Font Awesome
SIL
fontawesome.io

87. CSS
!
HTML
content: 'f400';
!
!
<i class="icon-search"></i>

88. function twentythirteen_scripts_styles() {
...
// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'fontawesome', get_template_directory_uri() .
'path/to/font-awesome/css/font-awesome.min.css', array(), '2.09' );
...
}
add_action( 'wp_enqueue_scripts', 'twentythirteen_scripts_styles' );
Functions.php

89. .icon-search:before {
content: "f002";
}
style.css

90. wordpress.org/plugins/font-awesome

91. Raphaël Icon-
Set
icons.marekventur.de
MIT

93. Elusive Icons
shoestrap.org/downloads/elusive-icons-
webfont
GPL

95. Sociocons
rohitink.com/sociocons/
GPL

97. WEBDESIGNERDEPOT.COM/2012/01/HOW-TO-MAKE-
YOUR-OWN-ICON-WEBFONT/
INKSCAPE.ORG

98. FONT
GENERATORS

99. Fontastic.Me

103. Icon Moon
icomoon.io

106. We Love Icon
Fonts.Com
free and open source

109. Fontello
fontello.com

111. SVG
Scalable Vector Graphics

113. 1 KB5 KB

114. <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="249.994px" height="141.198px" viewBox="125.209 169.552 249.994 141.198"
enable-background="new 125.209 169.552 249.994 141.198" xml:space="preserve">
<g>
<path fill="#101010" d="M185.807,169.552v28.799l-12.4-0.2l20.6,80.799l22.2-80.799l-12.399,0.2v-28.799h55.599v28.799l-9.6-0.2
l-34.6,112.598h-45.799l-35.399-112.598l-8.8,0.2v-28.799H185.807z"/>
<path fill="#FF0013" d="M258.404,310.75v-28.8l12.601,0.2v-84l-12.601,0.2v-28.799h61.601c16.399,0.4,36.999,1,46.199,18
c4.601,8.4,5,16.6,5,19.8c0,2.4,0,7.8-2.601,13.6c-4.201,9.6-11.601,13.4-20.601,17.8c7,2,13,4,18,9.6c3.399,3.6,9.2,12.6,9.2,25.6
c0,11.999-5.2,22.601-15.2,29.397c-11,7.2-24.198,7.2-36.601,7.4H258.404L258.404,310.75z M307.805,226.351
c7.801,0,12.801,0.2,16-0.6c6.801-1.8,10.6-7.2,10.6-13.8c0-1.6,0-5.6-2.799-9.2c-4.4-6.2-10.801-5.4-23.801-5.6V226.351
L307.805,226.351z M307.805,281.95c12.399,0,20.199,0.601,25-2.8c4.6-3.199,4.6-9.4,4.6-10.801c0-4.8-1.6-7.6-2.6-9.199
c-4.199-5.601-10.199-5.799-16.601-5.799h-10.399V281.95z"/>
</g>
</svg>
VBLOGO.SVG

115. jQuery( function($) {
var supportsSVG = false;
try {
var svg = document.createElementNS("http://
www.w3.org/2000/svg",'svg');
supportsSVG = typeof svg.createSVGPoint ==
'function';
} catch(e){}
if ( ! supportsSVG )
$( 'body' ).addClass( 'nosvg' );
} );
SVG GRACEFUL DEGRADATION JQUERY

116. #site-title {
background-image: url(../images/logo.svg);
}
!
.nosvg #site-title {
background-image: url(../images/logo.png);
}
SVG GRACEFUL DEGRADATION CSS

118. SVG
X2 PNG
LOW RES X2 JPG
14KB
13KB
12KB

119. gabbyhome.com/contact-us

120. Noun Project

123. Our work is never over.“
- DAFT PUNK

124. BE THE
UNICORN