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

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

ONE

Slide 15

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

Slide 16 text

• 102 million people accessed Facebook solely through their mobile device in June 2012 (up 23% from 83m in March.) • 24% of Black Friday retail trafﬁc in 2012 came from mobile devices, 14.3% in 2011 and 5.5% in 2010. • In August 2012, 77% of TV viewers used another device at the same time in a typical day. 81% used a smartphone and TV at the same time. SMARTPHONES Source: http://lukew.com/ff/entry.asp?1450 http://lukew.com/ff/entry.asp?1624 http://lukew.com/ff/entry.asp?1665

Slide 17

Slide 17 text

http://www.lukew.com/ff/entry.asp?1506 Mobile gross volume $600M $2B $5B 2009 2010 2011

Slide 18

Slide 18 text

• iOS accounts for 54.65% of mobile browsing. Android has 16.26% and RIM 3.29% • 75% of Google’s mobile search comes from iOS devices • 70% of eBay’s mobile e-commerce business in the United States came from iPhone • More iPhones are sold every day worldwide than there are babies born, 378,00 vs 371,00 IPHONES Source: http://lukew.com/ff/entry.asp?1415 http://www.lukew.com/ff/entry.asp?1506

Slide 19

Slide 19 text

• Amazon now sells more Kindle books than all print books (hardcover and paperback) combined • Adult e-books sales grew from 66.6 million in January 2011 to 99.5 million in January 2012 E-READERS Source: http://lukew.com/ff/entry.asp?1391 http://lukew.com/ff/entry.asp?1536

Slide 20

Slide 20 text

• The share e-book reader owners in the USA jumped from 10% to 19% between mid-December 2011 and early January 2012. • Kindle Fire has become the best-selling, most-gifted and most-wished-for product on Amazon. • Gifting of Kindle books up 175% between Black Friday and Christmas Day 2011 compared to the same period in 2010. • The #1 and #4 best-selling Kindle books released in 2011 were published using Kindle Direct Publishing. KINDLE SALES Source: http://www.lukew.com/ff/entry.asp?1488

Slide 21

Slide 21 text

• Over 100m iPads sold to date (October 2012) • 52% of worldwide tablet marketshare is iPad (October 2012) • 95.5% of all the web trafﬁc from tablets comes from iPad (October 2012) • Nearly 7 percent of all online purchases were made using iPads • iPad and iPhone shoppers account for 90% of all mobile purchases and spend 19% more per order than Android users TABLETS IPADS

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

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

Slide 25 text

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

Slide 26

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

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

Slide 28 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 29

Slide 29 text

640x480

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

800x600

Slide 32

Slide 32 text

1024x768

Slide 33

Slide 33 text

No content

Slide 34

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

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

320x420 320x420

Slide 38

Slide 38 text

420x320

Slide 39

Slide 39 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 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

⌘N

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 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 46

Slide 46 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 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

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

Slide 59 text

Design atmosphere 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

No content

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

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

FRV BRAND GUIDELINES ES

Slide 67

Slide 67 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 68

Slide 68 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 69

Slide 69 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 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 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 73

Slide 73 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 74

Slide 74 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 75

Slide 75 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 76

Slide 76 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 77

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

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 84

Slide 84 text

No content

Slide 85

Slide 85 text

TWO

Slide 86

Slide 86 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 87

Slide 87 text

Plan Design Develop Deploy Hat tip to Ethan Marcotte

Slide 88

Slide 88 text

Plan Design Develop Deploy

Slide 89

Slide 89 text

Plan Deploy

Slide 90

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

Slide 91 text

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

No content

Slide 94

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

Slide 95 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 96

Slide 96 text

Slide 97

Slide 97 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 98

Slide 98 text

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

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 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 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 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 106

Slide 106 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 107

Slide 107 text

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

Slide 108

Slide 108 text

No content

Slide 109

Slide 109 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 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

Slide 117

Slide 117 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 118

Slide 118 text

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

Slide 119

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

No content

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

No content

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

No content

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

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

Slide 132

Slide 132 text

No content

Slide 133

Slide 133 text

No content

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

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

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

Slide 142

Slide 142 text

http://goo.gl/o23Vc

Slide 143

Slide 143 text

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

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

No content

Slide 150

Slide 150 text

No content

Slide 151

Slide 151 text

No content

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

No content

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 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 156

Slide 156 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 157

Slide 157 text

http://itunes.apple.com/us/app/aptus/id510487565 http://html.adobe.com/edge/inspect/

Slide 158

Slide 158 text

No content

Slide 159

Slide 159 text

No content

Slide 160

Slide 160 text

No content

Slide 161

Slide 161 text

No content

Slide 162

