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
The Spectacular Lies of Maps
axbom
PRO
1
270
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.3k
freee + Product Design FY25Q4
freee
4
16k
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
590
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
200
Yumika Yamada Portfolio
yumii
0
1.4k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Site-Speed That Sticks
csswizardry
10
810
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Scaling GitHub
holman
463
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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