Fashionably flexible responsive web design (full day workshop)

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">