Design Beyond the pixels

F18bf1157e905ffa6346e42c79e15953?s=47 Hervé Mischler
December 11, 2012

Design Beyond the pixels

Presentation for #FranceHTML5 Meetup

F18bf1157e905ffa6346e42c79e15953?s=128

Hervé Mischler

December 11, 2012
Tweet

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