Design Beyond the pixels

Presentation for #FranceHTML5 Meetup

Transcript

1. #FranceHTML5 Design the pixels
2. ello ’m Hervé Mischler @Dstroii
3. http://www.ux-paris.com/ UXPARIS
11. 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
13. hello tomorrow http://futurefriend.ly
14. #RWD
15. <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
16. @media screen and (min-width: 701px) and (max-width: 900px){ }
17. 600px 480px 800px 360px Mobil Tablet
18. 0px 1280px 1280px 1024px 1024px ablet Desktop
19. “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
20. Marku First
21. http://bradfrost.github.com/this-is-responsive/ This Is Responsive. Patterns, resources and news for creating responsive web experiences.
22. #RAD
23. F a men s
24. Show / Hide
25. Wireframes
26. Wireframes
27. Asking for a pixel perfect mockup is like asking to print a website!
28. Prototype early Prototype often
29. a pixel is not a pixel anymore!
30. .no-svg .logo { background: url('logo.png'); } .svg .logo { background: url('logo.svg'); } http://modernizr.com/
31. http://www.bohemiancoding.com/sketch/
34. @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; }
35. 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>
36. /* 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"; }
37. 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>
38. https://github.com/blog/1135-the-making-of-octicons
39. http://glyphsapp.com/
40. http://www.fontsquirrel.com/fontface/generator
41. http://informationarchitects.net/blog/the-web-is-all-about-typography-period/ Web Design is 95% Typography
42. http://typecast.com/
43. learn to SHOULD Desi ners code?
44. http://dribbble.com/
45. http://codepen.io/
47. http://www.sublimetext.com/
51. http://csscomb.com/
52. .::6GTT2+'<+85;J-/:.;(J)53T68+¿>,8++T
54. http://git-scm.com/
55. http://try.github.com
56. http://lesscss.org
57. http://sass-lang.com
58. /* ===================================== 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
59. /* ===================================== 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
60. http://incident57.com/codekit/
61. http://html.adobe.com/edge/inspect/ Adobe Edge Inspect Preview & inspect web designs on devices. In
62. WEINRE https://github.com/apache/cordova-weinre
63. CORDOVATM APACHE http://incubator.apache.org/cordova/
64. http://build.phonegap.com
66. .::6GTT===J35@/22'J58-T+4IT¿8+,5>59T
68. http://webplatform.org
69. http://speakerdeck.com/u/dstroii