Responsive Web Design and Embracing the Unknown

Design for the web is undergoing a dizzying disruption driven by the growing landscape of client devices. Responsive design, as a “response” to this disorder, began as a technique. It’s now maturing into a philosophy. In this session, Aaron will take you through the conditions that gave rise to RWD and the core mechanics of the responsive design approach. We’ll take an honest look at the headwinds that RWD is facing, and some emerging techniques and practices to counter those challenges.

Transcript

1. Responsive Web Design Aaron Weyenberg @aweyenberg (And embracing the unknown) Wednesday, November 9, 11
2. Wednesday, November 9, 11
3. Wednesday, November 9, 11
4. Wednesday, November 9, 11
5. Wednesday, November 9, 11
6. Wednesday, November 9, 11
7. Now if you’re viewing the site on a telephone, you will never in a trillion years experience the site. You’ll think you have experienced it. But you’ll be cheated. It’s such a sadness that you think you’ve viewed a site on your... fffucking telephone. Get real. Wednesday, November 9, 11
8. Photo: Robert Scoble How great is this, really? Wednesday, November 9, 11
9. 2000’s Image: Movie Title Stills Collection Wednesday, November 9, 11
10. Image: Movie Title Stills Collection Wednesday, November 9, 11
11. 2007 The Great Disruption iPhone 2008 Android 2010 WP 7 iPad Wednesday, November 9, 11
12. Motorola Xoom Samsung Galaxy Tab The Great Disruption Sony Tablet S 2011 2010 Wednesday, November 9, 11
13. 2011 (Cont...) The Great Disruption HP TouchPad (RIP) Blackberry Playbook Toshiba Thrive Wednesday, November 9, 11
14. 2011 (Cont...) The Great Disruption Amazon Kindle Fire ? ? 2012 Wednesday, November 9, 11
15. Wednesday, November 9, 11
16. Photo: blmiers2 Mobile Tablets Netbooks Laptops Desktops Wednesday, November 9, 11
17. Wednesday, November 9, 11
18. We should ... design for this flexibility. But first, we must ‘accept the ebb and flow of things’.” “ Wednesday, November 9, 11
19. Using percentages to specify page layout in CSS automatically creates adaptive pages.” “ Wednesday, November 9, 11
20. @media print { ... } <link rel=“stylesheet” href= “print.css” media=“print”> CSS2: Media Types External link Embedded Wednesday, November 9, 11
21. @media only screen and (min-width:500px) { ... } <link rel=“stylesheet” href= “default.css” media=“only screen and (min-width:500px)”> CSS3: Media Conditions External link Embedded Wednesday, November 9, 11
22. Wednesday, November 9, 11
23. m.radwebsite.com Wednesday, November 9, 11
24. 1 URL, n destinations Wednesday, November 9, 11
25. ...there is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.” Stephen Hay via Twitter “There is no mobile web... Wednesday, November 9, 11
26. Launched Sept 12, 2011 bostonglobe.com Wednesday, November 9, 11
27. From now on... Wednesday, November 9, 11
28. The RWD Stack Adaptive layouts & grids Flexible images & content CSS3 Media Queries Wednesday, November 9, 11
29. Adaptive layouts .column1 { float: left; width: 75%; } .column2 { float: left; width: 25%; } Wednesday, November 9, 11
30. Adaptable layouts .column1 { float: left; width: 75%; } .column2 { float: left; width: 25%; } Wednesday, November 9, 11
31. Adaptable layouts .column1 { float: none; width: auto; } .column2 { float: none; width: auto; } Wednesday, November 9, 11
32. Flexible images & content img { max-width: 100%; } Wednesday, November 9, 11
33. Flexible images & content img { max-width: 100%; } Wednesday, November 9, 11
34. CSS3 Media Queries Wednesday, November 9, 11
35. CSS3 Media Queries Desktop down Wednesday, November 9, 11
36. CSS3 Media Queries Mobile up Wednesday, November 9, 11
37. Desktop down MQ’s @media only screen and (max-width: 992px) { // up to 992px } // Resets // Global styles // Styles for all widths @media only screen and (max-width: 1382px) { // up to 1382px } Wednesday, November 9, 11
38. @media only screen and (max-width: 600px) { // up to 600px } @media only screen and (max-width: 768px) { // up to 768px } @media only screen and (max-width: 480px) { // up to 480px } Wednesday, November 9, 11
39. Mobile up MQ’s @media only screen and (min-width: 600px) { // 600px and up } // Resets // Global styles // All styles for widths < 480px @media only screen and (min-width: 480px) { // 480px and up } No query IS your first query Wednesday, November 9, 11
40. @media only screen and (min-width: 992px) { // 992px and up } @media only screen and (min-width: 768px) { // 768px and up } @media only screen and (min-width: 1382px) { // 1382px and up } Wednesday, November 9, 11
41. Ranged MQ’s @media only screen and (min-width: 480px) and (max-width: 600px) { // between 480px to 600px } for discrete styles 0 480px 600px 1382px Wednesday, November 9, 11
42. Wednesday, November 9, 11
43. RWD’s Challenges Images <img src=“brooklynbridge.jpg” ... Tables Ads Process Wednesday, November 9, 11
44. RWD’s Challenges Images Tables Ads Process Wednesday, November 9, 11
45. RWD’s Challenges Images Tables Ads Process Wednesday, November 9, 11
46. RWD’s Challenges Images Tables Ads Process Wednesday, November 9, 11
47. RWD’s Challenges Images Tables Ads Process Wednesday, November 9, 11
48. RWD’s Challenges Images Tables Ads Process Wednesday, November 9, 11
49. Responsive Images This is hard Wednesday, November 9, 11
50. 6HUYHUVLGHUHVSRQVLYH LPDJHV KWWSVJLWKXE FRPFDUVRQPFGRQDOG6HUYHU6LGH5HVSRQVLYH,PDJH([DPSOHUHDGPH QD <HV 1R <HV :85)/-DYD QD QD /LNHO\WRKDYH SUREOHPVEHFDXVH GLIIHUHQWVL]HLPDJHV FRPHIURPWKHVDPH XUO QD *3/Y $VIDUDV,FDQWHOOWKLVLVD:85)/EDVHGDOWHUQDWLYHWR7LQ\65& ,WLVDVHUYLFHWKDW\RXFDQFDOOZLWKDQLPDJHXUOWKDWZLOOUHVL]HWKH LPDJHEDVHGRQZKDW:85)/NQRZVDERXWWKHVL]HRIWKHGHYLFH 9HU\QHZSURMHFW&DUVRQ0F'RQDOGVWDUWHGLWZKLOHDW%UHDNLQJ 'HYHORSPHQWFRQIHUHQFHLQ6HSWHPEHU \ \ 6HQFKDLR6UF KWWSZZZVHQFKD FRPSURGXFWVLR :RUNV <HV 1R <HV :HEVHUYLFH QD QD 1RLVVXHV QD )UHH 2ULJLQDOO\FDOOHG7LQ\65&DQGEXLOWE\-DPHV3HDUFH8VHVGHYLFH GHWHFWLRQWRGHWHUPLQHVL]HRIGHYLFH2U\RXFDQSDVVVSHFLILF PHDVXUHPHQWVWKDW\RXZRXOGOLNHDQLPDJHUHVL]HGWR \ \ 5HVSRQVLYH,PDJHVDQG &RQWH[W$ZDUH6L]LQJ KWWSZZZFUDLJUXVVHOO FRXNUHVSRQVLYH LPDJHVDQGFRQWH[W DZDUHLPDJHVL]LQJ 1RILUVWORDG KDVH[WUD LPDJH UHTXHVWVXQWLO -6SURFHVVLQJ RFFXUV <HV <HV 6RUWRI -DYDVFULSW 3+3 QD H[DPSOHZRXOGUHVXOW LQEODQNJLIEXW DXWKRUSRLQWVRXWWKDW WKHGHIDXOWFRXOGEH PRELOHYHUVLRQ (YHU\WKLQJJHWV URXWHGWKURXJKD VLQJOHSKSILOHZLWK 85/SDUDPHWHUV &RXOGEHSUREOHPDWLF ZLWKSUR[LHVDQG &'1V QD 8QFOHDU VDPSOH FRGH 6HYHUDOVSHFLILFLPDJHVDUHGHILQHGLQWKH3+3FRGH7KHPDLQ SUREOHPLVWKHWHFKQLTXHHQGVXSZLWKPXOWLSOHUHTXHVWV7KLVZDV DYHU\HDUO\DWWHPSWDWVROYLQJWKLVSUREOHP7KHFRQYHUVDWLRQRQ WKHEORJSRVWLVLQWHUHVWLQJDQG,OLNHWKHLGHDRIUHTXHVWLQJWKH LPDJHEDVHGRQLW¶VSHUFHQWDJH%DVLFDOO\WKHLPDJHPD\QHYHUEH XVHGDWIXOOVFUHHQVL]H&DQZHJHWVRPHWKLQJUHODWLYHWRVFUHHQ VL]H" \ \ 5HVSRQVLYHLPDJHVZLWK 'RXEOHWDNHMV KWWSZZZJUDKDPELUG FRXNODEGRXEOHWDNH 1RILUVWORDG KDVH[WUD LPDJH UHTXHVWVXQWLO -6SURFHVVLQJ RFFXUV <HV <HV <HV -DYDVFULSW 6/,5RUVUF VHQFKDLR WLQ\VUF QD PRELOHVL]HLPDJH 1RLVVXHV QD :7)3/ OLFHQVH 8VHVHLWKHUDORFDOLPDJHUHVL]HURUWLQ\VUF5HVXOWVLQH[WUD GRZQORDGV \ \ 5HVSRQVLYHLPDJHVZLWK ([SUHVVLRQ(QJLQH KWWSZZZMRKQIDXOGV FRP DXMRXUQDOUHVSRQVLYH LPDJHVZLWK H[SUHVVLRQHQJLQHFRPPHQW :RUNV 1R 1R <HV 3+3 QD QD 1RLVVXHV QD 8QFOHDU VDPSOH FRGH 5HOLHVRQYHU\EDVLFXVHUDJHQWVWULQJSDUVLQJ \ 7HVWLQJ5HVSRQVLYH,PDJHV KWWSZZZPRQROLLWWL FRPLPDJHV :RUNV <HV 1R 1R -DYDVFULSW QD PRELOHVL]HLPDJH 1RLVVXHV QD 8QFOHDU VDPSOH FRGH 6WDUWVZLWKQRVFULSWWDJVXUURXQGLQJLPJWDJWKDWUHIHUHQFHVWKH VPDOOHVWLPDJH1RVFULSWWDJKDVGDWDDWWULEXWHVFRQWDLQLQJDV PDQ\ODUJHULPDJHILOHSDWKVDVQHHGHGDVZHOODVDQ\DGGLWLRQDO DWWULEXWHVOLNHDOW6KRUW-4XHU\VFULSWORRNVDWEURZVHUVL]HDQG SXOOVWKHDSSURSULDWHLPDJHLQIRIURPWKHQRVFULSWGDWDDWWULEXWHV DQGXVHVLWWRLQVHUWDQLPDJHWDJLQWRWKHSDJH(OHPHQWVLQVLGH QRVFULSWWDJVGRQRWJHWGRZQORDGHGVRWKHUHLVQRH[WUDKWWS UHTXHVWV \ \ &UHDWLQJUHVSRQVLYHLPDJHV XVLQJWKHQRVFULSWWDJ KWWSZZZKHDGORQGRQ FRPRXU WKRXJKWVWHFKQRORJ\SRVWVFUHDWLQJUHVSRQVLYHLPDJHVXVLQJWKHQRVFULSWWDJ :RUNV <HV 1R 1R -DYDVFULSW QD H[DPSOHGHIDXOWVWR GHVNWRSLPDJHEXW FRXOGHDVLO\EH PRELOH 1RLVVXHV QD 8QFOHDU VDPSOH FRGH 7KLVZDVWKHILUVWVROXWLRQ,VDZXVLQJWKHQRVFULSWWDJ'HVSLWHWKH IDFWWKH\GHVFULEHLWDVKDYLQJWKHHOHJDQFHRIDZDGLQJKLSSRWKH QRVFULSWDSSURDFKLVSUHWW\LQWHUHVWLQJ \ \ 5HVSRQVLYHFRQWH[WDZDUH LPDJHVZLWKRXWFRRNLHVRU VHUYHUORJLF KWWSVJLVWJLWKXE FRP :RUNV <HV 1R 1R MDYDVFULSW QD PRELOHVL]HLPDJH (DFKLPDJHKDV XQLTXHXUO1R SUREOHPZLWKFDFKLQJ RU&'1V QD 8QFOHDU VDPSOH FRGH $GGVH[WUDGLYPDUNXSZLWKDWWULEXWHVIRUDOOLPDJHV-6UHSODFHV WKHGLYZLWKLPDJHWDJDWDSSURSULDWHVL]H/RWVRIUHIORZRQWKH SDJH$OVRFRXOGLPSDFWEURZVHUDELOLW\WRSUHSDUVHLPDJH GRZQORDGVEXWWKDWPD\EHDJHQHUDOSUREOHPIRUDOORIWKHVH WHFKQLTXHV \ 5HVSRQVLYH,PDJHV KWWSVJLWKXE FRPILODPHQWJURXS5HVSRQVLYH,PDJHVWUHHFRRNLHGULYHQ :RUNV <HV 1R 1R -DYDVFULSW KWDFFHVV PRELOHVL]HLPDJH PRELOHVL]HLPDJH 1RLVVXHVLIXVLQJ GDWDVUFPHWKRG /LNHO\SUREOHPVXVLQJ XUOSDUDPHWHUV QD 'XDO OLFHQVH *3/DQG 0,7 *UHDWUHVRXUFHWRH[DPLQHGLIIHUHQWWHFKQLTXHVDQGDSSURDFKHV &RQIXVLQJEHFDXVHWKHUHDUHIRXUGLIIHUHQWEUDQFKHVWKDWUHIOHFW 6FRWW¶VH[SHULPHQWDWLRQVRYHUWKHODVWQLQHPRQWKV$WILUVWJODQFH LWLVQ¶WFOHDUZKLFKGLUHFWLRQLVWKHEHVWDSSURDFK WKHDQVZHULV FRRNLHVGDWDDWWULEXWHV ,QGLVSXWDEO\WKHEHVWWHVWHGFOLHQW VROXWLRQDVLWLVLQXVHRQWKH%RVWRQ*OREH5HGHVLJQ \ \ \ \ \ 5HVSRQVLYHLPDJHVXVLQJ FRRNLHV KWWSEORJNHLWKFODUNFR XNUHVSRQVLYHLPDJHV XVLQJFRRNLHV :RUNV <HV 1R 1R -DYDVFULSW 3+3 GHVNWRSVL]HLPDJH GHVNWRSVL]HLPDJH ,PDJHVDOOKDYHWKH VDPHILOHQDPHDQG SDWK7KLVZLOOOLNHO\EH DSUREOHP QD 8QFOHDU VDPSOH FRGH )DOOEDFNLVGHVNWRSLQVWHDGRIPRELOHZKLFKZRXOGEHSUHIHUUHG &RRNLHEHLQJVHWLVYHU\VLPSOHWKRXJKZKLFKLVQLFH&RPPHQWV RQWKHEORJSRVWDUHYHU\JRRG \ \ UHVSRQVLYHLPDJHVDOW KWWSVJLWKXE FRPDOOPDUNHGXSUHVSRQVLYHLPDJHVDOW :RUNV 1R 1R 1R MDYDVFULSW KWDFFHVV PRELOHVL]HLPDJH PRELOHVL]HLPDJH 0D\KDYHSUREOHPV ZLWK&'1VDQGSUR[\ VHUYHUVEHFDXVHDOO LPDJHVL]HVDUHDW VDPHXUOZLWKWKH GLIIHUHQFHVFRPLQJRQ XUOSDUDPHWHUV QD 8QFOHDU EXWEDVHG RQ-HKO¶V VFULSWVR OLNHO\0,7 RU*3/ 3ULPDU\GLIIHUHQFHLQWKLVVFULSWLVWKDWWKHUHLVDQDVVXPSWLRQRIDQ HQIRUFHGILOHV\VWHPVWUXFWXUHIRULPDJHV7KLVDOORZVWKHFRGHWR EHVPDOOHUEHFDXVHWKHVHUYHUGRHVQ¶WKDYHWREHWROGZKHUHWR ORRNIRUWKHILOH,WMXVWKDVWREHWROGWKDWLW VKRXOG ORRN \ \ \ \ $GDSWLYH,PDJHV KWWSDGDSWLYHLPDJHV FRP :RUNV <HV 1R <HV -DYDVFULSW KWDFFHVV 3+3 GHVNWRSVL]HLPDJH GHVNWRSVL]HLPDJH 0D\KDYHSUREOHPV ZLWK&'1VDQGSUR[\ VHUYHUVEHFDXVHDOO LPDJHVL]HVDUHDW VDPHXUO QD &UHDWLYH &RPPRQV 7KLVLVDGPLUDEOHIRUKRZHDV\LWZRXOGEHIRUSHRSOHWRFRQWLQXHWR XVHWKHLUFXUUHQWSURFHVVHV7KHVFULSWWDNHVFDUHRIWKHKHDY\ OLIWLQJ7KHSUREOHPVFRPHIURPHGJHFDVHVOLNHQRFRRNLHVRUQR MDYDVFULSWFDXVLQJWKHGHVNWRSLPDJHVWRGRZQORDGRQPRELOH \ \ 5HVSRQVLYHLPDJHVDQG WLQ\6UF KWWSEORJWUDVDWWL LWUHVSRQVLYH LPDJHVDQGWLQ\VUFKWPO :RUNV <HV 1REXW UHTXLUHV UHGLUHFW <HV -DYDVFULSW KWDFFHVVZHE VHUYLFH H[DPSOHXVHVEDVHWDJ EHFDXVHLWLVEDVHGRQ ROGHUYHUVLRQRI-HKO¶V UHVSRQVLYHLPDJHV,W ZRXOGSUREDEO\QHHGWR FKDQJHWRXVH FRRNLHV,IFKDQJH PDGHFOLHQWVZLWKRXW FRRNLHVZRXOGJHW PRELOHLPDJH PRELOHVL]HLPDJH (DFKLPDJHKDV XQLTXHXUO1R SUREOHPZLWKFDFKLQJ RU&'1V QD 'XDO OLFHQVH *3/DQG 0,7 7KHUHLVDQH[WUDUHGLUHFWFDXVHGE\WKHVHUYHUUHGLUHFWLQJWKH UHTXHVWWR6HQFKDWLQ\VUF7KLVFRXOGEHDYRLGHGE\XVLQJD UHYHUVHSUR[\VRWKHH[WUDUHTXHVWKDSSHQVRQWKHEDFNHQG EHWZHHQVHUYHUV3OXVWKDWZRXOGJLYHWKHZHEVHUYHUFRQWURORYHU WKHFRQQHFWLRQWR6HQFKDIRUSHUIRUPDQFHWXQLQJRUHYHQORFDO FDFKHVRILPDJHVWKDW6HQFKDKDVUHVL]HG \ \ &RQWH[WDZDUHUHVSRQVLYH LPDJHV KWWSVJLWKXE FRPDKXPH5HVSRQVLYH,PDJHV ([WUDJLI EHIRUHLPDJH ORDGV <HV <HV 1R -DYDVFULSW KWDFFHVV PRELOHVL]HLPDJH PRELOHVL]HLPDJH 8UOSDUDPHWHULVVXHV QD %DVHGRQ 5HVSRQVLYH ,PDJHVVR 0,7RU*3/ 7KHNH\DGGLWLRQLVH[SODLQHGEHVWE\$QG\+XPHKHUHKWWSEORJ DQG\KXPHQHWFRQWHQWDZDUHUHVSRQVLYHLPDJHV7KHVL]HRIWKH VFUHHQPD\PDWWHUOHVVWKDQWKHVL]HWKHLPDJHZLOOEHXVHGLQWKH SDJH7KLVWULHVWRJHWDZD\IURPVFUHHQVL]H7KHFRGHLWVHOIZDV EDVHGRIIDQHDUOLHUEUDQFKRI5HVSRQVLYH,PDJHVZKLFKUHTXLUHG DGGLWLRQDOUHTXHVWVWRDEODQNJLI7KHFRGHFRXOGEHPRGLILHGWR XVHFRRNLHVDQGJHWULGRIWKHH[WUDUHTXHVWV \ \ 5HVSRQVLYHLPDJHVZLWK3+3 DQGM4XHU\ KWWSZZZ MDPHVIDLUKXUVWFR XNSRVWVYLHZUHVSRQVLYHBLPDJHVBZLWKBSKSBDQGBMTXHU\ /RDGHUJLI VKRZVXS EHIRUHIXOO LPDJH <HV <HVPDQ\ <HV -DYDVFULSW 3+3 QD PRELOHVL]HLPDJH (YHU\WKLQJJHWV URXWHGWKURXJKD VLQJOHSKSILOHZLWK 85/SDUDPHWHUV &RXOGEHSUREOHPDWLF ZLWKSUR[LHVDQG &'1V QD 0,7 '\QDPLFLPDJHVL]HVEXWDSSHDUVWRODFNEUHDNSRLQWV$V\RX UHVL]HWKHEURZVHUZLQGRZORWVRIDGGLWLRQDOKWWSUHTXHVWVWRWKH VHUYHUWRVHHLILWQHHGVWRJHWDQHZLPDJHVL]H$VVRFLDWHGZLWK WKHVNHOHWRQ5:'ERLOHUSODWH \ 5HVSRQVLYHLPDJHVZLWKRXW MDYDVFULSW KWWSEORJUM]DZRUVNL FRPUHVSRQVLYHLPDJHVZLWKRXWMDYDVFULSW 1R)LUVWORDG ZLOOEHIXOOVL]H LPDJHVXQWLO FRRNLHLVVHW <HV <HV 1R PHGLDTXHULHV KWDFFHVV SKS PRELOHVL]HLPDJH QD 0D\KDYHSUREOHPV ZLWK&'1VDQGSUR[\ VHUYHUVEHFDXVHDOO LPDJHVL]HVDUHDW VDPHXUOZLWKWKH GLIIHUHQFHVFRPLQJRQ XUOSDUDPHWHUV PRELOHVL]HLPDJH -621 OLFHQVH 0RUHRIDSURRIRIFRQFHSWWKDQDQDFWXDOVROXWLRQ,WLVD³SXUHO\ DFDGHPLFSXUVXLWRINQRZOHGJH´WHFKQLTXHQRWDIURQWOLQHRQH 7KHLQWHUHVWLQJSDUWRIWKLVLVWKDWWKHVHUYHUILQGVRXWDERXWWKH VL]HRIWKHFOLHQWYLDDPHGLDTXHU\WKDWUHTXHVWVDLPJWKDWLV DFWXDOO\DSKSVFULSW,WLVDQLQWHUHVWLQJLGHD7KHDXWKRU DFNQRZOHGJHVWKHUDFHFRQGLWLRQVRQWKHILUVWORDGEXWLWGRHV PDNHPHZRQGHULIWKLVWHFKQLTXHPLJKWEHXVHIXOWRJHWVRPHGDWD WRWKHVHUYHU&DQ¶WWKLQNRIDWLPH,ZRXOGQHHGWRGRWKLVZKHQ, FRXOGQ¶WMXVWXVH-6EXWLWLVLQWULJXLQJ <LLEX3URILOH7HFKQLTXH KWWSZZZVOLGHVKDUH QHW\LLEXDGDSWDWLRQ ZK\UHVSRQVLYHGHVLJQ DFWXDOO\EHJLQVRQWKH VHUYHU :RUNV <HV 1R 1R -DYDVFULSW 3+3'HYLFH GHWFWLRQ PRELOHVL]HLPDJH PRELOHVL]HLPDJH 1RLVVXHV QD &UHDWLYH &RPPRQV 7KHVOLGHGHFNIURPEGFRQIGHVFULEHVKRZ%U\DQDQG6WHSKDQLH KDYHEHHQXVLQJGHYLFHGHWHFWLRQWDFLWNQRZOHGJHDQGFOLHQW GHWHFWLRQLQFRPELQDWLRQWRGHOLYHUWKHEHVWSRVVLEOHLPDJHDORQJ ZLWKDEXQFKRIRWKHUDVVHWV7KLVLVWKHWHFKQLTXHWKH\XVHGRQ EURZVHUQRNLDFRP%U\DQKDVVRPHHDUOLHUFRGHRQ*LW+XEEXW WKH\KDYHQ¶WUHOHDVHGDUHFHQWYHUVLRQ7KHPDLQUHDVRQIRU LQFOXGLQJWKLVLVWKDWOLNHWKH%RVWRQ*OREHLWLVSUREDEO\WKHEHVW WKRXJKWRXWH[DPSOHGHDOLQJZLWKDORWHGJHFDVHVDQGSRWHQWLDO SLWIDOOV 7HFKQLTXH 85/ )LUVW/RDG 0XOWLSOH 6L]HV ([WUD 'RZQORDGV +DQGOH ,PDJH 5HVL]LQJ" 7HFK 1R&RRNLHV 1R-6 &DFKLQJDQG&'1V 1R0HGLD4XHU\ 6XSSRUW /LFHQVH 1RWHV GDWD QRVFULSW FRRNLHV EDVH KWDFFHVV XUO SDUDPHWHUV DVVXPHG ILOHVWUXFWXUH LPDJH VHUYLFH VHU VLG Wednesday, November 9, 11
51. <noscript data-smallsrc=“small.jpg” data- largesrc=“big.jpg” class=“r”> <img src=“small.jpg” </noscript> 1. Get screen size with Javascript 2. Loop through <noscript> tags 3. Write in appropriate <img> tags <img src=“big.jpg” alt=“The big image” /> Wednesday, November 9, 11
52. <img src=“http://src.sencha.io/http:// mysite.com/image.jpg” alt=“Magically resized image” /> 1. Prefix image url with proxy service Sencha.io 2. Nothing. YOur’e done. Wednesday, November 9, 11
53. Responsive Tables (Chris Coyier) Wednesday, November 9, 11
54. Wednesday, November 9, 11
55. ... <td data-label=“Jersey Number”>18</td> <td data-label=“Position”>Center</td> <td data-label=“Goals”>24</td> <td data-label=“Assists”>33</td> ... Data attributes match column headers Wednesday, November 9, 11
56. table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; left: -9999px; } Stack all table elements Hide the table headers Wednesday, November 9, 11
57. td { position: relative; padding-left: 50%; } td:before { position: absolute; width: 50%; content: attr(data-label); } Make space for data-labels Position and insert data-labels Wednesday, November 9, 11
58. 0-760px > 760px Wednesday, November 9, 11
59. Ads and Responsive Design Don’t mix (yet) Wednesday, November 9, 11
60. Wednesday, November 9, 11
61. Wednesday, November 9, 11
62. <div class=“ad-slot-2”></div> <div class=“ad-slot-1”></div> Wednesday, November 9, 11
63. <div class=“ad-slot-2”></div> <div class=“ad-slot-1”></div> display: none; $().appendTo() Wednesday, November 9, 11
64. Wednesday, November 9, 11
65. Wednesday, November 9, 11
66. display: none; Wednesday, November 9, 11
67. Is there a future for responsive ads? Yep. If we create one. (...like an independently responsive ad API.) Wednesday, November 9, 11
68. The Responsive Workflow Nimble and iterative Wednesday, November 9, 11
69. What we’ve been doing Wednesday, November 9, 11
70. What we’ll need to do Forget pixel precision Move to the browser early Rapid prototyping! Developers + Designers Wednesday, November 9, 11
71. We’re our own best resource Photo: lightmanx5 Wednesday, November 9, 11
72. Three things... Wednesday, November 9, 11
73. Structured content Wednesday, November 9, 11
74. Mobile first Structured content Wednesday, November 9, 11
75. Mobile first Progressive Enhancement Structured content Wednesday, November 9, 11
76. Mobile first Progressive Enhancement Structured content RWD Wednesday, November 9, 11
77. Photo: Fausto Fernos Wednesday, November 9, 11
78. Photo: NASA, ESA, M. Livo and the Hubble 20th Anniversary Team (STScl) Wednesday, November 9, 11
79. Taking the RWD path means Being at peace with the unknown Wednesday, November 9, 11
80. Thanks! Aaron Weyenberg @aweyenberg Wednesday, November 9, 11