Fashionably flexible responsive web design (full day workshop from Smashing Conference, September 2012)

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

2 FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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:

Slide 12

Slide 12 text

#stno Twitter, Instagram, Flickr

Slide 13

Slide 13 text

1 2 3 4 Becoming responsive Responsive design process Responsive design patterns Technically speaking

Slide 14

Slide 14 text

http://goo.gl/eg3Ob Slides http://goo.gl/py55q Resources

Slide 15

Slide 15 text

Your turn What’s the one question you’d most like answered today? And what phone do you carry?

Slide 16

Slide 16 text

1. What’s Andy’s favourite movie of all time? 2. 3. 4. 5. 6. 7. 8. 9. 10. Questions to answer

Slide 17

Slide 17 text

ONE

Slide 18

Slide 18 text

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%>lexibility. http://www.alistapart.com/articles/dao

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

“There Is No Mobile Web” Jeremy Keith Web Design ook) The Boston Globe 2011 09 011 06 09 2011

Slide 31

Slide 31 text

Total annual global shipments of smart phones exceeded those of client PCs (including pads) for the ﬁrst 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

Slide 32

Slide 32 text

• 102 million people accessed Facebook solely through their mobile device in June 2012 (up 23% from 83m in March) • 55% of Twitter’s trafﬁc comes from mobile devices • 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

Slide 33

Slide 33 text

http://venturebeat.com/2012/01/10/paypals-mobile-payments-4b-2011/ Mobile payments $141M $750M $4B 2009 2010 2011

Slide 34

Slide 34 text

• 400m iOS devices have been sold to date. Was 250m in 2011. • 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

Slide 35

Slide 35 text

• 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

Slide 36

Slide 36 text

• 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

Slide 37

Slide 37 text

• 84m iPads have been sold to date • 68% of worldwide tablet marketshare is iPad • 91% of all the web trafﬁc from tablets comes from iPad • 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

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Ethan Marcotte Rather%than%tailoring%disconnected%designs%to%each%of%an% everAincreasing%number%of%web%devices,%we%can%treat%them% as%facets%of%the%same%experience.%We%can%design%for%an% optimal%viewing%experience,%but%embed%standardsAbased% technologies%into%our%designs%to%make%them%not%only%more% >lexible,%but%more%adaptive%to%the%media%that%renders%them. http://alistapart.com/articles/responsive-web-design

Slide 40

Slide 40 text

A ﬂexible grid Flexible images and media CSS3 media queries Three responsive ingredients

Slide 41

Slide 41 text

Andy Clarke Anything%that’s%>ixed%and%unresponsive%isn’t%web%design% anymore,%it’s%something%else.%If%you%don’t%embrace%the% inherent%>luidity%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/

Slide 42

Slide 42 text

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 TINY PENIS!

Slide 43

Slide 43 text

Different skills and workﬂow may be required More time spent at beginning of the process Additional resources may be required Deciding when responsive is appropriate

Slide 44

Slide 44 text

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%>inally%embrace%the%dynamic%medium%we%build%for.%The% web%is%not%>ixed%width.% http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

640x480

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

800x600

Slide 50

Slide 50 text

1024x768

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Jason Santa Maria We%don’t%support%800%x%600%anymore,%nor%do%we%640%x%480. Do%you? http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

320x420 320x420

Slide 56

Slide 56 text

420x320

Slide 57

Slide 57 text

Mat “Wilto” Marquis %No,%you% guys.%No. http://twitter.com/wilto/status/116589243777814528 @wilto

Slide 58

Slide 58 text

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%>ixedAwidth%red%herring. http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart Jeremy Keith

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

⌘N

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

Trent Walton Web%designers%will%have%to%look%beyond%the%layout%in%front% of%them%to%envision%how%its%elements%will%re>low%&%lockup%at% various%widths%while%maintaining%form%&%hierarchy.% http://trentwalton.com/2011/07/14/content-choreography

Slide 76

Slide 76 text

