Design Beyond the pixels

Transcript

1. #FranceHTML5 Design the pixels

2. ello ’m Hervé Mischler @Dstroii

3. http://www.ux-paris.com/ UXPARIS

4. None
5. None
6. None
7. None
8. None
9. None
10. None

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
12. None

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/

32. None
33. None

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/

46. None

47. http://www.sublimetext.com/

48. None
49. None
50. None

51. http://csscomb.com/

52. .::6GTT2+'<+85;J-/:.;(J)53T68+¿>,8++T

53. None

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

65. None

66. .::6GTT===J35@/22'J58-T+4IT¿8+,5>59T

67. None

68. http://webplatform.org

69. http://speakerdeck.com/u/dstroii