Smart Design
-
Upload
sara-cannon -
Category
Design
-
view
5.052 -
download
7
description
Transcript of Smart Design
![Page 1: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/1.jpg)
SARA CANNON HTTP://RAN.GE
Smart Design
![Page 2: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/2.jpg)
Sara CannonPartner / Creative Director at Range http://ran.ge
@saracannon !
slideshare.net/saracannon
![Page 3: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/3.jpg)
Design Styles & Trends
![Page 4: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/4.jpg)
Skeuomorphic
![Page 5: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/5.jpg)
![Page 6: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/6.jpg)
![Page 7: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/7.jpg)
![Page 8: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/8.jpg)
![Page 9: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/9.jpg)
![Page 10: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/10.jpg)
![Page 11: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/11.jpg)
![Page 12: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/12.jpg)
synth76.com
![Page 13: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/13.jpg)
Flat Design
![Page 14: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/14.jpg)
Hyperlink
Button
![Page 15: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/15.jpg)
Clippy Calendar by Ricardo Carlet
![Page 16: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/16.jpg)
![Page 17: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/17.jpg)
![Page 18: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/18.jpg)
![Page 19: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/19.jpg)
![Page 21: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/21.jpg)
Skeuoflat
![Page 22: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/22.jpg)
Eyedrop.me
![Page 23: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/23.jpg)
![Page 24: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/24.jpg)
![Page 25: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/25.jpg)
![Page 26: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/26.jpg)
![Page 27: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/27.jpg)
What Is Smart Design?
![Page 28: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/28.jpg)
Mobile First
![Page 29: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/29.jpg)
Fast
![Page 30: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/30.jpg)
Speed !
AwesomeV.S.
![Page 31: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/31.jpg)
CON
NEC
TION
SPE
ED
IMAGE SIZE
![Page 32: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/32.jpg)
Informed
![Page 33: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/33.jpg)
User Experience
UX
![Page 34: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/34.jpg)
Analytics
![Page 35: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/35.jpg)
![Page 36: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/36.jpg)
![Page 37: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/37.jpg)
![Page 38: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/38.jpg)
User Experience
Testing
![Page 39: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/39.jpg)
usertesting.com
![Page 41: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/41.jpg)
Content Curation
as UX
![Page 42: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/42.jpg)
Wait, where are the menus? vox.com
![Page 43: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/43.jpg)
mashable.com
![Page 44: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/44.jpg)
A/B Testing
![Page 45: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/45.jpg)
optimizely.com
![Page 46: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/46.jpg)
optimizely.com
![Page 47: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/47.jpg)
![Page 48: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/48.jpg)
Refined
![Page 49: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/49.jpg)
Touch & Gestures
![Page 50: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/50.jpg)
![Page 51: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/51.jpg)
How Is It Held?image via http://thetechblock.com/visual-language-designing-for-touch
![Page 52: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/52.jpg)
![Page 53: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/53.jpg)
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/
![Page 54: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/54.jpg)
![Page 55: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/55.jpg)
![Page 56: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/56.jpg)
![Page 57: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/57.jpg)
Motion As Refinement
![Page 58: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/58.jpg)
Medium.Com/Design-Ux/926Eb80D64E3
Pasquale D’silva
![Page 59: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/59.jpg)
![Page 60: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/60.jpg)
![Page 61: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/61.jpg)
![Page 62: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/62.jpg)
Iconfonts
![Page 63: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/63.jpg)
Licensing
![Page 64: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/64.jpg)
make.wordpress.org/themes/guidelines/guidelines-resources
![Page 65: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/65.jpg)
GPL
![Page 66: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/66.jpg)
SIL
Open Font License
![Page 67: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/67.jpg)
Creative Commons
![Page 68: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/68.jpg)
![Page 69: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/69.jpg)
![Page 70: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/70.jpg)
css-tricks.com/examples/IconFont
![Page 71: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/71.jpg)
Genericonsgenericons.com
GPL
![Page 72: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/72.jpg)
![Page 73: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/73.jpg)
![Page 74: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/74.jpg)
![Page 75: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/75.jpg)
content: '\f400';!!<div class="genericon genericon-search"></div>
CSS !
HTML
![Page 76: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/76.jpg)
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
![Page 77: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/77.jpg)
.tags-links a:first-child:before {
content: "\f302";
position: relative;
top: -1px;
}
style.css
![Page 78: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/78.jpg)
function twentythirteen_entry_meta() {
....
$tag_list = get_the_tag_list( '', __( ', ', 'twentythirteen' ) );
if ( $tag_list ) {
echo '<span class="tags-links">' . $tag_list . '</span>';
}
...
function.php
![Page 79: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/79.jpg)
@font-face {
font-family: 'genericons';
src: url('../fonts/genericons.eot');
}
style.css
![Page 80: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/80.jpg)
@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
![Page 81: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/81.jpg)
<link href="path/to/genericons.css" rel="stylesheet">
header.php
![Page 82: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/82.jpg)
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
![Page 83: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/83.jpg)
![Page 84: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/84.jpg)
![Page 85: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/85.jpg)
Font Awesome
SIL
fontawesome.io
![Page 86: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/86.jpg)
![Page 87: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/87.jpg)
![Page 88: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/88.jpg)
CSS !
HTML
content: '\f400';!!<i class="icon-search"></i>
![Page 89: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/89.jpg)
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
![Page 90: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/90.jpg)
.icon-search:before {
content: "\f002";
}
style.css
![Page 91: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/91.jpg)
wordpress.org/plugins/font-awesome
![Page 92: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/92.jpg)
Raphaël Icon-Seticons.marekventur.de
MIT
![Page 93: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/93.jpg)
![Page 94: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/94.jpg)
Elusive Iconsshoestrap.org/downloads/elusive-
icons-webfont
GPL
![Page 95: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/95.jpg)
![Page 96: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/96.jpg)
Socioconsrohitink.com/sociocons/
GPL
![Page 97: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/97.jpg)
![Page 98: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/98.jpg)
webdesignerdepot.com/2012/01/how-to-make-your-own-
icon-webfont/
inkscape.org
![Page 99: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/99.jpg)
Font Generators
![Page 100: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/100.jpg)
Fontastic.Me
![Page 101: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/101.jpg)
![Page 102: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/102.jpg)
![Page 103: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/103.jpg)
![Page 104: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/104.jpg)
Icon Moonicomoon.io
![Page 105: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/105.jpg)
![Page 106: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/106.jpg)
![Page 107: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/107.jpg)
We Love Icon Fonts.Com
free and open source
![Page 108: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/108.jpg)
![Page 109: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/109.jpg)
![Page 110: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/110.jpg)
Fontellofontello.com
![Page 111: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/111.jpg)
![Page 112: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/112.jpg)
SVGScalable Vector Graphics
![Page 113: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/113.jpg)
![Page 114: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/114.jpg)
1 KB5 KB
![Page 115: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/115.jpg)
<?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
![Page 116: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/116.jpg)
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
![Page 117: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/117.jpg)
#site-title { background-image: url(../images/logo.svg);}!
.nosvg #site-title { background-image: url(../images/logo.png);}
SVG Graceful Degradation CSS
![Page 118: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/118.jpg)
![Page 119: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/119.jpg)
SVG
x2 .png
low res x2 .jpg
14kb
13kb
12kb
![Page 120: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/120.jpg)
gabbyhome.com/contact-us
![Page 121: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/121.jpg)
Noun Projectthenounproject.com
![Page 122: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/122.jpg)
![Page 123: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/123.jpg)
![Page 124: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/124.jpg)
Icon Fonts v.s.
SVG
![Page 125: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/125.jpg)
ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg
![Page 126: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/126.jpg)
Icon Fonts
!
!
SVG
Browser Support
Color Variations
v.s.
![Page 127: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/127.jpg)
![Page 128: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/128.jpg)
Stackiconsstackicons.com
janky?!
![Page 129: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/129.jpg)
![Page 130: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/130.jpg)
![Page 131: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/131.jpg)
![Page 132: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/132.jpg)
css-tricks.com/svg-sprites-use-better-icon-fonts
![Page 133: Smart Design](https://reader034.fdocuments.net/reader034/viewer/2022052301/53eea52c8d7f7289708b6166/html5/thumbnails/133.jpg)
Our work is never over.“- DAFT PUNK