Fashionably flexible responsive web design (full day workshop from New Adventures, January 2013)

Responsive web design has made designing flexible websites fashionable again, but there’’s more to being fashionably flexible than technology or using CSS3 media queries.

So this unique workshop — hosted by Andy Clarke, designer, author and speaker — puts the design back into responsive design. Andy will teach you how to design from the ‘content out’, instead of from the ‘canvas in’.

He’ll demonstrate how to separate design from layout and if you work with designs made in Photoshop, he’ll show how to deconstruct a design into its components (colour, texture and typography) before reassembling it for a fluid continuum of devices from, mobile phones to desktops and everything in between.

Transcript

1. View Slide

2. 2
   FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. John Allsopp, Mark Boulton, Brad Frost, Jeremy Keith,
    Ethan Marcotte, Brian and Stephanie Rieger,
    Luke Wroblewski and all the designers and developers
    whose work I’ve featured.
    My special thanks to:
    

    View Slide

12. #stno
    Twitter, Instagram, Flickr
    

    View Slide

13. 1
    2
    3
    4
    Becoming responsive
    Responsive design process
    Responsive design patterns
    Technically speaking
    

    View Slide

14. ONE
    

    View Slide

15. John Allsopp
    The%control%which%designers%know%in%the%print%medium,%
    and%often%desire%in%the%web%medium,%is%simply%a%function%of%
    the%limitation%of%the%printed%page.%We%should%embrace%the%
    fact%that%the%web%doesn’t%have%the%same%constraints,%and%
    design%for%this%>lexibility.
    http://www.alistapart.com/articles/dao
    

    View Slide

16. • 102 million people accessed Facebook
    solely through their mobile device in
    June 2012 (up 23% from 83m in
    March.)
    • 24% of Black Friday retail traffic in
    2012 came from mobile devices,
    14.3% in 2011 and 5.5% in 2010.
    • In August 2012, 77% of TV viewers
    used another device at the same time in
    a typical day. 81% used a smartphone
    and TV at the same time.
    SMARTPHONES Source: http://lukew.com/ff/entry.asp?1450
    http://lukew.com/ff/entry.asp?1624
    http://lukew.com/ff/entry.asp?1665
    

    View Slide

17. http://www.lukew.com/ff/entry.asp?1506
    Mobile gross volume
    $600M
    $2B
    $5B
    2009
    2010
    2011
    

    View Slide

18. • iOS accounts for 54.65% of mobile
    browsing. Android has 16.26% and
    RIM 3.29%
    • 75% of Google’s mobile search comes from
    iOS devices
    • 70% of eBay’s mobile e-commerce business
    in the United States came from iPhone
    • More iPhones are sold every day worldwide
    than there are babies born, 378,00 vs
    371,00
    IPHONES
    Source: http://lukew.com/ff/entry.asp?1415
    http://www.lukew.com/ff/entry.asp?1506
    

    View Slide

19. • Amazon now sells more Kindle books
    than all print books (hardcover and
    paperback) combined
    • Adult e-books sales grew from 66.6
    million in January 2011 to 99.5 million
    in January 2012
    E-READERS
    Source: http://lukew.com/ff/entry.asp?1391
    http://lukew.com/ff/entry.asp?1536
    

    View Slide

20. • The share e-book reader owners in the
    USA jumped from 10% to 19% between
    mid-December 2011 and early January
    2012.
    • Kindle Fire has become the best-selling,
    most-gifted and most-wished-for product
    on Amazon.
    • Gifting of Kindle books up 175% between
    Black Friday and Christmas Day 2011
    compared to the same period in 2010.
    • The #1 and #4 best-selling Kindle books
    released in 2011 were published using
    Kindle Direct Publishing.
    KINDLE SALES
    Source: http://www.lukew.com/ff/entry.asp?1488
    

    View Slide

21. • Over 100m iPads sold to date (October
    2012)
    • 52% of worldwide tablet marketshare
    is iPad (October 2012)
    • 95.5% of all the web traffic from tablets
    comes from iPad (October 2012)
    • Nearly 7 percent of all online purchases
    were made using iPads
    • iPad and iPhone shoppers account for
    90% of all mobile purchases and spend
    19% more per order than Android users
    TABLETS IPADS
    

    View Slide

22. View Slide

23. View Slide

24. Ethan Marcotte
    Rather%than%tailoring%disconnected%designs%to%each%of%an%
    everAincreasing%number%of%web%devices,%we%can%treat%them%
    as%facets%of%the%same%experience.%We%can%design%for%an%
    optimal%viewing%experience,%but%embed%standardsAbased%
    technologies%into%our%designs%to%make%them%not%only%more%
    >lexible,%but%more%adaptive%to%the%media%that%renders%them.
    http://alistapart.com/articles/responsive-web-design
    

    View Slide

25. A flexible grid
    Flexible images and media
    CSS3 media queries
    Three responsive ingredients
    

    View Slide

26. Andy Clarke
    Anything%that’s%>ixed%and%unresponsive%isn’t%web%design%
    anymore,%it’s%something%else.%If%you%don’t%embrace%the%
    inherent%>luidity%of%the%web,%you’re%not%a%web%designer,%
    you’re%something%else.%Web%design%is%responsive%design.%
    Responsive%Web%Design%is%web%design,%done%right.
    http://the-pastry-box-project.net/andy-clarke/2012-january-3/
    

    View Slide

27. Different skills and workflow may be required
    More time spent at beginning of the process
    Additional resources may be required
    Deciding when responsive
    is appropriate
    

    View Slide

28. Ben Callahan
    We%do%responsive%web%design,%but%we%don’t%do%it%for%the%
    sake%of%being%trendy.%We%do%it%because%we%believe%it’s%the%
    way%websites%should%be%made.%This%is%an%opportunity%for%us%
    to%>inally%embrace%the%dynamic%medium%we%build%for.%The%
    web%is%not%>ixed%width.%
    http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive
    

    View Slide

29. 640x480
    

    View Slide

30. ‘Letterbox’ framesets. (Can you believe we did that stuff?)
    

    View Slide

31. 800x600
    

    View Slide

32. 1024x768
    

    View Slide

33. View Slide

34. Jason Santa Maria
    We%don’t%support%800%x%600%anymore,%nor%do%we%640%x%480.
    Do%you?
    http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
    

    View Slide

35. View Slide

36. View Slide

37. 320x420
    320x420
    

    View Slide

38. 420x320
    

    View Slide

39. Arguing%about%640,%800%or%1024%pixels%is%like%arguing%about%
    whether%Pepsi%tastes%better%than%Coke%when%really,%a%nice%glass%
    of%water%would%be%much%more%refreshing.%The%numbers%game%is%
    a%red%herring.%A%big%>ixedAwidth%red%herring.
    http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
    Jeremy Keith
    

    View Slide

40. View Slide

41. View Slide

42. ⌘N
    

    View Slide

