Responsive Web Design

  • 1,087 views
Uploaded on

Presentation on how responsive design is more than just media queries and fluid layouts. Talk given at Annapolis Web & digital professionals meet-up.

Presentation on how responsive design is more than just media queries and fluid layouts. Talk given at Annapolis Web & digital professionals meet-up.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,087
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HELLO
  • 2. 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.
  • 3. Responsive Web Design Beyond Squishy Sites
  • 4. Mediaqueries
  • 5. /* Smartphones (portrait and landscape) ----------- */! @media only screen ! and (min-device-width : 320px) ! and (max-device-width : 480px) {! /* Styles */! }! ! /* Smartphones (landscape) ----------- */! @media only screen ! and (min-width : 321px) {! /* Styles */! }! ! /* Smartphones (portrait) ----------- */! @media only screen ! and (max-width : 320px) {! /* Styles */! }
  • 6. /* iPads (portrait and landscape) ----------- */! @media only screen ! and (min-device-width : 768px) ! and (max-device-width : 1024px) {! /* Styles */! }! ! /* iPads (landscape) ----------- */! @media only screen ! and (min-device-width : 768px) ! and (max-device-width : 1024px) ! and (orientation : landscape) {! /* Styles */! }! ! /* iPads (portrait) ----------- */! @media only screen ! and (min-device-width : 768px) ! and (max-device-width : 1024px) ! and (orientation : portrait) {! /* Styles */! }!
  • 7. /* Desktops and laptops ----------- */! @media only screen ! and (min-width : 1224px) {! /* Styles */! }! ! /* Large screens ----------- */! @media only screen ! and (min-width : 1824px) {! /* Styles */! }! ! /* iPhone 4 ----------- */! @media! only screen and (-webkit-min-device-pixel-ratio : 1.5),! only screen and (min-device-pixel-ratio : 1.5) {! /* Styles */! }!
  • 8. From Page Designs to Design Systems
  • 9. http://pattern-lab.info/
  • 10. http://pattern-lab.info/
  • 11. http://ux.mailchimp.com/patterns
  • 12. http://ux.mailchimp.com/patterns
  • 13. Performance
  • 14. Keep Javascript libraries to a minimum or conditionally load them
  • 15. Instead of Social Media plugins use links
  • 16. <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>
  • 17. Average website is 1.614 MB 61% are images
  • 18. http://mobitest.akamai.com/
  • 19. https://github.com/scottjehl/picturefill
  • 20. <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>
  • 21. https://github.com/estelle/clowncar
  • 22. <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>
  • 23. Icons SVG or Icon Font
  • 24. Icon fonts are easy
  • 25. Might not be accessibility friendly
  • 26. <style>! .icon-star:before { content: "★ "; }! </style>! <span><span class="icon-star" aria-hidden="true"></span>Favorite</span>
  • 27. But support unicode not always supported
  • 28. https://github.com/filamentgroup/grunticon
  • 29. http://grumpicon.com
  • 30. Tools
  • 31. http://sass-lang.com
  • 32. $bp-small : 24em;! $bp-small-2 : 29.75em;! $bp-small-3 : 39.8em;! $bp-med : 46.8em;! $bp-med-2 : 48em;! $bp-large : 50em;! $bp-large-2 : 54.5em;! $bp-xl : 60em;! $bp-xl-2 : 67em;
  • 33. http://compass-style.org
  • 34. http://susy.oddbird.net
  • 35. http://gruntjs.com
  • 36. http://incident57.com/codekit/
  • 37. http://caniuse.com/
  • 38. http://modernizr.com
  • 39. http://dcdevicelab.com/
  • 40. http://www.browserstack.com/
  • 41. Airman DPS Magazine https://itunes.apple.com/us/app/airman-magazine/id566041850
  • 42. It's easier to ask forgiveness than it is to get permission
  • 43. http://www.bmoresponsive.com @bmoresponsive
  • 44. Questions? Michael Jovel- @mjovel