How to detect user devices: smartphone, tablet or desktop in IBM WCM 8.5 using tags

devices

The context: why should I need to know this stuff?

In the last years front-end web development has became one of the most exciting areas of IT and software development, as front-end developers we have a tone of new tools, APIs, editors, packages, etc. that make our life easier.

There is an area that is particularly interesting: Responsive web design, but now, we try to go a little bit further, and not only create amazing responsive web sites, but also we try to provide the best web experience for our visitors, there is one aspect that is in particular really important when we create web portals: loading the resources depending on the device, it doesn’t matter if it is an smartphone, a tablet or a high resolution desktop; we must provide different views per device, and here is when something come out!

Most of websites are responsive but many times the views or layouts only hide or show graphic elements (like menus, carousels, blocks, etc.) that means all the resources are loaded even if they will not be used on phones or tablets.

The IBM proposal

Instead of just hiding or displaying elements depending on fixed media queries, we can provide a better mechanism which is called Adaptive Web Design. When we talk about adaptive, we mean we must load only the resources that are really necessary for displaying our views depending on the user’s device, for example if I have a list of news but in desktops I show titles, summaries, and images, but in smartphones I am only interested in displaying the titles, why in the phones should I load the summaries and images.

IBM WCM 8.x (that stands for IBM Web Content Manager) as a private product has a great solution for providing Adaptive Enterprise Web Portals, what it basically does is to expose a set of plugins that help us decide which resources we are going to load depending on the user’s device.

Let’s see how this kind of blocks look in the simplest way:

[Plugin:ifDevice class="smartphone"]
<!-- Content for smartphone goes here! -->
[/Plugin:ifDevice]

Now, if we want to show some specific content or components for desktop and tablets we can use the “negative” syntax of this plugin

[Plugin:ifNotDevice class="smartphone"]
<!-- Content for desktop and tablet goes here! -->
[/Plugin:ifNotDevice]

Let’s see the example

Going back a bit… in our component to display a set of news we can follow next steps to have an adaptive content per device:

  • For desktop and tablets where we have more space to distribute our news (titles, thumbnails, summaries, etc.), so, it makes sense to include more HTML elements.
  • For smartphone since we have less space available we don’t render all the information but instead just the titles.

Desktop and tablet

Let’s imagine this is a fragment of the results of a menu or personalization component:

[Plugin:ifNotDevice class="smartphone"]
<article class="news">
 <a href="#" class="news__title">[Property context="autofill" type="content" field="title"]</a>
 <div class="news__summary">[Element context="autofill" type="content" key="summary"]</div>
 <figure class="news__thumbnail">
 <img src="[Element context='autofill' type='content' key='thumbnail' format='url']" alt="Image">
 </figure>
</article>
[/Plugin:ifNotDevice]

The rendered HTML content would be something like this:

<article class="news">
 <a href="#" class="news__title">Suscipit reiciendis voluptatem, quaerat repellendus aut inventore</a>
 <div class="news__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat cumque alias !</div>
 <figure class="news__thumbnail">
 <img src="/path/to/my/image.png" alt="Image">
 </figure>
</article>

Smartphone

And in the smartphone we can have a simpler version of the same component including only the title like this:

[Plugin:ifDevice class="smartphone"]
<article class="news">
 <a href="#" class="news__title">[Property context="autofill" type="content" field="title"]</a>
</article>
[/Plugin:ifDevice]

In this case we would have this kind of output:

<article class="news">
 <a href="#" class="news__title">Suscipit reiciendis voluptatem, quaerat repellendus aut inventore</a>
</article>

Pretty simple, doesn’t it?

I hope you find this short article useful for your future implementations and remember be happy with your code!

See you next time!

 

7 comments on “How to detect user devices: smartphone, tablet or desktop in IBM WCM 8.5 using tags”

  1. Hi,

    I was wondering what the best choice for emulating smartphones and tablets is for this “ifDevice” plugin. I’ve been trying to use Chrome and Browserstack but they do not seem to register to Websphere’s ifDevice plugin as true smartphones or tablets (I’m testing from a laptop / desktop.) I’m not sure if I’m not using the plugin correctly, or if the plugin is “too smart” to be fooled by emulators.

    My current code is:
    [Plugin:ifNotDevice class=”smartphone|tablet”]

    [Component name=”kmbs_design_new/menus/menu – fixed nav in page links” resultsPerPage=”” startPage=””]
    [Element key=”Component” type=”auto” context=”current”]
    [/Plugin:ifNotDevice]
    [Plugin:ifDevice class=”smartphone|tablet”]

    [Element key=”Mobile Component” type=”auto” context=”current”]
    [/Plugin:ifDevice]

    Also, while I have looked at Portal Settings –> Supported Clients, it’s still not clear what’s in Websphere’s defined list of “smartphones” and “tablets”.

    Please advise when you can. Thank you.

    1. Regarding the “supported clients” in WebSphere.

      In the end the “device class” is set according to a regular expression that is checked by using the User Agent (request header).

      For example:

      1) Let’s imagine you are using a Nexus 7 (Android tablet). Then, we will have the regex .*Android.* which would mark all Android devices with both device classes “tablet” and as “android”.

      Regex:
      .*Android.*

      Header:
      User-Agent: Mozilla/5.0 (Linux; Android 6.0.1; Nexus 7 Build/MOB30X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

      Device classes:
      com.ibm.portal.devicesupport.deviceclass=tablet,android

      2) Now, imagine you use a Nexus 4 (Android smartphone):

      Regex:
      .*Android.*Mobile.*

      Header:
      User-Agent: Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Mobile Safari/537.36

      Device classes:
      com.ibm.portal.devicesupport.deviceclass=smartphone,android

  2. Nevermind, I found the issue.

    https://www.ibm.com/support/knowledgecenter/en/SSHRKX_8.5.0/help/panel_help/plugin_user.html

    While the documentation states that this should work:
    [Plugin:ifDevice class=”DEVICE1|DEVICE2″]
    Text to render if current device is DEVICE1 or DEVICE2.
    [/Plugin:ifDevice]

    I had to change it to this to get it to work:
    [Plugin:ifDevice class=”DEVICE1″ class=”DEVICE2″]
    Text to render if current device is DEVICE1 or DEVICE2.
    [/Plugin:ifDevice]

    In my case, DEVICE1 is smartphone and DEVICE2 is tablet.

    Thank you for your time.

    1. Following blocks should work:

      [Plugin:ifNotDevice class="smartphone" class="tablet"]
      // Desktop
      [/Plugin:ifNotDevice]

      [Plugin:ifDevice class="smartphone" class="tablet"]
      // Tablet or smartphone
      [/Plugin:ifDevice]

Leave a Reply to alex-arriaga

Your email address will not be published. Required fields are marked *