Responsive webdesign is helemaal in! Het is tegenwoordig relatief makkelijk om een responsive design te maken met CSS frameworks zoals Twitter Bootstrap en Zurb Foundation. Met de mobile first principes in het achterhoofd moet je jezelf afvragen of je alles wat in je desktop website getoond wordt ook moet tonen op je tablet of smartphone. Is het echt nodig om die foto carousel of foto gallery te tonen aan mobiele gebruikers? De moderne CSS frameworks staan het verbergen van bepaalde elementen toe door de CSS visibility property te gebruiken. Maar dat verhindert niet dat de data alsnog naar het mobiele apparaat wordt verstuurd. En dat kost onnodig bandbreedte en tijd. Met User Agent detectie kan bepaald worden wat voor soort browser je bezoeker heeft. Bijvoorbeeld een mobiele browser op een iPhone of Android toestel. Deze detectie vindt aan de webserver kant plaats. En op die manier kun je er voor zorgen dat data die niet hoeft te worden getoond ook niet wordt verstuurd naar het mobiele apparaat. En daarbovenop kunnen we met User Agent detectie ook slimme dingen doen ten gunste van zoekmachineoptimalisatie. In mijn sessie laak ik je zien hoe het werkt en hoe je het kunt implementeren in je template.

1. R.Kreijveld
Data
op1maliseren
voor
tablet
en
mobiel
Sunday, April 21, 13

2. R.Kreijveld
René
Kreijveld
• Joomla
webdeveloper
sinds
2004.
• Specialisa1es:
[responsive]
templates,
complexe
RSForm!Pro
formulieren,
Joomla
hos1ng,
Integra1e
in
bedrijfsomgevingen.
• TwiLer:
@renekreijveld
Skype:
renekreijveld
Sunday, April 21, 13

3. R.Kreijveld
Responsive
templates
• Wie
hier
aanwezig
maakt
ze
al?
• Op
welk
CSS
framework
gebaseerd?
• ZelVouw
of
inkoop
[commercieel]
template?
Sunday, April 21, 13

4. R.Kreijveld
CSS
Frameworks
(1)
• Twi$er
Bootstrap
“Sleek,
intui+ve,
and
powerful
front-­‐end
framework
for
faster
and
easier
web
development.”
hLp://twiLer.github.io/bootstrap/
• Founda2on
Zurb
“The
most
advanced
responsive
front-­‐end
framework
in
the
world.”
hLp://founda1on.zurb.com/
Sunday, April 21, 13

5. R.Kreijveld
CSS
Frameworks
(2)
• HTML
Boilerplate
• Responsive
Grid
System
• Titan
Framework
• Groundwork
CSS
• Base
• hLps://www.google.nl/search?q=css+responsive
+frameworks
Sunday, April 21, 13

6. R.Kreijveld
Media
Queries
(1)
• Veel
meer
toegepast
in
CSS3
• Toepassen
CSS-­‐regels
bij
bepaalde
schermresolu1es:
Sunday, April 21, 13

7. R.Kreijveld
Media
Queries
(2)
• Vaak
speciale
CSS-­‐classes
aanwezig
om
content
te
verbergen
bij
een
bepaalde
resolu1e.
• TwiLer
Bootstrap
werkt
met
Responsive
U1lity
Classes:
hLp://twiLer.github.io/bootstrap/
scaffolding.html#responsive
• Founda1on
Zurb
werkt
met
Visibility
Classes:
hLp://founda1on.zurb.com/docs/components/
visibility.html
Sunday, April 21, 13

8. R.Kreijveld
Die
speciale
CSS-­‐classes
• Voordeel:
gemakkelijk
content
verbergen
op
bepaalde
apparaten
(lees:
resolu1es)
Toepassing:
template
code
of
bijvoorbeeld
Module
class
achtervoegsel.
• Nadeel:
content
wordt
alleen
visueel
verborgen,
wordt
nog
steeds
gedownload
naar
apparaat,
dus
onnodig
bandbreedte
verbruik!
Sunday, April 21, 13

