/************************************************************************** @media queries **************************************************************************/ /* iPad landscape ----------- */ @media only screen and (min-width:801px) and (max-width:1100px) {} /* iPad portrait ----------- */ @media only screen and (max-width:768px) {} /* Mid-Size Tablets (Galaxy Tab) (portrait) ----------- */ @media only screen and (max-width:591px) and (orientation:portrait) {} /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-width: 320px) and (max-width: 480px) {} /* Smartphones (portrait) ----------- */ @media only screen and (min-width:320px) and (max-width:380px) {}
“The absence of support for @media queries is in fact the first @media query” @bryanrieger slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
news.cnet.com/2100-1038_3-5172107.html nytimes.com/2005/06/21/technology/21iht-broad.html flickr.com/photos/foolswisdom/108953458/lightbox/ Broadband began to overtake dial-up in 2004* * In major U.S. Cities
http://www.websiteoptimization.com/speed/tweak/average-web-page/ http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ “The size of the average web page of the top 1000 websites has more than tripled since 2008. In the past five years from 2008 to late 2012 the average web page grew from 312K to 1114K, over 3.5 times larger” - websiteoptimization.com (Nov 11, 2012) In the past 18 months, the average web page has grown by 50% — from 702 KB in November 2010 to 1042 KB on May 1, 2012. At this rate, the average page will hit 2 MB by 2015. - webperformancetoday.com (May 24, 2012)
“Out of the 106 sites I reviewed, 64 of them had mobile sites that were less than ten percent smaller than the desktop version. Twenty-six of the sites had mobile web sites that were larger than the desktop equivalent.” @grigs http://www.uie.com/articles/mobile_first_rwd/
averages for #highered RWD sites 106 sites sampled at full size requests: 59 size: 1.6 MB Sites used to generate these stats: http://bit.ly/highered-rwd
averages for #highered RWD sites 106 sites sampled with iPhone UA and narrow screen (to simulate mobile) requests: 55 size: 1.48 MB Sites used to generate these stats: http://bit.ly/highered-rwd
averages for #highered RWD sites 106 sites sampled with iPhone UA and narrow screen (to simulate mobile) js: 12 files/216 KB css: 6 files/99 KB images: 30 files/1 MB (72% of page size) Sites used to generate these stats: http://bit.ly/highered-rwd
stand-outs * West Chester University wcupa.edu West Virginia University wvu.edu 21 requests | 340 KB 26 requests | 361 KB http://notredame.photoshelter.com/gallery-image/2012-Graduate-School-Ceremony/G0000QHnZV6vbKHg/I0000S5ossz793xo * Not including ND.edu in a veiled attempt at being humble
http://www.alistapart.com/articles/dao/ “...make pages which are adaptable. Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages.” John Allsopp @johnallsopp
http://www.alistapart.com/articles/dao/ “The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.” John Allsopp @johnallsopp
Summary RWD is simply Progressive Enhancement Building responsively requires planning We broke the web, and now we’re trying to “fix” it But it’s not easy, and it’s going to take time to get it right
erunyon
nakayama48
pnuslide
jonoalderson
niellony
utsumit
brynnstoryarts
ashitanoterakoya
signer
eumesy
takayanagiken
wingnus
yasslab
pauljervisheath
cassininazir
geeforr
nonsquared
keathley
destraynor
carmenintech
dotmariusz
bryan
chriscoyier
lemiorhan
rasmusluckow