Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design Beyond the pixels
Search
Hervé Mischler
December 11, 2012
Design
14
1.5k
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
« Voyage aux Frontières du Design » – Le Futur du Design pour l’Entreprise
dstroii
2
260
WHERE NO ONE HAS GONE BEFORE
dstroii
4
1.2k
How to rumble in the Responsive Application jungle
dstroii
10
680
Responsive Headache Relief for Android
dstroii
42
5.5k
Quick tips for porting your iOS designs to Android
dstroii
42
7.8k
In defence of mobile diversity
dstroii
10
2k
Other Decks in Design
See All in Design
実務のための マイクロ インタラクション入門
shingo2000
0
350
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
170
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
220
Portfolio 2023.07.28
helemarudesu
0
570
Sociotechnical design for software and human systems
xinyao
2
480
今日から始めるDesignOpsのヒント
isaikaori
1
410
意志と、デザインと、ときどきお金
transit_kix
2
2.2k
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
410
Wishing Star Comic
torije
2
1.1k
3D空間を扱うUI表現とユーザビリティ
akinen
0
440
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
Featured
See All Featured
The Mythical Team-Month
searls
215
42k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Clear Off the Table
cherdarchuk
83
310k
Infographics Made Easy
chrislema
237
18k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
How to Ace a Technical Interview
jacobian
272
22k
Become a Pro
speakerdeck
PRO
10
4.5k
Building Adaptive Systems
keathley
30
1.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
Typedesign – Prime Four
hannesfritz
36
2.1k
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