43. View Slide

44. View Slide

45. Jason Santa Maria
    The%framework%for%what%a%page%is%has%changed%considerably%even%in%
    the%past%few%years,%though%our%applications%for%designing%those%
    frameworks%are%still%stuck%in%the%web%of%yore,%and%largely%dictated%by%
    their%use%for%print%design.%
    http://v4.jasonsantamaria.com/articles/a-real-web-design-application
    

    View Slide

46. Design isn’t just about layout
    Layout
    Elements placed on a grid, horizontally and vertically
    Typography
    Typefaces, type treatments and white space
    Colour
    Emotion and interaction vocabulary
    Texture
    Decorative elements, line-work, patterns and shapes
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. Trent Walton
    Web%designers%will%have%to%look%beyond%the%layout%in%front%
    of%them%to%envision%how%its%elements%will%re>low%&%lockup%at%
    various%widths%while%maintaining%form%&%hierarchy.%
    http://trentwalton.com/2011/07/14/content-choreography
    

    View Slide

59. Design atmosphere
    Typography
    Typefaces, type treatments and white space
    Colour
    Emotion and interaction vocabulary
    Texture
    Decorative elements, line-work, patterns and shapes
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. FRV BRAND GUIDELINES
    ES
    

    View Slide

67. 25
    MASS: TYPOGRAPHY
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyz
    abcdefghijklmnopqrstuvwxyz
    The Product Name should appear in Futura Std Bold Uppercase. This sans serif font has been chosen for its clarity, legibility and classic appeal.
    The Front Product Descriptor copy should appear in ITC Century Std Lowercase. This serif font has been chosen for its simple style and
    clarity even in smaller point sizes.
    The back of pack copy should appear in Futura Std. This sans serif font has been chosen for its simple style and clarity even in smaller
    point sizes.
    All fonts are OpenType from the Adobe Font Folio 11. (www.adobe.com/uk/products/fontfolio)
    

    View Slide

68. 17
    MASS
    PANTONE
    7489 C
    PANTONE
    7495 C
    PANTONE
    366 C
    PANTONE
    383 C
    PANTONE
    7406 C
    PANTONE
    121 C
    PANTONE
    1235 C
    PANTONE
    7502 C
    PANTONE
    157 C
    PANTONE
    138 C
    PANTONE
    166 C
    PANTONE
    Warm Red C
    PANTONE
    485 C
    PANTONE
    184 C
    PANTONE
    5005 C
    PANTONE
    7431 C
    PANTONE
    673 C
    PANTONE
    701 C
    PANTONE
    529 C
    PANTONE
    7446 C
    PANTONE
    659 C
    PANTONE
    7459 C
    PANTONE
    278 C
    PANTONE
    551 C
    PANTONE
    629 C
    PANTONE
    3105 C
    PANTONE
    3248 C
    PANTONE
    7466 C
    PANTONE
    7536 C
    PANTONE
    7530 C
    OUTDOOR
    PANTONE
    583 C
    PANTONE
    291 C
    MASS: COLOUR PALETTE
    Mass products are made up of a warm colourful palette that is both complementary and contrasting.
    Colour is a key element of this design, therefore it is important that Pantone colours are used to print the designs rather than CMYK.
    Pantone colours will provide the maximum amount of consistency across the Product Range. In instances where this is not possible
    we have created optimised CMYK values that are shown on page 18. In the instance that a suitable colour does not exist for a Mass
    Food product, please contact your Licensing Manager.
    

    View Slide

69. 22
    MASS: PHOTOGRAPHY
    Always use image in monochrome
    with a background colour wash
    Never use in colour Never use simply as black and
    white image
    Never position anywhere other
    than bottom right
    Never cover with copy
    ITALIAN FUSILLI
    enjoy traditional
    texture with Durum
    Wheat Semolina
    Never force the image into the
    given space – leave an area of
    blank space round the image
    Never position the image around
    a corner
    do’s and dont’s
    

    View Slide