Design atmosphere Typography Typefaces, type treatments and white space Colour Emotion and interaction vocabulary Texture Decorative elements, line-work, patterns and shapes

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

FRV BRAND GUIDELINES ES

Slide 85

Slide 85 text

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)

Slide 86

Slide 86 text

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.

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

.,3:[`SLN\PKL=LYZPVUc6J[VILY )\PSKPUNH .SVIHS,_WLYPLUJL3HUN\HNL MVY[OL))* .,3:[`SLN\PKL 9< ( .,3:[`SLN\PKL=LYZPVUc6J[VILY

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

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`

Slide 91

Slide 91 text

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[

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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_

Slide 94

Slide 94 text

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\

Slide 95

Slide 95 text

.,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

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

What we learned Mobile usage is out-pacing PC usage Our thinking about design needs to adapt Separate atmosphere from layout Create design guides ﬁrst, not style guides last

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

TWO

Slide 104

Slide 104 text

What we’ll cover The ‘post-PC’ design workﬂow Making content design decisions Designing with web-font tools Typography and texture A new take on grid design

Slide 105

Slide 105 text

Plan Design Develop Deploy Hat tip to Ethan Marcotte

Slide 106

Slide 106 text

Plan Design Develop Deploy

Slide 107

Slide 107 text

Plan Deploy

Slide 108

Slide 108 text

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 speciﬁcations (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design

Slide 109

Slide 109 text

Slide 110

Slide 110 text

Logo Nav Nav Nav Nav Introduction Call to action Logo Logo Logo Logo Logo Work introduction Image

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

Mat “Wilto” Marquis Mobile%users%want%to%see%our%menu,%hours,%and%delivery% number.%Desktop%users%de>initely%want%this%1mb%png%of% someone%smiling%at%a%salad. https://twitter.com/wilto/status/63284673723375616 @wilto

Slide 113

Slide 113 text

Stephen Hay’s responsive workﬂow 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-workﬂow

Slide 114

Slide 114 text

Slide 115

Slide 115 text

Content inventory Branding Navigation Introduction (with initial call to action) Work Conference speaking Workshops and training Books and articles Blog entries Call to action

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

Create detailed visuals based on prototypes Develop ﬁnal responsive templates Stage three

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

Back to design atmosphere Typography Typefaces, type treatments and white space Colour Emotion and interaction vocabulary Texture Decorative elements, line-work, patterns and shapes

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

No content

Slide 132

Slide 132 text

No content

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

Slide 135

Slide 135 text

Sean Tubridy Responsive%design.%Mobile%>irst.%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%>lexible. http://blog.braintrafﬁc.com/2012/01/content-strategy-and-responsive-design

Slide 136

Slide 136 text

Deleted Collapses Accordions, carousels and scrollers Flows Content blocks change width and height Responsive content

Slide 137

Slide 137 text

When should this content collapse? How should it collapse? Accordion, carousel or scroller? How should this content ﬂow? What’s the order of importance? Should ‘this’ go above or below ‘that’? Should this content be deleted? Content strategy questions

Slide 138

Slide 138 text

No content

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

No content

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

No content

Slide 144

Slide 144 text

No content

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

No content

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

iOS6: 260 iOS5: 58 Android uses Roboto Windows Phone 8 uses Segoe Fonts installed

Slide 150

Slide 150 text

No content

Slide 151

Slide 151 text

No content

Slide 152

Slide 152 text

No content

Slide 153

Slide 153 text

No content

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

Tip: Create a file to test heading sizes on actual devices, not narrow browser windows

Slide 159

Slide 159 text

Tip: Test body text sizes with users during the design phase

Slide 160

Slide 160 text

http://goo.gl/o23Vc

Slide 161

Slide 161 text

http://www.ﬂickr.com/photos/brad_frost/7387827018

Slide 162

Slide 162 text

No content

Slide 163

Slide 163 text

No content

Slide 164

Slide 164 text

No content

Slide 165

Slide 165 text

No content

Slide 166

Slide 166 text

No content

Slide 167

Slide 167 text

No content

Slide 168

Slide 168 text

No content

Slide 169

Slide 169 text

No content

Slide 170

Slide 170 text

No content

Slide 171

Slide 171 text

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/

Slide 172

Slide 172 text

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

Slide 173

Slide 173 text

http://labs.adobe.com/technologies/shadow http://itunes.apple.com/us/app/aptus/id510487565

Slide 174

Slide 174 text

No content

Slide 175

Slide 175 text

No content

Slide 176

Slide 176 text

No content

Slide 177

Slide 177 text

No content

Slide 178

Slide 178 text

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

Slide 179

Slide 179 text

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

Slide 180

Slide 180 text

No content

Slide 181

Slide 181 text

No content

Slide 182

Slide 182 text

No content

Slide 183

Slide 183 text

No content

Slide 184

Slide 184 text

No content

Slide 185

Slide 185 text

No content

Slide 186

Slide 186 text

No content

Slide 187

Slide 187 text

http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html

Slide 188

Slide 188 text

No content

Slide 189

Slide 189 text

No content

Slide 190

Slide 190 text

No content

Slide 191

Slide 191 text

A ﬂuid grid

Slide 192

Slide 192 text

target ÷ context = result 896px

Slide 193

Slide 193 text

target ÷ 896 = result 252px 620px

Slide 194

Slide 194 text

No content

Slide 195

Slide 195 text

No content

Slide 196

Slide 196 text

No content

Slide 197

Slide 197 text

No content

Slide 198

Slide 198 text

Less Framework grid

Slide 199

Slide 199 text

3 columns at 320px 5 columns at 480px 6 columns at 600px 8 columns at 768px 10 columns at 992px 68px columns, 24px gutters

Slide 200

Slide 200 text

Josh Clark The%44Apixel%block%is,%in%many%ways,%the%basic%unit%of% measurement%for%the%iPhone%interAface,%establishing%the% visual%rhythm%of%many%iPhone%apps.%That%metric%is%signi>icant% 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

Slide 201

Slide 201 text

44px

Slide 202

Slide 202 text

44px

Slide 203

Slide 203 text

44px

Slide 204

Slide 204 text

88px

Slide 205

Slide 205 text

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

Slide 206

Slide 206 text

Fingertip-based grid

Slide 207

Slide 207 text

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

Slide 208

Slide 208 text

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

Slide 209

Slide 209 text

No content

Slide 210

Slide 210 text

No content

Slide 211

Slide 211 text

No content

Slide 212

Slide 212 text

No content

Slide 213

Slide 213 text

No content

Slide 214

Slide 214 text

No content

Slide 215

Slide 215 text

No content

Slide 216

Slide 216 text

No content

Slide 217

Slide 217 text

No content

Slide 218

Slide 218 text

What we learned We need ‘post-PC’ design workﬂows 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

Slide 219

Slide 219 text

No content

Slide 220

Slide 220 text

THREE

Slide 221

Slide 221 text

What we’ll cover Learning by example Navigation design patterns Content module patterns Responsive advertising

Slide 222

Slide 222 text

No content

Slide 223

Slide 223 text

No content

Slide 224

Slide 224 text

Reﬂow Transform Collapse Navigation design patterns

Slide 225

Slide 225 text

No content

Slide 226

Slide 226 text

No content

Slide 227

Slide 227 text

Reflowing navigation

Slide 228

Slide 228 text

No content

Slide 229

Slide 229 text

No content

Slide 230

Slide 230 text

Reflowing navigation

Slide 231

Slide 231 text

No content

Slide 232

Slide 232 text

No content

Slide 233

Slide 233 text

Reflowing navigation

Slide 234

Slide 234 text

No content

Slide 235

Slide 235 text

No content

Slide 236

Slide 236 text

No content

Slide 237

Slide 237 text

No content

Slide 238

Slide 238 text

No content

Slide 239

Slide 239 text

No content

Slide 240

Slide 240 text

No content

Slide 241

Slide 241 text

No content

Slide 242

Slide 242 text

No content

Slide 243

Slide 243 text

No content

Slide 244

Slide 244 text

No content

Slide 245

Slide 245 text

No content

Slide 246

Slide 246 text

No content

Slide 247

Slide 247 text

No content

Slide 248

Slide 248 text

No content

Slide 249

Slide 249 text

No content

Slide 250

Slide 250 text

No content

Slide 251

Slide 251 text

No content

Slide 252

Slide 252 text

No content

Slide 253

Slide 253 text

No content

Slide 254

Slide 254 text

No content

Slide 255

Slide 255 text

No content

Slide 256

Slide 256 text

No content

Slide 257

Slide 257 text

No content

Slide 258

Slide 258 text

No content

Slide 259

Slide 259 text

No content

Slide 260

Slide 260 text

No content

Slide 261

Slide 261 text

No content

Slide 262

Slide 262 text

No content

Slide 263

Slide 263 text

No content

Slide 264

Slide 264 text

No content

Slide 265

Slide 265 text

No content

Slide 266

Slide 266 text

No content

Slide 267

Slide 267 text

No content

Slide 268

Slide 268 text

No content

Slide 269

Slide 269 text

No content

Slide 270

Slide 270 text

No content

Slide 271

Slide 271 text

No content

Slide 272

Slide 272 text

No content

Slide 273

Slide 273 text

No content

Slide 274

Slide 274 text

No content

Slide 275

Slide 275 text

No content

Slide 276

Slide 276 text

No content

Slide 277

Slide 277 text

No content

Slide 278

Slide 278 text

No content

Slide 279

Slide 279 text

No content

Slide 280

Slide 280 text

No content

Slide 281

Slide 281 text

No content

Slide 282

Slide 282 text

No content

Slide 283

Slide 283 text

No content

Slide 284

Slide 284 text

No content

Slide 285

Slide 285 text

No content

Slide 286

Slide 286 text

No content

Slide 287

Slide 287 text

No content

Slide 288

Slide 288 text

No content

Slide 289

Slide 289 text

No content

Slide 290

Slide 290 text

No content

Slide 291

Slide 291 text

No content

Slide 292

Slide 292 text

No content

Slide 293

Slide 293 text

No content

Slide 294

Slide 294 text

No content

Slide 295

Slide 295 text

No content

Slide 296

Slide 296 text

No content

Slide 297

Slide 297 text

No content

Slide 298

Slide 298 text

No content

Slide 299

Slide 299 text

No content

Slide 300

Slide 300 text

No content

Slide 301

Slide 301 text

No content

Slide 302

Slide 302 text

No content

Slide 303

Slide 303 text

No content

Slide 304

Slide 304 text

No content

Slide 305

Slide 305 text

No content

Slide 306

Slide 306 text

No content

Slide 307

Slide 307 text

No content

Slide 308

Slide 308 text

No content

Slide 309

Slide 309 text

No content

Slide 310

Slide 310 text

No content

Slide 311

Slide 311 text

No content

Slide 312

Slide 312 text

No content

Slide 313

Slide 313 text

No content

Slide 314

Slide 314 text

No content

Slide 315

Slide 315 text

No content

Slide 316

Slide 316 text

No content

Slide 317

Slide 317 text

No content

Slide 318

Slide 318 text

No content

Slide 319

Slide 319 text

No content

Slide 320

Slide 320 text

No content

Slide 321

Slide 321 text

No content

Slide 322

Slide 322 text

No content

Slide 323

Slide 323 text

No content

Slide 324

Slide 324 text

greygoose.com

Slide 325

Slide 325 text

No content

Slide 326

Slide 326 text

No content

Slide 327

Slide 327 text

channel4.com/news

Slide 328

Slide 328 text

No content

Slide 329

Slide 329 text

No content

Slide 330

Slide 330 text

Include only essential navigation Use top navigation for common tasks Use bottom navigation for exploring Don’t duplicate navigation Navigation essentials

Slide 331

Slide 331 text

No content

Slide 332

Slide 332 text

No content

Slide 333

Slide 333 text

No content

Slide 334

Slide 334 text

No content

Slide 335

Slide 335 text

No content

Slide 336

Slide 336 text

No content

Slide 337

Slide 337 text

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)

Slide 338

Slide 338 text

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

Slide 339

Slide 339 text

For small screens, stack items vertically Item Item Item

Slide 340

Slide 340 text

Float A and B when space allows A B A B A B

Slide 341

Slide 341 text

No content

Slide 342

Slide 342 text

No content

Slide 343

Slide 343 text

No content

Slide 344

Slide 344 text

No content

Slide 345

Slide 345 text

No content

Slide 346

Slide 346 text

Item Item Item Start with ‘item’ divisions. Give them widths, float them or use display:table properties

Slide 347

Slide 347 text

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

Slide 348

Slide 348 text

A B For small screens, stack items and A and B elements vertically

Slide 349

Slide 349 text

No content

Slide 350

Slide 350 text

No content

Slide 351

Slide 351 text

No content

Slide 352

Slide 352 text

Item Item Item Start with ‘item’ divisions. Give them widths, float them or use display:table properties

Slide 353

Slide 353 text

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

Slide 354

Slide 354 text

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

Slide 355

Slide 355 text

For medium screens, stack A and B elements vertically B B C D C D

Slide 356

Slide 356 text

C B D For small screens, stack all elements (items, A, B, C and D) vertically

Slide 357

Slide 357 text

No content

Slide 358

Slide 358 text

No content

Slide 359

Slide 359 text

No content

Slide 360

Slide 360 text

No content

Slide 361

Slide 361 text

No content

Slide 362

Slide 362 text

No content

Slide 363

Slide 363 text

Remember to design for the shorter landscape format You can animate the changes to layout. (See the next slide)

Slide 364

Slide 364 text

No content

Slide 365

Slide 365 text

No content

Slide 366

Slide 366 text

No content

Slide 367

Slide 367 text

No content

Slide 368

Slide 368 text

No content

Slide 369

Slide 369 text

No content

Slide 370

Slide 370 text

No content

Slide 371

Slide 371 text

No content

Slide 372

Slide 372 text

No content

Slide 373

Slide 373 text

No content

Slide 374

Slide 374 text

No content

Slide 375

Slide 375 text

.promo-item { background-size : contain; }

Slide 376

Slide 376 text

No content

Slide 377

Slide 377 text

No content

Slide 378

Slide 378 text

No content

Slide 379

Slide 379 text

No content

Slide 380

Slide 380 text

No content

Slide 381

Slide 381 text

No content

Slide 382

Slide 382 text

No content

Slide 383

Slide 383 text

No content

Slide 384

Slide 384 text

No content

Slide 385

Slide 385 text

No content

Slide 386

Slide 386 text

No content

Slide 387

Slide 387 text

No content

Slide 388

Slide 388 text

No content

Slide 389

Slide 389 text

No content

Slide 390

Slide 390 text

No content

Slide 391

Slide 391 text

No content

Slide 392

Slide 392 text

No content

Slide 393

Slide 393 text

No content

Slide 394

Slide 394 text

No content

Slide 395

Slide 395 text

No content

Slide 396

Slide 396 text

No content

Slide 397

Slide 397 text

No content

Slide 398

Slide 398 text

No content

Slide 399

Slide 399 text

No content

Slide 400

Slide 400 text

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)

Slide 401

Slide 401 text

No content

Slide 402

Slide 402 text

Mark Boulton’s ‘slot packages’ Leaderboard Banner MMU

Slide 403

Slide 403 text

Small screens Banner

Slide 404

Slide 404 text

Medium screens Banner MMU

Slide 405

Slide 405 text

Large screens Leaderboard Banner MMU

Slide 406

Slide 406 text

Navigation

[…]

Complementary

Slide 407

Slide 407 text

.a728x90 { display : none; } 300x100 300x100 300x250

Slide 408

Slide 408 text

Complementary Main [role="main"] { float : left; width : 54.737%; /* 408px */ } [role="complementary"] { float : right; width : 40.983%; /* 300px */ min-width : 300px;} Navigation

Slide 409

Slide 409 text

300x100 300x100 300x250 Main 728x90

Slide 410

Slide 410 text

Complementary Main 728x90 300x100 300x100 300x100 Complementary Main

Slide 411

Slide 411 text

24px 24px 84px 84px 84px IMU-based grid 300 x 100 IMU (3:1 Rectangle)

Slide 412

Slide 412 text

IMU-based grid

Slide 413

Slide 413 text

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

Slide 414

Slide 414 text

No content

Slide 415

Slide 415 text

What we learned Responsive examples Navigation ﬂows, collapses and transforms Content module transformations Dealing with ﬁxed widths and responsive advertising

Slide 416

Slide 416 text

No content

Slide 417

Slide 417 text

No content

Slide 418

Slide 418 text

http://goo.gl/eg3Ob Slides http://goo.gl/py55q Resources

Slide 419

Slide 419 text

What we’ll cover Structuring media queries from small screens up Inheriting not adaptive styles Sizing text with new ﬂexible units Working with images for high ppi screens Alternatives to bitmaps CSS properties for ﬂexible layouts

Slide 420

Slide 420 text

No content

Slide 421

Slide 421 text

No content

Slide 422

Slide 422 text

No content

Slide 423

Slide 423 text

No content

Slide 424

Slide 424 text

No content

Slide 425

Slide 425 text

No content

Slide 426

Slide 426 text

No content

Slide 427

Slide 427 text

No content

Slide 428

Slide 428 text

No content

Slide 429

Slide 429 text

No content

Slide 430

Slide 430 text

No content

Slide 431

Slide 431 text

.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; } }

Slide 432

Slide 432 text

Adding media queries to desktop sites does not make a mobile experience Oh how we laughed when we realized our mistake

Slide 433

Slide 433 text

Progressive enhancement + content ﬁrst + responsive design = Content ﬁrst responsive design

Slide 434

Slide 434 text

Small screen designs are the default Media Queries scale up, not down More accessible, more responsible Content ﬁrst responsive layout

Slide 435

Slide 435 text

No content

Slide 436

Slide 436 text

@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) {…}

