Click here to load reader

Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013

  • View

  • Download

Embed Size (px)


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.

Text of Bandwidth optimisation in Responsive Webdesign - J&Beyond, june 1st 2013

  • 1. Ren Kreijveld Joomla webdeveloper/system integrator since 2004. Work for DSD Business Internet and Specialisations:[responsive] templates, one|content based webapplications, complex RSForm!Pro webforms,Joomla webserver setups Twitter: @renekreijveldSkype: renekreijveldFacebook:
  • 2. My life outside Joomla Running. Playing drums. Training with Mila, a Bracco Italiano hunting dog.
  • 3. Mila
  • 4. 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 testinganything ;-)
  • 5. Responsive templates Who in this audience builds responsivetemplates? Based on what CSS framework? Do you build yourself or buy a template andcustomize? I personally build from scratch using BlankTemplate
  • 6. CSS Frameworks (1) Twitter BootstrapSleek, intuitive, and powerful front-endframework for faster and easier webdevelopment. Foundation ZurbThe most advanced responsive front-endframework in the world.
  • 7. CSS Frameworks (2) HTML Boilerplate Responsive Grid System Titan Framework Groundwork CSS Base
  • 8. Media Queries (1) Used al lot in CSS3. Apply CSS-rules based on viewport resolutions:
  • 9. Media Queries (2) Often there are special CSS-classes to hidecontent at a certain resolution. Twitter Bootstrap uses Responsive Utility Classes: Foundation Zurb uses Visibility Classes:
  • 10. Special CSS-classes Advantage: easily hide content on certaindevices (based on resolutions).Usage: in template code or as a Module ClassSuffix: add hidden-phone Disadvantage: the content is only visuallyhidden.All content is still downloaded to the device!Unnecessary use of bandwidth!
  • 11. Media Queries Media Queries are based on viewport resolutions. Modern iPhones en iPads have high resolutions. iPhone: x 640 pixels. iPad: x 1536 pixels.
  • 12. My conclusion onMedia QueriesIf you want to save bandwidth, by hidingcertain content on tablets/mobiles, doing thisbased on the viewport might not be the bestsolution...
  • 13. My conclusion onMedia QueriesIt might be a better option to hide certaincontent on tablets/mobiles, based on thebrowser and the device of the website visitor.
  • 14. Enter: the User Agent The User Agent string is a unique definition of thebrowser and operating system.In HTTP, the User-Agent string is often used for contentnegotiation, where the origin server selects suitablecontent or operating parameters for the response. The user agent can be determined client side andserver side.
  • 15. Demo Demo with User Agent detection in Joomla Used tools (all FireFox plugins) Web Developer Toolbar User Agent Switcher
  • 16. Responsive Website for an athleticsassociation. Built with Twitter Bootstrap. Separate layouts for desktop, tablet andmobile.
  • 17. Website about Publicanda ourJoomla distribution. Built with Twitter Bootstrap. Separate layouts for desktop, tablet andmobile.
  • 18. Mobile Detect PHP library that reads the User Agent (serverside). 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.
  • 19. Mobile Detect usage
  • 20. And other extensions? When loading Mobile_Detect.php intemplate code, the test is only available inthe template. Wouldnt it be handy if you kneweverywhere (templates, components,plugins, modules) what kind of device yourvisitor has?
  • 21. User Agent Detector System Plugin: Sets a session variable with UA Layout. Available for Joomla 2.5 and 3.0.
  • 22. User Agent Detector Possible values for ualayout: desktop tablet mobile bot
  • 23. Search Engine Optimisation Search engines index your website bysending 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 identifyspiderbots :-)
  • 24. Template experiment
  • 25. Template experiment
  • 26. Demo spiderbot detection
  • 27. Questions ?