Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (18)
Destaque
Destaque (7)
Semelhante a Responsive Web Design
Semelhante a Responsive Web Design (20)
Último
Último (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