Fashionably flexible responsive web design (full day workshop)

RESPONSIVE WEB DESIGN
FASHIONABLY FLEXIBLE
Andy(Clarke
1.4

View Slide

View Slide

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

View Slide

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:

View Slide

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

View Slide

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

View Slide

1
Part
FASHIONABLY FLEXIBLE RESPONSIVE WEB DESIGN

View Slide

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

View Slide

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

View Slide

2000
04
2009
03
“Fluid Grids”
Ethan Marcotte
“Mo
Luke
iPhone
2007
01
iPod Touch
2007
07
01
2007

View Slide

2000
04
2009
03
2009
11
“Fluid Grids”
Ethan Marcotte
“Mobile First”
Luke Wroblewski
iPhone
2007
01
iPod Touch
2007
07
07
2007

View Slide

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

View Slide

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

View Slide

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

View Slide

009
03
“Mobile First”
uke Wroblewski
Ethan Marcotte
“One Web”
Jeremy Keith
“320 a
iPad
2010
04
2010
11
2009
11
05
2010 20
0

View Slide

2010
04
2010
05
Ethan Marcotte
“One Web”
Jeremy Keith
Responsive W
(boo
“320 and Up”
2011
04
11
2010 20
0
iPad

View Slide

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

View Slide

Web”
y Keith
“There Is No Mobile Web”
Jeremy Keith
(book)
“320 and Up” The Bosto
2011
04 06
2011
010
11
2011
09
20
0

View Slide

Jeremy Keith
(book)
and Up” The Boston Globe
011
04
2011
09
2011
06 09
2011

View Slide

Jeremy Keith
Web Design
ook)
The Boston Globe
2011
09
011
06 09
2011

View Slide

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

View Slide

• 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

View Slide

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

View Slide

• 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

View Slide

• 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

View Slide

• 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

View Slide

• 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

View Slide

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

View Slide

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

View Slide

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/

View Slide

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

View Slide

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

View Slide

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

View Slide

View Slide

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

View Slide

640x480

View Slide

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

View Slide

800x600

View Slide

1024x768

View Slide

View Slide

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

View Slide

View Slide

320x480

View Slide

320x420

View Slide

420x320

View Slide

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

View Slide

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

View Slide

340x480

View Slide

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

View Slide

View Slide

On the web there are no edges

View Slide

Tools reinforce notions
such as the canvas

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

View Slide

[Style tiles]

View Slide

View Slide

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

View Slide

View Slide

FRV BRAND GUIDELINES
ES

View Slide

25
MASS: TYPOGRAPHY
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)

View Slide

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.

View Slide

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

View Slide

View Slide

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

View Slide

View Slide

