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
   

   View Slide

2. Wednesday, November 9, 11
   

   View Slide

3. Wednesday, November 9, 11
   

   View Slide

4. Wednesday, November 9, 11
   

   View Slide

5. Wednesday, November 9, 11
   

   View Slide

6. Wednesday, November 9, 11
   

   View Slide

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
   

   View Slide

8. Photo: Robert Scoble
   How great is this, really?
   Wednesday, November 9, 11
   

   View Slide

9. 2000’s
   Image: Movie Title Stills Collection
   Wednesday, November 9, 11
   

   View Slide

10. Image: Movie Title Stills Collection
    Wednesday, November 9, 11
    

    View Slide

11. 2007
    The Great Disruption
    iPhone
    2008
    Android
    2010
    WP 7 iPad
    Wednesday, November 9, 11
    

    View Slide

12. Motorola Xoom
    Samsung Galaxy Tab
    The Great Disruption
    Sony Tablet S
    2011
    2010
    Wednesday, November 9, 11
    

    View Slide

13. 2011 (Cont...)
    The Great Disruption
    HP TouchPad (RIP)
    Blackberry Playbook Toshiba Thrive
    Wednesday, November 9, 11
    

    View Slide

14. 2011 (Cont...)
    The Great Disruption
    Amazon Kindle Fire ? ?
    2012
    Wednesday, November 9, 11
    

    View Slide

15. Wednesday, November 9, 11
    

    View Slide

16. Photo: blmiers2
    Mobile
    Tablets
    Netbooks
    Laptops
    Desktops
    Wednesday, November 9, 11
    

    View Slide

17. Wednesday, November 9, 11
    

    View Slide

18. We should ... design for this flexibility.
    But first, we must ‘accept the ebb and
    flow of things’.”
    “
    Wednesday, November 9, 11
    

    View Slide

19. Using percentages to specify page
    layout in CSS automatically creates
    adaptive pages.”
    “
    Wednesday, November 9, 11
    

    View Slide

20. @media print {
    ...
    }
    media=“print”>
    CSS2: Media Types
    External link
    Embedded
    Wednesday, November 9, 11
    

    View Slide

21. @media only screen and (min-width:500px) {
    ...
    }
    media=“only screen and (min-width:500px)”>
    CSS3: Media Conditions
    External link
    Embedded
    Wednesday, November 9, 11
    

    View Slide

22. Wednesday, November 9, 11
    

    View Slide

23. m.radwebsite.com
    Wednesday, November 9, 11
    

    View Slide

24. 1 URL, n destinations
    Wednesday, November 9, 11
    

    View Slide

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
    

    View Slide

26. Launched Sept 12, 2011
    bostonglobe.com
    Wednesday, November 9, 11
    

    View Slide

27. From now on...
    Wednesday, November 9, 11
    

    View Slide

28. The RWD Stack
    Adaptive layouts & grids
    Flexible images & content
    CSS3 Media Queries
    Wednesday, November 9, 11
    

    View Slide

29. Adaptive layouts
    .column1 {
    float: left;
    width: 75%;
    }
    .column2 {
    float: left;
    width: 25%;
    }
    Wednesday, November 9, 11
    

    View Slide

30. Adaptable layouts
    .column1 {
    float: left;
    width: 75%;
    }
    .column2 {
    float: left;
    width: 25%;
    }
    Wednesday, November 9, 11
    

    View Slide

31. Adaptable layouts
    .column1 {
    float: none;
    width: auto;
    }
    .column2 {
    float: none;
    width: auto;
    }
    Wednesday, November 9, 11
    

    View Slide

32. Flexible images & content
    img { max-width: 100%; }
    Wednesday, November 9, 11
    

    View Slide

33. Flexible images & content
    img { max-width: 100%; }
    Wednesday, November 9, 11
    

    View Slide

34. CSS3 Media Queries
    Wednesday, November 9, 11
    

    View Slide

35. CSS3 Media Queries
    Desktop down
    Wednesday, November 9, 11
    

    View Slide

36. CSS3 Media Queries
    Mobile up
    Wednesday, November 9, 11
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

42. Wednesday, November 9, 11
    

    View Slide

43. RWD’s Challenges
    Images
    Tables Ads Process
    Wednesday, November 9, 11
    

    View Slide

44. RWD’s Challenges
    Images Tables Ads Process
    Wednesday, November 9, 11
    

    View Slide

45. RWD’s Challenges
    Images Tables Ads Process
    Wednesday, November 9, 11
    

    View Slide

46. RWD’s Challenges
    Images Tables Ads Process
    Wednesday, November 9, 11
    

    View Slide

47. RWD’s Challenges
    Images Tables Ads Process
    Wednesday, November 9, 11
    

    View Slide

