Original Slides: http://lukebrooker.com/presentations/thinking-outside-the-box-that-keeps-moving
Tips and Tricks for a Responsive Web.
From my Brisbane Web Design Talk November 21st 2013.
4. etis ruoy ekam ot dedeen era sgat atem tahW
eht rettam on ezis secived yreve ot tpada
noitatneiro
<eanm=vepr"cnet"it=eiewdh>
mt ae"iwot otn=wdhdvc-it"
<eanm=vepr"cnet"it=eiewdh iiilsae1>
mt ae"iwot otn=wdhdvc-it, nta-cl="
<eanm=vepr"cnet"it=eiewdh iiilsae1 mxmmsae1>
mt ae"iwot otn=wdhdvc-it, nta-cl=, aiu-cl="
@iwot{wdhdvc-it }
vepr
it:eiewdh ;
tuo gnillor si xif elibom
EI ni guB
a
b
c
d
6. swodniw no
yranimilerp
lmth
enohp
ei ni ngised evisnopser moc wotsttam
enohP swodniW no
lmth tem
EI ni ngiseD evisnopseR
sevihcra golb gro edomskriuq
hcraeser tropweiv atem yranimilerP
gnidaer rehtruF
19. cte sulytS ssaS
pleh ot srossecorperp esU
mhtyhr lacitrev no stnemerusaem esaB
stnemerusaem lla tsomla rof sme esU
noitatnemelpmI
20. omeD
HTML
SCSS
Result
Edit on
<1Haig/1
h>edn<h>
<i cas"ae"
dv ls=pnl>
<>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetnc
pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e
<>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetnc
pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e
<dv
/i>
@mot"ops"
ipr cmas;
$aeln-egt 2p;
bs-iehih: 4x
$aefn-ie 1p;
bs-otsz: 6x
hm {
tl
ln-egt ryh()
iehih: htm1;
fn-ie $aefn-ie
otsz: bs-otsz;
fn-aiy Hleia sn-ei;
otfml: evtc, assrf
}
22. a
sj sdivtif
b
mxwdh 10
a-it: 0%
c
mxhih:10
a-egt 0%
d
kcah gniddap thgieh oreZ
sezis neercs
tnereffid ssorca tnemele rehto yna ro oediv
a fo oitar tcepsa eht peek ew nac od woH
25. b
noitceted erutaeF
c
sreldnah tneve tpircsavaj motsuC
d
noitceted tnega resU
rzinredoM g e
nooS
seireuQ aideM
a
secived hcuot no
elbahcuot tub secived retniop no elbarevoh
si taht gnihtemos ekam ew dluoc woH
26. omeD
HTML
SCSS
JS
Result
Edit on
<>hwtemn o hvr ciko tuh Priti i i ciko tuh<p
pSo h eu n oe, lc r oc. ess f t s lc r oc./>
<i i=mn_cnanr cas"eu_otie"
dv d"eu_otie" ls=mn_cnanr>
< he=#eu i=mn_bto"cas"eu_utn>eu/>
a rf"mn" d"eu_utn ls=mn_bto"Mn<a
loiCa oi npdc
32. on
elbalacs resu esu ot ton yrt tuB
evoba eht fo llA
stneve hcuot tpircsavaj evitan esU
<eanm=vepr"cnet"sr
mt ae"iwot otn=uesaal=o>
clben"
sj kcilctsaf
d
c
b
a
tneve hcuot
a morf gal sm
eht evomer uoy od woH
41. i
oge ruoy etalfnI
j
evoba eht fo llA
g
stnof noci etaerc yllacitamotuA
h
tcejorp ruoy yolpeD
evas no resworb ruoy hserfer dna tcejorp ruoy elipmoceR
f
b
srossecorperP SSC gnilipmoC
c
segami gnisimitpO
d
sppa wen dloffacs yllacitamotuA
e
seicnedneped lanretxe eldnaH
cte sulytS ssaS
SSC
SJ gniyfinim dna gnitanetacnoc gnitniL
a
evah namoeY dna rewoB tnurG ekil sloot
dliub dna noitamotua od segatnavda tahW
50. euqinhceT raC nwolC
HTML
CSS
Result
Edit on
<i>
dv
<v xls"tp/www.r/00sg
sg mn=ht:/w.3og20/v" veBx" 03521
iwo=0
7 3"
ai-ae=teai lbli bigra"rl=ig
ralbl"h ra ae s en ed oe"m"
tte"h tteatiueo teSGi bigra"
il=te il trbt f h V s en ed>
<il>lw CrTcnqe/il>
tteCon a ehiu<tte
<tl>
sye
peevApcRto"MdMdme"tbne=-"
rsresetai=xiYi et aidx"1
sg{
v
bcgon-ie 10 10;
akrudsz: 0% 0%
bcgon-eet n-eet
akrudrpa: orpa;
}
@ei sre ad(a-it:40x {
mda cen n mxwdh 0p)
sg{
v
bcgon-mg:ul"tp/scp.o18pcMdu-7x3-1-2p.p";otie gensld5x
akrudiae r(ht:/.dni/6/i-eim3521@x7pijg) uln: re oi p;
}
}
@ei sre ad(i-it:41x,
mda cen n mnwdh 0p)
sre ad(a-it:40x ad(wbi-i-eiepxlrto 17){
cen n mxwdh 0p) n -ektmndvc-ie-ai: .5
sg{
v
tHLdi oi npdc
51. ti crser g e
secivres diaP
euqinhcet semit
yzaL ehT
snoitulos egami eroM
52. cVh
Wh
yl tib ngiseD beW
evisnopseR nI segamI evitpadA gnivloS euqinhceT raC nwolC
troper raey fo dne segami evisnopser moc rotcod
troper raey fo dne
lmth
segami evisnopseR
lmth weivrevO gmipser sceps oi buhtig sniktabat
xatnyS gmIpseR rof lasoporP
gnidaeR rehtruF
53.
54. fo troS
iniM arepO
iniM arepO
resworB diordnA
resworB diordnA
resworB diordnA
EI
EI
EI
d
c
b
a
GVS troppus ton od sresworb tahW
62. omeD
HTML
SCSS
Result
Edit on
<lcas""
u ls=g>
<icas"_ie w-- p"1(/)/i
l ls=g_tm -14 h> 14<l>
<icas"_ie w-- p"2(/)/i
l ls=g_tm -12 h> 12<l>
<icas"_ie w-- p"3(/)/i
l ls=g_tm -14 h> 14<l>
<icas"_ie w-- p"4(/)/i
l ls=g_tm -14 h> 14<l>
<icas"_ie w-- p"5(/)/i
l ls=g_tm -14 h> 14<l>
<icas"_ie w-- p"6(/)/i
l ls=g_tm -14 h> 14<l>
<icas"_ie w-- p"7(/)/i
l ls=g_tm -18 h> 18<l>
<icas"_ie w-- p"8(/)/i
l ls=g_tm -18 h> 18<l>
<u>
/l
@mot"ops"
ipr cmas;
$rdpdig ryh()
gi-adn: htm1;
IgtiG oi npdc
63. a
elbissop sa tuoyal hcum sa roF
b
atad ralubat roF
c
smrof dna atad ralubat roF
d
reveN
desu eb selbat dluohs nehW
64. eno hcae rof noitulos evisnopser a dna
selbat
tog ev I
65. wolfrevo latnoziroH
ysaE
HTML
SCSS
Result
Edit on
<i cas"al-oefo"
dv ls=tbe-vrlw>
<al>
tbe
<r
t>
<hTbeHae 1/h
t>al edr <t>
<hTbeHae 2/h
t>al edr <t>
<hTbeHae 3/h
t>al edr <t>
<hTbeHae 4/h
t>al edr <t>
<hTbeHae 5/h
t>al edr <t>
<hTbeHae 6/h
t>al edr <t>
kKbFx oi npdc
66. snmuloC ytiroirP
atad fo stnuoma egral roF
Selectively displaying data
The number of columns displayed in the table below depends on the available screen space, by default; a smartphone will display 2 columns, for
example, while an expanded desktop browser displays the full set. This is accomplished by assigning semantic classes to the column headings that
indicate which data values take precedence (essential vs optional), in combination with media queries to display them at different screen widths (a.k.a.,
responsive design).
We added a bit of JavaScript logic so you can control which data is displayed by checking column names in the "Display" menu on the right. Once an
option is checked, the associated data will persist and display at all screen widths until the option is unchecked.
You can also set a column to always persist by assigning a class in the markup, in which case it has no menu option. Here, the "Company" column is
persistent.
Display
Company
GOOG
Last Trade
Change
597.74
14.81 (2.54%)
378.94
5.74 (1.54%)
191.55
3.16 (1.68%)
31.15
1.41 (4.72%)
25.50
0.66 (2.67%)
18.65
0.97 (5.49%)
15.81
0.11 (0.67%)
Google Inc.
AAPL
Apple Inc.
AMZN
Amazon.com Inc.
ORCL
Oracle Corporation
MSFT
Microsoft Corporation
CSCO
Cisco Systems, Inc.
YHOO
Yahoo! Inc.
snrettap elbat dwr selpmaxe moc puorgtnemalif
68. gnipparw morf txet siht peek uoy od woH
HTML
SCSS
Result
Edit on
<i cas"lae"
dv ls=fotr>
<i cas"lae_ie"
dv ls=fotr_tm>
<m sc"tp/paeodi/5"at" /
ig r=ht:/lchl.t10 l=" >
<dv
/i>
<i cas"lae_cnet>
dv ls=fotr_otn"
<>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetn
pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e
<>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetn
pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e
<>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetn
pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e
<dv
/i>
<dv
/i>
@mot"ops"
ipr cmas;
bd {
oy
fn-aiy Hleia sn-ei;
otfml: evtc, assrf
mri:0
agn ;
pdig ryh()
adn: htm1;
ln-egt ryh()
iehih: htm1;
}
ig{
m