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
280
WHERE NO ONE HAS GONE BEFORE
dstroii
4
1.3k
How to rumble in the Responsive Application jungle
dstroii
10
700
Responsive Headache Relief for Android
dstroii
42
5.6k
Quick tips for porting your iOS designs to Android
dstroii
42
7.9k
In defence of mobile diversity
dstroii
10
2.1k
Other Decks in Design
See All in Design
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
600
今日から意識できるアクセシビリティ
fumiko
0
240
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
240
線で考える画面構成
natsuume
1
870
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
310
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.6k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
AI動画生成ガチャ紹介
piyo7
1
110
Goodpatch Tour💙 / We are hiring!
goodpatch
31
850k
株式会社バクタム 会社説明資料
bactum
0
240
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
120
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
490
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Writing Fast Ruby
sferik
628
61k
Docker and Python
trallard
44
3.4k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Bash Introduction
62gerente
614
210k
Site-Speed That Sticks
csswizardry
10
650
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Music & Morning Musume
bryan
46
6.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
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