![Page 1: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/1.jpg)
![Page 2: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/2.jpg)
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
![Page 3: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/3.jpg)
My life outside Joomla• Running.
• Playing drums.
• Training with Mila, a Bracco Italiano hunting dog.
![Page 4: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/4.jpg)
Mila
![Page 5: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/5.jpg)
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 ;-)
![Page 6: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/6.jpg)
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/
![Page 7: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/7.jpg)
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/
![Page 8: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/8.jpg)
CSS Frameworks (2)• HTML Boilerplate
• Responsive Grid System
• Titan Framework
• Groundwork CSS
• Base
• https://www.google.nl/search?q=css+responsive+frameworks
![Page 9: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/9.jpg)
Media Queries (1)• Used al lot in CSS3.
• Apply CSS-rules based on viewport resolutions:
![Page 10: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/10.jpg)
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
![Page 11: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/11.jpg)
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!
![Page 12: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/12.jpg)
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.
![Page 13: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/13.jpg)
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...
![Page 14: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/14.jpg)
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.
![Page 15: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/15.jpg)
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.
![Page 16: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/16.jpg)
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/
![Page 17: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/17.jpg)
AVGM.nl• Responsive Website for an athletics
association.
• Built with Twitter Bootstrap.
• Separate layouts for desktop, tablet and mobile.
• http://www.avgm.nl/
![Page 18: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/18.jpg)
PUBLICANDA.nl• Website about Publicanda our
Joomla distribution.
• Built with Twitter Bootstrap.
• Separate layouts for desktop, tablet and mobile.
• http://www.publicanda.nl/
![Page 19: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/19.jpg)
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.
![Page 20: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/20.jpg)
Mobile Detect usage
![Page 21: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/21.jpg)
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?
![Page 22: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/22.jpg)
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.
![Page 23: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/23.jpg)
User Agent Detector• Possible values for ualayout:
• desktop
• tablet
• mobile
• bot
![Page 24: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/24.jpg)
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 :-)
![Page 25: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/25.jpg)
Template experiment
![Page 26: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/26.jpg)
Template experiment
![Page 27: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/27.jpg)
Demo spiderbot detection• http://www.avgm.nl
• http://www.publicanda.nl
![Page 28: Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013](https://reader033.vdocuments.site/reader033/viewer/2022042813/54583549b1af9fb66e8b5434/html5/thumbnails/28.jpg)
Questions ?