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. 1.
  2. 2.
  3. 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. 4.
  5. 5.
  6. 7.
  7. 8.
  8. 9.
  9. 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>
  10. 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>
  11. 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>
  12. 22.
  13. 25.
  14. 26.
  15. 29.
  16. 30.
  17. 32.
  18. 33.
  19. 34.
  20. 35.
  21. 36.
  22. 37.
  23. 38.
  24. 40.