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 full-size slide

  2. ello ’m
    Hervé Mischler
    @Dstroii

    View full-size slide

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

    View full-size slide

  4. 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 full-size slide

  5. hello tomorrow
    http://futurefriend.ly

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 0px 1280px
    1280px
    1024px
    1024px
    ablet Desktop

    View full-size slide

  10. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Prototype early
    Prototype often

    View full-size slide

  14. a pixel
    is not
    a pixel
    anymore!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. @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 full-size slide

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

    View full-size slide

  19. /* 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 full-size slide

  20. 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 full-size slide

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

    View full-size slide

  22. http://glyphsapp.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. http://typecast.com/

    View full-size slide

  26. learn to
    SHOULD
    Desi ners
    code?

    View full-size slide

  27. http://dribbble.com/

    View full-size slide

  28. http://codepen.io/

    View full-size slide

  29. http://www.sublimetext.com/

    View full-size slide

  30. http://csscomb.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. http://try.github.com

    View full-size slide

  34. http://lesscss.org

    View full-size slide

  35. http://sass-lang.com

    View full-size slide

  36. /* =====================================
    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 full-size slide

  37. /* =====================================
    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 full-size slide

  38. http://incident57.com/codekit/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. http://build.phonegap.com

    View full-size slide

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

    View full-size slide

  44. http://webplatform.org

    View full-size slide

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

    View full-size slide