1. Repsonsive
Webdesign
Tipps, Tricks und Fallstricke

2. Inhaltverzeichnis
Media Queries
JavaScript
SVG
Responsive Images
Fallstricke
Umsetzungen

3. Media Queries

4. sre ad(a-it:58x / Mbl *
cen n mxwdh 6p) * oie /
sre ad(a-it:78x / Tbe Prri *
cen n mxwdh 6p) * alt otat /
sre ad(a-it:12p)/ Tbe Lnsae*
cen n mxwdh 04x * alt adcp /
sre ad(i-it:12p)/ Dstp*
cen n mnwdh 04x * eko /

5. Verwendung in SASS
$oie
mbl:
"mxwdh 58x6p);
(a-it: 6p58x"
$otat "mxwdh 78x"
prri: (a-it: 6p);
$adcp:"mxwdh 12p);
lnsae (a-it: 04x"
$eko: "mnwdh 12p);
dstp
(i-it: 04x"
.oe{
hm
#edr{
hae
bre-otm 0
odrbto: ;
}
@ei #$otat {
mda {prri}
#edr{
hae
mri-o:1m
agntp e;
}
}
}

6. Reihenfolge
1.
2.
3.
4.
Desktop
Tablet Landscape
Tablet Portrait
Mobile

7. Verwendung in
JavaScript
fnto dfnVepr({
ucin eieiwot)
vrwdh=$wno)wdh)
a it
(idw.it(;
sic (re {
wth tu)
cs (it < 58:
ae wdh = 6)
vepr ="oie;bek
iwot
mbl" ra;
cs (it < 78:
ae wdh = 6)
vepr ="otat;bek
iwot
prri" ra;
cs (it < 12)
ae wdh = 04:
vepr ="adcp" bek
iwot
lnsae; ra;
dfut
eal:
vepr ="eko" bek
iwot
dstp; ra;
}
}

8. JavaScript

9. Binding
$fnto({
(ucin)
/ iiilrneig*
* nta edrn /
dfnVepr(;
eieiwot)
};
)

10. Binding
$fnto({
(ucin)
/ iiilrneig*
* nta edrn /
dfnVepr(;
eieiwot)
/ vepr-wthigrneig*
* iwotsictn edrn /
$wno)bn(rsz oinainhne,fnto( {
(idw.id'eie rettocag' ucin)
dfnVepr(;
eieiwot)
};
)
};
)

11. In Viewport Function
i(niwot[mbl''otat]){
fiVepr('oie,prri')
tglNv'id)
ogea(bn';
…
}

12. In Viewport – The Magic
/ Cek frvepr css-SrnsadAry (eal =ary *
* hcs o iwot ae
tig n ras dfut
ra) /
fnto iVepr(iwot)
ucin niwotveprs{
i(yefveprs= 'tig)
ftpo iwot = srn'{
veprs=nwAryveprs;
iwot
e ra(iwot)
}
rtr !(.nra(iwot veprs >-)
eun !$iAryvepr, iwot)
1;
}

13. DOM Manipulation
vretaerh=$'hae .rdksce)
a xrSac
(#edr poutuh';
i(niwot[mbl''otat] & etaerhlnt){
fiVepr('oie,prri') & xrSac.egh
$'foe'.pedetaerh;
(.otr)apn(xrSac)
}

14. SVG

15. HTML
<m sc"tp/wwhpbzsai/mgslg.v"
ig r=ht:/w.s.i/ttciae/oosg
dt-l=ht:/w.s.i/ttciae/oogf
aaat"tp/wwhpbzsai/mgslg.i"
wdh"1"hih=18 at" /
it=19 egt"0" l=" >

16. Modernizr
$fnto({
(ucin)
i (Mdrirsg| !oenz.niev)
f !oenz.v | Mdririlnsg{
vrSgm =$'m[r$sg';
a vIg
(igsc=v])
$ec(vIg fnto({
.ahSgm, ucin)
vre
a l
=$ti)
(hs,
at
l
=e.tr"aaat)
lat(dt-l";
i(l.egh{
fatlnt)
e.tr"r" at;
lat(sc, l)
}
};
)
}
};
)

17. Responsive Images

18. HTML
<m sc"lie-idjg
ig r=kensbl.p"
dt-eko=gossbl.p"
aadstp"rse-idjg
dt-oie"lie-idjg at" /
aambl=kensbl.p" l=" >

19. JavaScript
/ mbl frtiae *
* oie is mgs /
fnto rsosvIg){
ucin epniem(
vriae=$'m[aadstp';
a mg
(igdt-eko])
i(niwot"oie,"otat){
fiVepr(mbl" prri")
iaeec(ucin( {
mg.ahfnto )
$ti)at(sc,$ti)dt(mbl')
(hs.tr'r' (hs.aa'oie);
};
)
}es i (niwot"adcp" "eko")
le f iVepr(lnsae, dstp){
iaeec(ucin( {
mg.ahfnto )
$ti)at(sc,$ti)dt(dstp);
(hs.tr'r' (hs.aa'eko')
};
)
}
}

20. Fallstricke

21. JavaScript Viewport ermitteln

23. JavaScript Match Media
Nä!
CSS3-Transitions zum Ermitteln der Viewportgröße
funktionieren in älteren und uncoolen Browsern nicht
und können eine komplette Webseite zerstören.
Ehrlich! Ich hab's getestet.

24. jQuery UI Navigation
SlideDown anstatt Fade ✓
Mouseover-Events ✓
Scroll-Events / Overflow: hidden ✓
Besonders auf dem Blackberry und Windows Phone
traten Probleme mit Toch-Events auf ✓

25. Position: Fixed

26. Vielen Dank für Eure
Aufmerksamkeit
o/
© 2014 Antonia Ilski, Niklas Köhler