Slide 437

Slide 437 text

No content

Slide 438

Slide 438 text

@media screen and (min-width: 0px) and (max-width: 319px) { /* styles */ } @media screen and (min-width: 320px) and (max-width: 479px) { /* styles */ } @media screen and (min-width: 480px) and (max-width: 599px) { /* styles */ } @media screen and (min-width: 600px) and (max-width: 758px) { /* styles */ } @media screen and (min-width: 759px) and (max-width: 958px) { /* styles */ } @media screen and (min-width: 959px) { /* styles */ }

Slide 439

Slide 439 text

Developing a foundation Content Develop a foundation stylesheet Colour, texture and typography Use rems for font-sizing Mobile ﬁrst images Minimal Javascript Optimize images for performance

Slide 440

Slide 440 text

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

Slide 441

Slide 441 text

No content

Slide 442

Slide 442 text

HTML

Slide 443

Slide 443 text

@-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/

Slide 444

Slide 444 text

HTML Interpreted by mobile browsers as an indicator of mobile markup Control layout width rendered in Internet Explorer Mobile Runs full-screen on iOS devices

Slide 445

Slide 445 text

No content

Slide 446

Slide 446 text

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; /* ? */ }

Slide 447

Slide 447 text

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 */ }

Slide 448

Slide 448 text

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);