9. R.Kreijveld
Nadeel
Media
Queries
• Media
Queries
kijken
vooral
naar
de
resolu1e
van
het
beelscherm.
• Moderne
iPhone
en
iPad
hebben
hele
hoge
resolu1es.
• iPhone:
hLp://www.apple.com/iphone/specs.html
1136
x
640
pixels
• iPad:
hLp://www.apple.com/ipad/specs/
2048
x
1536
pixels
Sunday, April 21, 13

10. R.Kreijveld
Conclusie
Media
Queries:
Als
je
bandbreedte
wil
besparen,
door
bepaalde
content
te
verbergen
op
tablet/mobiel
dan
is
de
schermresolu1e
niet
leidend,
maar
naar
de
browser
en
het
apparaat.
Sunday, April 21, 13

11. R.Kreijveld
de
User
Agent
• De
User
Agent
string
in
HTTP
is
een
lijst
van
produkt
tokens
met
op1onele
commentaren
hLp://en.wikipedia.org/wiki/User_agent
• De
User
Agent
string
is
een
unieke
defini1e
van
browser
met
besturingssysteem.
• De
user
agent
kan
client
side
(bijvoorbeeld
Javascript)
en
server
side
(bijvoorbeeld
PHP)
worden
vastgesteld.
Sunday, April 21, 13

12. R.Kreijveld
Demo
• Demo
met
User
Agent
detec1e
in
Joomla
• Gebruikte
tools
(allen
FireFox
plugins)
• Web
Developer
Toolbar
• User
Agent
Switcher
Sunday, April 21, 13

13. R.Kreijveld
AVGM.nl
• Responsive
Website
atle1ekvereniging,
gebaseerd
op
TwiLer
Bootstrap
• Aparte
layouts
voor
desktop,
tablet
en
mobiel
• hLp://www.avgm.nl/
Sunday, April 21, 13

14. R.Kreijveld
Mobile
Detect
• PHP
library
waarmee
User
Agent
kan
worden
uitgelezen.
hLps://github.com/serbanghita/Mobile-­‐Detect
• Detecteert
onder
andere:
-­‐
Is
het
apparaat
een
desktop,
mobiel,
tablet?
-­‐
Draait
het
apparaat
op
iOS
of
Android?
• Regelma1g
updates
omdat
nieuwe
User
Agents
bedacht
worden.
Sunday, April 21, 13

15. R.Kreijveld
Mobile
Detect
gebruik
Sunday, April 21, 13

16. R.Kreijveld
En
andere
extensies?
• Bij
het
laden
van
Mobile_Detect.php
in
template
code
is
de
test
beschikbaar
in
de
template.
(tenzij
je
een
sessie
variabele
zet)
• Het
is
handig
als
je
overal
(templates,
componenten,
modules,
plugins)
weet
wat
voor
apparaat
je
website
bezoekt.
Sunday, April 21, 13

17. R.Kreijveld
User
Agent
Detector
• System
Plugin:
hLps://github.com/renekreijveld/
UserAgentDetector
• Beschikbaar
voor
Joomla
2.5
en
3.0
Sunday, April 21, 13

18. R.Kreijveld
Zoekmachine-­‐op1malisa1e
• Zoekmachines
indexeren
je
website
door
een
spiderbot
langs
te
sturen.
• Googlebot,
Bing,
Yahoo
Slurp,
Msnbot,
...
• Spiderbots
zijn
dus
ook
website
bezoekers.
• Elke
spiderbot
heet
een
unieke
User
Agent!
• Spiderbots
zijn
herkenbaar
voor
Mobile
Detect.
Sunday, April 21, 13

19. R.Kreijveld
Template
setup
Sunday, April 21, 13

20. R.Kreijveld
Demo
bot
detec1e
• hLp://www.avgm.nl
• hLp://www.publicanda.nl
Sunday, April 21, 13

21. R.Kreijveld
Vragen
?
Sunday, April 21, 13

22. R.Kreijveld
Handig
• Firefox
Wevdeveloper
Toolbar:
hLps://
addons.mozilla.org/nl/firefox/addon/web-­‐
developer/
• Firefox
User
Agent
Switcher:
hLps://
addons.mozilla.org/nl/firefox/addon/user-­‐agent-­‐
switcher/
• Lijst
van
user
agents:
hLp://techpaLerns.com/
forums/about304.html
Sunday, April 21, 13