Howdy Fellow K2-ers,

Here are two extensions from Rene Kreijveld that can help optimize (speed & UX) your Joomla K2-powered website(s):

User Agent Detector (plugin)
github.com/renekreijveld/UserAgentDetector
For use in your template and override files. It offers the conditions for Desktop, Tablet, and Mobile.

User Agent Detection Content (plugin)
github.com/renekreijveld/useragentcontent
Allows you to utilize tags to show content or hide content - can be used with any WYSIWYG editor.


Code: User Agent Detector

Code: User Agent Detection Content

As for usage, here are a few ways you can use Rene's extensions to optimize your website (speed & UX):

• Remove the sidebar for mobile visitors (Note: Bootstrap merely hides "hidden" elements, but it is still rendered - causing unnecessary additional page weight)
• Create device specific call-to-action buttons for optimal engagement
• Augment embed code for mobile vs non-mobile devices for an optimal device user experience

Let me know if you can think of any other creative ways to utilize either extensions to optimize a K2 website.

Your Friend in Joomla,

Joe Campbell

Hello Joe and once again thank you for sharing your knowledge.
I have some objections about the use of these extensions (although Rene Kreijveld is a great developer).

How do these act with a CDN? Or how do they behave with 3rd party caching extensions? They could serve the same (mobile or desktop) site in all visitors. Technically this would not be the plugin's fault.

I think for simple tasks you should choose a CSS solution.
Check Bootstrap's od Foundations' helper classes for more info.

Since may name is mentioned here I thought it would be good te reply.

My plugins have the main goal to provide HTML/content based on the user agent of the visiting browser. The user agent is a unique text string that defines the browser and operating system of the device that is used when visiting a website.

To do that my plugins use the excellent PHP library Mobile_Detect (github.com/serbanghita/Mobile-Detect). With this library it is possible to detect, server-side what kind of device is used to visit your website by reading the user agent string.

If the device is a desktop computer, you could send the desktop layout to the visitor. If the device is a tablet or a smartphone, you could send a layout optimised for the tablet or smartphone to the visitor.

This i.m.h.o. is much better that hiding content based on the resolution of the device through CSS rules. In CSS you can detect the resolution of the device through media queries. Based on that, you could hide certain elements by applying the display:none rule in CSS. This visually hides the content for the visitor, but the content is still sent to the device!

Suppose, for example, you have a large image slideshow on your homepage. If you visit that website with a smartphone and the slideshow is hidden through CSS the images and the used javascript code would still be downloaded to the smartphone. By detecting the device server side, you could apply some code in your template so the template module is not loaded in the template. The slideshow will then not be present when the site is viewed on the smartphone. This reuslts is a faster loading website that uses less bandwidth!

How does this relate to caching? Caching could be a problem ... IF you change from device in the same session!

When a visitor first visits the website, the plugin detects the user agent (the kind of device, desktop/tablet/phone) and serves the required layout.
ONLY if you change to another user agent the detection could be a problem, but how often do you do that? On a smartphone you cannot simply change the browser so it will be detected as a desktop device (although some browsers like Google Chrome allow you to do so). So caching is not that much of a problem.

As for CDN I cannot really comment on that, as I have never ever used a CDN. Please feel free to comment ;-)

Please also have a look at my presentation I did about this subject on JandBeyond 2013: www.slideshare.net/renekreijveld/jand-beyond-bandwidthoptimisationinresponsivewebdesign

I agree on how the best solution is not to render huge chunks of your website.

If you test it how it behaves behind a CDN like Akamai or fastly let me know because it is a really nice extension.

PS. Mila looks really nice :)

CDN77.com provided insight on the subject (via Twitter):

... CDN might cache the HTML output for the given URL and serve it the next time no matter what the current UA will be.

However, this issue will only occur when caching HTML as well. Many clients cache static files only, this case will be fine.

Invalid consumer key/secret in configuration

Good News K2ers,

Joomla! 3.5 offers Platform Specific Caching:
joomlaseo.com/blog/joomla-3-5-platform-specific-caching

This means, my User Agent Plugin K2 Power Tip no longer has a caching limitation!!!

So go ahead and remove your sidebar from mobile devices or render device specific images (with the use of extra fields) - I am :)

So... interesting little side-effect of using UALayout.

Krikor might recall I added an issue to Github where using SIGPro was causing the item's introtext to disappear, and the gallery appear in its place.

We've tracked this down to the use of the UALayout plugin.

While UALayout is not directly called on the area affected, it is loaded on the page - and when enabled causes the above issue if SIGPro is installed.

We're having that issue on our the real estate site I was showcasing last week.

I'm adding an issue to UA Layout's github (and resolving the one on K2), but I thought it worth noting here also.

Hi @KelseyBrookes,

Try using Device Specific Content (DSC) by Viktor Vogel. It can be used within your content (articles & modules), your template, and third-party extensions (via API).

joomla-extensions.kubik-rubik.de/dsc-device-specific-content

I hope this helps,

Joe Campbell

Thanks Joe - I've replaced UALayout with DSC throughout the site and it's worked perfectly to a) replace UALayout and b) resolve the issue I was experiencing.

Awesome - glad I was able to assist.
If you have the time - write a review on the JED.

Wishing you a great week :)

Thanks Joe!

Review added :)

Nice review Kelsey:
extensions.joomla.org/extension/dsc-device-specific-content#rev-100855