Slide 162 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 < 5, Android and some Symbian devices (l) Some tablets and e-readers Some Symbian Touch (l) iPad and some tablets (p) Some tablets Some tablets, most netbooks, many desktops Some tablets Many laptops Hat tip to Stephanie Rieger

Slide 163

Slide 163 text

480 x 320

Slide 164

Slide 164 text

568 x 320

Slide 165

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

No content

Slide 172

Slide 172 text

No content

Slide 173

Slide 173 text

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

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

A ﬂuid grid

Slide 179

Slide 179 text

target ÷ context = result 896px

Slide 180

Slide 180 text

target ÷ 896 = result 252px 620px

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

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

No content

Slide 187

Slide 187 text

No content

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

No content

Slide 192

Slide 192 text

No content

Slide 193

Slide 193 text

No content

Slide 194

Slide 194 text

No content

Slide 195

Slide 195 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 196

Slide 196 text

No content

Slide 197

Slide 197 text

THREE

Slide 198

Slide 198 text

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

Slide 199

Slide 199 text

No content

Slide 200

Slide 200 text

No content

Slide 201

Slide 201 text

Reﬂow Transform Collapse Navigation design patterns

Slide 202

Slide 202 text

No content

Slide 203

Slide 203 text

No content

Slide 204

Slide 204 text

Reflowing navigation

Slide 205

Slide 205 text

No content

Slide 206

Slide 206 text

No content

Slide 207

Slide 207 text

Reflowing navigation

Slide 208

Slide 208 text

No content

Slide 209

Slide 209 text

No content

Slide 210

Slide 210 text

Reflowing navigation

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

No content

Slide 219

Slide 219 text

No content

Slide 220

Slide 220 text

No content

Slide 221

Slide 221 text

No content

Slide 222

Slide 222 text

No content

Slide 223

Slide 223 text

No content

Slide 224

Slide 224 text

No content

Slide 225

Slide 225 text

No content

Slide 226

Slide 226 text

No content

Slide 227

Slide 227 text

No content

Slide 228

Slide 228 text

No content

Slide 229

Slide 229 text

No content

Slide 230

Slide 230 text

No content

Slide 231

Slide 231 text

No content

Slide 232

Slide 232 text

No content

Slide 233

Slide 233 text

No content

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

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

http://currys.co.uk/gbuk/index.html

Slide 299

Slide 299 text

monocle.com

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

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

Slide 305

Slide 305 text

No content

Slide 306

Slide 306 text

Stack Float Transform Content module patterns

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

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 313

Slide 313 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 314

Slide 314 text

For small screens, stack items vertically Item Item Item

Slide 315

Slide 315 text

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

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

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

Slide 322

Slide 322 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 323

Slide 323 text

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

Slide 324

Slide 324 text

No content

Slide 325

Slide 325 text

No content

Slide 326

Slide 326 text

No content

Slide 327

Slide 327 text

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

Slide 328

Slide 328 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 329

Slide 329 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 330

Slide 330 text

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

Slide 331

Slide 331 text

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

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

Item Item For small screens, stack items vertically

Slide 336

Slide 336 text

Item Item Item For medium and larger screens, arrange items horizontally

Slide 337

Slide 337 text

No content

Slide 338

Slide 338 text

No content

Slide 339

Slide 339 text

No content

Slide 340

Slide 340 text

No content

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

No content

Slide 347

Slide 347 text

No content

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

No content

Slide 353

Slide 353 text

No content

Slide 354

Slide 354 text

No content

Slide 355

Slide 355 text

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

Slide 356

Slide 356 text

No content

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

No content

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

No content

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

New Albums See All Album title Artist name Album title Artist name Album title Artist name

Slide 380

Slide 380 text

Slide 381

Slide 381 text

Slide 382

Slide 382 text

Slide 383

Slide 383 text

Slide 384

Slide 384 text

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

Slide 385

Slide 385 text

Slide 386

Slide 386 text

Slide 387

Slide 387 text

Don’t rely on ‘little circles’ Use arrows to indicate direction of travel Show hints of what’s outside the viewport Horizontal design patterns

Slide 388

Slide 388 text

No content

Slide 389

Slide 389 text

No content

Slide 390

Slide 390 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 391

Slide 391 text

No content

Slide 392

Slide 392 text

Mark Boulton’s ‘slot packages’ Leaderboard Banner MMU

Slide 393

Slide 393 text

Small screens Banner

Slide 394

Slide 394 text

Medium screens Banner MMU

Slide 395

Slide 395 text

Large screens Leaderboard Banner MMU

Slide 396

Slide 396 text

Navigation

[…]

Complementary

Slide 397

Slide 397 text

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

Slide 398

Slide 398 text

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

Slide 399

Slide 399 text

300x100 300x100 300x250 Main 728x90

Slide 400

Slide 400 text

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

