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.

Transcript

1. RESPONSIVE WEB DESIGN FASHIONABLY FLEXIBLE Andy(Clarke 1.4
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
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
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
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
54. On the web there are no edges
55. Tools reinforce notions such as the canvas
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
64. [Style tiles]
71. Design atmosphere Typography Typefaces, type treatments and white space Colour Emotion and interaction vocabulary Texture Decorative elements, line-work, patterns and shapes
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
86. .,3:[`SLN\PKL=LYZPVUc6J[VILY )\PSKPUNH .SVIHS,_WLYPLUJL3HUN\HNL MVY[OL))* .,3:[`SLN\PKL 9< ( .,3:[`SLN\PKL=LYZPVUc6J[VILY
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
113. Stephanie Rieger We need to make smarter content, not smarter containers.
114. Linearising content
120. RESPONSIVE TYPOGRAPHY FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN Hosted by Andy Clarke 2 Part
122. iOS 5.0 58 Android 2.3 3 Source: http://goo.gl/rJkVi Fonts installed
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; }
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; } }
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; } }
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
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 *
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
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
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
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
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
224. Reflowing of navigation
227. Reflowing of navigation
230. Navigation linearised
233. Where did the links to RSS and Twitter go?
234. Links don’t show up in landscape orientation either
238. No fast and easy way to switch to comments
239. Unclear navigation
242. Icons removed from navigation, to save vertical space?
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
262. Collapsing navigation and search into a drop-down interface
263. T ap icon to reveal search input
265. [Responsive data tables]
268. Collapsing navigation into a ‘show‘ (menu) button
269. Collapsing navigation into a ‘show‘ (menu) button
275. Collapsing navigation into a drop-down interface
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?
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
290. Javascript converts unordered list into a select menu.
291. Javascript converts unordered list into a select menu.
293. Native iPhone select menu interface used as navigation
294. Native iPhone select menu interface used as navigation
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
322. Collapsing navigation into an accordion interface
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
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
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
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
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
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
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)
386. Serving an image that’s larger in height helps maintain hierarchy
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%; }
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?
401. Ooops! Background images cut off at smaller sizes. We can fix that with CSS3
402. .promo-item { background-size : contain; }
406. Adjust the number of columns for small screens Watch out for excessive vertical whitespace
407. 4 Part FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN
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) { }
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
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">
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?
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
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)
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
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/
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
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
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
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
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">