Design Beyond the pixels

Presentation for #FranceHTML5 Meetup

Transcript

1. #FranceHTML5
   Design
   the pixels
   

   View Slide

2. ello ’m
   Hervé Mischler
   @Dstroii
   

   View Slide

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

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

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
    

    View Slide

12. View Slide

13. hello tomorrow
    http://futurefriend.ly
    

    View Slide

14. #RWD
    

    View Slide

15. media='screen and (min-width: 701px) and (max-width: 900px)'
    href='css/medium.css' />
    

    View Slide

16. @media screen and (min-width: 701px) and (max-width: 900px){
    }
    

    View Slide

17. 600px
    480px 800px
    360px
    Mobil Tablet
    

    View Slide

18. 0px 1280px
    1280px
    1024px
    1024px
    ablet Desktop
    

    View Slide

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
    

    View Slide

20. Marku
    First
    

    View Slide

21. http://bradfrost.github.com/this-is-responsive/
    This Is Responsive.
    Patterns, resources and news for creating responsive web experiences.
    

    View Slide

22. #RAD
    

    View Slide

23. F a men s
    

    View Slide

24. Show / Hide
    

    View Slide

25. Wireframes
    

    View Slide

26. Wireframes
    

    View Slide

27. Asking for a pixel perfect mockup
    is like
    asking to print a website!
    

    View Slide

28. Prototype early
    Prototype often
    

    View Slide

29. a pixel
    is not
    a pixel
    anymore!
    

    View Slide

30. .no-svg .logo { background: url('logo.png'); }
    .svg .logo { background: url('logo.svg'); }
    http://modernizr.com/
    

    View Slide

31. http://www.bohemiancoding.com/sketch/
    

    View Slide

32. View Slide

33. View Slide

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;
    }
    

    View Slide

35. CSS
    [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    speak: none;
    -webkit-font-smoothing: antialiased;
    }
    HTML
    
    

    View Slide

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"; }
    

    View Slide

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
    
    

    View Slide

38. https://github.com/blog/1135-the-making-of-octicons
    

    View Slide

39. http://glyphsapp.com/
    

    View Slide

40. http://www.fontsquirrel.com/fontface/generator
    

    View Slide

41. http://informationarchitects.net/blog/the-web-is-all-about-typography-period/
    Web Design is
    95% Typography
    

    View Slide

42. http://typecast.com/
    

    View Slide

43. learn to
    SHOULD
    Desi ners
    code?
    

    View Slide

44. http://dribbble.com/
    

    View Slide

45. http://codepen.io/
    

    View Slide

46. View Slide

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

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. http://csscomb.com/
    

    View Slide

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

    View Slide

53. View Slide

54. http://git-scm.com/
    

    View Slide

55. http://try.github.com
    

    View Slide

56. http://lesscss.org
    

    View Slide

57. http://sass-lang.com
    

    View Slide

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
    

    View Slide

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
    

    View Slide

60. http://incident57.com/codekit/
    

    View Slide

61. http://html.adobe.com/edge/inspect/
    Adobe Edge Inspect
    Preview & inspect web designs on devices.
    In
    

    View Slide

62. WEINRE
    https://github.com/apache/cordova-weinre
    

    View Slide

63. CORDOVATM
    APACHE
    http://incubator.apache.org/cordova/
    

    View Slide

64. http://build.phonegap.com
    

    View Slide

65. View Slide

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

    View Slide

67. View Slide

68. http://webplatform.org
    

    View Slide

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

    View Slide