48. RWD’s Challenges
    Images Tables Ads Process
    Wednesday, November 9, 11
    

    View Slide

49. Responsive Images
    This is hard
    Wednesday, November 9, 11
    

    View Slide

50. 6HUYHUVLGHUHVSRQVLYH
    LPDJHV
    KWWSVJLWKXE
    FRPFDUVRQPFGRQDOG6HUYHU6LGH5HVSRQVLYH,PDJH([DPSOHUHDGPH
    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 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 -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 -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 8QFOHDU
    VDPSOH
    FRGH 5HOLHVRQYHU\EDVLFXVHUDJHQWVWULQJSDUVLQJ \
    7HVWLQJ5HVSRQVLYH,PDJHV
    KWWSZZZPRQROLLWWL
    FRPLPDJHV :RUNV 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 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 (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 -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¶WFOHDUZKLFKGLUHFWLRQLVWKHEHVWDSSURDFKWKHDQVZHULV
    FRRNLHVGDWDDWWULEXWHV,QGLVSXWDEO\WKHEHVWWHVWHGFOLHQW
    VROXWLRQDVLWLVLQXVHRQWKH%RVWRQ*OREH5HGHVLJQ \ \ \ \ \
    5HVSRQVLYHLPDJHVXVLQJ
    FRRNLHV
    KWWSEORJNHLWKFODUNFR
    XNUHVSRQVLYHLPDJHV
    XVLQJFRRNLHV :RUNV -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 -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 1REXW
    UHTXLUHV
    UHGLUHFW -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 -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 -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 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
    KWWSZZZVOLGHVKDUH
    QHW\LLEXDGDSWDWLRQ
    ZK\UHVSRQVLYHGHVLJQ
    DFWXDOO\EHJLQVRQWKH
    VHUYHU :RUNV -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
    

    View Slide

51. largesrc=“big.jpg” class=“r”>
    
    1. Get screen size with Javascript
    2. Loop through tags
    3. Write in appropriate tags
    
    Wednesday, November 9, 11
    

    View Slide

52. 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
    

    View Slide

53. Responsive Tables
    (Chris Coyier)
    Wednesday, November 9, 11
    

    View Slide

54. Wednesday, November 9, 11
    

    View Slide

55. ...
    18
    Center
    24
    33
    ...
    Data attributes match
    column headers
    Wednesday, November 9, 11
    

    View Slide

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
    

    View Slide

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
    

    View Slide

58. 0-760px
    > 760px
    Wednesday, November 9, 11
    

    View Slide

59. Ads and Responsive Design
    Don’t mix (yet)
    Wednesday, November 9, 11
    

    View Slide

60. Wednesday, November 9, 11
    

    View Slide

61. Wednesday, November 9, 11
    

    View Slide

62. 
    
    Wednesday, November 9, 11
    

    View Slide

63. 
    
    display: none;
    $().appendTo()
    Wednesday, November 9, 11
    

    View Slide

64. Wednesday, November 9, 11
    

    View Slide

65. Wednesday, November 9, 11
    

    View Slide

66. display: none;
    Wednesday, November 9, 11
    

    View Slide

67. Is there a future for
    responsive ads?
    Yep. If we create one.
    (...like an independently
    responsive ad API.)
    Wednesday, November 9, 11
    

    View Slide

68. The Responsive Workflow
    Nimble and iterative
    Wednesday, November 9, 11
    

    View Slide

69. What we’ve been doing
    Wednesday, November 9, 11
    

    View Slide

70. What we’ll need to do
    Forget pixel precision
    Move to the browser early
    Rapid prototyping!
    Developers + Designers
    Wednesday, November 9, 11
    

    View Slide

71. We’re our own best resource
    Photo: lightmanx5
    Wednesday, November 9, 11
    

    View Slide

72. Three things...
    Wednesday, November 9, 11
    

    View Slide

73. Structured content
    Wednesday, November 9, 11
    

    View Slide

74. Mobile first
    Structured content
    Wednesday, November 9, 11
    

    View Slide

75. Mobile first
    Progressive
    Enhancement
    Structured content
    Wednesday, November 9, 11
    

    View Slide

76. Mobile first
    Progressive
    Enhancement
    Structured content
    RWD
    Wednesday, November 9, 11
    

    View Slide

77. Photo: Fausto Fernos
    Wednesday, November 9, 11
    

    View Slide

78. Photo: NASA, ESA, M. Livo and the Hubble 20th Anniversary Team (STScl)
    Wednesday, November 9, 11
    

    View Slide

79. Taking the RWD path means
    Being at peace with the
    unknown
    Wednesday, November 9, 11
    

    View Slide

80. Thanks!
    Aaron Weyenberg
    @aweyenberg
    Wednesday, November 9, 11
    

    View Slide