Slide 401

Slide 401 text

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

Slide 402

Slide 402 text

IMU-based grid

Slide 403

Slide 403 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 404

Slide 404 text

No content

Slide 405

Slide 405 text

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

Slide 406

Slide 406 text

No content

Slide 407

Slide 407 text

No content

Slide 408

Slide 408 text

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

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

No content

Slide 414

Slide 414 text

No content

Slide 415

Slide 415 text

No content

Slide 416

Slide 416 text

No content

Slide 417

Slide 417 text

No content

Slide 418

Slide 418 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 419

Slide 419 text

No content

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

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

Slide 425 text

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

Slide 426

Slide 426 text

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

Slide 427

Slide 427 text

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

Slide 428

Slide 428 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 429

Slide 429 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 430

Slide 430 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 431

Slide 431 text

No content

Slide 432

Slide 432 text

HTML

Slide 433

Slide 433 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 434

Slide 434 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 435

Slide 435 text

No content

Slide 436

Slide 436 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 437

Slide 437 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 438

Slide 438 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 439

Slide 439 text

No content

Slide 440

Slide 440 text

No content

Slide 441

Slide 441 text

No content

Slide 442

Slide 442 text

No content

Slide 443

Slide 443 text

No content

Slide 444

Slide 444 text

No content

Slide 445

Slide 445 text

No content

Slide 446

Slide 446 text

No content

Slide 447

Slide 447 text

No content

Slide 448

Slide 448 text

No content

Slide 449

Slide 449 text

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

Slide 450

Slide 450 text

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 451

Slide 451 text

Chrome 20+ Internet Explorer 10+ Current browser support

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

img { max-width : 100%; }

Slide 458

Slide 458 text

No content

Slide 459

Slide 459 text

186px 195px 372px 390px

Slide 460

Slide 460 text

477px 455px 910px x 955px

Slide 461

Slide 461 text

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

Slide 462

Slide 462 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 463

Slide 463 text

No content

Slide 464

Slide 464 text

No content

Slide 465

Slide 465 text

No content

Slide 466

Slide 466 text

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

Slide 467

Slide 467 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 468

Slide 468 text

sprite.png [email protected]

Slide 469

Slide 469 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 470

Slide 470 text

No content

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

No content

Slide 475

Slide 475 text

No content

Slide 476

Slide 476 text

No content

Slide 477

Slide 477 text

No content

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

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

Slide 482

Slide 482 text

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

Slide 483

Slide 483 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 484

Slide 484 text

10px 20px 30px 40px

Slide 485

Slide 485 text

1 2 3 4 6 7 8 9

Slide 486

Slide 486 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 487

Slide 487 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 488

Slide 488 text

No content

Slide 489

Slide 489 text

No content

Slide 490

Slide 490 text

No content

Slide 491

Slide 491 text

No content

Slide 492

Slide 492 text

[Content]

[Navigation] Content Navigation

Slide 493

Slide 493 text

Content Navigation

[Content]

[Navigation]

Slide 494

Slide 494 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 495

Slide 495 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 496

Slide 496 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 497

Slide 497 text

Content

Navigation [Content]

[Navigation] Navigation

Slide 498

Slide 498 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 499

Slide 499 text

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

Slide 500

Slide 500 text

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

Slide 501

Slide 501 text

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

Slide 502

Slide 502 text

No content

Slide 503

Slide 503 text

No content

Slide 504

Slide 504 text

[Navigation] [Banner]

Banner Navigation

Slide 505

Slide 505 text

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

Slide 506

Slide 506 text

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

Slide 507

Slide 507 text

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

Slide 508

Slide 508 text

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

Slide 509

Slide 509 text

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

Slide 510

Slide 510 text

No content

Slide 511

Slide 511 text

Box-img

Books and articles

As well as articles…

Box-details

Slide 512

Slide 512 text

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

Slide 513

Slide 513 text

No content

Slide 514

Slide 514 text

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

Slide 515

Slide 515 text

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

Slide 516

Slide 516 text

No content

Slide 517

Slide 517 text

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

Slide 518

Slide 518 text

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

Slide 519

Slide 519 text

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

Slide 520

Slide 520 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 521

Slide 521 text

No content

Slide 522

Slide 522 text

No content

Slide 523

Slide 523 text

No content

Slide 524

Slide 524 text

@malarkey

Slide 525

Slide 525 text

CREDIT WHERE CREDIT’S DUE http://bbc.co.uk/guidelines/gel/ http://jamieoliver.com FRV BRAND GUIDELINES ES http://flickr.com/photos/kmuellerdesign/5372922823 http://flickr.com/photos/r_okoko20/6249889073 http://flickr.com/photos/55339703@N08/5923185617

Slide 526

Slide 526 text

No content