Slide 449

Slide 449 text

No content

Slide 450

Slide 450 text

No content

Slide 451

Slide 451 text

No content

Slide 452

Slide 452 text

No content

Slide 453

Slide 453 text

No content

Slide 454

Slide 454 text

No content

Slide 455

Slide 455 text

No content

Slide 456

Slide 456 text

No content

Slide 457

Slide 457 text

No content

Slide 458

Slide 458 text

No content

Slide 459

Slide 459 text

No content

Slide 460

Slide 460 text

No content

Slide 461

Slide 461 text

Sizing type with rems h1 { font-size : 32px; font-size : 3.2rem; font-size: 5.4vw; }

Slide 462

Slide 462 text

http://www.w3.org/TR/css3-values/#viewport-relative-lengths 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

Slide 463

Slide 463 text

Chrome 20+ Internet Explorer 10+ Current browser support

Slide 464

Slide 464 text

No content

Slide 465

Slide 465 text

img { max-width : 100%; }

Slide 466

Slide 466 text

No content

Slide 467

Slide 467 text

186px 195px 372px 390px

Slide 468

Slide 468 text

477px 455px 910px x 955px

Slide 469

Slide 469 text

http://itunes.apple.com/gb/app/duplex/id551984804 http://macrabbit.com/slicy

