Fashionably flexible responsive web design (full day workshop from Smashing Conference, September 2012)

433acaea1012b25d97ae66da9b998dad?s=47 Andy Clarke
September 19, 2012

Fashionably flexible responsive web design (full day workshop from Smashing Conference, September 2012)

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.

433acaea1012b25d97ae66da9b998dad?s=128

Andy Clarke

September 19, 2012
Tweet

Transcript

  1. None
  2. 2 FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  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:
  12. #stno Twitter, Instagram, Flickr

  13. 1 2 3 4 Becoming responsive Responsive design process Responsive

    design patterns Technically speaking
  14. http://goo.gl/eg3Ob Slides http://goo.gl/py55q Resources

  15. Your turn What’s the one question you’d most like answered

    today? And what phone do you carry?
  16. 1. What’s Andy’s favourite movie of all time? 2. 3.

    4. 5. 6. 7. 8. 9. 10. Questions to answer
  17. ONE

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

  19. 2000 04 2009 03 “The Dao Of Web Design” (A

    List Apart) John Allsopp “Fluid Grids” Ethan Marcotte iPhone 2007 01 iPod Touch 2007 07 RESPONSIVE WEB DESIGN TIMELINE
  20. 2000 04 2009 03 “The Dao Of Web Design” (A

    List Apart) John Allsopp “Fluid Grids” Ethan Marcotte “Mo Luke iPhone 2007 01 iPod Touch 2007 07 01 2007
  21. 2000 04 2009 03 2009 11 “The Dao Of Web

    Design” (A List Apart) John Allsopp “Fluid Grids” Ethan Marcotte “Mobile First” Luke Wroblewski iPhone 2007 01 iPod Touch 2007 07 07 2007
  22. 2000 04 2009 11 Dao Of Web Design” Apart) John

    Allsopp “Fluid Grids” Ethan Marcotte “Mobile First” Luke Wroblewski iPhone 2007 01 iPod Touch 2007 07 2009 03 03 2009 iPad 2010 04
  23. 2009 03 2009 11 2010 05 “Fluid Grids” Ethan Marcotte

    “Mobile First” Luke Wroblewski “Responsive Web Desi Ethan Marcotte e iPod Touch 2007 07 11 2009 iPad 2010 04
  24. 2009 03 2010 05 luid Grids” an Marcotte “Mobile First”

    Luke Wroblewski “Responsive Web Design” Ethan Marcotte “One Web Jeremy Kei 2010 12 iPad 2009 11 2009 11 04 2010
  25. 009 03 “Mobile First” uke Wroblewski “Responsive Web Design” Ethan

    Marcotte “One Web” Jeremy Keith “320 a iPad 2010 04 2010 11 2009 11 05 2010 20 0
  26. 2010 04 2010 05 “Responsive Web Design” Ethan Marcotte “One

    Web” Jeremy Keith Responsive W (boo “320 and Up” 2011 04 11 2010 20 0 iPad
  27. 010 05 Web Design” Marcotte “One Web” Jeremy Keith “There

    Is No M Jeremy Responsive Web Design (book) “320 and Up” 2011 04 04 2011 2011 06 2010 11 20 0
  28. Web” y Keith “There Is No Mobile Web” Jeremy Keith

    Responsive Web Design (book) “320 and Up” The Bosto 2011 04 06 2011 010 11 2011 09 20 0
  29. “There Is No Mobile Web” Jeremy Keith Responsive Web Design

    (book) and Up” The Boston Globe 011 04 2011 09 2011 06 09 2011
  30. “There Is No Mobile Web” Jeremy Keith Web Design ook)

    The Boston Globe 2011 09 011 06 09 2011
  31. Total annual global shipments of smart phones exceeded those of

    client PCs (including pads) for the first time in 2011 158.5 million smartphones in Q4 2011 120.2 million PCs in Q4 2011 488 million smartphones 415 million PCs Smartphones overtake PCs 2011 http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011
  32. • 102 million people accessed Facebook solely through their mobile

    device in June 2012 (up 23% from 83m in March) • 55% of Twitter’s traffic comes from mobile devices • 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
  33. http://venturebeat.com/2012/01/10/paypals-mobile-payments-4b-2011/ Mobile payments $141M $750M $4B 2009 2010 2011

  34. • 400m iOS devices have been sold to date. Was

    250m in 2011. • 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 IPHONES Source: http://lukew.com/ff/entry.asp?1415
  35. • Amazon now sells more Kindle books than all print

    books (hardcover and paperback) combined • Amazon customers purchased over 1 million Kindle devices each week of the 2011 Christmas period E-READERS Source: http://lukew.com/ff/entry.asp?1391
  36. • The share e-book reader owners in the USA jumped

    from 10% to 19% between mid-December and early January. • Kindle Fire has become the best-selling, most-gifted and most-wished-for product on Amazon. • Gifting of Kindle books up 175% between this Black Friday and Christmas Day 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
  37. • 84m iPads have been sold to date • 68%

    of worldwide tablet marketshare is iPad • 91% of all the web traffic from tablets comes from iPad • 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
  38. None
  39. 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

  40. A flexible grid Flexible images and media CSS3 media queries

    Three responsive ingredients
  41. 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/

  42. Luke Jones That Andy Clarke (@Malarkey) is such a massive

    cock. http://www.the-pastry-box-project.net/ – what if a client say “No, don't make it responsive.” https://twitter.com/lukejonesme/status/154142315915640832 @lukejonesme TINY PENIS!
  43. 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
  44. 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

  45. None
  46. Donald Rumsfeld There%are%known%knowns;%these%are%the%things%that%we%know.% There%are%known%unknowns;%these%are%the%things%that%we%know% we%don’t%know.%But%there%are%also%the%unknown%unknowns;%these% are%the%things%we%don’t%know%we%don’t%know. Hat tip to Jeremy

    Keith
  47. 640x480

  48. ‘Letterbox’ framesets. Can you believe we did that stuff?

  49. 800x600

  50. 1024x768

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

  53. None
  54. None
  55. 320x420 320x420

  56. 420x320

  57. Mat “Wilto” Marquis <link%rel="stylesheet"%media="only%screen%and%(maxA deviceAwidth:%480px)"%href="/css/iphone.css">%No,%you% guys.%No. http://twitter.com/wilto/status/116589243777814528 @wilto

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

  59. None
  60. None
  61. ⌘N

  62. None
  63. None
  64. 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

  65. 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
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. 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

  76. Design atmosphere Typography Typefaces, type treatments and white space Colour

    Emotion and interaction vocabulary Texture Decorative elements, line-work, patterns and shapes
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. FRV BRAND GUIDELINES ES

  85. 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)
  86. 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.
  87. 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
  88. .,3:[`SLN\PKL=LYZPVUc6J[VILY )\PSKPUNH .SVIHS,_WLYPLUJL3HUN\HNL MVY[OL))* .,3:[`SLN\PKL 9< ( .,3:[`SLN\PKL=LYZPVUc6J[VILY

  89. None
  90. 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`
  91. 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[ 
  92. 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
  93. 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_
  94. 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\ <HV +HOS ,QIR&DSWLRQ $OHUW:DUQLQJ 3ULQW (PDLO 9RFDE2Q2II 5HIUHVK $ODUP5HPLQGHU 'XUDWLRQ &RXQWGRZQ ([SLUHV 6HWWLQJV 'HJUDGHG &RQWHQW *ULG9LHZ /LVW9LHZ WH[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
  95. .,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
  96. None
  97. None
  98. None
  99. None
  100. None
  101. 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
  102. None
  103. TWO

  104. 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
  105. Plan Design Develop Deploy Hat tip to Ethan Marcotte

  106. Plan Design Develop Deploy

  107. Plan Deploy

  108. 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
  109. 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
  110. Logo Nav Nav Nav Nav Introduction Call to action Logo

    Logo Logo Logo Logo Work introduction Image
  111. None
  112. 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

  113. 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
  114. 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
  115. Content inventory Branding Navigation Introduction (with initial call to action)

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

    training Books and articles Blog entries Work
  117. None
  118. 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
  119. None
  120. None
  121. None
  122. None
  123. 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
  124. 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
  125. Create detailed visuals based on prototypes Develop final responsive templates

    Stage three
  126. None
  127. Back to design atmosphere Typography Typefaces, type treatments and white

    space Colour Emotion and interaction vocabulary Texture Decorative elements, line-work, patterns and shapes
  128. None
  129. None
  130. None
  131. None
  132. None
  133. None
  134. 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
  135. 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

  136. Deleted Collapses Accordions, carousels and scrollers Flows Content blocks change

    width and height Responsive content
  137. 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
  138. None
  139. None
  140. None
  141. None
  142. None
  143. None
  144. None
  145. None
  146. None
  147. None
  148. None
  149. iOS6: 260 iOS5: 58 Android uses Roboto Windows Phone 8

    uses Segoe Fonts installed
  150. None
  151. None
  152. None
  153. None
  154. None
  155. 21 a 24 a 36 a 48 a 14 a

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

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

    16 a 18 a 12 a 11 a 10 a
  158. Tip: Create a file to test heading sizes on actual

    devices, not narrow browser windows
  159. Tip: Test body text sizes with users during the design

    phase
  160. http://goo.gl/o23Vc

  161. http://www.flickr.com/photos/brad_frost/7387827018

  162. None
  163. None
  164. None
  165. None
  166. None
  167. None
  168. None
  169. None
  170. None
  171. 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/
  172. 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
  173. http://labs.adobe.com/technologies/shadow http://itunes.apple.com/us/app/aptus/id510487565

  174. None
  175. None
  176. None
  177. None
  178. 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, 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
  179. 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

  180. None
  181. None
  182. None
  183. None
  184. None
  185. None
  186. None
  187. http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html

  188. None
  189. None
  190. None
  191. A fluid grid

  192. target ÷ context = result 896px

  193. target ÷ 896 = result 252px 620px

  194. None
  195. None
  196. None
  197. None
  198. Less Framework grid

  199. 3 columns at 320px 5 columns at 480px 6 columns

    at 600px 8 columns at 768px 10 columns at 992px 68px columns, 24px gutters
  200. Josh Clark The%44Apixel%block%is,%in%many%ways,%the%basic%unit%of% measurement%for%the%iPhone%interAface,%establishing%the% visual%rhythm%of%many%iPhone%apps.%That%metric%is%signi>icant% as%the%recommended%minimum%size%to%make%a%tap%target%(like% a%button%or%list%item)%easily%and%reliably%tappable. Josh Clark’s book

    Tapworthy: Designing Great IPhone Apps
  201. 44px

  202. 44px

  203. 44px

  204. 88px

  205. 22px 22px 88px 88px 88px 44px 44px 44px Fingertip-based grid

  206. Fingertip-based grid

  207. 3 columns at 300px (320) 4 columns at 408px (480)

    5 columns at 528px (600) 7 columns at 732px (768) 9 columns at 948px (992) 88px columns, 22px gutters
  208. 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
  209. None
  210. None
  211. None
  212. None
  213. None
  214. None
  215. None
  216. None
  217. None
  218. 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
  219. None
  220. THREE

  221. What we’ll cover Learning by example Navigation design patterns Content

    module patterns Responsive advertising
  222. None
  223. None
  224. Reflow Transform Collapse Navigation design patterns

  225. None
  226. None
  227. Reflowing navigation

  228. None
  229. None
  230. Reflowing navigation

  231. None
  232. None
  233. Reflowing navigation

  234. None
  235. None
  236. None
  237. None
  238. None
  239. None
  240. None
  241. None
  242. None
  243. None
  244. None
  245. None
  246. None
  247. None
  248. None
  249. None
  250. None
  251. None
  252. None
  253. None
  254. None
  255. None
  256. None
  257. None
  258. None
  259. None
  260. None
  261. None
  262. None
  263. None
  264. None
  265. None
  266. None
  267. None
  268. None
  269. None
  270. None
  271. None
  272. None
  273. None
  274. None
  275. None
  276. None
  277. None
  278. None
  279. None
  280. None
  281. None
  282. None
  283. None
  284. None
  285. None
  286. None
  287. None
  288. None
  289. None
  290. None
  291. None
  292. None
  293. None
  294. None
  295. None
  296. None
  297. None
  298. None
  299. None
  300. None
  301. None
  302. None
  303. None
  304. None
  305. None
  306. None
  307. None
  308. None
  309. None
  310. None
  311. None
  312. None
  313. None
  314. None
  315. None
  316. None
  317. None
  318. None
  319. None
  320. None
  321. None
  322. None
  323. None
  324. greygoose.com

  325. None
  326. None
  327. channel4.com/news

  328. None
  329. None
  330. Include only essential navigation Use top navigation for common tasks

    Use bottom navigation for exploring Don’t duplicate navigation Navigation essentials
  331. None
  332. None
  333. None
  334. None
  335. None
  336. None
  337. 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)
  338. 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
  339. For small screens, stack items vertically Item Item Item

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

    B A B
  341. None
  342. None
  343. None
  344. None
  345. None
  346. Item Item Item Start with ‘item’ divisions. Give them widths,

    float them or use display:table properties
  347. 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
  348. A B For small screens, stack items and A and

    B elements vertically
  349. None
  350. None
  351. None
  352. Item Item Item Start with ‘item’ divisions. Give them widths,

    float them or use display:table properties
  353. 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 A B A B A B
  354. 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
  355. For medium screens, stack A and B elements vertically B

    B C D C D
  356. C B D For small screens, stack all elements (items,

    A, B, C and D) vertically
  357. None
  358. None
  359. None
  360. None
  361. None
  362. None
  363. Remember to design for the shorter landscape format You can

    animate the changes to layout. (See the next slide)
  364. None
  365. None
  366. None
  367. None
  368. None
  369. None
  370. None
  371. None
  372. None
  373. None
  374. None
  375. .promo-item { background-size : contain; }

  376. None
  377. None
  378. None
  379. None
  380. None
  381. None
  382. None
  383. None
  384. None
  385. None
  386. None
  387. None
  388. None
  389. None
  390. None
  391. None
  392. None
  393. None
  394. None
  395. None
  396. None
  397. None
  398. None
  399. None
  400. 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)
  401. None
  402. Mark Boulton’s ‘slot packages’ Leaderboard Banner MMU

  403. Small screens Banner

  404. Medium screens Banner MMU

  405. Large screens Leaderboard Banner MMU

  406. Navigation <nav role="navigation"> <div class="a728x90">[…]</div> </nav> <div role="complementary"> <div class="a300x100">[…]</div>

    <div class="a300x100">[…]</div> <div class="a300x250">[…]</div> </div> Complementary
  407. .a728x90 { display : none; } 300x100 300x100 300x250

  408. Complementary Main [role="main"] { float : left; width : 54.737%;

    /* 408px */ } [role="complementary"] { float : right; width : 40.983%; /* 300px */ min-width : 300px;} Navigation
  409. 300x100 300x100 300x250 Main 728x90

  410. Complementary Main 728x90 300x100 300x100 300x100 Complementary Main

  411. 24px 24px 84px 84px 84px IMU-based grid 300 x 100

    IMU (3:1 Rectangle)
  412. IMU-based grid

  413. 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
  414. None
  415. What we learned Responsive examples Navigation flows, collapses and transforms

    Content module transformations Dealing with fixed widths and responsive advertising
  416. None
  417. None
  418. http://goo.gl/eg3Ob Slides http://goo.gl/py55q Resources

  419. 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
  420. None
  421. None
  422. None
  423. None
  424. None
  425. None
  426. None
  427. None
  428. None
  429. None
  430. None
  431. .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; } }
  432. Adding media queries to desktop sites does not make a

    mobile experience Oh how we laughed when we realized our mistake
  433. Progressive enhancement + content first + responsive design = Content

    first responsive design
  434. Small screen designs are the default Media Queries scale up,

    not down More accessible, more responsible Content first responsive layout
  435. None
  436. <link rel="stylesheet" href="style.css"> @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) {…}
  437. None
  438. @media screen and (min-width: 0px) and (max-width: 319px) { /*

    styles */ } @media screen and (min-width: 320px) and (max-width: 479px) { /* styles */ } @media screen and (min-width: 480px) and (max-width: 599px) { /* styles */ } @media screen and (min-width: 600px) and (max-width: 758px) { /* styles */ } @media screen and (min-width: 759px) and (max-width: 958px) { /* styles */ } @media screen and (min-width: 959px) { /* styles */ }
  439. 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
  440. 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
  441. None
  442. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no "> HTML

  443. @-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/
  444. <meta name="HandheldFriendly" content="true"> HTML Interpreted by mobile browsers as an

    indicator of mobile markup <meta name="MobileOptimized" content="320"> Control layout width rendered in Internet Explorer Mobile <meta name="apple-mobile-web-app-capable" content="yes"> Runs full-screen on iOS devices
  445. None
  446. 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; /* ? */ }
  447. 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 */ }
  448. 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);
  449. None
  450. None
  451. None
  452. None
  453. None
  454. None
  455. None
  456. None
  457. None
  458. None
  459. None
  460. None
  461. Sizing type with rems h1 { font-size : 32px; font-size

    : 3.2rem; font-size: 5.4vw; }
  462. http://www.w3.org/TR/css3-values/#viewport-relative-lengths 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
  463. Chrome 20+ Internet Explorer 10+ Current browser support

  464. None
  465. img { max-width : 100%; }

  466. None
  467. 186px 195px 372px 390px

  468. 477px 455px 910px x 955px

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

  470. 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
  471. None
  472. None
  473. None
  474. http://www.jpegmini.com http://www.pngmini.com

  475. [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; } }
  476. sprite.png sprite@2x.png

  477. .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; } }
  478. None
  479. None
  480. None
  481. None
  482. None
  483. None
  484. 10px 10px 10px 10px 10px 10px

  485. 1 2 3 4 6 7 8 9 5 10px

    10px 10px 10px 10px 10px
  486. 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; }
  487. 10px 20px 30px 40px

  488. 1 2 3 4 6 7 8 9

  489. button { border-image-slice : 10 10 10 10 fill; border-image-source

    : url(button.png); } http://blog.assortedgarbage.com/2011/12/change-happens
  490. 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
  491. None
  492. None
  493. 40px 32px 25px 14px input[type="search" { height : 22px; padding

    : 5px 1px 5px 5px; border-image : url(search.png) 0 14 0 25; border-width : 0 14px 0 25px; }
  494. Don’t assume that screen size relates to browser capabilities

  495. Trackball Touchscreen Trackpad

  496. None
  497. if (Modernizr.touch){ // Touchstart, touchmove, etc and watch ‘event.streamId’ }

    else { // Normal click, mousemove, etc. } .touch { /* Styles for touch screen devices */ } .no-touch { /* Styles for non-touch screen devices */ } JAVASCRIPT CSS
  498. Use Modernizr to detect touch capabilities Design alternatives to hover-based

    menus Consider hover
  499. None
  500. None
  501. None
  502. None
  503. None
  504. None
  505. None
  506. None
  507. None
  508. <div class="content"> [Content] </div> <nav role="navigation"> [Navigation] </nav> Content Navigation

  509. Content Navigation <div class="content"> [Content] </div> <nav role="navigation"> [Navigation] </nav>

  510. 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
  511. 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
  512. 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
  513. Content <div class="content"> <a href="#nav">Navigation</a> [Content] </div> <nav role="navigation" id="nav">

    [Navigation] </nav> Navigation
  514. @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
  515. Content Navigation .content { display : table; border-collapse : collapse;

    }
  516. Navigation [role="main"] { display : table-cell; width : 64.6%; }

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

    width : 28.12%; } Navigation
  518. None
  519. None
  520. <div class="ihatetimvandamme"> <nav role="navigation"> [Navigation] </nav> <header role="banner"> [Banner] </header>

    </div> Banner Navigation
  521. Navigation Banner @media only screen and (min-width: 600px) { .ihatetimvandamme

    { display : table; } [role="banner"] { display : table-header-group; } }
  522. Col Col Col .content { overflow : hidden; } .col

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

    table-cell; width : 33.33%; } Col Col Col
  524. .col:nth-of-type(2) { position : relative; } .col:nth-of-type(2) img { position

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

    { position : absolute; right : 0; } Inner
  526. None
  527. Box-img <div class="box id="box-writing"> <div class="box-img"> </div> <div class="box-details"> <h2>Books

    and articles</h2> <p>As well as articles…</p> </div> </div> Box-details
  528. Box-img .box-img { background-image : url(b.png); height : 180px; }

    Box-details
  529. None
  530. Box-img Box-details #box-writing { display : table; } .box-details, .box-img

    { display : table-cell; }
  531. Box-img Box-details .box-img { background-image : url(b2.png); background-position : 100%

    50%; height : auto; }
  532. None
  533. Really? Really what? You mean there’s more ?

  534. @media all and (min-width: 992px) and (min-height : 34em) {

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

    .entry-summary { column-count : 3; column-gap : 22px; } }
  536. None
  537. None
  538. <body class="responsive"> <article id="hero"> <div id="hero-wrapper"> <div class="hero-image">[…]</div> <div class="hero-content">

    <h1 class="hero-title"></h1> </div> </div> </article> </body>
  539. #hero #hero-wrapper { min-height : 100%; } /* desktop -

    fallback */ #hero #hero-wrapper { height : 660px; background-image : url(hero_fallback.jpg); } /* desktop - responsive */ #hero .hero-image { min-height : 670px; background-image : url(hero.jpg); }
  540. /* desktop - responsive */ @media only screen and (min-height

    : 1060px) { body.responsive #hero #hero-wrapper { max-height : 1180px; } body.responsive #hero .hero-image { width : 980px; height : 72%; background-size : auto 98%; } }
  541. /* desktop - iPad portrait */ @media only screen and

    (min-device-width : 481px) and (max-device-width : 768px) and (orientation : portrait) { } /* desktop - iPad landscape */ @media only screen and (min-device-width : 481px) and (max-device-width : 768px) and (orientation : landscape) { }
  542. /* iPhone / touch */ @media only screen and (min-device-width

    : 320px) and (max-device-width : 480px) and (orientation : portrait) { } @media only screen and (min-device-width : 481px) and (max-device-width : 768px) and (orientation : landscape) { }
  543. 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
  544. None
  545. http://goo.gl/eg3Ob Slides

  546. Conference talks and podcasts URLs from my talk, Bringing a

    Knife to a Gunfight http://goo.gl/yGOKR Responsive Design Workflow by Stephen Hay http://goo.gl/2dEhe Building Responsive Layouts by Zoe Gillenwater http://goo.gl/OtlXo Pragmatic responsive design by Stephanie Rieger http://goo.gl/W1BXG
  547. None
  548. None
  549. @malarkey

  550. http://flickr.com/photos/25688037@N04/5511202367 http://flickr.com/photos/53831770@N03/5518688331 http://flickr.com/photos/ohmystars/6163991574 CREDIT WHERE CREDIT’S DUE http://jamieoliver.com http://bbc.co.uk/guidelines/gel/ FRV

    BRAND GUIDELINES ES
  551. None