Your SlideShare is downloading. ×
0
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Web Design

1,136

Published 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.

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,136
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
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

×