Slide 470

Slide 470 text

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

Slide 471

Slide 471 text

No content

Slide 472

Slide 472 text

No content

Slide 473

Slide 473 text

No content

Slide 474

Slide 474 text

http://www.jpegmini.com http://www.pngmini.com

Slide 475

Slide 475 text

[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; } }

Slide 476

Slide 476 text

sprite.png [email protected]

Slide 477

Slide 477 text

.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; } }

Slide 478

Slide 478 text

No content

Slide 479

Slide 479 text

No content

Slide 480

Slide 480 text

No content

Slide 481

Slide 481 text

No content

Slide 482

Slide 482 text

No content

Slide 483

Slide 483 text

No content

Slide 484

Slide 484 text

10px 10px 10px 10px 10px 10px

Slide 485

Slide 485 text

1 2 3 4 6 7 8 9 5 10px 10px 10px 10px 10px 10px

Slide 486

Slide 486 text

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; }

Slide 487

Slide 487 text

10px 20px 30px 40px

Slide 488

Slide 488 text

1 2 3 4 6 7 8 9

Slide 489

Slide 489 text

button { border-image-slice : 10 10 10 10 fill; border-image-source : url(button.png); } http://blog.assortedgarbage.com/2011/12/change-happens

Slide 490

Slide 490 text

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