9<
(
$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`

View Slide

9<
(
3HYNLIVSK[`WLZOV\SKIL\ZLK[VLZ[HISPZO
HJSLHYPUMVYTH[PVUOPLYHYJO`;OLZLHYL[OL
YLJVTTLUKLK[`WLZPaLZ
$ULDO%ROGS[
S[/HDGLQJ7UDFNLQJ'HY3L[HO6SHFS[/HWWHUVSDFLQJ
$ULDO%ROGS[
$ULDO%ROGS[
$ULDO%ROGS[
$ULDO%ROGS[
$ULDO%ROGS[
$ULDO%ROGS[
$ULDO%ROGS[
$ULDO%ROGS[
$ULDO%ROGS[
$5,$/%2/'&$3,7$/,6('S[

View Slide

9<
(
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[
:\ZWLUKPZZLWVY[HJVTTVKVSLV:LK[PUJPK\U[[PUJPK\U[THZZH
W_
*VW`W_(YPHS9LN\SHYVUW_SLHKPUN3VYLTPWZ\TKVSVYZP[HTL[
:\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

View Slide

9<
(
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[
KPHT(SPX\HTZVSSPJP[\KPU[YPZ[PX\LU\SSH
)VK`*VW`W_(YPHS9LN\SHYVUW_SLHKPUN3VYLTPWZ\TKVSVYZP[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_

View Slide

9<
(
)\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\
3ULQW (PDLO
9RFDE2Q2II 5HIUHVK $ODUP5HPLQGHU 'XUDWLRQ &RXQWGRZQ ([SLUHV 6HWWLQJV
'HJUDGHG
&RQWHQW
*ULG9LHZ /LVW9LHZWH[W
=RRP,Q =RRP2XW
+RPH
/LVW9LHZ
WH[WDQGWKXPE 1HZ1HZLWHPV 4XRWH ([WHUQDO/LQN
/RDGLQJ
&KDSWHUV 7UDI¿F
/LQNWR7KLV
(PEHG
-VYTVYLPUMVYTH[PVUVYMVY[OLM\SSZL[VMPJVUZ]PZP[IIJJV\RNLSPJVUVNYHWO`ZO[TS

View Slide

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

View Slide

2
Part

View Slide

Plan Design Develop Deploy

View Slide

Plan Deploy
Design
Hat tip to Ethan Marcotte

View Slide

Discussion

View Slide

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/

View Slide

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)

View Slide

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

View Slide

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

View Slide

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)

View Slide

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/

View Slide

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

View Slide

2
Part
PREPARING RESPONSIVE CONTENT

View Slide

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

View Slide

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

View Slide

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?

View Slide

Prioritising content

View Slide

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

View Slide

View Slide

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

View Slide

Linearising content

View Slide

View Slide

RESPONSIVE TYPOGRAPHY
Hosted by Andy Clarke
2
Part

View Slide

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

http://goo.gl/o23Vc

View Slide

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

View Slide

Sizing type with rems
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 */ }

View Slide

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

View Slide

View Slide

p, ol, ul, dl, address {
line-height : 1.4; }
@media only screen and (min-width: 600px) {
}
@media only screen and (min-width: 768px) {
}

View Slide

View Slide

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

View Slide

View Slide

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

View Slide

http://ﬁttextjs.com

View Slide

View Slide

2
Part
DESIGNING RESPONSIVE GRIDS

View Slide

A ﬂuid grid

View Slide

target ÷ context = result
896px

View Slide

target ÷ 896 = result
252px 620px

View Slide

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

View Slide

View Slide

Less Framework grid

View Slide

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

View Slide

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

View Slide

No single formula

View Slide

252 is 28.12% of 896

View Slide

252 is 35.39% of 712

View Slide

252 is 47.72% of 528

View Slide

252 is 100% of 252

View Slide

View Slide

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)

View Slide

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

View Slide

IMU-based grid

View Slide

3 columns at 300px (320)

View Slide

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)

View Slide

948px 992.css
732px 768.css

View Slide

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

View Slide

44px

View Slide

88px

View Slide

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

View Slide

Fingertip-based grid

View Slide


View Slide

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

View Slide

Fingertip-based baseline
11px
22px
44px

View Slide

44px
44px vertical rhythm

View Slide

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

View Slide

Use a different grid for
each breakpoint

View Slide

View Slide

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

View Slide

View Slide

2
Part
RESPONSIVE BREAKPOINTS

View Slide

[Responsive data tables]

View Slide

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

View Slide

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

View Slide

There’s no one perfect
set of breakpoints

View Slide

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

View Slide

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

View Slide


View Slide

320x480
seamless width="320" height="480">

480x640
seamless width="480" height="640">

View Slide


View Slide

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

View Slide

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

View Slide

View Slide

600x819

View Slide

1024x395

View Slide


View Slide

3
Part

View Slide

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

View Slide

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

View Slide

PROJECT NOTES

View Slide

3
Part
NAVIGATION DESIGN PATTERNS

View Slide

Reﬂow
Transform
Collapse
Navigation design patterns

View Slide

View Slide

Reflowing of navigation

View Slide

View Slide

Reflowing of navigation

View Slide

View Slide

Navigation linearised

View Slide

View Slide

Where did the links to
RSS and Twitter go?

View Slide

Links don’t show up in landscape orientation either

View Slide

View Slide

No fast and easy way to
switch to comments

View Slide

Unclear navigation

View Slide

View Slide

Icons removed from
navigation, to save
vertical space?

View Slide

View Slide

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

View Slide

Not an exact recreation
of United Pixel Workers

View Slide


Help
Cart
Email
Twitter

Three elements: Header, h1 and nav

View Slide

[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

View Slide

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-position : 50%;
text-indent : -9999px; }

View Slide

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

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

View Slide

.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

View Slide

@media only screen
and (min-width : 768px) {
[role="banner"] {
float : left;
width : 26.66%; /* 160px */ }
[role="banner"] h1,
float : none;
width : 100%; }
}
At 768px breakpoint, float the banner left at 26.66%.
Reset the previously floated h1 and navigation

View Slide

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

View Slide

View Slide

Collapsing navigation and
search into a drop-down
interface

View Slide

T
ap icon to reveal
search input

View Slide

View Slide

a ‘show‘ (menu) button

View Slide

View Slide

a drop-down interface

View Slide

View Slide

a menu icon

View Slide

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

View Slide

View Slide

a ‘menu’ button

View Slide

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

View Slide

View Slide

Javascript converts
unordered list into a
select menu.

View Slide

View Slide

Native iPhone select
menu interface used as
navigation

View Slide

View Slide

a ‘menu’ button

View Slide

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

View Slide

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

View Slide

T
ransforming links into a
grid of icons.

View Slide

Home
Chat
Feed
Email
Bookmark
Tag
Schedule
Flag
Delete

Two elements: Nav and unordered list

View Slide

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

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

View Slide

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

View Slide

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.

View Slide

display : block;
height : 22px;
padding-top : 84px;
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

View Slide

@media only screen
and (min-width : 768px) {
width : 7.58%;
margin : 0 2.67% 0 0; }
padding : 52px 0 0 0; }
}
Chat
Home Feed Bookmark
Email Tag Flag
Schedule Delete

View Slide

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

View Slide

View Slide

an accordion interface

View Slide

View Slide

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

View Slide

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

View Slide

View Slide

Minimum navigation ,
maximum content

View Slide

maximum content

View Slide

T
ap to reveal search

View Slide

Full navigation page

View Slide

maximum content

View Slide

Maximum content,
minimum navigation,
although touch targets
are too small. (More on
that later.)

View Slide

Maximum navigation

View Slide

Full navigation page

View Slide

View Slide

Home
Who we are
What we believe in
What we make

View Slide

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

View Slide

Easy
Easy
Reach Hard
Easy

View Slide

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

View Slide

3
Part
MODULE DESIGN PATTERNS

View Slide

View Slide

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

View Slide

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)

View Slide

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

View Slide

For small screens, stack items vertically
Item
Item
Item

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

Item
Item
For medium screens, stack items vertically

View Slide

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

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

View Slide

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

View Slide

Two column grid in portrait

View Slide

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

View Slide

View Slide

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

View Slide

View Slide

Item

[…]

View Slide

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

View Slide

A
B

[…]

[…]

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

View Slide

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

View Slide

4
Part

View Slide

View Slide

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

View Slide

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

View Slide

Adding icons to navigation
is a nice touch

View Slide

// style.css
.speaker-lineup a { width : 33%; }
@media all and (max-width : 30em) {
.speaker-lineup a:nth-child(1n+0) {
width : 50%; }
width : 33.3333%; }
width : 25%; }
}

View Slide

// layout.css
@media all and (min-width : 70em) {
}
}
@media all and (min-width : 70em) {
}
}

View Slide

View Slide

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

View Slide

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

View Slide

View Slide

@media print {…}
@media screen and (min-width : 480px) {…}

@media..." aria-label="View slide 424" target="_blank" class="btn btn-sm btn-outline-primary" href="https://files.speakerdeck.com/presentations/4f59246535ca6900210046a4/slide_423.jpg">View Slide

href="print.css">

<link ..." aria-label="View slide 425" target="_blank" class="btn btn-sm btn-outline-primary" href="https://files.speakerdeck.com/presentations/4f59246535ca6900210046a4/slide_424.jpg">View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

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

/* Some Symbian devices */ }

/* Some tablets */ }

@media..." aria-label="View slide 431" target="_blank" class="btn btn-sm btn-outline-primary" href="https://files.speakerdeck.com/presentations/4f59246535ca6900210046a4/slide_430.jpg">View Slide

4
Part
FLEXIBLE LAYOUT

View Slide

Navigation
Complementary
Main

[…]

[…]

[…]

A simple, two-column responsive layout

View Slide

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

View Slide

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

View Slide

What’s with the whitespace?

View Slide

View Slide

Navigation
Content

[…]

[…]

A more complex responsive layout

View Slide

Navigation
Complementary
Main

[…]

[…]

[…]

View Slide

Navigation

[…]

[…]

Content-sub
Content-main
Complementary

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Nav Content
float : left;
width : 11.79%; /* 160px */ }
.content {
float : right;
width : 86.43%; /* 1172px */ }

View Slide

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

View Slide

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

View Slide

Vertical ﬂipping

View Slide

View Slide

Home
Who we are
What we believe in
What we make

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Navigation
Content

Navigation
[…]

[…]

Vertical flip using display:table properties

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Handling ﬁxed-width content

View Slide

160 x 600 IMU (Wide Skycraper)
120 x 60 IMU (Button 2)
180 x 150 IMU (Rectangle)
300 x 250 IMU (Medium Rectangle)

View Slide

View Slide

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

View Slide

Mark Boulton’s ‘slot packages’
Leaderboard
Banner
MMU

View Slide

Small screens
Banner

View Slide

Medium screens
Banner
MMU

View Slide

Large screens
Leaderboard
Banner
MMU

View Slide

Navigation
Content

[…]

[…]

View Slide

Navigation
Main
Complementary

[…]

[…]

[…]

View Slide

Navigation

[…]

[…]
[…]
[…]

Complementary

View Slide

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

View Slide

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

View Slide

300x100
300x100
300x250
Main
728x90

View Slide

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

View Slide

4
Part
RESPONSIVE IMAGES

View Slide

img {
max-width : 100%;
}

View Slide

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

View Slide

960 x 1280

View Slide

960 x 1280 320 x 426

View Slide

View Slide

src="pig-small.jpg ¬
?full=pig.jpg" alt="">

View Slide

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

View Slide

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

View Slide

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/

View Slide

View Slide

data-fullsrc="img-large-1.jpg">

<br/>responsiveEnhance(document.getElementById('img1'), 400);<br/>responsiveEnhance(document.getElementById('img2'), 300);<br/>responsiveEnhance(document.getElementById('img3'), 200);<br/>

View Slide

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

View Slide

http://ﬁtvidsjs.com

View Slide

View Slide

[…]

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

View Slide

4
Part
RESPONSIVE DATA TABLES

View Slide

View Slide

Don’t assume that screen size
relates to browser capabilities

View Slide

Trackball
Touchscreen
Trackpad

View Slide

[Modernizr]

View Slide

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

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

@malarkey

View Slide

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

View Slide

View Slide

Bonus

View Slide

View Slide

Fashionably flexible responsive web design (full day workshop)

Fashionably flexible responsive web design (full day workshop)

Andy Clarke

More Decks by Andy Clarke

Other Decks in Design

Featured

Transcript