René Kreijveld• Joomla webdeveloper/system integrator since 2004.
• Work for DSD Business Internet and ReneKreijveld.nl
• Specialisations:[responsive] templates, one|content based web applications, complex RSForm!Pro webforms, Joomla webserver setups
• Twitter: @renekreijveldSkype: renekreijveldFacebook: http://www.facebook.com/rene.kreijveld
My life outside Joomla• Running.
• Playing drums.
• Training with Mila, a Bracco Italiano hunting dog.
Mila
Disclaimer• The solutions presented here today work for me,
they might not work for you.
• Try and experiment with my suggestions.
• Backup, Backup, Backup, before testing anything ;-)
Responsive templates• Who in this audience builds responsive
templates?
• Based on what CSS framework?
• Do you build yourself or buy a template and customize?
• I personally build from scratch using Blank Templatehttp://blank.vc/
CSS Frameworks (1)• Twitter Bootstrap
“Sleek, intuitive, and powerful front-end framework for faster and easier web development.”http://twitter.github.io/bootstrap/
• Foundation Zurb“The most advanced responsive front-end framework in the world.”http://foundation.zurb.com/
CSS Frameworks (2)• HTML Boilerplate
• Responsive Grid System
• Titan Framework
• Groundwork CSS
• Base
• https://www.google.nl/search?q=css+responsive+frameworks
Media Queries (1)• Used al lot in CSS3.
• Apply CSS-rules based on viewport resolutions:
Media Queries (2)• Often there are special CSS-classes to hide
content at a certain resolution.
• Twitter Bootstrap uses Responsive Utility Classes: http://twitter.github.io/bootstrap/scaffolding.html#responsive
• Foundation Zurb uses Visibility Classes: http://foundation.zurb.com/docs/components/visibility.html
Special CSS-classes• Advantage: easily hide content on certain
devices (based on resolutions).Usage: in template code or as a Module Class Suffix: add <space>hidden-phone
• Disadvantage: the content is only visually hidden. All content is still downloaded to the device!Unnecessary use of bandwidth!
Media Queries• Media Queries are based on viewport resolutions.
• Modern iPhones en iPads have high resolutions.
• iPhone: http://www.apple.com/iphone/specs.html1136 x 640 pixels.
• iPad: http://www.apple.com/ipad/specs/2048 x 1536 pixels.
My conclusion onMedia Queries
If you want to save bandwidth, by hiding certain content on tablets/mobiles, doing this based on the viewport might not be the best solution...
My conclusion onMedia Queries
It might be a better option to hide certain content on tablets/mobiles, based on the browser and the device of the website visitor.
Enter: the User Agent• The User Agent string is a unique definition of the
browser and operating system.
In HTTP, the User-Agent string is often used for content negotiation, where the origin server selects suitable content or operating parameters for the response.http://en.wikipedia.org/wiki/User_agent
• The user agent can be determined client side and server side.
Demo• Demo with User Agent detection in Joomla
• Used tools (all FireFox plugins)
• Web Developer Toolbarhttps://addons.mozilla.org/nl/firefox/addon/web-developer/
• User Agent Switcherhttps://addons.mozilla.org/nl/firefox/addon/user-agent-switcher/
AVGM.nl• Responsive Website for an athletics
association.
• Built with Twitter Bootstrap.
• Separate layouts for desktop, tablet and mobile.
• http://www.avgm.nl/
PUBLICANDA.nl• Website about Publicanda our
Joomla distribution.
• Built with Twitter Bootstrap.
• Separate layouts for desktop, tablet and mobile.
• http://www.publicanda.nl/
Mobile Detect• PHP library that reads the User Agent (serverside).
https://github.com/serbanghita/Mobile-Detect
• It can detect:- Is the device a desktop, tablet or mobile?- Is it running iOS or Android?- A lot more...
• Regular updates for new user agents.
Mobile Detect usage
And other extensions?• When loading Mobile_Detect.php in
template code, the test is only available in the template.
• Wouldn’t it be handy if you knew everywhere (templates, components, plugins, modules) what kind of device your visitor has?
User Agent Detector• System Plugin:
https://github.com/renekreijveld/UserAgentDetector
• Sets a session variable with UA Layout.
• Available for Joomla 2.5 and 3.0.
User Agent Detector• Possible values for ualayout:
• desktop
• tablet
• mobile
• bot
Search Engine Optimisation• Search engines index your website by
sending a spiderbot to your website.
• Googlebot, Bing, Yahoo Slurp, Msnbot, ...
• So spiderbots are also website visitors.
• Each spiderbot has a unique User Agent!
• Mobile_Detect.php can identify spiderbots :-)
Template experiment
Template experiment
Demo spiderbot detection• http://www.avgm.nl
• http://www.publicanda.nl
Questions ?