Fashionably flexible responsive web design (full day workshop)

Slide 1

Slide 1 text

RESPONSIVE WEB DESIGN FASHIONABLY FLEXIBLE Andy(Clarke 1.4

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

My book Available in paperback and e-book formats hardboiledwebdesign.com

Slide 4

Slide 4 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 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

1 Part FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN

Slide 8

Slide 8 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 flexibility. http://www.alistapart.com/articles/dao

Slide 9

Slide 9 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 10

Slide 10 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 11

Slide 11 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 12

Slide 12 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 13

Slide 13 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 14

Slide 14 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 15

Slide 15 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 16

Slide 16 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 17

Slide 17 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 18

Slide 18 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 19

Slide 19 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 20

Slide 20 text

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

Slide 21

Slide 21 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 22

Slide 22 text

• 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 trafﬁc comes from mobile devices • 33% of Facebook updates come from mobile devices SMARTPHONES Source: http://lukew.com/ff/entry.asp?1450

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

• 1 iPhone accounts for the mobile trafﬁc 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

Slide 25

Slide 25 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 26

Slide 26 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 27

Slide 27 text

• 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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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/

Slide 31

Slide 31 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

Slide 32

Slide 32 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 33

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 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 36

Slide 36 text

640x480

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

800x600

Slide 41

Slide 41 text

1024x768

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

320x480

Slide 46

Slide 46 text

320x420

Slide 47

Slide 47 text

420x320

Slide 48

Slide 48 text

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

Slide 49

Slide 49 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 fixed-width red herring. http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart Jeremy Keith

Slide 50

Slide 50 text

340x480

Slide 51

Slide 51 text

340x480 640x480 800x1200 720x1280 640X960 800x1280

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

On the web there are no edges

Slide 55

Slide 55 text

Tools reinforce notions such as the canvas

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 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 59

Slide 59 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 60

Slide 60 text

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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

[Style tiles]

Slide 65

Slide 65 text

No content

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

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

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

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

FRV BRAND GUIDELINES ES

Slide 80

Slide 80 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 81

Slide 81 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 82

Slide 82 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 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 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 89

Slide 89 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 90

Slide 90 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 91

Slide 91 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 92

Slide 92 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 93

Slide 93 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 94

Slide 94 text

2 Part FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN

Slide 95

Slide 95 text

Plan Design Develop Deploy

Slide 96

Slide 96 text

Plan Deploy Design Hat tip to Ethan Marcotte

Slide 97

Slide 97 text

Discussion

Slide 98

Slide 98 text

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/

Slide 99

Slide 99 text

Step one Design a ﬂexible 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 (ﬁrst iteration)

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

Step three Create detailed visuals based on prototypes Draft copy, data and images (second iteration) Develop ﬁnal responsive templates

Slide 102

Slide 102 text

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)

Slide 103

Slide 103 text

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/

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 2 Part PREPARING RESPONSIVE CONTENT

Slide 106

Slide 106 text

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.braintrafﬁc.com/2012/01/content-strategy-and-responsive-design

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

Prioritising content

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

Stephanie Rieger We need to make smarter content, not smarter containers.

Slide 114

Slide 114 text

Linearising content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

RESPONSIVE TYPOGRAPHY FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN Hosted by Andy Clarke 2 Part

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

iOS 5.0 58 Android 2.3 3 Source: http://goo.gl/rJkVi Fonts installed

Slide 123

Slide 123 text

No content

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

T ip: T est body text sizes with users during the design phase

Slide 130

Slide 130 text

http://goo.gl/o23Vc

Slide 131

Slide 131 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 132

Slide 132 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 133

Slide 133 text

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

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

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

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

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

Slide 142

Slide 142 text

No content

Slide 143

Slide 143 text

No content

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

http://ﬁttextjs.com

Slide 146

Slide 146 text

No content

Slide 147

Slide 147 text

FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 2 Part DESIGNING RESPONSIVE GRIDS

Slide 148

Slide 148 text

A ﬂuid grid

Slide 149

Slide 149 text

target ÷ context = result 896px

Slide 150

