// talk given at WordCamp Chicago 2014 // 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

2. Sara Cannon
Partner / Creative Director
at Range http://ran.ge
@saracannon
!
slideshare.net/saracannon

3. Design Styles
& Trends

4. Skeuomorphic

12. synth76.com

13. Flat Design

14. Hyperlink
Button

15. Clippy Calendar by
Ricardo Carlet

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

21. Skeuoflat

22. Eyedrop.me

27. What Is Smart
Design?

28. Mobile First

29. Fast

30. Speed
!
Awesome
V.S.

31. CONNECTIONSPEED
IMAGE SIZE

32. Informed

33. User
Experience
UX

34. Analytics

38. User
Experience
Testing

39. usertesting.com

40. silverbackapp.com

41. Content
Curation
as UX

42. Wait, where are the menus? vox.com

43. mashable.com

44. A/B Testing

45. optimizely.com

46. optimizely.com

48. Refined

49. Touch &
Gestures

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

53. 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/

57. Motion As
Refinement

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

62. Iconfonts

63. Licensing

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

65. GPL


66. SIL

Open Font License

67. Creative
Commons


70. css-tricks.com/examples/IconFont

71. Genericons
genericons.com
GPL

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

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

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

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

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

80. @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

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

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

85. Font
Awesome
SIL
fontawesome.io

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

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

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

91. wordpress.org/plugins/font-awesome

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

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

96. Sociocons
rohitink.com/sociocons/
GPL

98. webdesignerdepot.com/
2012/01/how-to-make-your-own-
icon-webfont/
inkscape.org

99. Font
Generators

100. Fontastic.Me

104. Icon Moon
icomoon.io

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

110. Fontello
fontello.com

112. SVG
Scalable Vector Graphics

114. 1 KB5 KB

115. <?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

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

117. #site-title {
background-image: url(../images/logo.svg);
}
!
.nosvg #site-title {
background-image: url(../images/logo.png);
}
SVG Graceful Degradation CSS

119. SVG
x2 .png
low res x2 .jpg
14kb
13kb
12kb

120. gabbyhome.com/contact-us

121. Noun
Project
thenounproject.com

124. Icon Fonts
v.s.
SVG

125. ianfeather.co.uk/ten-reasons-we-
switched-from-an-icon-font-to-svg

126. Icon
Fonts
!
!
SVG
Browser
Support
Color
Variations
v.s.

128. Stackicons
stackicons.com
janky
?!

132. css-tricks.com/svg-sprites-use-better-
icon-fonts

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