Fashionably flexible responsive web design (full day workshop)

Fashionably flexible responsive web design (full day workshop)

Description

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

March 08, 2012
Tweet

Transcript

  1. RESPONSIVE WEB DESIGN FASHIONABLY FLEXIBLE Andy(Clarke 1.4

  2. None
  3. My book Available in paperback and e-book formats hardboiledwebdesign.com

  4. 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:
  5. 1 2 3 4 Becoming responsive Responsive design process Responsive

    design patterns Technically speaking
  6. Navigation linearised Rolling up all navigation into a grid of

    icons is a nice touch Collapsing navigation into a drop-down interface J u s Reflowing of branding and navigation
  7. 1 Part FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN

  8. 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 flexibility. http://www.alistapart.com/articles/dao
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. “There Is No Mobile Web” Jeremy Keith Responsive Web Design

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

    The Boston Globe 2011 09 011 06 09 2011
  21. 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
  22. • 13.2% of the world’s 6.1 billion cellphones are smartphones.

    30% in the Germany, UK and United States. Over 50% in Sweden and Finland • 55% of Twitter’s traffic comes from mobile devices • 33% of Facebook updates come from mobile devices SMARTPHONES Source: http://lukew.com/ff/entry.asp?1450
  23. http://venturebeat.com/2012/01/10/paypals-mobile-payments-4b-2011/ Mobile payments $141M $750M $4B 2009 2010 2011

  24. • 1 iPhone accounts for the mobile traffic of 30

    feature phones • 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
  25. • 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
  26. • 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
  27. • 100 million books downloaded from Apple’s iBooks in less

    than 12 months • 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 Source: http://lukew.com/ff/entry.asp?1478
  28. Ethan Marcotte Rather than tailoring disconnected designs to each of

    an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards- based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. http://alistapart.com/articles/responsive-web-design
  29. A flexible grid Flexible images and media CSS3 media queries

    Three responsive ingredients
  30. Andy Clarke Anything that’s fixed and unresponsive isn’t web design

    anymore, it’s something else. If you don’t embrace the inherent fluidity 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/
  31. 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
  32. 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
  33. 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 finally embrace the dynamic medium we build for. The web is not fixed width. http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive
  34. None
  35. 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
  36. 640x480

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

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

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

  40. 800x600

  41. 1024x768

  42. None
  43. Jason Santa Maria ALA has always tried to be one

    of those sites at the front of the pack. We don’t support 800 x 600 anymore, nor do we 640 x 480. Do you? People flipped when sites stopped supporting 640 x 480… now no one says a word. Things change. Trust me, you are going to see more sites stretching out their legs and putting their feet up. http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart
  44. None
  45. 320x480

  46. 320x420

  47. 420x320

  48. Mat “Wilto” Marquis <link rel="stylesheet" media="only screen and (max- device-width:

    480px)" href="/css/iphone.css"> No, you guys. No. http://twitter.com/wilto/status/116589243777814528 @wilto
  49. 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 fixed-width red herring. http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart Jeremy Keith
  50. 340x480

  51. 340x480 640x480 800x1200 720x1280 640X960 800x1280

  52. None
  53. None
  54. On the web there are no edges

  55. Tools reinforce notions such as the canvas

  56. None
  57. None
  58. 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
  59. 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
  60. Trent Walton Web designers will have to look beyond the

    layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. http://trentwalton.com/2011/07/14/content-choreography
  61. None
  62. None
  63. None
  64. [Style tiles]

  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. Design atmosphere Typography Typefaces, type treatments and white space Colour

    Emotion and interaction vocabulary Texture Decorative elements, line-work, patterns and shapes
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. FRV BRAND GUIDELINES ES

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

  87. None
  88. 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`
  89. 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[ 
  90. 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
  91. 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_
  92. 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
  93. .,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
  94. 2 Part FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN

  95. Plan Design Develop Deploy

  96. Plan Deploy Design Hat tip to Ethan Marcotte

  97. Discussion

  98. Josh Emerson If clients only see flat images of their

    website, there is a danger that they are surprised by the outcome when seen in a browser. http://joshemerson.co.uk/blog/responsive-process/
  99. Step one Design a flexible grid Sketch out content and

    functionality (not layout) Design at the element level Refer to brand guidelines or style guides Develop responsive prototypes Draft copy, data and images (first iteration)
  100. Step two Test layouts early on real devices Iterate through

    sketches and prototype revisions Test regularly Don’t agonise over natural differences between devices Correct only what looks broken
  101. Step three Create detailed visuals based on prototypes Draft copy,

    data and images (second iteration) Develop final responsive templates
  102. 1. iPad 2. Samsung Galaxy T ab 10.1 3. Kindle

    4 4. HTC HD7 Windows Phone 7 5. iPhone 6. iPhone 3G 7. iPhone 4S 1 2 3 4 5 6 7 Andy Clarke’s responsive testing rig (February 2012)
  103. Stephanie Rieger’s ‘Strategies for choosing test devices’ 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) http://stephanierieger.com/strategies-for-choosing-test-devices/
  104. Emulators iOS SDK https://developer.apple.com/devcenter/ios Android SDK http://developer.android.com/sdk Opera Mini Simulator

    http://www.opera.com/developer/tools/mini Opera Mobile Emulator http://www.opera.com/developer/tools/mobile Firefox Mobile on desktop http://www.mozilla.org/en-US/mobile/#desktop
  105. FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 2 Part PREPARING RESPONSIVE CONTENT

  106. Sean Tubridy Responsive design. Mobile first. 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 flexible. http://blog.braintraffic.com/2012/01/content-strategy-and-responsive-design
  107. Responsive content Deleted Collapses Accordions, carousels and scrollers Flows Content

    blocks change width and height
  108. When should this content collapse? How should it collapse? Accordion,

    carousel or scroller? How should this content flow? Content strategy questions What’s the order of importance? Should ‘this’ go above or below ‘that’? Should this content be deleted?
  109. Prioritising content

  110. Mat “Wilto” Marquis Mobile users want to see our menu,

    hours, and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad. https://twitter.com/wilto/status/63284673723375616 @wilto
  111. None
  112. None
  113. Stephanie Rieger We need to make smarter content, not smarter

    containers.
  114. Linearising content

  115. None
  116. None
  117. None
  118. None
  119. None
  120. RESPONSIVE TYPOGRAPHY FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN Hosted by Andy

    Clarke 2 Part
  121. None
  122. iOS 5.0 58 Android 2.3 3 Source: http://goo.gl/rJkVi Fonts installed

  123. None
  124. We can improve typography too by reducing font-size from 35px

    to 28px * * It looks like Smashing Magazine tested with narrow browser windows and not real devices
  125. 21 a 24 a 36 a 48 a 14 a

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

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

    16 a 18 a 12 a 11 a 10 a
  128. T ip: Create a file to test heading sizes on

    actual devices, not narrow browser windows
  129. T ip: T est body text sizes with users during

    the design phase
  130. http://goo.gl/o23Vc

  131. 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; /* ? */ }
  132. 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 */ }
  133. body { font-size : 62.5%; } h1 { font-size :

    2.4rem; } p, ul { font-size : 1.6rem; } /* Internet Explorer 8 */ .ie8 h1 { font-size : 24px; } .ie8 p, .ie8 ul { font-size : 16px; }
  134. None
  135. None
  136. None
  137. p, ol, ul, dl, address { line-height : 1.4; }

    @media only screen and (min-width: 600px) { p, ol, ul, dl, address { line-height : 1.45; } } @media only screen and (min-width: 768px) { p, ol, ul, dl, address { line-height : 1.5; } }
  138. None
  139. None
  140. None
  141. Really? Really what? You mean there’s more ? @media all

    and (min-width: 992px) and (min-height : 34em) { .entry-summary { -webkit-column-count : 2; -webkit-column-gap : 22px; -moz-column-count : 2; -moz-column-gap : 22px; -o-column-count : 2; -o-column-gap : 22px; column-count : 2; column-gap : 22px; } }
  142. None
  143. None
  144. @media all and (min-width: 992px) and (min-height : 34em) {

    .entry-summary { -webkit-column-count : 3; -webkit-column-gap : 22px; -moz-column-count : 3; -moz-column-gap : 22px; -o-column-count : 3; -o-column-gap : 22px; column-count : 3; column-gap : 22px; } }
  145. http://fittextjs.com

  146. None
  147. FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 2 Part DESIGNING RESPONSIVE GRIDS

  148. A fluid grid

  149. target ÷ context = result 896px

  150. target ÷ 896 = result 252px 620px

  151. 252 ÷ 896 = 28.12% 620 ÷ 896 = 69.19%

    * Based on one break starting point. More on that in just a minute *
  152. None
  153. None
  154. None
  155. None
  156. Less Framework grid

  157. 3 columns at 320px for portrait iPhone 5 columns at

    480px for landscape iPhone 6 columns at 600px for Kindle 8 columns at 768px for portrait iPad 10 columns at 992px for common resolution PC 68px columns, 24px gutters
  158. 252px content width for portrait iPhone 436px content width for

    landscape iPhone 528px content width for Kindle 712px content width for portrait iPad 866px content width for common resolution PC Average common widths before converting to percentages
  159. No single formula

  160. 252 is 28.12% of 896

  161. 252 is 35.39% of 712

  162. 252 is 47.72% of 528

  163. 252 is 100% of 252

  164. None
  165. None
  166. None
  167. None
  168. None
  169. None
  170. None
  171. 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)
  172. 24px 24px 84px 84px 84px IMU-based grid 300 x 100

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

  174. 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
  175. 300px style.css 600px 600.css 732px 768.css 948px 992.css 300 x

    100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle) 300 x 100 IMU (3:1 Rectangle)
  176. 728 x 90 IMU (Leaderboard) 948px 992.css 732px 768.css 728

    x 90 IMU (Leaderboard)
  177. Josh Clark The 44-pixel block is, in many ways, the

    basic unit of measurement for the iPhone inter-face, establishing the visual rhythm of many iPhone apps. That metric is significant 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
  178. 44px

  179. 44px

  180. 44px

  181. 88px

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

  183. Fingertip-based grid

  184. 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
  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
  186. Fingertip-based baseline 11px 22px 44px

  187. 44px 44px vertical rhythm

  188. 11px 44px 22px Baseline, margins and touch targets are multiples

    of 44px
  189. Use a different grid for each breakpoint

  190. None
  191. None
  192. 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
  193. None
  194. None
  195. None
  196. FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 2 Part RESPONSIVE BREAKPOINTS

  197. [Responsive data tables]

  198. 1382px Eg: high-resolution PC browser 992px Eg: common resolution PC

    768px Eg: portrait iPad 600px Eg: Kindle 480px Eg: landscape iPhone 320px Eg: portrait iPhone COMMON RESPONSIVE BREAKPOINTS
  199. 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
  200. There’s no one perfect set of breakpoints

  201. Trent Walton To think about the web responsively is to

    think about proportions, not pixels. Speaking at New Adventures In Web Design, January 2012
  202. Keep markup free from presentational attributes For layout, convert pixels

    to percentages Use ems or rems for font sizing A flexible foundation is critical
  203. [Responsive data tables]

  204. [Responsive data tables]

  205. [Responsive data tables]

  206. <div class="frame"> <h2>320x480</h2> <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe>

    </div> <div class="frame"> <h2>480x640</h2> <iframe src="./" sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe> </div>
  207. [Responsive data tables]

  208. [Responsive data tables]

  209. [Responsive data tables]

  210. Blackberry Bold 9900 Samsung Galaxy Note Samsung Galaxy S2 Samsung

    Galaxy Nexus Nokia Lumina 800 640x480 800x1200 720x1280 720x1280 480x800 252ppi 316ppi 286ppi 285ppi 217ppi Source: http://phone-size.com
  211. 340x480 640x960 640x480 360x480 480x800 480x800 720x1280 480x800 540x960 480x800

    540x960 540x960 320x480 800x1280 Source: http://phone-size.com
  212. None
  213. 600x819

  214. 1024x395

  215. [Responsive data tables]

  216. FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 3 Part

  217. http://appsketchbook.com/products/responsive-design-sketchbook

  218. PROJECT NOTES http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets These sketch sheets are in the resources

    download
  219. PROJECT NOTES

  220. FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 3 Part NAVIGATION DESIGN PATTERNS

  221. Reflow Transform Collapse Navigation design patterns

  222. None
  223. None
  224. Reflowing of navigation

  225. None
  226. None
  227. Reflowing of navigation

  228. None
  229. None
  230. Navigation linearised

  231. None
  232. None
  233. Where did the links to RSS and Twitter go?

  234. Links don’t show up in landscape orientation either

  235. None
  236. None
  237. None
  238. No fast and easy way to switch to comments

  239. Unclear navigation

  240. None
  241. None
  242. Icons removed from navigation, to save vertical space?

  243. None
  244. None
  245. None
  246. None
  247. None
  248. None
  249. Rolling up all navigation into a grid of icons is

    a nice touch
  250. Not an exact recreation of United Pixel Workers

  251. <header role="banner"> <h1>Responsive Web Design</h1> <nav role="navigation"> <ul> <li><a href="#">Help</a></li>

    <li><a href="#">Cart</a></li> <li><a href="#">Email</a></li> <li><a href="#">Twitter</a></li> </ul> </nav> </header> Three elements: Header, h1 and nav
  252. [role="banner"] h1 { float : left; width : 50%; min-height

    : 160px; background-color : #000; background-image : url(h1.png); background-repeat : no-repeat; background-position : 50%; text-indent : -9999px; } Float the h1 left and apply a background image. 160px min-height creates a square at 320px
  253. Float the navigation and the list items inside the unordered

    list. 80px min-height creates a square at 320px [role="navigation"] { float : left; width : 50%; } [role="navigation"] li { float : left; min-height : 80px; width : 50%; background-repeat : no-repeat; background-position : 50%; text-indent : -9999px; }
  254. <nav role="navigation"> <ul> <li id="nav-help">[…]</li> <li id="nav-cart">[…]</li> <li id="nav-mail">[…]</li> <li

    id="nav-tweet">[…]</li> </ul> </nav> Add class or id attributes, or use :nth-child pseudo-class selectors
  255. .nav-help { background-image:url(help.png); } .nav-cart { background-image:url(cart.png); } .nav-mail {

    background-image:url(mail.png); } .nav-tweet { background-image:url(tweet.png); } Add background images to each list item
  256. @media only screen and (min-width : 768px) { [role="banner"] {

    float : left; width : 26.66%; /* 160px */ } [role="banner"] h1, [role="navigation"] { float : none; width : 100%; } } At 768px breakpoint, float the banner left at 26.66%. Reset the previously floated h1 and navigation
  257. [role="navigation"] li { float : none; min-height : 0; width

    : 100%; text-indent : 0; } [role="navigation"] li a { min-height : 0; padding : 5% 10%; color : #fff; font-style : italic; text-transform : uppercase; } Reset previously floated list items and style the anchor text
  258. None
  259. None
  260. None
  261. None
  262. Collapsing navigation and search into a drop-down interface

  263. T ap icon to reveal search input

  264. None
  265. [Responsive data tables]

  266. None
  267. None
  268. Collapsing navigation into a ‘show‘ (menu) button

  269. Collapsing navigation into a ‘show‘ (menu) button

  270. None
  271. None
  272. None
  273. None
  274. None
  275. Collapsing navigation into a drop-down interface

  276. None
  277. None
  278. None
  279. None
  280. Collapsing navigation into a menu icon

  281. Collapsing navigation into a menu icon

  282. Good use of the X close icon. Should this be

    a standard?
  283. None
  284. None
  285. Collapsing navigation into a ‘menu’ button

  286. Collapsing navigation into a ‘menu’ button

  287. Making good use of large touch targets. More on that

    later
  288. None
  289. None
  290. Javascript converts unordered list into a select menu.

  291. Javascript converts unordered list into a select menu.

  292. None
  293. Native iPhone select menu interface used as navigation

  294. Native iPhone select menu interface used as navigation

  295. None
  296. None
  297. Collapsing navigation into a ‘menu’ button

  298. Collapsing navigation into a ‘menu’ button

  299. T ransforming links into a grid of icons. Nice touch!

  300. This is a mobile, not a responsive site Collapsing navigation

    into a ‘menu’ button
  301. T ransforming links into a grid of icons.

  302. <nav role="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Chat</a></li> <li><a href="#">Feed</a></li> <li><a

    href="#">Email</a></li> <li><a href="#">Bookmark</a></li> <li><a href="#">Tag</a></li> <li><a href="#">Schedule</a></li> <li><a href="#">Flag</a></li> <li><a href="#">Delete</a></li> </ul> </nav> Two elements: Nav and unordered list
  303. <nav role="navigation"> <ul> <li class="nav-home">[…]</li> <li class="nav-chat">[…]</li> <li class="nav-feed">[…]</li> <li

    class="nav-email">[…]</li> <li class="nav-bookmark">[…]</li> <li class="nav-tag">[…]</li> <li class="nav-schedule">[…]</li> <li class="nav-flag">[…]</li> <li class="nav-delete">[…]</li> </ul> </nav> Add class or id attributes, or use :nth-child pseudo-class selectors
  304. [role="navigation"] { background-color : rgba(0,0,0,.25); } [role="navigation"] ul { list-style-type

    : none; padding : 22px 0; } Basic styling for the nav and unordered list
  305. [role="navigation"] li { float : left; width : 33.33%; margin-bottom

    : 22px; } .nav-schedule, .nav-flag, .nav-delete { margin-bottom : 0; } Float the list items inside the unordered list.
  306. [role="navigation"] li a { display : block; height : 22px;

    padding-top : 84px; background-repeat : no-repeat; background-position : 50% 11px; } .nav-home { background-image:url(home.png); } .nav-chat { background-image:url(chat.png); } […] Add background images to each list item Chat Home Feed Bookmark Email Tag Flag Schedule Delete
  307. @media only screen and (min-width : 768px) { [role="navigation"] li

    { width : 7.58%; margin : 0 2.67% 0 0; } [role="navigation"] li a { padding : 52px 0 0 0; } } Chat Home Feed Bookmark Email Tag Flag Schedule Delete
  308. 44px T ouch targets should be a minimum of 44px*,

    but visual elements don’t have to be 44px 88px * Windows Phone: Recommended touch target size 34px Minimum touch target size 26px Minimum space between elements 8px
  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. Collapsing navigation into an accordion interface

  323. None
  324. None
  325. None
  326. What happened to the footer? How can we improve the

    design?
  327. Include only essential navigation Use top navigation for common tasks

    Use bottom navigation for exploring Don’t duplicate navigation Navigation essentials
  328. None
  329. This is a mobile, not a responsive site

  330. Minimum navigation , maximum content

  331. Minimum navigation , maximum content

  332. This is a mobile, not a responsive site Minimum navigation

    , maximum content
  333. T ap to reveal search

  334. Full navigation page

  335. Minimum navigation , maximum content This is a mobile, not

    a responsive site
  336. This is a mobile, not a responsive site Minimum navigation

    , maximum content
  337. This is a mobile, not a responsive site Maximum content,

    minimum navigation, although touch targets are too small. (More on that later.)
  338. This is a mobile, not a responsive site Maximum navigation

  339. This is a mobile, not a responsive site Maximum navigation

  340. This is a mobile, not a responsive site Maximum navigation

  341. This is a mobile, not a responsive site Full navigation

    page
  342. None
  343. Home Who we are What we believe in What we

    make
  344. 80 - 90% of people are right handed Source: Josh

    Clark’s book Tapworthy: Designing Great IPhone Apps http://kickerstudio.com/blog/2011/01/activity-zones-for-touchscreen-tablets-and-phones/ Hard Easy
  345. Easy Easy Reach Hard Easy

  346. Design to a 44px rhythm Be generous with space Content

    first, navigation second Hide secondary navigation Finger-friendly design Adapted from: http://goo.gl/oQINj
  347. FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 3 Part MODULE DESIGN PATTERNS

  348. None
  349. None
  350. None
  351. None
  352. It would be better to float the calorie count and

    ‘nutrition facts.’ Embrace the flow. Watch out for excessive vertical whitespace
  353. 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)
  354. 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
  355. For small screens, stack items vertically Item Item Item

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

    B A B
  357. None
  358. None
  359. Linearising content and allowing images to scale to 100% is

    a common technique
  360. Item Item Item Start with ‘item’ divisions. Give them widths,

    float them or use display:table properties. Increase gutters to balance the columns
  361. Add two elements inside each ‘item.’ These could be any

    appropriate block-level elements. We’ll call them A and B again A B A B A B
  362. Item Item For medium screens, stack items vertically

  363. For medium screens, float A and B elements A B

    A B
  364. A B For small screens, stack items and A and

    B elements vertically
  365. None
  366. None
  367. None
  368. None
  369. None
  370. Item Item Item Start with ‘item’ divisions. Give them widths,

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

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

    A, B, C and D) vertically
  375. None
  376. None
  377. Reflowing of branding and navigation Ooops. The Boston Globe has

    lost its position at the top of the visual hierarchy
  378. Two column grid in portrait

  379. Remember to design for the shorter landscape format You can

    animate the changes to layout. (See the next slide)
  380. None
  381. None
  382. None
  383. None
  384. None
  385. None
  386. Serving an image that’s larger in height helps maintain hierarchy

  387. None
  388. None
  389. None
  390. None
  391. Item <div class="item"> […] </div>

  392. Item .item { float : left; width : 28.12%; margin-right

    : 7.81%; } .item:last-child { margin-right : 0; }
  393. A B <div class="item"> <div class="a"> […] </div> <div class="b">

    […] </div> </div>
  394. A B .a { float : left; width : 35.39%;

    margin-right : 3.37%; } .b { float : left; width : 61.23%; }
  395. None
  396. None
  397. Adds “select category” label Javascript converts unordered list into a

    select menu.
  398. Native iPhone select menu interface. What might happen with longer

    options or non-English languages?
  399. None
  400. None
  401. Ooops! Background images cut off at smaller sizes. We can

    fix that with CSS3
  402. .promo-item { background-size : contain; }

  403. None
  404. None
  405. None
  406. Adjust the number of columns for small screens Watch out

    for excessive vertical whitespace
  407. 4 Part FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN

  408. None
  409. None
  410. None
  411. None
  412. None
  413. .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; } }
  414. Adding media queries to desktop sites does not make a

    mobile experience Oh how we laughed when we realised our mistake
  415. Adding icons to navigation is a nice touch

  416. <link rel="stylesheet" href="style.css"> <link rel="stylesheet" media="all and (min-width: 45em)" href="layout.css"

    >
  417. // style.css .speaker-lineup a { width : 33%; } @media

    all and (max-width : 30em) { .speaker-lineup a:nth-child(1n+0) { width : 50%; } .speaker-lineup a:nth-child(1n+3) { width : 33.3333%; } .speaker-lineup a:nth-child(1n+6) { width : 25%; } }
  418. // layout.css @media all and (min-width : 70em) { }

    @media all and (max-width : 63em) { } @media all and (min-width : 70em) { } @media all and (max-width : 60em) { }
  419. None
  420. None
  421. Progressive enhancement + content first + responsive design = Content

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

    not down More accessible, more responsible Content first responsive layout
  423. None
  424. <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) {…}
  425. <link rel="stylesheet" href="style.css"> <link rel="stylesheet" media="print" href="print.css"> <link rel="stylesheet" media="only

    screen ¬ and (min-width: 480px)" href="480.css"> <link rel="stylesheet" media="only screen ¬ and (min-width: 600px)" href="600.css"> <link rel="stylesheet" media="only screen ¬ and (min-width: 768px)" href="768.css"> <link rel="stylesheet" media="only screen ¬ and (min-width: 992px)" href="992.css">
  426. None
  427. None
  428. Developing a foundation Content Develop a foundation stylesheet Colour, texture

    and typography Use rems for font-sizing Mobile first images Minimal Javascript Optimise images for performance
  429. Enhancing the foundation Add webfonts over 600px Use micro-queries for

    minor breakpoints Build styles progressively Use inheritance and the cascade Lazyload large assets at appropriate sizes Respond.js or fixed-widths for Internet Explorer 6–8
  430. 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
  431. <link rel="stylesheet" href="style.css"> @media screen and (min-width : 240px) {

    /* Some Android and Blackberry devices (p) */ } <link rel="stylesheet" href="600.css"> @media screen and (min-width : 640px) { /* Some Symbian devices */ } <link rel="stylesheet" href="768.css"> @media screen and (min-width : 800px) { /* Some tablets */ }
  432. FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 4 Part FLEXIBLE LAYOUT

  433. Navigation Complementary Main <nav role="navigation"> […] </nav> <div class="content"> <div

    role="main"> […] </div> <div role="complementary"> […] </div> </div> A simple, two-column responsive layout
  434. Complementary Main [role="main"] { float : left; width : 48.31%;

    /* 344px */ } [role="complementary"] { float : right; width : 48.31%; /* 344px */ } Navigation
  435. Complementary Main [role="main"] { width : 69.19%; /* 620px */

    } [role="complementary"] { width : 28.12%; /* 252px */ } Navigation
  436. What’s with the whitespace?

  437. None
  438. None
  439. None
  440. Navigation Content <nav role="navigation"> […] </nav> <div class="content"> […] </div>

    A more complex responsive layout
  441. Navigation Complementary Main <nav role="navigation"> […] </nav> <div class="content"> <div

    role="main"> […] </div> <div role="complementary"> […] </div> </div>
  442. Navigation <div role="main"> <div class="content-sub"> […] </div> <div class=”content-main”> […]

    </div> </div> Content-sub Content-main Complementary
  443. [role="navigation"], .content { width : 90%; margin : 0 auto;

    } Navigation Content kindle
  444. .content-sub { float : left; width : 30.3%; /* 160px

    */ } .content-main { float : right; width : 65.15%; /* 344px */ } Content-sub Content-main kindle Navigation
  445. Complementary Main [role="main"] { float : left; width : 48.31%;

    /* 344px */ } [role="complementary"] { float : right; width : 48.31%; /* 344px */ } Navigation
  446. Content-sub Content-main .content-sub, .content-main { float : none; width :

    auto; }
  447. Complementary Main [role="main"] { width : 69.19%; /* 620px */

    } [role="complementary"] { width : 28.12%; /* 252px */ } Navigation
  448. Navigation Complementary .content-sub { float : left; width : 25.8%;

    /* 160px */ } .content-main { float : right; width : 70.32%; /* 436px */ } Content-sub Content-main
  449. Nav Content [role="navigation"] { float : left; width : 11.79%;

    /* 160px */ } .content { float : right; width : 86.43%; /* 1172px */ }
  450. Nav [role="main"] { width : 76.45%; /* 896px */ }

    [role="complementary"] { width : 21.5%; /* 252px */ } Complementary Main
  451. Nav Complementary .content-sub { width : 17.85%; /* 160px */

    } .content-main { width : 79.46%; /* 712px */ } Content-sub Content-main
  452. Vertical flipping

  453. None
  454. Home Who we are What we believe in What we

    make
  455. 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
  456. Display table properties 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
  457. Complementary Main [role="main"], [role="complementary"] { display : table-cell; }

  458. 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
  459. Navigation Content <div class="content"> <a href="#nav">Navigation</a> […] </div> <nav id="nav">

    […] </nav> Vertical flip using display:table properties
  460. a[href="#nav"] { display : none; } body { display :

    table; border-collapse : collapse; } [role="navigation"] { display : table-header-group; } Content Navigation
  461. Content .content { display : table; border-collapse : collapse; }

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

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

    width : 28.12%; } Navigation
  464. Handling fixed-width content

  465. 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)
  466. None
  467. Roger Black … there is no single way to buy

    and insert adaptive ads across the platforms. The Interactive Advertising Bureau, which has worked over the years to promote standard sizes for ads for the desktop web, doesn’t even list mobile ad sizes with its web ad units, offering only a PDF with “prevailing” sizes. http://rogerblack.com/blog/post/the_holy_grail_part_2
  468. Mark Boulton’s ‘slot packages’ Leaderboard Banner MMU

  469. Small screens Banner

  470. Medium screens Banner MMU

  471. Large screens Leaderboard Banner MMU

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

  473. Navigation Main Complementary <nav role="navigation"> […] </nav> <div class="content"> <div

    role="main"> […] </div> <div role="complementary"> […] </div> </div>
  474. 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
  475. .a728x90 { display : none; } 300x100 300x100 300x250

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

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

  478. Complementary Main 728x90 300x100 300x100 300x100 Complementary Main

  479. FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 4 Part RESPONSIVE IMAGES

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

  481. Mat Marquis To use this effectively, though, the image must

    be large enough to scale up to whatever size we can reasonably expect on the largest possible display. This can mean a great deal of overhead. At best it’s just wasteful. http://alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need
  482. 960 x 1280

  483. 960 x 1280 320 x 426

  484. None
  485. <img src="pig-small.jpg ¬ ?full=pig.jpg" alt="">

  486. A small image should be default Don’t load images twice

    Adaptive images
  487. Small image is the default Larger image is loaded when

    width allows Apparent speed vs actual speed Responsive Enhance
  488. Josh Emerson A small image is always downloaded. If needed,

    a large image is downloaded in the background, and replaces the small image only once it’s fully downloaded. This results in a faster perceived page load speed, but a slower actual speed. I’m happy with this solution as I care more about perceived speed than actual speed. http://joshemerson.co.uk/blog/responsive-process/
  489. None
  490. <img id="img1" src="img-small-1.jpg" alt="" ↵ data-fullsrc="img-large-1.jpg"> <img id="img2" src="img-small-2.jpg" alt=""

    ↵ data-fullsrc="img-large-2.jpg"> <img id="img3" src="img-small-3.jpg" alt="" ↵ data-fullsrc="img-large-3.jpg"> <script src="responsive-enhance.js"></script> <script> responsiveEnhance(document.getElementById('img1'), 400); responsiveEnhance(document.getElementById('img2'), 300); responsiveEnhance(document.getElementById('img3'), 200); </script>
  491. img, object { max-width : 100%; }

  492. http://fitvidsjs.com

  493. None
  494. <div class="video"> <object>[…]</object> </div> .video { position : relative; padding-bottom

    : 20%; height : 0; } .video object { position : absolute; top : 0; left : 0; width : 100%; height : 100%; } CSS
  495. FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 4 Part RESPONSIVE DATA TABLES

  496. None
  497. None
  498. None
  499. None
  500. None
  501. [Responsive data tables]

  502. Don’t assume that screen size relates to browser capabilities

  503. Trackball Touchscreen Trackpad

  504. [Modernizr]

  505. 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
  506. Use Modernizr to detect touch Design alternative without hover-based menus

    Move content and tools from hover-based menus Consider hover
  507. None
  508. None
  509. Articles Responsive by default http://goo.gl/IiL35 A Richer Canvas http://goo.gl/lWDxC Responsive

    Advertising http://goo.gl/MGhGo You Say Responsive, I Say Adaptive http://goo.gl/tA1zJ
  510. Code A Responsive Design Approach for Complex, Multicolumn Data Tables

    http://goo.gl/n8S1q Responsive Data Table Roundup http://goo.gl/3GVox Debugging CSS Media Queries http://goo.gl/5eawI Convert a Menu to a Dropdown for Small Screens http://goo.gl/KDE9t
  511. Conference talks and podcasts There Is No Mobile Web (Jeremy

    Keith) http://goo.gl/pFCX7 For a Future-Friendly Web http://goo.gl/BGcHn Structured Content First (Stephen Hay) http://goo.gl/HI6RE Pragmatic responsive design http://goo.gl/d2daW
  512. Content strategy Content Strategy and Responsive Design http://goo.gl/fFbzq Structured Content,

    Shifting Context: Responsive Design, Content Strategy & the Future http://goo.gl/eLHE1 Mobile content strategy link-o-rama 2011 http://goo.gl/8YmQK
  513. Design New Visual Proportions for the iOS User Interface http://goo.gl/gO78I

    Content Choreography http://goo.gl/ohLLt The typography-out approach in the world of browser-based web design http://goo.gl/oDWQ4
  514. @malarkey

  515. 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
  516. None
  517. Bonus

  518. <input type="number">

  519. <input type="number">

  520. <input type="email">

  521. <input type="email">

  522. <input type="email">

  523. <input type="tel">

  524. <input type="tel">

  525. <input type="url">

  526. <input type="month">

  527. <input type="date">

  528. <input type="time">

  529. <input type="datetime">