Slide 150 text

target ÷ 896 = result 252px 620px

Slide 151

Slide 151 text

252 ÷ 896 = 28.12% 620 ÷ 896 = 69.19% * Based on one break starting point. More on that in just a minute *

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

No content

Slide 156

Slide 156 text

Less Framework grid

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

No single formula

Slide 160

Slide 160 text

252 is 28.12% of 896

Slide 161

Slide 161 text

252 is 35.39% of 712

Slide 162

Slide 162 text

252 is 47.72% of 528

Slide 163

Slide 163 text

252 is 100% of 252

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

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 172

Slide 172 text

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

Slide 173

Slide 173 text

IMU-based grid

Slide 174

Slide 174 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 175

Slide 175 text

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)

Slide 176

Slide 176 text

728 x 90 IMU (Leaderboard) 948px 992.css 732px 768.css 728 x 90 IMU (Leaderboard)

Slide 177

Slide 177 text

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

Slide 178

Slide 178 text

44px

Slide 179

Slide 179 text

44px

Slide 180

Slide 180 text

44px

Slide 181

Slide 181 text

88px

Slide 182

Slide 182 text

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

Slide 183

Slide 183 text

Fingertip-based grid

Slide 184

Slide 184 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 185

Slide 185 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 186

Slide 186 text

Fingertip-based baseline 11px 22px 44px

Slide 187

Slide 187 text

44px 44px vertical rhythm

Slide 188

Slide 188 text

11px 44px 22px Baseline, margins and touch targets are multiples of 44px

Slide 189

Slide 189 text

Use a different grid for each breakpoint

Slide 190

Slide 190 text

No content

Slide 191

Slide 191 text

No content

Slide 192

Slide 192 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 193

Slide 193 text

No content

Slide 194

Slide 194 text

No content

Slide 195

Slide 195 text

No content

Slide 196

Slide 196 text

FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 2 Part RESPONSIVE BREAKPOINTS

Slide 197

Slide 197 text

[Responsive data tables]

Slide 198

Slide 198 text

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

Slide 199

Slide 199 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 200

Slide 200 text

There’s no one perfect set of breakpoints

Slide 201

Slide 201 text

Trent Walton To think about the web responsively is to think about proportions, not pixels. Speaking at New Adventures In Web Design, January 2012

Slide 202

Slide 202 text

Keep markup free from presentational attributes For layout, convert pixels to percentages Use ems or rems for font sizing A ﬂexible foundation is critical

Slide 203

Slide 203 text

[Responsive data tables]

Slide 204

Slide 204 text

[Responsive data tables]

Slide 205

Slide 205 text

[Responsive data tables]

Slide 206

Slide 206 text

320x480

480x640

Slide 207

Slide 207 text

[Responsive data tables]

Slide 208

Slide 208 text

[Responsive data tables]

Slide 209

Slide 209 text

[Responsive data tables]

Slide 210

Slide 210 text

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

Slide 211

Slide 211 text

340x480 640x960 640x480 360x480 480x800 480x800 720x1280 480x800 540x960 480x800 540x960 540x960 320x480 800x1280 Source: http://phone-size.com

Slide 212

Slide 212 text

No content

Slide 213

Slide 213 text

600x819

Slide 214

Slide 214 text

1024x395

Slide 215

Slide 215 text

[Responsive data tables]

Slide 216

Slide 216 text

FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 3 Part

Slide 217

Slide 217 text

http://appsketchbook.com/products/responsive-design-sketchbook

Slide 218

Slide 218 text

PROJECT NOTES http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets These sketch sheets are in the resources download

Slide 219

Slide 219 text

PROJECT NOTES

Slide 220

Slide 220 text

FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 3 Part NAVIGATION DESIGN PATTERNS

Slide 221

Slide 221 text

Reﬂow Transform Collapse Navigation design patterns

Slide 222

Slide 222 text

No content

Slide 223

Slide 223 text

No content

Slide 224

Slide 224 text

Reflowing of navigation

Slide 225

Slide 225 text

No content

Slide 226

Slide 226 text

No content

