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 ?