data optimaliseren voor tablet en mobiel
DESCRIPTION
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.TRANSCRIPT
R.Kreijveld
Data op1maliseren voortablet en mobiel
Sunday, April 21, 13
R.Kreijveld
René Kreijveld• Joomla webdeveloper sinds 2004.
• Specialisa1es: [responsive] templates, complexe RSForm!Pro formulieren, Joomla hos1ng, Integra1e in bedrijfsomgevingen.
• TwiLer: @renekreijveldSkype: renekreijveld
Sunday, April 21, 13
R.Kreijveld
Responsive templates•Wie hier aanwezig maakt ze al?
• Op welk CSS framework gebaseerd?
• ZelVouw of inkoop [commercieel] template?
Sunday, April 21, 13
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
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
R.Kreijveld
Media Queries (1)• Veel meer toegepast in CSS3
• Toepassen CSS-‐regels bij bepaalde schermresolu1es:
Sunday, April 21, 13
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
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
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.html1136 x 640 pixels
• iPad: hLp://www.apple.com/ipad/specs/2048 x 1536 pixels
Sunday, April 21, 13
R.Kreijveld
ConclusieMedia Queries:Als je bandbreedte wil besparen,
door bepaalde content te verbergen op tablet/mobieldan is de schermresolu1e niet leidend,maar naar de browser en het apparaat.
Sunday, April 21, 13
R.Kreijveld
de User Agent• De User Agent string in HTTP is een lijst van produkt tokens met op1onele commentarenhLp://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
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
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
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
R.Kreijveld
Mobile Detect gebruik
Sunday, April 21, 13
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
R.Kreijveld
User Agent Detector• System Plugin: hLps://github.com/renekreijveld/UserAgentDetector
• Beschikbaar voor Joomla 2.5 en 3.0
Sunday, April 21, 13
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
R.Kreijveld
Template setup
Sunday, April 21, 13
R.Kreijveld
Demo bot detec1e• hLp://www.avgm.nl
• hLp://www.publicanda.nl
Sunday, April 21, 13
R.Kreijveld
Vragen ?
Sunday, April 21, 13
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