Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Fashionably flexible responsive web design (ful...

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.

Andy Clarke

March 08, 2012
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. 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:
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. “There Is No Mobile Web” Jeremy Keith Responsive Web Design

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

    The Boston Globe 2011 09 011 06 09 2011
  16. 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
  17. • 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
  18. • 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
  19. • 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
  20. • 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
  21. • 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
  22. 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
  23. 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/
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. Design atmosphere Typography Typefaces, type treatments and white space Colour

    Emotion and interaction vocabulary Texture Decorative elements, line-work, patterns and shapes
  35. 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)
  36. 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.
  37. 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
  38. 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`
  39. 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[ 
  40. 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
  41. 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_
  42. 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
  43. .,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
  44. 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/
  45. 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)
  46. 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
  47. Step three Create detailed visuals based on prototypes Draft copy,

    data and images (second iteration) Develop final responsive templates
  48. 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)
  49. 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/
  50. 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
  51. 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
  52. 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?
  53. 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
  54. 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
  55. 21 a 24 a 36 a 48 a 14 a

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

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

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

    actual devices, not narrow browser windows
  59. 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; /* ? */ }
  60. 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 */ }
  61. 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; }
  62. 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; } }
  63. 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; } }
  64. @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; } }
  65. 252 ÷ 896 = 28.12% 620 ÷ 896 = 69.19%

    * Based on one break starting point. More on that in just a minute *
  66. 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
  67. 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
  68. 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)
  69. 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
  70. 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)
  71. 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
  72. 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
  73. 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
  74. 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
  75. 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
  76. 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
  77. Trent Walton To think about the web responsively is to

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

    to percentages Use ems or rems for font sizing A flexible foundation is critical
  79. <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>
  80. 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
  81. 340x480 640x960 640x480 360x480 480x800 480x800 720x1280 480x800 540x960 480x800

    540x960 540x960 320x480 800x1280 Source: http://phone-size.com
  82. <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
  83. [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
  84. 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; }
  85. <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
  86. .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
  87. @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
  88. [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
  89. <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
  90. <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
  91. [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
  92. [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.
  93. [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
  94. @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
  95. 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
  96. Include only essential navigation Use top navigation for common tasks

    Use bottom navigation for exploring Don’t duplicate navigation Navigation essentials
  97. This is a mobile, not a responsive site Maximum content,

    minimum navigation, although touch targets are too small. (More on that later.)
  98. 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
  99. 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
  100. It would be better to float the calorie count and

    ‘nutrition facts.’ Embrace the flow. Watch out for excessive vertical whitespace
  101. 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)
  102. 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
  103. Item Item Item Start with ‘item’ divisions. Give them widths,

    float them or use display:table properties. Increase gutters to balance the columns
  104. 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
  105. Item Item Item Start with ‘item’ divisions. Give them widths,

    float them or use display:table properties
  106. 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
  107. 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
  108. Reflowing of branding and navigation Ooops. The Boston Globe has

    lost its position at the top of the visual hierarchy
  109. Remember to design for the shorter landscape format You can

    animate the changes to layout. (See the next slide)
  110. Item .item { float : left; width : 28.12%; margin-right

    : 7.81%; } .item:last-child { margin-right : 0; }
  111. A B .a { float : left; width : 35.39%;

    margin-right : 3.37%; } .b { float : left; width : 61.23%; }
  112. .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; } }
  113. Adding media queries to desktop sites does not make a

    mobile experience Oh how we laughed when we realised our mistake
  114. // 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%; } }
  115. // 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) { }
  116. Small screen designs are the default Media Queries scale up,

    not down More accessible, more responsible Content first responsive layout
  117. <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) {…}
  118. <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">
  119. 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
  120. 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
  121. 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
  122. <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 */ }
  123. 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
  124. Complementary Main [role="main"] { float : left; width : 48.31%;

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

    } [role="complementary"] { width : 28.12%; /* 252px */ } Navigation
  126. Navigation Complementary Main <nav role="navigation"> […] </nav> <div class="content"> <div

    role="main"> […] </div> <div role="complementary"> […] </div> </div>
  127. .content-sub { float : left; width : 30.3%; /* 160px

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

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

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

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

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

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

    } .content-main { width : 79.46%; /* 712px */ } Content-sub Content-main
  134. 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
  135. 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
  136. 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
  137. a[href="#nav"] { display : none; } body { display :

    table; border-collapse : collapse; } [role="navigation"] { display : table-header-group; } Content Navigation
  138. Complementary Main [role="main"] { display : table-cell; width : 64.6%;

    } [role="complementary"] { display : table-cell; width : 35.39%; } Navigation
  139. 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)
  140. 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
  141. Navigation Main Complementary <nav role="navigation"> […] </nav> <div class="content"> <div

    role="main"> […] </div> <div role="complementary"> […] </div> </div>
  142. 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
  143. Complementary Main [role="main"] { float : left; width : 54.737%;

    /* 408px */ } [role="complementary"] { float : right; width : 40.983%; /* 300px */ min-width : 300px;} Navigation
  144. 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
  145. Small image is the default Larger image is loaded when

    width allows Apparent speed vs actual speed Responsive Enhance
  146. 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/
  147. <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>
  148. <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
  149. 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
  150. Use Modernizr to detect touch Design alternative without hover-based menus

    Move content and tools from hover-based menus Consider hover
  151. 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
  152. 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
  153. 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
  154. 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
  155. 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