Responsive Design

4bfb73a8679cbcb7a36c9557e75fba0f?s=47 Michael Jovel
November 13, 2013

Responsive Design

Tips & Tricks talk at Production Club of Baltimore

4bfb73a8679cbcb7a36c9557e75fba0f?s=128

Michael Jovel

November 13, 2013
Tweet

Transcript

  1. HELLO

  2. None
  3. The opinions expressed here are those of the Presenter and

    do not necessarily reflect the positions of the U.S. Department of Defense. ! Despite his statements to the contrary he does not have the authority or capability to order a drone strike based on the geolocation data of your snarky tweets.
  4. None
  5. None
  6. http://www.comicvine.com/ forums/battles-7/bugs-bunny- vs-popeye-the-sailor- man-757492/

  7. None
  8. None
  9. None
  10. From Page Designs to Design Systems

  11. http://pattern-lab.info/

  12. Performance

  13. Keep Javascript libraries to a minimum or conditionally load them

  14. Instead of Social Media plugins use links

  15. <a class="entypo-facebook share-icon" href="http://www.facebook.com/sharer.php?u=http:// airman.dodlive.mil" title=“">Facebook</a>! ! <a class="entypo-twitter share-icon"

    href="http://twitter.com/share?text=An%20Awesome %20Link&amp;url=http://airman.dodlive.mil" title=“">Twitter</a>! ! ! <a class="entypo-gplus share-icon" href="https://plus.google.com/share?url=http%3A%2F %2Fairman.dodlive.mil" title="">Google+</a>
  16. Average website is 1.614 MB 61% are images

  17. http://mobitest.akamai.com/

  18. https://github.com/scottjehl/picturefill

  19. <span data-picture data-alt="A giant stone face at The Bayon temple

    in Angkor Thom, Cambodia">! <span data-src="small.jpg"></span>! <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>! <span data-src="large.jpg" data-media="(min-width: 800px)"></span>! <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>! ! <!--[if (lt IE 9) & (!IEMobile)]>! <span data-src="medium.jpg"></span>! <![endif]--> ! ! ! <noscript>! <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">! </noscript>! </span>
  20. https://github.com/estelle/clowncar

  21. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">! <title>Clown Car

    Technique</title>! <style>! svg {! background-size: 100% 100%;! background-repeat: no-repeat;! }! @media screen and (max-width: 400px) {! svg {background-image: url(images/small.png");}! }! @media screen and (min-width: 401px) and (max-width: 700px) {! svg {background-image: url(images/medium.png);}! }! @media screen and (min-width: 701px) and (max-width: 1000px) {! svg {background-image: url(images/big.png);}! }! @media screen and (min-width: 1001px) {! svg {background-image: url(images/huge.png);}! }! </style>! </svg>
  22. None
  23. http://caniuse.com/

  24. http://modernizr.com

  25. None
  26. None
  27. http://dcdevicelab.com/

  28. http://www.browserstack.com/

  29. None
  30. None
  31. Airman DPS Magazine https://itunes.apple.com/us/app/airman-magazine/id566041850

  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. It's easier to ask forgiveness than it is to get

    permission
  40. None
  41. Questions? Michael Jovel- @mjovel mjovel@gmail.com