70. .,3:[`SLN\PKL=LYZPVUc6J[VILY
    )\PSKPUNH
    .SVIHS,_WLYPLUJL3HUN\HNL
    MVY[OL))*
    .,3:[`SLN\PKL
    9<
    (
    .,3:[`SLN\PKL=LYZPVUc6J[VILY
    

    View Slide

71. View Slide

72. 9<
    (
    .,3:[`SLN\PKL=LYZPVUc6J[VILY
    $ULDO5HJXODU
    $%&'()*+,-./0123456789:;<=
    DEFGHIJKLMNOPQRSTUVWXYZ[\]
    #…A B
    $ULDO%ROG
    $%&'()*+,-./0123456789:;<=
    DEFGHIJKLMNOPQRSTUVWXYZ[\]
    #…A B
    +MPP7ERW6IKYPEV
    %&'()*+,-./0123456789:;<=>
    EFGHIJKLMNOPQRSTUVWXYZ[\]^
    $† B
    C
    .,3\ZLZIVSK[`WVNYHWO`[VJYLH[LZ[YVUNLY
    OPLYHYJOPLZHUKKYHTHHJYVZZ[OLZP[L>L»YLTV]PUN
    MYVT=LYKHUH[V(YPHSHZ[OL))*»ZKLMH\S[^LIMVU[MVY
    IV[OOLHKLYZHUKIVK`JVW`
    )\PSKPUN)SVJRZ;`WVNYHWO`
    

    View Slide

73. 9<
    (
    .,3:[`SLN\PKL=LYZPVUc6J[VILY
    )\PSKPUN)SVJRZ;`WVNYHWO`
    3HYNLIVSK[`WLZOV\SKIL\ZLK[VLZ[HISPZO
    HJSLHYPUMVYTH[PVUOPLYHYJO`;OLZLHYL[OL
    YLJVTTLUKLK[`WLZPaLZ
    $ULDO%ROGS[
    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
    $ULDO%ROGS[
    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
    $ULDO%ROGS[
    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
    $ULDO%ROGS[
    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
    $ULDO%ROGS[
    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
    $ULDO%ROGS[
    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
    $ULDO%ROGS[
    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
    $ULDO%ROGS[
    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
    $ULDO%ROGS[
    S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
    $ULDO%ROGS[
    $5,$/%2/'&$3,7$/,6('S[
    
    

    View Slide

74. 9<
    (
    .,3:[`SLN\PKL=LYZPVUc6J[VILY
    )\PSKPUN)SVJRZ;`WVNYHWO`
    7\[[PUNP[[VNL[OLY^P[OIVK`JVW`¯
    :\WLY/LHKLYW_
    /LHKLYW_
    :\IOLHKLYW_
    ;04,:;(47:7;*(70;(3:
    *VW`W_(YPHS)VSKVUW_SLHKPUN3VYLTPWZ\TKVSVYZP[HTL[JVU
    ZLJ[L[\YHKPWPZJPUNLSP[-\ZJLZLKSLV4HLJLUHZ\S[YPJLZSVYLTZP[HTL[
    KPHT(SPX\HTZVSSPJP[\KPU[YPZ[PX\LU\SSH+\PZSPILYVKPHTJVUKPTLU[\TL[
    JVUKPTLU[\TPUJVUN\LL\[LSS\Z7OHZLSS\ZL\LSP[H[UPZP\S[YPJPLZSVIVY[PZ
    :\ZWLUKPZZLWVY[HJVTTVKVSLV
    *VW`W_(YPHS9VTHUVUW_SLHKPUN3VYLTPWZ\TKVSVYZP[HTL[
    JVUZLJ[L[\YHKPWPZJPUNLSP[-\ZJLZLKSLV4HLJLUHZ\S[YPJLZSVYLTZP[HTL[
    KPHT(SPX\HTZVSSPJP[\KPU[YPZ[PX\LU\SSH+\PZSPILYVKPHTJVUKPTLU[\TL[
    JVUKPTLU[\TPUJVUN\LL\[LSS\Z7OHZLSS\ZL\LSP[H[UPZP\S[YPJPLZSVIVY[PZ
    :\ZWLUKPZZLWVY[HJVTTVKVSLV:LK[PUJPK\U[[PUJPK\U[THZZH
    W_
    *VW`W_(YPHS9LN\SHYVUW_SLHKPUN3VYLTPWZ\TKVSVYZP[HTL[
    JVUZLJ[L[\YHKPWPZJPUNLSP[-\ZJLZLKSLV4HLJLUHZ\S[YPJLZSVYLTZP[HTL[
    KPHT(SPX\HTZVSSPJP[\KPU[YPZ[PX\LU\SSH+\PZSPILYVKPHTJVUKPTLU[\TL[
    JVUKPTLU[\TPUJVUN\LL\[LSS\Z7OHZLSS\ZL\LSP[H[UPZP\S[YPJPLZSVIVY[PZ
    :\ZWLUKPZZLWVY[HJVTTVKVSLV:LK[PUJPK\U[[PUJPK\U[THZZH*YHZ
    ZJLSLYPZX\LKPHTUVUHYJ\+VULJLNLZ[HZ0U[LNLYHTP(LULHU[LTW\ZTP
    L\S\J[\ZPTWLYKPL[LYH[SPN\SHZLTWLY[\YWPZJVUZLJ[L[\YMH\JPI\ZSPILYVHU[L
    UVUZLT(SPX\HTX\PZKPHT7LSSLU[LZX\LTVSSPZUPZPLNL[W\Y\Z(LULHUPHJ\SPZ
    TL[\Z]LSZLT0U[LNLYH[LYH[
    3PUR¶5HTKPJ[\TUPIOL\HYJ\
    3PUR¶+VULJLNLZ[HZPU[LNLYHTP
    

    View Slide

75. 9<
    (
    .,3:[`SLN\PKL=LYZPVUc6J[VILY
    3PURZZOV\SKJVTWS`^P[OL_PZ[PUNZ[HUKHYKZHUK
    N\PKLSPULZ;OL`ZOV\SKILLHZPS`KPZ[PUN\PZOHISL
    MYVTIVK`JVW`\ZPUNHJVTIPUH[PVUVMIVSK[`WL
    HUKJVSV\YHSVUN^P[O\UKLYSPULVY\UKLYSPULVU
    OV]LY6UYVSSV]LYSPURZZOV\SKJOHUNLJVSV\Y
    HUK\UKLYSPULPM\UKLYW_
    )\PSKPUN)SVJRZ3PURPUN*VU]LU[PVUZ
    /LHKLYW_
    :\IOLHKLYW_
    ;04,:;(47:7_*(70;(3:
    )VK`*VW`W_(YPHS)VSKVUW_SLHKPUN3VYLTPWZ\TKVSVYZP[HTL[
    JVUZLJ[L[\YHKPWPZJPUNLSP[-\ZJLZLKSLV4HLJLUHZ\S[YPJLZSVYLTZP[HTL[
    KPHT(SPX\HTZVSSPJP[\KPU[YPZ[PX\LU\SSH
    )VK`*VW`W_(YPHS9LN\SHYVUW_SLHKPUN3VYLTPWZ\TKVSVYZP[HTL[
    JVUZLJ[L[\YHKPWPZJPUNLSP[-\ZJLZLKSLV4HLJLUHZ\S[YPJLZSVYLTZP[HTL[
    KPHT(SPX\HTZVSSPJP[\KPU[YPZ[PX\LU\SSH
    3PUR:\ZWLUKPZZLWVY[HJVTTVKVSLVW_
    3PUR7LSSLU[LZX\LTVSSPZUPZPLNL[W\Y\ZW_
    *644,5;:7?*(70;(3
    ,4(037?*(70;(3
    7905;7?*(70;(3
    W_
    

    View Slide

76. 9<
    (
    .,3:[`SLN\PKL=LYZPVUc6J[VILY
    )\PSKPUN)SVJRZ0JVUVNYHWO`
    >LOH]LKLZPNULKHUL^ZL[VMPJVUZ[V^VYRPU
    OHYTVU`^P[O[OLUL^]PZ\HSSHUN\HNL;OLKLMH\S[
    ZPaLPZW_HUKPJVUZJHUIL\ZLK^P[OVY^P[OV\[
    HÅH[I\[[VUJVU[HPULY;OLZLJHUIL\ZLKPUHU`
    JVSV\Y\USLZZV[OLY^PZLZWLJPÄLK
    3UHYLRXV 1H[W 8S 'RZQ 7R7RS 7R%RWWRP
    &ORVH5HPRYH
    1R'HOHWH
    'RZQORDG 8SORDG
    6HDUFK
    8QORFN
    /RFN6HFXULW\
    3ULQW (PDLO
    9RFDE2Q2II 5HIUHVK $ODUP5HPLQGHU 'XUDWLRQ &RXQWGRZQ ([SLUHV 6HWWLQJV
    'HJUDGHG
    &RQWHQW
    *ULG9LHZ /LVW9LHZWH[W
    =RRP,Q =RRP2XW
    +RPH
    /LVW9LHZ
    WH[WDQGWKXPE 1HZ1HZLWHPV 4XRWH ([WHUQDO/LQN
    /RDGLQJ
    &KDSWHUV 7UDI¿F
    /LQNWR7KLV
    (PEHG
    -VYTVYLPUMVYTH[PVUVYMVY[OLM\SSZL[VMPJVUZ]PZP[IIJJV\RNLSPJVUVNYHWO`ZO[TS
    

    View Slide

77. .,37H[[LYUZ(JJVYKPVUc4H`
    9<
    (
    (S[LYUH[P]LOVYPaVU[HSHJJVYKPVU
    (S[LYUH[P]LJVUÄN\YH[PVUMVY[OLHJJVYKPVU
    PUJS\KLYLK\JPUN[OLHTV\U[VMJVU[LU[PULHJO
    VM[OLWHULSZHSSV^PUNMVYHTVYLPTHNLSLK
    [YLH[TLU[
    (JJVYKPVU
    TLU\
    (JJVYKPVU
    TLU\
    (JJVYKPVUTLU\
    3VYLTPWZ\TKVSVYZP[HTL[JVUZLJ[L[\YHKPWPZJPUNLSP[,[PHT
    PWZ\TLYH[MYPUNPSSH]LS[YPZ[PX\LTHNUH
    

    View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. What we learned
    Mobile usage is out-pacing PC usage
    Our thinking about design needs to adapt
    Separate atmosphere from layout
    Create design guides first, not style guides last
    

    View Slide

84. View Slide

85. TWO
    

    View Slide

86. What we’ll cover
    The ‘post-PC’ design workflow
    Making content design decisions
    Designing with web-font tools
    Typography and texture
    A new take on grid design
    

    View Slide

87. Plan Design Develop Deploy
    Hat tip to Ethan Marcotte
    

    View Slide

88. Plan Design Develop Deploy
    

    View Slide

89. Plan Deploy
    

    View Slide

90. Design
    Site audit (existing assets)
    Flows and navigation maps
    User stories or scenarios
    Personas
    Site maps and content inventory
    Wireframes (screen blueprints or storyboards)
    Prototypes
    Written specifications (describing behavior or design)
    Graphic mockups (Precise visual of expected end result)
    http://en.wikipedia.org/wiki/User_experience_design
    

    View Slide

91. Design
    Site audit (existing assets)
    Flows and navigation maps
    User stories or scenarios
    Personas
    Site maps and content inventory
    Wireframes (screen blueprints or storyboards)
    Prototypes
    Written specifications (describing behavior or design)
    Graphic mockups (Precise visual of expected end result)
    http://en.wikipedia.org/wiki/User_experience_design
    

    View Slide

92. Logo
    Nav Nav Nav Nav
    Introduction Call to action
    Logo Logo Logo
    Logo Logo
    Work introduction Image
    

    View Slide

93. View Slide

94. Mat “Wilto” Marquis
    Mobile%users%want%to%see%our%menu,%hours,%and%delivery%
    number.%Desktop%users%de>initely%want%this%1mb%png%of%
    someone%smiling%at%a%salad.
    https://twitter.com/wilto/status/63284673723375616
    @wilto
    

    View Slide

95. Stephen Hay’s responsive workflow
    Content inventory
    Content reference wireframes
    Design in text (structured content)
    Linear design
    Breakpoint graph
    Design for various breakpoints
    HTML design prototype
    Present prototype screenshots
    Present prototype after revision
    Document for production
    http://www.slideshare.net/stephenhay/responsive-design-workflow
    

    View Slide

96. Stephen Hay’s responsive workflow
    Content inventory
    Content reference wireframes
    Design in text (structured content)
    Linear design
    Breakpoint graph
    Design for various breakpoints
    HTML design prototype
    Present prototype screenshots
    Present prototype after revision
    Document for production
    http://www.slideshare.net/stephenhay/responsive-design-workflow
    

    View Slide

97. Content inventory
    Branding
    Navigation
    Introduction (with initial call to action)
    Work
    Conference speaking
    Workshops and training
    Books and articles
    Blog entries
    Call to action
    

    View Slide

98. Call to action
    Branding
    Introduction
    Navigation
    Conference speaking
    Workshops and training
    Books and articles
    Blog entries
    Work
    

    View Slide

99. View Slide

100. Call to action
     Branding
     Introduction
     Navigation
     Conference speaking
     Workshops and training
     Books and articles
     Blog entries
     Work
     1. Branding
     2. Navigation
     3. Introduction
     4. Work
     5. Conference speaking
     6. Workshops and training
     7. Books and articles
     8. Blog entries
     9. Call to action
     

     View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. Post-PC responsive workflow
     Content inventory
     Structured content
     Design atmosphere
     Design a flexible grid
     Sketch content and functionality
     HTML design prototype (first iteration)
     Stage one
     

     View Slide

106. Test layouts early on real devices
     Iterate through sketches and prototype revisions
     Test regularly
     Correct only what looks broken
     HTML design prototype (second iteration)
     Stage two
     

     View Slide

107. Create detailed visuals based on prototypes
     Develop final responsive templates
     Stage three
     

     View Slide

108. View Slide

109. Back to design atmosphere
     Typography
     Typefaces, type treatments and white space
     Colour
     Emotion and interaction vocabulary
     Texture
     Decorative elements, line-work, patterns and shapes
     

     View Slide

110. View Slide

111. View Slide

112. View Slide

113. View Slide

114. View Slide

115. View Slide

116. Call to action
     Branding
     Introduction
     Navigation
     Conference speaking
     Workshops and training
     Books and articles
     Blog entries
     Work
     1. Branding
     2. Navigation
     3. Introduction
     4. Work
     5. Conference speaking
     6. Workshops and training
     7. Books and articles
     8. Blog entries
     9. Call to action
     

     View Slide

117. Sean Tubridy
     Responsive%design.%Mobile%>irst.%Progressive%enhancement.%
     These,%and%any%other%technical%approaches%where%your%
     content%can%take%different%forms%across%channels%and%
     platforms,%present%a%challenge%to%content%strategists.%The%
     content%you%create%needs%to%be%>lexible.
     http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design
     

     View Slide

118. Deleted
     Collapses
     Accordions, carousels and scrollers
     Flows
     Content blocks change width and height
     Responsive content
     

     View Slide

119. When should this content collapse?
     How should it collapse? Accordion, carousel or scroller?
     How should this content flow?
     What’s the order of importance? Should ‘this’ go above or below ‘that’?
     Should this content be deleted?
     Content strategy questions
     

     View Slide

120. View Slide

121. View Slide

122. View Slide

123. View Slide

124. View Slide

125. View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. iOS6: 260
     iOS5: 58
     Android uses Roboto
     Windows Phone 8 uses Segoe
     Fonts installed
     

     View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. View Slide

137. 21
     a
     24
     a
     36
     a
     48
     a
     14
     a
     16
     a
     18
     a
     12
     a
     11
     a
     10
     a
     

     View Slide

138. 21
     a
     24
     a
     36
     a
     48
     a
     14
     a
     16
     a
     18
     a
     12
     a
     11
     a
     10
     a
     

     View Slide

139. 21
     a
     24
     a
     36
     a
     48
     a
     14
     a
     16
     a
     18
     a
     12
     a
     11
     a
     10
     a
     

     View Slide

140. Tip: Create a file
     to test heading
     sizes on actual
     devices, not narrow
     browser windows
     

     View Slide

141. Tip: Test body
     text sizes with
     users during the
     design phase
     

     View Slide

142. http://goo.gl/o23Vc
     

     View Slide

143. http://www.flickr.com/photos/brad_frost/7387764524
     

     View Slide

144. View Slide

145. View Slide

146. View Slide

147. View Slide

148. View Slide

149. View Slide

150. View Slide

151. View Slide

152. Mat “Wilto” Marquis
     deviceAwidth:%480px)"%href="/css/iphone.css">%No,%you%
     guys.%No.
     http://twitter.com/wilto/status/116589243777814528
     @wilto
     

     View Slide

153. View Slide

154. View Slide

155. iPhone 3GS, iOS 4.3.n, 320 x 480 (no retina display)
     iPhone 4, iOS 5, 320 x 480 (retina display)
     iPad, iOS 5, 1024 x 768 (no retina display)
     Android 2.1 – Motorola, 480 x 600
     Android 2.3 – HTC, 480 x 320 (QWERTY)
     Android 2.3 – Huawei, 320 x 480 (low CPU)
     Android 3.0 – Samsung, 320 x 480 (low CPU, low dpi)
     Android 2.3.4 – Kindle Fire, 1024 x 600 (7″ tablet)
     Stephanie Rieger’s ‘Strategies
     for choosing test devices’
     http://stephanierieger.com/strategies-for-choosing-test-devices/
     

     View Slide

156. Small screen smartphone (eg: iPhone 3GS, 4 or 4S)
     Large screen smartphone (eg: Google Nexus)
     Medium screen tablet (eg: Google Nexus 7 or Kindle Fire 7 HD)
     Large screen table (eg: iPad, iPad 2 or the New iPad)
     Opera Mobile Emulator (Mac App Store)
     Design test devices
     

     View Slide

157. http://itunes.apple.com/us/app/aptus/id510487565
     http://html.adobe.com/edge/inspect/
     

     View Slide

158. View Slide

159. View Slide

160. View Slide

161. View Slide

162. Major breakpoint
     320
     Major breakpoint
     720
     Major breakpoint
     1024
     Minor
     breakpoint
     240
     Minor
     breakpoint
     360
     Minor
     breakpoint
     480
     Minor
     breakpoint
     600
     Minor
     breakpoint
     640
     Minor
     breakpoint
     768
     Minor
     breakpoint
     800
     Minor
     breakpoint
     1280
     Minor
     breakpoint
     1366
     iPhone, many
     Android and
     Blackberry devices
     Some Android
     and many
     Blackberry
     devices (p)
     Symbian
     Touch (p)
     iPhone < 5,
     Android and
     some
     Symbian
     devices (l)
     Some tablets
     and e-readers
     Some
     Symbian
     Touch (l)
     iPad and some
     tablets (p)
     Some tablets
     Some tablets, most
     netbooks, many
     desktops
     Some tablets Many laptops
     Hat tip to Stephanie Rieger
     

     View Slide

163. 480 x 320
     

     View Slide

164. 568 x 320
     

     View Slide

165. Jeremy Keith
     Breakpoints%should%not%be%dictated%by%devices,%but%by%
     content.%Let%the%content%decide%when%to%expand%and%when%
     adjust%your%designs.
     http://www.lukew.com/ff/entry.asp?1393
     

     View Slide

166. View Slide

167. View Slide

168. View Slide

169. View Slide

170. View Slide

171. View Slide

172. View Slide

173. http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
     

     View Slide

174. View Slide

175. View Slide

176. View Slide

177. View Slide

178. A fluid grid
     

     View Slide

179. target ÷ context = result
     896px
     

     View Slide

180. target ÷ 896 = result
     252px 620px
     

     View Slide

181. View Slide

182. View Slide

183. View Slide

184. View Slide

185. 25px
     Mark Boulton’s pro-tip
     Use odd numbered pixels for gutters (21, 23, 25)
     to allow for a 1px column rule between columns
     25px
     

     View Slide

186. View Slide

187. View Slide

188. View Slide

189. View Slide

190. View Slide

191. View Slide

192. View Slide

193. View Slide

194. View Slide

195. What we learned
     We need ‘post-PC’ design workflows
     Flowing, collapsing and removing content
     Web-font design tools are essential
     Make typography feel native to the device
     Combine content and device breakpoints
     Design your own bespoke grid
     

     View Slide

196. View Slide

197. THREE
     

     View Slide

198. What we’ll cover
     Learning by example
     Navigation design patterns
     Content module patterns
     Responsive advertising
     

     View Slide

199. View Slide

200. View Slide

201. Reflow
     Transform
     Collapse
     Navigation design patterns
     

     View Slide

202. View Slide

203. View Slide

204. Reflowing navigation
     

     View Slide

205. View Slide

206. View Slide

207. Reflowing navigation
     

     View Slide

208. View Slide

209. View Slide

210. Reflowing navigation
     

     View Slide

211. View Slide

212. View Slide

213. View Slide

214. View Slide

215. View Slide

216. View Slide

217. View Slide

218. View Slide

219. View Slide

220. View Slide

221. View Slide

222. View Slide

223. View Slide

224. View Slide

225. View Slide

226. View Slide

227. View Slide

228. View Slide

229. View Slide

230. View Slide

231. View Slide

232. View Slide

233. View Slide

234. View Slide

235. View Slide

236. View Slide

237. View Slide

238. View Slide

239. View Slide

240. View Slide

241. View Slide

242. View Slide

243. View Slide

244. View Slide

245. View Slide

246. View Slide

247. View Slide

248. View Slide

249. View Slide

250. View Slide

251. View Slide

252. View Slide

253. View Slide

254. View Slide

255. View Slide

256. View Slide

257. View Slide

258. View Slide

259. View Slide

260. View Slide

261. View Slide

262. View Slide

263. View Slide

264. View Slide

265. View Slide

266. View Slide

267. View Slide

268. View Slide

269. View Slide

270. View Slide

271. View Slide

272. View Slide

273. View Slide

274. View Slide

275. View Slide

276. View Slide

277. View Slide

278. View Slide

279. View Slide

280. View Slide

281. View Slide

282. View Slide

283. View Slide

284. View Slide

285. +
     

     View Slide

286. View Slide

287. View Slide

288. View Slide

289. View Slide

290. View Slide

291. View Slide

292. View Slide

293. View Slide

294. View Slide

295. View Slide

296. View Slide

297. View Slide

298. http://currys.co.uk/gbuk/index.html
     

     View Slide

299. monocle.com
     

     View Slide

300. View Slide

301. View Slide

302. View Slide

303. View Slide

304. Include only essential navigation
     Use top navigation for common tasks
     Use bottom navigation for exploring
     Don’t duplicate navigation
     Navigation essentials
     

     View Slide

305. View Slide

306. Stack
     Float
     Transform
     Content module patterns
     

     View Slide

307. View Slide

308. View Slide

309. View Slide

310. View Slide

311. View Slide

312. Item Item
     Item Item
     Item Item
     Start with ‘item’ divisions. Give them widths,
     float them or use display:table properties to form
     a modular grid (more on those later)
     

     View Slide

313. A B A B
     A B A B
     A B A B
     Add two elements inside each ‘item.’ These could
     be any appropriate block-level elements. We’ll call
     them A and B. Float them when space allows
     

     View Slide

314. For small screens, stack
     items vertically
     Item
     Item
     Item
     

     View Slide

315. Float A and B when
     space allows
     A B
     A B
     A B
     

     View Slide

316. View Slide

317. View Slide

318. View Slide

319. View Slide

320. View Slide

321. Item
     Item
     Item
     Start with ‘item’ divisions. Give them widths, float them or use display:table
     

     View Slide

322. A B
     A B
     A B
     Add two elements inside each ‘item.’ These could be any
     appropriate block-level elements. We’ll call them A and B.
     Float them when space allows
     

     View Slide

323. A
     B
     For small screens, stack items
     and A and B elements vertically
     

     View Slide

324. View Slide

325. View Slide

326. View Slide

327. Item
     Item
     Item
     Start with ‘item’ divisions. Give them widths, float them or use display:table
     

     View Slide

328. A B
     A B
     A B
     Add two elements inside each ‘item.’ These could be any
     appropriate block-level elements. We’ll call them A and B.
     Float them when space allows
     

     View Slide

329. Sub-divide the A element into two. We’ll call them C and D.
     Float them when space allows
     C D
     C D
     C D B
     B
     B
     

     View Slide

330. For medium screens, stack A and B elements vertically
     B
     B
     C D
     C D
     

     View Slide

331. C
     B
     D
     For small screens, stack
     all elements (items, A, B,
     C and D) vertically
     

     View Slide

332. View Slide

333. View Slide

334. View Slide

335. Item
     Item
     For small screens, stack
     items vertically
     

     View Slide

336. Item Item Item
     For medium and larger screens, arrange items horizontally
     

     View Slide

337. View Slide

338. View Slide

339. View Slide

340. View Slide

341. View Slide

342. View Slide

343. View Slide

344. View Slide

345. View Slide

346. View Slide

347. View Slide

348. View Slide

349. View Slide

350. View Slide

351. View Slide

352. View Slide

353. View Slide

354. View Slide

355. .promo-item {
     background-size : contain; }
     

     View Slide

356. View Slide

357. View Slide

358. View Slide

359. View Slide

360. View Slide

361. View Slide

362. View Slide

363. View Slide

364. View Slide

365. View Slide

366. View Slide

367. View Slide

368. View Slide

369. View Slide

370. View Slide

371. View Slide

372. View Slide

373. View Slide

374. View Slide

375. View Slide

376. View Slide

377. View Slide

378. View Slide

379. New Albums See All
     Album title
     Artist name
     Album title
     Artist name
     Album title
     Artist name
     

     View Slide

380. The full
     video of my
     talk from
     Smashing
     Conference
     is now
     online
     Thanks once again to
     all the folks from
     Smashing Conference
     for making my son
     and I so welcome
     during our visit. One,
     if not both, of us will
     be back to sit in the
     audience next year.
     Thanks also to Marc
     Thiele for his hard
     work to make these
     videos available.
     

     View Slide

381. The full video of my talk from Smashing
     Conference is now online
     Thanks once again to all the folks from Smashing Conference for making
     my son and I so welcome during our visit. One, if not both, of us will be
     back to sit in the audience next year. Thanks also to Marc Thiele for his
     hard work to make these videos available.
     

     View Slide

382. The full video of my talk from
     Smashing Conference is now online
     Thanks once again to all the folks from Smashing Conference
     for making my son and I so welcome during our visit. One, if
     not both, of us will be back to sit in the audience next year.
     Thanks also to Marc Thiele for his hard work to make these
     videos available.
     .net magazine: Top 20 CSS
     sites of 2012
     I’m not sure that fat fella at the top deserves to be there.
     

     View Slide

383. The full video of my talk from
     Smashing Conference is now online
     Thanks once again to all the folks from Smashing Conference
     for making my son and I so welcome during our visit. One, if
     not both, of us will be back to sit in the audience next year.
     Thanks also to Marc Thiele for his hard work to make these
     videos available.
     .net magazine: Top 20 CSS
     sites of 2012
     I’m not sure that fat fella at the top deserves to be there.
     

     View Slide

384. The full video of my talk from
     Smashing Conference is now online
     Thanks once again to all the folks from Smashing Conference
     for making my son and I so welcome during our visit. One, if
     not both, of us will be back to sit in the audience next year.
     Thanks also to Marc Thiele for his hard work to make these
     videos available.
     The full video of my talk from
     Smashing Conference is now online
     Thanks once again to all the folks from Smashing Conference
     for making my son and I so welcome during our visit. One, if
     not both, of us will be back to sit in the audience next year.
     Thanks also to Marc Thiele for his hard work to make these
     videos available.
     

     View Slide

385. The full video of my talk from
     Smashing Conference is now online
     Thanks once again to all the folks from Smashing Conference
     for making my son and I so welcome during our visit. One, if
     not both, of us will be back to sit in the audience next year.
     Thanks also to Marc Thiele for his hard work to make these
     videos available.
     The full video of my talk from
     Smashing Conference is now online
     Thanks once again to all the folks from Smashing Conference
     for making my son and I so welcome during our visit. One, if
     not both, of us will be back to sit in the audience next year.
     Thanks also to Marc Thiele for his hard work to make these
     videos available.
     

     View Slide

386. The full video of my talk from
     Smashing Conference is now online
     Thanks once again to all the folks from Smashing Conference
     for making my son and I so welcome during our visit. One, if
     not both, of us will be back to sit in the audience next year.
     Thanks also to Marc Thiele for his hard work to make these
     videos available.
     The full video of my talk from
     Smashing Conference is now online
     Thanks once again to all the folks from Smashing Conference
     for making my son and I so welcome during our visit. One, if
     not both, of us will be back to sit in the audience next year.
     Thanks also to Marc Thiele for his hard work to make these
     videos available.
     

     View Slide

387. Don’t rely on ‘little circles’
     Use arrows to indicate direction of travel
     Show hints of what’s outside the viewport
     Horizontal design patterns
     

     View Slide

388. View Slide

389. View Slide

390. 728 x 90 IMU (Leaderboard)
     160 x 600 IMU (Wide Skycraper)
     120 x 60 IMU (Button 2)
     180 x 150 IMU (Rectangle)
     300 x 100 IMU (3:1 Rectangle)
     300 x 250 IMU (Medium Rectangle)
     

     View Slide

391. View Slide

392. Mark Boulton’s ‘slot packages’
     Leaderboard
     Banner
     MMU
     

     View Slide

393. Small screens
     Banner
     

     View Slide

394. Medium screens
     Banner
     MMU
     

     View Slide

395. Large screens
     Leaderboard
     Banner
     MMU
     

     View Slide

396. Navigation
     
     […]
     
     
     […]
     […]
     […]
     
     Complementary
     

     View Slide

397. .a728x90 {
     display : none; }
     300x100
     300x100
     300x250
     

     View Slide

398. Complementary
     Main
     [role="main"] {
     float : left;
     width : 54.737%; /* 408px */ }
     [role="complementary"] {
     float : right;
     width : 40.983%; /* 300px */
     min-width : 300px;}
     Navigation
     

     View Slide

399. 300x100
     300x100
     300x250
     Main
     728x90
     

     View Slide

400. Complementary
     Main
     728x90
     300x100 300x100 300x100
     Complementary
     Main
     

     View Slide

401. 24px 24px
     84px 84px 84px
     IMU-based grid
     300 x 100 IMU
     (3:1 Rectangle)
     

     View Slide

402. IMU-based grid
     

     View Slide

403. 3 columns at 300px (320)
     4 columns at 408px (480)
     5 columns at 516px (600)
     7 columns at 732px (768)
     9 columns at 948px (992)
     84px columns, 24px gutters
     

     View Slide

404. View Slide

405. What we learned
     Responsive examples
     Navigation flows, collapses and transforms
     Content module transformations
     Dealing with fixed widths and responsive advertising
     

     View Slide

406. View Slide

407. View Slide

408. http://goo.gl/eg3Ob
     Slides
     http://goo.gl/py55q
     Resources
     

     View Slide

409. View Slide

410. View Slide

411. View Slide

412. View Slide

413. View Slide

414. View Slide

415. View Slide

416. View Slide

417. View Slide

418. What we’ll cover
     Structuring media queries from small screens up
     Inheriting not adaptive styles
     Sizing text with new flexible units
     Working with images for high ppi screens
     Alternatives to bitmaps
     CSS properties for flexible layouts
     

     View Slide

419. View Slide

420. View Slide

421. View Slide

422. View Slide

423. View Slide

424. .speaker-carousel {
     background-image : url("body.png");
     position : absolute;
     width : 2025px;
     z-index : 30; }
     @media
     all and (max-device-width: 480px),
     all and (max-width: 800px) {
     .speaker-carousel {
     display : none; }
     }
     

     View Slide

425. Adding media queries to
     desktop sites does not make
     a mobile experience
     Oh how we laughed when we realized our mistake
     

     View Slide

426. Progressive enhancement
     + content first
     + responsive design
     = Content first responsive design
     

     View Slide

427. Small screen designs are the default
     Media Queries scale up, not down
     More accessible, more responsible
     Content first responsive layout
     

     View Slide

428. 
     @media print {…}
     @media screen and (min-width : 480px) {…}
     @media screen and (min-width : 600px) {…}
     @media screen and (min-width : 768px) {…}
     @media screen and (min-width : 992px) {…}
     @media screen and (min-width : 1382px) {…}
     

     View Slide

429. Developing a foundation
     Content
     Develop a foundation stylesheet
     Colour, texture and typography
     Use rems for font-sizing
     Mobile first images
     Minimal Javascript
     Optimize images for performance
     

     View Slide

430. Enhancing the foundation
     Add webfonts over 600px
     Use micro-queries for minor breakpoints
     Build styles progressively
     Use inheritance and the cascade
     Lazy-load large assets at appropriate sizes
     Fixed-widths for Internet Explorer 6–8
     

     View Slide

431. View Slide

432. content="width=device-width;
     initial-scale=1.0;
     maximum-scale=1.0;
     user-scalable=no ">
     HTML
     

     View Slide

433. @-webkit-viewport { width : device-width; }
     @-moz-viewport { width : device-width; }
     @-ms-viewport { width : device-width; }
     @-o-viewport { width : device-width; }
     @viewport { width : device-width; }
     CSS
     http://dev.w3.org/csswg/css-device-adapt/
     

     View Slide

434. 
     HTML
     Interpreted by mobile browsers as an indicator of mobile markup
     
     Control layout width rendered in Internet Explorer Mobile
     
     Runs full-screen on iOS devices
     

     View Slide

435. View Slide

436. The problem with ems
     body { font-size : 62.5%; }
     h1 { font-size : 2.4em; /* 24px */ }
     p { font-size : 1.6em; /* 16px */ }
     ul { font-size : 1.6em; /* 16px */ }
     ul p { font-size : 1.6em; /* ? */ }
     

     View Slide

437. Sizing type with rems
     body { font-size : 62.5%; }
     h1 { font-size : 2.4rem; /* 24px */ }
     p { font-size : 1.6rem; /* 16px */ }
     ul { font-size : 1.6rem; /* 16px */ }
     ul p { font-size : 1.6rem; /* 16px */ }
     

     View Slide

438. h1 {
     font-size : 32px;
     font-size : 3.2rem;
     }
     CSS
     LESS MIXIN
     .font-size(@font-size: 16){
     @rem: (@font-size / 10);
     font-size : @font-size * 1px;
     font-size : ~"@{rem}rem"; }
     .font-size(32);
     

     View Slide

439. View Slide

440. View Slide

441. View Slide

442. View Slide

443. View Slide

444. View Slide

445. View Slide

446. View Slide

447. View Slide

448. View Slide

449. Sizing type with vws
     h1 {
     font-size : 32px;
     font-size : 3.2rem;
     font-size: 5.4vw;
     }
     

     View Slide

450. vw
     Equal to 1% of the width of the viewport
     vh
     Equal to 1% of the height of the viewport
     vmin
     Equal to either vw or vh, whichever is smaller
     vmax
     New. The opposite behaviour to vmin
     

     View Slide

451. Chrome 20+
     Internet Explorer 10+
     Current browser support
     

     View Slide

452. View Slide

453. View Slide

454. View Slide

455. View Slide

456. View Slide

457. img {
     max-width : 100%;
     }
     

     View Slide

458. View Slide

459. 186px
     195px
     372px
     390px
     

     View Slide

460. 477px
     455px
     910px x 955px
     

     View Slide

461. http://itunes.apple.com/gb/app/duplex/id551984804
     http://macrabbit.com/slicy
     

     View Slide

462. sudo defaults write /Library/Preferences/com.apple.windowserver
     DisplayResolutionEnabled -bool YES;
     sudo defaults delete /Library/Preferences/com.apple.windowserver
     DisplayResolutionDisabled;
     https://gist.github.com/3191869
     

     View Slide

463. View Slide

464. View Slide

465. View Slide

466. http://www.jpegmini.com http://www.pngmini.com
     

     View Slide

467. [role="banner"] div p {
     background-image : url(banner-m-lg.png); }
     @media
     only screen and (-webkit-min-device-pixel-ratio : 2),
     only screen and ( min--moz-device-pixel-ratio : 2),
     only screen and ( -o-min-device-pixel-ratio : 2/1),
     only screen and ( min-device-pixel-ratio: 2),
     only screen and ( min-resolution : 192dpi),
     only screen and ( min-resolution : 2dppx) {
     [role="banner"] div p {
     background-image : url(banner-m-lg@2x.png);
     background-size : 225px 380px; }
     }
     

     View Slide

468. sprite.png sprite@2x.png
     

     View Slide

469. .ss-target { background : url(sprite.png) no-repeat 0 0; }
     .ss-link { background : url(sprite.png) no-repeat -100px 0; }
     @media
     only screen and (-webkit-min-device-pixel-ratio : 2),
     only screen and ( min--moz-device-pixel-ratio : 2),
     only screen and ( -o-min-device-pixel-ratio : 2/1),
     only screen and ( min-device-pixel-ratio: 2),
     only screen and ( min-resolution : 192dpi),
     only screen and ( min-resolution : 2dppx) {
     .ss-target, .ss-link {
     background-image { url(sprite@2x.png) }
     background-size : 200px 200px; }
     }
     

     View Slide

470. View Slide

471. View Slide

472. View Slide

473. View Slide

474. View Slide

475. View Slide

476. View Slide

477. View Slide

478. View Slide

479. View Slide

480. View Slide

481. 10px
     10px
     10px
     10px
     10px
     10px
     

     View Slide

482. 1 2 3
     4 6
     7 8 9
     10px
     10px
     10px
     10px
     10px
     10px
     

     View Slide

483. button {
     border-image-slice : 10 10 10 10;
     border-image-source : url(button.png);
     }
     button {
     border-image : url(button.png) 10 10 10 10;
     }
     button {
     border-image : url(button.png) 10 10 10 10;
     border-width : 10px 10px 10px 10px;
     }
     

     View Slide

484. 10px 20px
     30px 40px
     

     View Slide

485. 1 2 3
     4 6
     7 8 9
     

     View Slide

486. button {
     border-image-slice : 10 10 10 10 fill;
     border-image-source : url(button.png);
     }
     http://blog.assortedgarbage.com/2011/12/change-happens
     

     View Slide

487. Stretch
     Stretches slice areas to fill horizontally or vertically
     Repeat
     Repeats slice areas to fill horizontally or vertically
     Round
     Resizes a slice so that only whole pieces fit when repeating
     Space
     Repeats whole slice pieces and adds space to fill a border evenly
     

     View Slide

488. View Slide

489. View Slide

490. View Slide

491. View Slide

492. 
     [Content]
     
     
     [Navigation]
     
     Content
     Navigation
     

     View Slide

493. Content
     Navigation
     
     [Content]
     
     
     [Navigation]
     
     

     View Slide

494. Display table properties
     display : table
     Defines element as a block-level table
     display : table-caption
     Treats element as a caption for the table (caption-side : top | bottom | inherit)
     display : table-row
     An element represents a row of cells
     display : table-cell
     An element represents a table cell
     

     View Slide

495. display : table-header-group
     A row group always displayed before all other rows and row groups
     and after any top captions
     display : table-footer-group
     A row group always displayed after all other rows and row groups and after
     any bottom captions
     display : table-row-group
     One or more rows of cells
     Display table properties
     

     View Slide

496. table-row
     An ‘anonymous box’ created by applying display:table-cell to an element
     table
     An ‘anonymous box’ created by applying display:table-cell to an element
     

     View Slide

497. Content
     Navigation
     [Content]
     
     
     [Navigation]
     
     Navigation
     

     View Slide

498. @media only screen and
     (min-width: 600px) {
     a[href="#nav"] {
     display : none;
     }
     body {
     display : table;
     border-collapse : collapse;
     }
     [role="navigation"] {
     display : table-header-group;
     }
     }
     Content
     Navigation
     

     View Slide

499. Content
     Navigation
     .content {
     display : table;
     border-collapse : collapse; }
     

     View Slide

500. Navigation
     [role="main"] {
     display : table-cell;
     width : 64.6%; }
     [role="complementary"] {
     display : table-cell;
     width : 35.39%; }
     Complementary
     Main
     

     View Slide

501. Complementary
     Main
     [role="main"] {
     width : 71.87%; }
     [role="complementary"] {
     width : 28.12%; }
     Navigation
     

     View Slide

502. View Slide

503. View Slide

504. 
     
     [Navigation]
     
     
     [Banner]
     
     
     Banner
     Navigation
     

     View Slide

505. Navigation
     Banner
     @media only screen and
     (min-width: 600px) {
     .ihatetimvandamme {
     display : table; }
     [role="banner"] {
     display : table-header-group; }
     }
     

     View Slide

506. Col Col Col
     .content {
     overflow : hidden; }
     .col {
     display : table-cell;
     width : 33.33%; }
     

     View Slide

507. .content {
     display : table-row; }
     .col {
     display : table-cell;
     width : 33.33%; }
     Col Col Col
     

     View Slide

508. .col:nth-of-type(2) {
     position : relative; }
     .col:nth-of-type(2) img {
     position : absolute;
     right : 0; }
     Col
     

     View Slide

509. .col:nth-of-type(2) .inner {
     position : relative; }
     .col:nth-of-type(2) .inner img {
     position : absolute;
     right : 0; }
     Inner
     

     View Slide

510. View Slide

511. Box-img
     
     
     
     
     Books and articles
     As well as articles…
     
     
     Box-details
     

     View Slide

512. Box-img
     .box-img {
     background-image : url(b.png);
     height : 180px; }
     Box-details
     

     View Slide

513. View Slide

514. Box-img Box-details
     #box-writing {
     display : table; }
     .box-details,
     .box-img {
     display : table-cell; }
     

     View Slide

515. Box-img Box-details
     .box-img {
     background-image : url(b2.png);
     background-position : 100% 50%;
     height : auto; }
     

     View Slide

516. View Slide

517. Really? Really what? You mean there’s more?
     

     View Slide

518. @media all and (min-width: 992px) and (min-height : 34em) {
     .entry-summary {
     column-count : 2;
     column-gap : 22px; }
     }
     

     View Slide

519. @media all and (min-width: 992px) and (min-height : 34em) {
     .entry-summary {
     column-count : 3;
     column-gap : 22px; }
     }
     

     View Slide

520. What we learned
     Structure media queries from small screens up
     Use inheriting not adaptive styles
     Size text with rems and vws
     Optimise high ppi images for performance
     Use fonts and CSS as alternatives to bitmaps
     How to use display:table and CSS columns
     

     View Slide

521. View Slide

522. View Slide

523. View Slide

524. @malarkey
     

     View Slide

525. CREDIT WHERE CREDIT’S DUE
     http://bbc.co.uk/guidelines/gel/
     http://jamieoliver.com
     FRV BRAND GUIDELINES
     ES
     http://flickr.com/photos/kmuellerdesign/5372922823
     http://flickr.com/photos/r_okoko20/6249889073
     http://flickr.com/photos/55339703@N08/5923185617
     

     View Slide

526. View Slide