Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Design Beyond the pixels
Hervé Mischler
December 11, 2012
Design
14
1.4k
Design Beyond the pixels
Presentation for #FranceHTML5 Meetup
Hervé Mischler
December 11, 2012
Tweet
Share
More Decks by Hervé Mischler
See All by Hervé Mischler
dstroii
2
230
dstroii
4
1.2k
dstroii
10
660
dstroii
42
5.4k
dstroii
42
7.8k
dstroii
10
1.8k
Other Decks in Design
See All in Design
tessaabrams
0
870
lily2251390
0
450
avyjonsay
0
110
bamfonyy
0
460
mac03nd
1
430
ajstarks
1
910
cynthiam
0
120
irolfe
6
580
chrispy
0
100
sheridanlugo
0
200
chige
0
340
mashida
1
480
Featured
See All Featured
robhawkes
52
2.8k
jnunemaker
PRO
40
4.6k
jasonvnalue
81
8.1k
carmenhchung
31
1.5k
bermonpainter
342
26k
smashingmag
283
47k
chrislema
173
14k
jponch
103
5k
philhawksworth
190
17k
danielanewman
1
520
phodgson
87
3.9k
samlambert
237
10k
Transcript
#FranceHTML5 Design the pixels
ello ’m Hervé Mischler @Dstroii
http://www.ux-paris.com/ UXPARIS
None
None
None
None
None
None
None
2,000 1,600 1,200 800 400 Internet Users (MM) 0 2007
2008 2009 2010 2011 2012 2013 2014 2015 Source: Morgan Stanley Research Mobile internet users Desktop internet users
None
hello tomorrow http://futurefriend.ly
#RWD
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css'
/>
@media screen and (min-width: 701px) and (max-width: 900px){ }
600px 480px 800px 360px Mobil Tablet
0px 1280px 1280px 1024px 1024px ablet Desktop
“f you put water into a cup, it becomes the
cup. ou put water into a bottle and it becomes the bottle. Bruce Lee http://www.slideshare.net/MadPowHxD/josh-clark-hxd-presentation
Marku First
http://bradfrost.github.com/this-is-responsive/ This Is Responsive. Patterns, resources and news for creating
responsive web experiences.
#RAD
F a men s
Show / Hide
Wireframes
Wireframes
Asking for a pixel perfect mockup is like asking to
print a website!
Prototype early Prototype often
a pixel is not a pixel anymore!
.no-svg .logo { background: url('logo.png'); } .svg .logo { background:
url('logo.svg'); } http://modernizr.com/
http://www.bohemiancoding.com/sketch/
None
None
@font-face { font-family: "FontAwesome"; src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff')
format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; }
CSS [class^="icon-"]:before, [class*=" icon-"]:before { font-family: FontAwesome; font-weight: normal; font-style:
normal; speak: none; -webkit-font-smoothing: antialiased; } HTML <div class=”icon-glass”></div>
/* Font Awesome uses the Unicode Private Use Area (PUA)
to ensure screen readers do not read off random characters that represent icons */ .icon-glass:before { content: "\f000"; } .icon-music:before { content: "\f001"; } .icon-search:before { content: "\f002"; } .icon-envelope:before { content: "\f003"; } .icon-heart:before { content: "\f004"; } .icon-star:before { content: "\f005"; } .icon-star-empty:before { content: "\f006"; }
CSS [data-icon]:before { font-family: FontAwesome; content: attr(data-icon); font-weight: normal; font-style:
normal; speak: none; -webkit-font-smoothing: antialiased; } HTML <div data-icon="\f000"></div>
https://github.com/blog/1135-the-making-of-octicons
http://glyphsapp.com/
http://www.fontsquirrel.com/fontface/generator
http://informationarchitects.net/blog/the-web-is-all-about-typography-period/ Web Design is 95% Typography
http://typecast.com/
learn to SHOULD Desi ners code?
http://dribbble.com/
http://codepen.io/
None
http://www.sublimetext.com/
None
None
None
http://csscomb.com/
.::6GTT2+'<+85;J-/:.;(J)53T68+¿>,8++T
None
http://git-scm.com/
http://try.github.com
http://lesscss.org
http://sass-lang.com
/* ===================================== IOS =====================================*/ $fontfamily: helvetica, sans-serif; $fontmini: 0.75em; //12px
$fontsmall: 0.875em; //14px $fontmedium: 1.0625em; //17px $fontlarge: 1.25em; //20px $baseline: 1em; //16px $baseheight: 2.75em; //44px $navwidth: 20em; //320px
/* ===================================== Android =====================================*/ $fontfamily: "roboto","droid-sans", sans-serif; $fontmini: 0.75em; //12px
$fontsmall: 0.875em; //14px $fontmedium: 1.125em; //18px $fontlarge: 1.375em; //22px $baseline: 1em; //16px $baseheight: 3em; //48px $navwidth: 20em; //320px
http://incident57.com/codekit/
http://html.adobe.com/edge/inspect/ Adobe Edge Inspect Preview & inspect web designs on
devices. In
WEINRE https://github.com/apache/cordova-weinre
CORDOVATM APACHE http://incubator.apache.org/cordova/
http://build.phonegap.com
None
.::6GTT===J35@/22'J58-T+4IT¿8+,5>59T
None
http://webplatform.org
http://speakerdeck.com/u/dstroii