Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Beyond the pixels

Hervé Mischler
December 11, 2012

Design Beyond the pixels

Presentation for #FranceHTML5 Meetup

Hervé Mischler

December 11, 2012
Tweet

More Decks by Hervé Mischler

Other Decks in Design

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. .::[email protected]/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