Slide 227

Slide 227 text

Reflowing of navigation

Slide 228

Slide 228 text

No content

Slide 229

Slide 229 text

No content

Slide 230

Slide 230 text

Navigation linearised

Slide 231

Slide 231 text

No content

Slide 232

Slide 232 text

No content

Slide 233

Slide 233 text

Where did the links to RSS and Twitter go?

Slide 234

Slide 234 text

Links don’t show up in landscape orientation either

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 fast and easy way to switch to comments

Slide 239

Slide 239 text

Unclear navigation

Slide 240

Slide 240 text

No content

Slide 241

Slide 241 text

No content

Slide 242

Slide 242 text

Icons removed from navigation, to save vertical space?

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

Rolling up all navigation into a grid of icons is a nice touch

Slide 250

Slide 250 text

Not an exact recreation of United Pixel Workers

Slide 251

Slide 251 text

Responsive Web Design

Help
Cart
Email
Twitter

Three elements: Header, h1 and nav

Slide 252

Slide 252 text

[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

Slide 253

Slide 253 text

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

Slide 254

Slide 254 text

[…]
[…]
[…]
[…]

Add class or id attributes, or use :nth-child pseudo-class selectors

Slide 255

Slide 255 text

.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

Slide 256

Slide 256 text

@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

Slide 257

Slide 257 text

[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

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

Collapsing navigation and search into a drop-down interface

Slide 263

Slide 263 text

T ap icon to reveal search input

Slide 264

Slide 264 text

No content

Slide 265

Slide 265 text

[Responsive data tables]

Slide 266

Slide 266 text

No content

Slide 267

Slide 267 text

No content

Slide 268

Slide 268 text

Collapsing navigation into a ‘show‘ (menu) button

Slide 269

Slide 269 text

Collapsing navigation into a ‘show‘ (menu) button

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

Collapsing navigation into a drop-down interface

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

Collapsing navigation into a menu icon

Slide 281

Slide 281 text

Collapsing navigation into a menu icon

Slide 282

Slide 282 text

Good use of the X close icon. Should this be a standard?

Slide 283

Slide 283 text

No content

Slide 284

Slide 284 text

No content

Slide 285

Slide 285 text

Collapsing navigation into a ‘menu’ button

Slide 286

Slide 286 text

Collapsing navigation into a ‘menu’ button

Slide 287

Slide 287 text

Making good use of large touch targets. More on that later

Slide 288

Slide 288 text

No content

Slide 289

Slide 289 text

No content

Slide 290

Slide 290 text

Javascript converts unordered list into a select menu.

Slide 291

Slide 291 text

Javascript converts unordered list into a select menu.

Slide 292

Slide 292 text

No content

Slide 293

Slide 293 text

Native iPhone select menu interface used as navigation

Slide 294

Slide 294 text

Native iPhone select menu interface used as navigation

Slide 295

Slide 295 text

No content

Slide 296

Slide 296 text

No content

Slide 297

Slide 297 text

Collapsing navigation into a ‘menu’ button

Slide 298

Slide 298 text

Collapsing navigation into a ‘menu’ button

Slide 299

Slide 299 text

T ransforming links into a grid of icons. Nice touch!

Slide 300

Slide 300 text

This is a mobile, not a responsive site Collapsing navigation into a ‘menu’ button

Slide 301

Slide 301 text

T ransforming links into a grid of icons.

Slide 302

Slide 302 text

Home
Chat
Feed
Email
Bookmark
Tag
Schedule
Flag
Delete

Two elements: Nav and unordered list

Slide 303

Slide 303 text

[…]
[…]
[…]
[…]
[…]
[…]
[…]
[…]
[…]

Add class or id attributes, or use :nth-child pseudo-class selectors

Slide 304

Slide 304 text

[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

Slide 305

Slide 305 text

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

Slide 306

Slide 306 text

[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

Slide 307

Slide 307 text

@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

Slide 308

Slide 308 text

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

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

Collapsing navigation into an accordion interface

Slide 323

Slide 323 text

No content

Slide 324

Slide 324 text

No content

Slide 325

Slide 325 text

No content

Slide 326

Slide 326 text

What happened to the footer? How can we improve the design?

Slide 327

Slide 327 text

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

Slide 328

Slide 328 text

No content

Slide 329

Slide 329 text

This is a mobile, not a responsive site

Slide 330

Slide 330 text

Minimum navigation , maximum content

Slide 331

Slide 331 text

Minimum navigation , maximum content

Slide 332

Slide 332 text

This is a mobile, not a responsive site Minimum navigation , maximum content

Slide 333

Slide 333 text

T ap to reveal search

Slide 334

Slide 334 text

Full navigation page

Slide 335

Slide 335 text

Minimum navigation , maximum content This is a mobile, not a responsive site

Slide 336

Slide 336 text

This is a mobile, not a responsive site Minimum navigation , maximum content

Slide 337

Slide 337 text

This is a mobile, not a responsive site Maximum content, minimum navigation, although touch targets are too small. (More on that later.)

Slide 338

Slide 338 text

This is a mobile, not a responsive site Maximum navigation

Slide 339

Slide 339 text

This is a mobile, not a responsive site Maximum navigation

Slide 340

Slide 340 text

This is a mobile, not a responsive site Maximum navigation

Slide 341

Slide 341 text

This is a mobile, not a responsive site Full navigation page

Slide 342

Slide 342 text

No content

Slide 343

Slide 343 text

Home Who we are What we believe in What we make

Slide 344

Slide 344 text

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

Slide 345

Slide 345 text

Easy Easy Reach Hard Easy

Slide 346

Slide 346 text

Design to a 44px rhythm Be generous with space Content ﬁrst, navigation second Hide secondary navigation Finger-friendly design Adapted from: http://goo.gl/oQINj

Slide 347

Slide 347 text

FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 3 Part MODULE DESIGN PATTERNS

Slide 348

Slide 348 text

No content

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

It would be better to float the calorie count and ‘nutrition facts.’ Embrace the flow. Watch out for excessive vertical whitespace

Slide 353

Slide 353 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 354

Slide 354 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 355

Slide 355 text

For small screens, stack items vertically Item Item Item

Slide 356

Slide 356 text

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

Slide 357

Slide 357 text

No content

Slide 358

Slide 358 text

No content

Slide 359

Slide 359 text

Linearising content and allowing images to scale to 100% is a common technique

Slide 360

Slide 360 text

Item Item Item Start with ‘item’ divisions. Give them widths, float them or use display:table properties. Increase gutters to balance the columns

Slide 361

Slide 361 text

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

Slide 362

Slide 362 text

Item Item For medium screens, stack items vertically

Slide 363

Slide 363 text

For medium screens, float A and B elements A B A B

Slide 364

Slide 364 text

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

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

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

Slide 371

Slide 371 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 372

Slide 372 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 373

Slide 373 text

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

Slide 374

Slide 374 text

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

Slide 375

Slide 375 text

No content

Slide 376

Slide 376 text

No content

Slide 377

Slide 377 text

Reflowing of branding and navigation Ooops. The Boston Globe has lost its position at the top of the visual hierarchy

Slide 378

Slide 378 text

Two column grid in portrait

Slide 379

Slide 379 text

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

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

Serving an image that’s larger in height helps maintain hierarchy

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

Item

[…]

Slide 392

Slide 392 text

Item .item { float : left; width : 28.12%; margin-right : 7.81%; } .item:last-child { margin-right : 0; }

Slide 393

Slide 393 text

A B

[…]

Slide 394

Slide 394 text

A B .a { float : left; width : 35.39%; margin-right : 3.37%; } .b { float : left; width : 61.23%; }

Slide 395

Slide 395 text

No content

Slide 396

Slide 396 text

No content

Slide 397

Slide 397 text

Adds “select category” label Javascript converts unordered list into a select menu.

Slide 398

Slide 398 text

Native iPhone select menu interface. What might happen with longer options or non-English languages?

Slide 399

Slide 399 text

No content

Slide 400

Slide 400 text

No content

Slide 401

Slide 401 text

Ooops! Background images cut off at smaller sizes. We can fix that with CSS3

Slide 402

Slide 402 text

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

Slide 403

Slide 403 text

No content

Slide 404

Slide 404 text

No content

Slide 405

Slide 405 text

No content

Slide 406

Slide 406 text

Adjust the number of columns for small screens Watch out for excessive vertical whitespace

Slide 407

Slide 407 text

4 Part FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN

Slide 408

Slide 408 text

No content

Slide 409

Slide 409 text

No content

Slide 410

Slide 410 text

No content

Slide 411

Slide 411 text

No content

Slide 412

Slide 412 text

No content

Slide 413

Slide 413 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 414

Slide 414 text

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

Slide 415

Slide 415 text

Adding icons to navigation is a nice touch

Slide 416

Slide 416 text

Slide 417

Slide 417 text

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

Slide 418

Slide 418 text

// 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) { }

Slide 419

Slide 419 text

No content

Slide 420

Slide 420 text

No content

Slide 421

Slide 421 text

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

Slide 422

Slide 422 text

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

Slide 423

Slide 423 text

No content

Slide 424

Slide 424 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 425

Slide 425 text

Slide 426

Slide 426 text

No content

Slide 427

Slide 427 text

No content

Slide 428

Slide 428 text

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

Slide 429

Slide 429 text

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 ﬁxed-widths for Internet Explorer 6–8

Slide 430

Slide 430 text

Slide 431

Slide 431 text

@media screen and (min-width : 240px) { /* Some Android and Blackberry devices (p) */ } @media screen and (min-width : 640px) { /* Some Symbian devices */ } @media screen and (min-width : 800px) { /* Some tablets */ }

Slide 432

Slide 432 text

FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 4 Part FLEXIBLE LAYOUT

Slide 433

Slide 433 text

Navigation Complementary Main […]

[…]

A simple, two-column responsive layout

Slide 434

Slide 434 text

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

Slide 435

Slide 435 text

Complementary Main [role="main"] { width : 69.19%; /* 620px */ } [role="complementary"] { width : 28.12%; /* 252px */ } Navigation

Slide 436

Slide 436 text

What’s with the whitespace?

Slide 437

Slide 437 text

No content

Slide 438

Slide 438 text

No content

Slide 439

Slide 439 text

No content

Slide 440

Slide 440 text

Navigation Content […]

[…]

A more complex responsive layout

Slide 441

Slide 441 text

Navigation Complementary Main […]

[…]

Slide 442

Slide 442 text

Navigation

[…]

Content-sub Content-main Complementary

Slide 443

Slide 443 text

[role="navigation"], .content { width : 90%; margin : 0 auto; } Navigation Content kindle

Slide 444

Slide 444 text

.content-sub { float : left; width : 30.3%; /* 160px */ } .content-main { float : right; width : 65.15%; /* 344px */ } Content-sub Content-main kindle Navigation

Slide 445

Slide 445 text

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

Slide 446

Slide 446 text

Content-sub Content-main .content-sub, .content-main { float : none; width : auto; }

Slide 447

Slide 447 text

Complementary Main [role="main"] { width : 69.19%; /* 620px */ } [role="complementary"] { width : 28.12%; /* 252px */ } Navigation

Slide 448

Slide 448 text

Navigation Complementary .content-sub { float : left; width : 25.8%; /* 160px */ } .content-main { float : right; width : 70.32%; /* 436px */ } Content-sub Content-main

Slide 449

Slide 449 text

Nav Content [role="navigation"] { float : left; width : 11.79%; /* 160px */ } .content { float : right; width : 86.43%; /* 1172px */ }

Slide 450

Slide 450 text

Nav [role="main"] { width : 76.45%; /* 896px */ } [role="complementary"] { width : 21.5%; /* 252px */ } Complementary Main

Slide 451

Slide 451 text

Nav Complementary .content-sub { width : 17.85%; /* 160px */ } .content-main { width : 79.46%; /* 712px */ } Content-sub Content-main

Slide 452

Slide 452 text

Vertical ﬂipping

Slide 453

Slide 453 text

No content

Slide 454

Slide 454 text

Home Who we are What we believe in What we make

Slide 455

Slide 455 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 456

Slide 456 text

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

Slide 457

Slide 457 text

Complementary Main [role="main"], [role="complementary"] { display : table-cell; }

Slide 458

Slide 458 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 459

Slide 459 text

Navigation Content

Navigation […]

[…] Vertical flip using display:table properties

Slide 460

Slide 460 text

a[href="#nav"] { display : none; } body { display : table; border-collapse : collapse; } [role="navigation"] { display : table-header-group; } Content Navigation

Slide 461

Slide 461 text

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

Slide 462

Slide 462 text

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

Slide 463

Slide 463 text

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

Slide 464

Slide 464 text

Handling ﬁxed-width content

Slide 465

Slide 465 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 466

Slide 466 text

No content

Slide 467

Slide 467 text

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

Slide 468

Slide 468 text

Mark Boulton’s ‘slot packages’ Leaderboard Banner MMU

Slide 469

Slide 469 text

Small screens Banner

Slide 470

Slide 470 text

Medium screens Banner MMU

Slide 471

Slide 471 text

Large screens Leaderboard Banner MMU

Slide 472

Slide 472 text

Navigation Content […]

[…]

Slide 473

Slide 473 text

Navigation Main Complementary […]

[…]

Slide 474

Slide 474 text

Navigation

[…]

Complementary

Slide 475

Slide 475 text

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

Slide 476

Slide 476 text

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

Slide 477

Slide 477 text

300x100 300x100 300x250 Main 728x90

Slide 478

Slide 478 text

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

Slide 479

Slide 479 text

FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 4 Part RESPONSIVE IMAGES

Slide 480

Slide 480 text

img { max-width : 100%; }

Slide 481

Slide 481 text

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

Slide 482

Slide 482 text

960 x 1280

Slide 483

Slide 483 text

960 x 1280 320 x 426

Slide 484

Slide 484 text

No content

Slide 485

Slide 485 text

Slide 486

Slide 486 text

A small image should be default Don’t load images twice Adaptive images

Slide 487

Slide 487 text

Small image is the default Larger image is loaded when width allows Apparent speed vs actual speed Responsive Enhance

Slide 488

Slide 488 text

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/

Slide 489

Slide 489 text

No content

Slide 490

Slide 490 text

responsiveEnhance(document.getElementById('img1'), 400); responsiveEnhance(document.getElementById('img2'), 300); responsiveEnhance(document.getElementById('img3'), 200);

Slide 491

Slide 491 text

img, object { max-width : 100%; }

Slide 492

Slide 492 text

http://ﬁtvidsjs.com

Slide 493

Slide 493 text

No content

Slide 494

Slide 494 text

[…]

.video { position : relative; padding-bottom : 20%; height : 0; } .video object { position : absolute; top : 0; left : 0; width : 100%; height : 100%; } CSS

Slide 495

Slide 495 text

FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN 4 Part RESPONSIVE DATA TABLES

Slide 496

Slide 496 text

No content

Slide 497

Slide 497 text

No content

Slide 498

Slide 498 text

No content

Slide 499

Slide 499 text

No content

Slide 500

Slide 500 text

No content

Slide 501

Slide 501 text

[Responsive data tables]

Slide 502

Slide 502 text

Don’t assume that screen size relates to browser capabilities

Slide 503

Slide 503 text

Trackball Touchscreen Trackpad

Slide 504

Slide 504 text

[Modernizr]

Slide 505

Slide 505 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 506

Slide 506 text

Use Modernizr to detect touch Design alternative without hover-based menus Move content and tools from hover-based menus Consider hover

Slide 507

Slide 507 text

No content

Slide 508

Slide 508 text

No content

Slide 509

Slide 509 text

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

Slide 510

Slide 510 text

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

Slide 511

Slide 511 text

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

Slide 512

Slide 512 text

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

Slide 513

Slide 513 text

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

Slide 514

Slide 514 text

@malarkey

Slide 515

Slide 515 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