Slide 491

Slide 491 text

No content

Slide 492

Slide 492 text

No content

Slide 493

Slide 493 text

40px 32px 25px 14px input[type="search" { height : 22px; padding : 5px 1px 5px 5px; border-image : url(search.png) 0 14 0 25; border-width : 0 14px 0 25px; }

Slide 494

Slide 494 text

Don’t assume that screen size relates to browser capabilities

Slide 495

Slide 495 text

Trackball Touchscreen Trackpad

Slide 496

Slide 496 text

No content

Slide 497

Slide 497 text

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

Slide 498

Slide 498 text

Use Modernizr to detect touch capabilities Design alternatives to hover-based menus Consider hover

Slide 499

Slide 499 text

No content

Slide 500

Slide 500 text

No content

Slide 501

Slide 501 text

No content

Slide 502

Slide 502 text

No content

Slide 503

Slide 503 text

No content

Slide 504

Slide 504 text

No content

Slide 505

Slide 505 text

No content

Slide 506

Slide 506 text

No content

Slide 507

Slide 507 text

No content

Slide 508

Slide 508 text

[Content]

[Navigation] Content Navigation

Slide 509

Slide 509 text

Content Navigation

[Content]

[Navigation]

Slide 510

Slide 510 text

Display table properties display : table Deﬁnes 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

Slide 511

Slide 511 text

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

Slide 512

Slide 512 text

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

Slide 513

Slide 513 text

Content

Navigation [Content]

[Navigation] Navigation

Slide 514

Slide 514 text

@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

Slide 515

Slide 515 text

Content Navigation .content { display : table; border-collapse : collapse; }

Slide 516

Slide 516 text

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

Slide 517

Slide 517 text

Complementary Main [role="main"] { width : 71.87%; } [role="complementary"] { width : 28.12%; } Navigation

Slide 518

Slide 518 text

No content

Slide 519

Slide 519 text

No content

Slide 520

Slide 520 text

[Navigation] [Banner]

Banner Navigation

Slide 521

Slide 521 text

Navigation Banner @media only screen and (min-width: 600px) { .ihatetimvandamme { display : table; } [role="banner"] { display : table-header-group; } }

Slide 522

Slide 522 text

Col Col Col .content { overflow : hidden; } .col { display : table-cell; width : 33.33%; }

Slide 523

Slide 523 text

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

Slide 524

Slide 524 text

.col:nth-of-type(2) { position : relative; } .col:nth-of-type(2) img { position : absolute; right : 0; } Col

Slide 525

Slide 525 text

.col:nth-of-type(2) .inner { position : relative; } .col:nth-of-type(2) .inner img { position : absolute; right : 0; } Inner

Slide 526

Slide 526 text

No content

Slide 527

Slide 527 text

Box-img

Books and articles

As well as articles…

Box-details

Slide 528

Slide 528 text

Box-img .box-img { background-image : url(b.png); height : 180px; } Box-details

Slide 529

Slide 529 text

No content

Slide 530

Slide 530 text

Box-img Box-details #box-writing { display : table; } .box-details, .box-img { display : table-cell; }

Slide 531

Slide 531 text

Box-img Box-details .box-img { background-image : url(b2.png); background-position : 100% 50%; height : auto; }

Slide 532

Slide 532 text

No content

Slide 533

Slide 533 text

Really? Really what? You mean there’s more ?

Slide 534

Slide 534 text

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

Slide 535

Slide 535 text

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

Slide 536

Slide 536 text

No content

Slide 537

Slide 537 text

No content

Slide 538

Slide 538 text

[…]

Slide 539

Slide 539 text

#hero #hero-wrapper { min-height : 100%; } /* desktop - fallback */ #hero #hero-wrapper { height : 660px; background-image : url(hero_fallback.jpg); } /* desktop - responsive */ #hero .hero-image { min-height : 670px; background-image : url(hero.jpg); }

Slide 540

Slide 540 text

/* desktop - responsive */ @media only screen and (min-height : 1060px) { body.responsive #hero #hero-wrapper { max-height : 1180px; } body.responsive #hero .hero-image { width : 980px; height : 72%; background-size : auto 98%; } }

Slide 541

Slide 541 text

/* desktop - iPad portrait */ @media only screen and (min-device-width : 481px) and (max-device-width : 768px) and (orientation : portrait) { } /* desktop - iPad landscape */ @media only screen and (min-device-width : 481px) and (max-device-width : 768px) and (orientation : landscape) { }

Slide 542

Slide 542 text

/* iPhone / touch */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) { } @media only screen and (min-device-width : 481px) and (max-device-width : 768px) and (orientation : landscape) { }

Slide 543

Slide 543 text

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

Slide 544

Slide 544 text

No content

Slide 545

Slide 545 text

http://goo.gl/eg3Ob Slides

Slide 546

Slide 546 text

Conference talks and podcasts URLs from my talk, Bringing a Knife to a Gunﬁght http://goo.gl/yGOKR Responsive Design Workﬂow by Stephen Hay http://goo.gl/2dEhe Building Responsive Layouts by Zoe Gillenwater http://goo.gl/OtlXo Pragmatic responsive design by Stephanie Rieger http://goo.gl/W1BXG

Slide 547

Slide 547 text

No content

Slide 548

Slide 548 text

No content

Slide 549

Slide 549 text

@malarkey

Slide 550

Slide 550 text

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

Slide 551

Slide 551 text

No content