Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fashionably flexible responsive web design (full day workshop from New Adventures, January 2013)

Andy Clarke
January 23, 2013

Fashionably flexible responsive web design (full day workshop from New Adventures, January 2013)

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

January 23, 2013
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. ONE

  3. • 102 million people accessed Facebook solely through their mobile

    device in June 2012 (up 23% from 83m in March.) • 24% of Black Friday retail traffic in 2012 came from mobile devices, 14.3% in 2011 and 5.5% in 2010. • In August 2012, 77% of TV viewers used another device at the same time in a typical day. 81% used a smartphone and TV at the same time. SMARTPHONES Source: http://lukew.com/ff/entry.asp?1450 http://lukew.com/ff/entry.asp?1624 http://lukew.com/ff/entry.asp?1665
  4. • 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 • More iPhones are sold every day worldwide than there are babies born, 378,00 vs 371,00 IPHONES Source: http://lukew.com/ff/entry.asp?1415 http://www.lukew.com/ff/entry.asp?1506
  5. • Amazon now sells more Kindle books than all print

    books (hardcover and paperback) combined • Adult e-books sales grew from 66.6 million in January 2011 to 99.5 million in January 2012 E-READERS Source: http://lukew.com/ff/entry.asp?1391 http://lukew.com/ff/entry.asp?1536
  6. • The share e-book reader owners in the USA jumped

    from 10% to 19% between mid-December 2011 and early January 2012. • Kindle Fire has become the best-selling, most-gifted and most-wished-for product on Amazon. • Gifting of Kindle books up 175% between Black Friday and Christmas Day 2011 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
  7. • Over 100m iPads sold to date (October 2012) •

    52% of worldwide tablet marketshare is iPad (October 2012) • 95.5% of all the web traffic from tablets comes from iPad (October 2012) • 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
  8. 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
  9. 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
  10. Design atmosphere Typography Typefaces, type treatments and white space Colour

    Emotion and interaction vocabulary Texture Decorative elements, line-work, patterns and shapes
  11. 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)
  12. 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.
  13. 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
  14. 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`
  15. 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[ 
  16. 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
  17. 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_
  18. 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
  19. .,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
  20. What we learned Mobile usage is out-pacing PC usage Our

    thinking about design needs to adapt Separate atmosphere from layout Create design guides first, not style guides last
  21. TWO

  22. What we’ll cover The ‘post-PC’ design workflow Making content design

    decisions Designing with web-font tools Typography and texture A new take on grid design
  23. Design Site audit (existing assets) Flows and navigation maps User

    stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
  24. Design Site audit (existing assets) Flows and navigation maps User

    stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
  25. Logo Nav Nav Nav Nav Introduction Call to action Logo

    Logo Logo Logo Logo Work introduction Image
  26. Stephen Hay’s responsive workflow Content inventory Content reference wireframes Design

    in text (structured content) Linear design Breakpoint graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://www.slideshare.net/stephenhay/responsive-design-workflow
  27. Stephen Hay’s responsive workflow Content inventory Content reference wireframes Design

    in text (structured content) Linear design Breakpoint graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://www.slideshare.net/stephenhay/responsive-design-workflow
  28. Content inventory Branding Navigation Introduction (with initial call to action)

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

    training Books and articles Blog entries Work 1. Branding 2. Navigation 3. Introduction 4. Work 5. Conference speaking 6. Workshops and training 7. Books and articles 8. Blog entries 9. Call to action
  30. Post-PC responsive workflow Content inventory Structured content Design atmosphere Design

    a flexible grid Sketch content and functionality HTML design prototype (first iteration) Stage one
  31. Test layouts early on real devices Iterate through sketches and

    prototype revisions Test regularly Correct only what looks broken HTML design prototype (second iteration) Stage two
  32. Back to design atmosphere Typography Typefaces, type treatments and white

    space Colour Emotion and interaction vocabulary Texture Decorative elements, line-work, patterns and shapes
  33. Call to action Branding Introduction Navigation Conference speaking Workshops and

    training Books and articles Blog entries Work 1. Branding 2. Navigation 3. Introduction 4. Work 5. Conference speaking 6. Workshops and training 7. Books and articles 8. Blog entries 9. Call to action
  34. When should this content collapse? How should it collapse? Accordion,

    carousel or scroller? How should this content flow? What’s the order of importance? Should ‘this’ go above or below ‘that’? Should this content be deleted? Content strategy questions
  35. 21 a 24 a 36 a 48 a 14 a

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

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

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

    devices, not narrow browser windows
  39. iPhone 3GS, iOS 4.3.n, 320 x 480 (no retina display)

    iPhone 4, iOS 5, 320 x 480 (retina display) iPad, iOS 5, 1024 x 768 (no retina display) Android 2.1 – Motorola, 480 x 600 Android 2.3 – HTC, 480 x 320 (QWERTY) Android 2.3 – Huawei, 320 x 480 (low CPU) Android 3.0 – Samsung, 320 x 480 (low CPU, low dpi) Android 2.3.4 – Kindle Fire, 1024 x 600 (7″ tablet) Stephanie Rieger’s ‘Strategies for choosing test devices’ http://stephanierieger.com/strategies-for-choosing-test-devices/
  40. Small screen smartphone (eg: iPhone 3GS, 4 or 4S) Large

    screen smartphone (eg: Google Nexus) Medium screen tablet (eg: Google Nexus 7 or Kindle Fire 7 HD) Large screen table (eg: iPad, iPad 2 or the New iPad) Opera Mobile Emulator (Mac App Store) Design test devices
  41. 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 < 5, 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
  42. 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
  43. What we learned We need ‘post-PC’ design workflows Flowing, collapsing

    and removing content Web-font design tools are essential Make typography feel native to the device Combine content and device breakpoints Design your own bespoke grid
  44. +

  45. Include only essential navigation Use top navigation for common tasks

    Use bottom navigation for exploring Don’t duplicate navigation Navigation essentials
  46. 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)
  47. 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
  48. 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
  49. 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
  50. 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
  51. New Albums See All Album title Artist name Album title

    Artist name Album title Artist name
  52. The full video of my talk from Smashing Conference is

    now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
  53. The full video of my talk from Smashing Conference is

    now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
  54. The full video of my talk from Smashing Conference is

    now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available. .net magazine: Top 20 CSS sites of 2012 I’m not sure that fat fella at the top deserves to be there.
  55. The full video of my talk from Smashing Conference is

    now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available. .net magazine: Top 20 CSS sites of 2012 I’m not sure that fat fella at the top deserves to be there.
  56. The full video of my talk from Smashing Conference is

    now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available. The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
  57. The full video of my talk from Smashing Conference is

    now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available. The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
  58. The full video of my talk from Smashing Conference is

    now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available. The full video of my talk from Smashing Conference is now online Thanks once again to all the folks from Smashing Conference for making my son and I so welcome during our visit. One, if not both, of us will be back to sit in the audience next year. Thanks also to Marc Thiele for his hard work to make these videos available.
  59. Don’t rely on ‘little circles’ Use arrows to indicate direction

    of travel Show hints of what’s outside the viewport Horizontal design patterns
  60. 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)
  61. 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
  62. Complementary Main [role="main"] { float : left; width : 54.737%;

    /* 408px */ } [role="complementary"] { float : right; width : 40.983%; /* 300px */ min-width : 300px;} Navigation
  63. 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
  64. What we learned Responsive examples Navigation flows, collapses and transforms

    Content module transformations Dealing with fixed widths and responsive advertising
  65. What we’ll cover Structuring media queries from small screens up

    Inheriting not adaptive styles Sizing text with new flexible units Working with images for high ppi screens Alternatives to bitmaps CSS properties for flexible layouts
  66. .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; } }
  67. Adding media queries to desktop sites does not make a

    mobile experience Oh how we laughed when we realized our mistake
  68. Small screen designs are the default Media Queries scale up,

    not down More accessible, more responsible Content first responsive layout
  69. <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) {…}
  70. Developing a foundation Content Develop a foundation stylesheet Colour, texture

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

    minor breakpoints Build styles progressively Use inheritance and the cascade Lazy-load large assets at appropriate sizes Fixed-widths for Internet Explorer 6–8
  72. @-webkit-viewport { width : device-width; } @-moz-viewport { width :

    device-width; } @-ms-viewport { width : device-width; } @-o-viewport { width : device-width; } @viewport { width : device-width; } CSS http://dev.w3.org/csswg/css-device-adapt/
  73. <meta name="HandheldFriendly" content="true"> HTML Interpreted by mobile browsers as an

    indicator of mobile markup <meta name="MobileOptimized" content="320"> Control layout width rendered in Internet Explorer Mobile <meta name="apple-mobile-web-app-capable" content="yes"> Runs full-screen on iOS devices
  74. 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; /* ? */ }
  75. 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 */ }
  76. h1 { font-size : 32px; font-size : 3.2rem; } CSS

    LESS MIXIN .font-size(@font-size: 16){ @rem: (@font-size / 10); font-size : @font-size * 1px; font-size : ~"@{rem}rem"; } .font-size(32);
  77. vw Equal to 1% of the width of the viewport

    vh Equal to 1% of the height of the viewport vmin Equal to either vw or vh, whichever is smaller vmax New. The opposite behaviour to vmin
  78. sudo defaults write /Library/Preferences/com.apple.windowserver DisplayResolutionEnabled -bool YES; sudo defaults delete

    /Library/Preferences/com.apple.windowserver DisplayResolutionDisabled; https://gist.github.com/3191869
  79. [role="banner"] div p { background-image : url(banner-m-lg.png); } @media only

    screen and (-webkit-min-device-pixel-ratio : 2), only screen and ( min--moz-device-pixel-ratio : 2), only screen and ( -o-min-device-pixel-ratio : 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution : 192dpi), only screen and ( min-resolution : 2dppx) { [role="banner"] div p { background-image : url([email protected]); background-size : 225px 380px; } }
  80. .ss-target { background : url(sprite.png) no-repeat 0 0; } .ss-link

    { background : url(sprite.png) no-repeat -100px 0; } @media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and ( min--moz-device-pixel-ratio : 2), only screen and ( -o-min-device-pixel-ratio : 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution : 192dpi), only screen and ( min-resolution : 2dppx) { .ss-target, .ss-link { background-image { url([email protected]) } background-size : 200px 200px; } }
  81. 1 2 3 4 6 7 8 9 10px 10px

    10px 10px 10px 10px
  82. button { border-image-slice : 10 10 10 10; border-image-source :

    url(button.png); } button { border-image : url(button.png) 10 10 10 10; } button { border-image : url(button.png) 10 10 10 10; border-width : 10px 10px 10px 10px; }
  83. button { border-image-slice : 10 10 10 10 fill; border-image-source

    : url(button.png); } http://blog.assortedgarbage.com/2011/12/change-happens
  84. Stretch Stretches slice areas to fill horizontally or vertically Repeat

    Repeats slice areas to fill horizontally or vertically Round Resizes a slice so that only whole pieces fit when repeating Space Repeats whole slice pieces and adds space to fill a border evenly
  85. 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
  86. display : table-header-group A row group always displayed before all

    other rows and row groups and after any top captions display : table-footer-group A row group always displayed after all other rows and row groups and after any bottom captions display : table-row-group One or more rows of cells Display table properties
  87. 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
  88. @media only screen and (min-width: 600px) { a[href="#nav"] { display

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

    [role="complementary"] { display : table-cell; width : 35.39%; } Complementary Main
  90. Navigation Banner @media only screen and (min-width: 600px) { .ihatetimvandamme

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

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

    table-cell; width : 33.33%; } Col Col Col
  93. Box-img <div class="box id="box-writing"> <div class="box-img"> </div> <div class="box-details"> <h2>Books

    and articles</h2> <p>As well as articles…</p> </div> </div> Box-details
  94. @media all and (min-width: 992px) and (min-height : 34em) {

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

    .entry-summary { column-count : 3; column-gap : 22px; } }
  96. What we learned Structure media queries from small screens up

    Use inheriting not adaptive styles Size text with rems and vws Optimise high ppi images for performance Use fonts and CSS as alternatives to bitmaps How to use display:table and CSS columns
  97. CREDIT WHERE CREDIT’S DUE http://bbc.co.uk/guidelines/gel/ http://jamieoliver.com FRV BRAND GUIDELINES ES

    http://flickr.com/photos/kmuellerdesign/5372922823 http://flickr.com/photos/r_okoko20/6249889073 http://flickr.com/photos/55339703@N08/5923185617