Responsive webdesign is hot! It is easy to create a responsive design that shows off your site on mobile browsers running on tablets and smartphones. Through User Agent detection we can prevent unnecessary content to be sent to the mobile browser to keep the bandwidth low and speed high of your mobile website! It is very easy to create a responsive design with frameworks like Bootstrap and Foundation that shows off your site on tablets and smartphones. But with a mobile first strategy in mind it's often not necessary to show everything of your desktop website on a tablet or smartphone. Do you really need that image slideshow or photo gallery on a smartphone? Modern CSS frameworks like Twitter Bootstrap and Zurb Foundation allow the hiding of elements on mobile browsers through CSS with the use of the visibility property. But that doesn't prevent the content from still being downloaded to the mobile browser. And that is unwanted waste of bandwidth and it slows down your mobile website. Through User Agent detection we can determine what kind of browser your visitor is using. And the detection is done on the server side! This way we can prevent unnecessary content to be sent to the browser on tablets and smartphones to keep the bandwidth as low as possible and your mobile site up to speed. On top of that we can do really cool stuff for search engine optimisation as well! In this session I will explain how to implement user agent detection and how to use it in your Joomla templates.

2. 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: @renekreijveld
Skype: renekreijveld
Facebook: http://www.facebook.com/rene.kreijveld

3. My life outside Joomla
• Running.
• Playing drums.
• Training with Mila, a Bracco Italiano hunting dog.

4. Mila

5. 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 ;-)

6. 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
Template
http://blank.vc/

7. 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/

8. CSS Frameworks (2)
• HTML Boilerplate
• Responsive Grid System
• Titan Framework
• Groundwork CSS
• Base
• https://www.google.nl/search?q=css+responsive
+frameworks

9. Media Queries (1)
• Used al lot in CSS3.
• Apply CSS-rules based on viewport resolutions:

10. 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

11. 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!

12. Media Queries
• Media Queries are based on viewport resolutions.
• Modern iPhones en iPads have high resolutions.
• iPhone: http://www.apple.com/iphone/specs.html
1136 x 640 pixels.
• iPad: http://www.apple.com/ipad/specs/
2048 x 1536 pixels.

13. My conclusion on
Media 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...

14. My conclusion on
Media 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.

15. 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.

16. Demo
• Demo with User Agent detection in Joomla
• Used tools (all FireFox plugins)
• Web Developer Toolbar
https://addons.mozilla.org/nl/firefox/addon/web-
developer/
• User Agent Switcher
https://addons.mozilla.org/nl/firefox/addon/user-
agent-switcher/

17. AVGM.nl
• Responsive Website for an athletics
association.
• Built with Twitter Bootstrap.
• Separate layouts for desktop, tablet and
mobile.
• http://www.avgm.nl/

18. PUBLICANDA.nl
• Website about Publicanda our
Joomla distribution.
• Built with Twitter Bootstrap.
• Separate layouts for desktop, tablet and
mobile.
• http://www.publicanda.nl/

19. 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.

20. Mobile Detect usage

21. 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?

22. 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.

23. User Agent Detector
• Possible values for ualayout:
• desktop
• tablet
• mobile
• bot

24. 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 :-)

25. Template experiment

26. Template experiment

27. Demo spiderbot detection
• http://www.avgm.nl
• http://www.publicanda.nl

28. Questions ?