Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (18)
Andere mochten auch
Andere mochten auch (7)
Ähnlich wie Responsive Web Design
Ähnlich wie Responsive Web Design (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Responsive Web Design
- 1. HELLO
- 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.
- 9. Responsive Web Design Beyond Squishy Sites
- 11. Mediaqueries
- 12. /* 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 */! }
- 13. /* 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 */! }!
- 14. /* 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 */! }!
- 15. From Page Designs to Design Systems
- 20. Performance
- 21. Keep Javascript libraries to a minimum or conditionally load them
- 22. Instead of Social Media plugins use links
- 23. <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&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>
- 24. Average website is 1.614 MB 61% are images
- 27. <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>
- 29. <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>
- 30. Icons SVG or Icon Font
- 31. Icon fonts are easy
- 32. Might not be accessibility friendly
- 33. <style>! .icon-star:before { content: "★ "; }! </style>! <span><span class="icon-star" aria-hidden="true"></span>Favorite</span>
- 34. But support unicode not always supported
- 37. Tools
- 39. $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;
- 61. It's easier to ask forgiveness than it is to get permission