Responsive Web Design
63
HELLO
description
Presentation on how responsive design is more than just media queries and fluid layouts. Talk given at Annapolis Web & digital professionals meet-up.
Transcript of Responsive Web Design
HELLO
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.
Responsive Web DesignBeyond Squishy Sites
Mediaqueries
/* 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 */!}
/* 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 */!}!
/* 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 */!}!
From Page Designs to Design Systems
Performance
Keep Javascript libraries to a minimum or conditionally load them
Instead of Social Media plugins use links
<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>
Average website is 1.614 MB 61% are images
http://mobitest.akamai.com/
https://github.com/scottjehl/picturefill
<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>
<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>
Icons SVG or Icon Font
Icon fonts are easy
Might not be accessibility friendly
<style>! .icon-star:before { content: "★ "; }! </style>! <span><span class="icon-star" aria-hidden="true"></span>Favorite</span>
But support unicode not always supported
Tools
$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;
Airman DPS Magazine https://itunes.apple.com/us/app/airman-magazine/id566041850
It's easier to ask forgiveness than it is to get permission
@bmoresponsive
http://www.bmoresponsive.com
Questions?
Michael Jovel- @mjovel
