« Back

Liferay 6.2 new mobile features (pt. 2)

General Blogs October 9, 2013 By Juan Fernández Staff

As I promised on my previous post (Liferay 6.2 new mobile features (pt. 1)), here’s the follow-up blog entry with a description of more features and improvements related to mobile we are going to release as part of Liferay Portal 6.2.

 

On this article I’m going to talk about the reuse of native mobile components, improved device detection capabilities and using sites hierarchies for building mobile targeted sites. And there are still more new mobile tools and capabilities to talk about in a third blog post (namely, the new Mobile SDK and the new version of Liferay Sync Mobile).

 

Reuse of native mobile components

 

One of the goals for this version was to be able to create tools that provide a great user experience. We wanted our users to feel familiar with Liferay, even if it is the first time they’re using it, even if they are not using a laptop.

 

There are multiple ways to achieve this, but possibly one of the best ways when talking about mobile is the reuse of native components. It is not always possible to reuse them, but there are several places in the portal where these components provide a great experience.

 

One of the great benefits of this approach is that when the users update the operating system on their mobile devices, these components will also be upgraded. For example, with the latest update to iOS 7, our calendar component is upgraded too, making it look consistent with the rest of iOS apps.

 

I’ll mention a couple of them so that you can better see what we’ve done (screenshots from iPad and Android devices):

 

Native calendar component:


 
 

Native dropdown and radio button menus:


   

 

Documents and images upload:

 

 

  


 

Improved Device Detection capabilities

 

One of the most used approaches when planning a mobile web strategy is the device targeted website. Basically it consist in a subsite or an extension of the desktop website, which is optimized for certain device. You might have seen this on sites that have a normal site url on desktop (www.mysite.com) and a mobile url for smartphones (m.mysite.com).

 

Since we launched Liferay Portal 6.1 we have had mobile device detection capabilities, via  WURFL integration (you can read more about it in the User Guide), but on the new version there are several improvements for companies using this mobile strategy. These improvements include a UX revamp, adding additional device classification criteria and sites hierarchies, which is not a mobile-specific feature, but it becomes really useful in order to implement this strategy.

 

Name changes and help messages: it might seem superfluous, but after gathering user feedback we detected there were a bunch of misconceptions regarding mobile device detection rules, so we invested on fixing it.

 

First, we renamed mobile device rule groups to “Mobile Device Families”:


and added a help message to the creation form explaining what they are for:


 

We did the same for rules: based on user feedback we renamed them to “classification rules” and also added a help message:


And then, action abstracts are brought to the rules screen, so that you can see them at first glance:




 

And finally, for those pixel perfectionists that have been asking for it during the last couple of years, we have added screen size and screen resolution detection support (thanks, Milen! Cool improvement! :D):




 

Taking advantage of sites hierarchy for dedicated sites

 

When a company plan to invest in the dedicated website mobile strategy, one of the most common issues that arise is the content sharing. Having an optimized separate website for, let’s say, you company’s iPad users is great, but how can you reuse all the content generated on the desktop site and yet have the flexibility to manage device specific content? Now we have site hierarchies this is super easy to achieve! Let’s see an example:

 

Let’s create a website for a company, and then let’s create to child sites, one of android devices and another one for iPads


Now let’s create the device families and rules in the parent (desktop) site. Note: you could create the rules in the global site and they’ll be available on all your sites.


And finally the actions:

 

With this we are ready to start creating our three versions of the site, and depending on the device accessing our website, the user will see an appropriate version for his device.

 

The benefit of using site hierarchies is that child sites can access their parent’s content (if they are given the correct permissions) using the asset publisher, so the door to reusing content is opened. On my example, parent and children sites share a common banner and then each one add more content specific to their audience.

 

First let’s configure an asset publisher to get the parent site’s banner:

 

 

And then you can see the result of this (SIMPLE!) example. First, a desktop site:

 

 

An android version of this site, reusing the banner but adding more device-specific content

 

and finally the iPad site, also reusing the banner but adding specific content for iPad users:


 

 

Simple and powerful!

 

With this set of features we are releasing on Liferay Portal 6.2, Liferay is well on it's way to being the mobile experiences delivery platform we have envisioned for many years. I hope you like this version and share your experiences with us so that we can continue improving release after release. For you.

 

Thanks,

Juan Fernández

Threaded Replies Author Date
Nice article! Thanks a lot, Juan. Jonas Yuan October 11, 2013 9:32 AM
Great article and thanks Juan for sharing this.... Jayaram pokuri October 14, 2013 3:09 AM
Hi Jayaram: Of course! Have a look at this... Juan Fernández October 14, 2013 7:48 AM
Little bit off topic.. but you can't imagine... Prasanta Bhuyan October 23, 2013 12:49 PM
Thanks, Prasanta! It was great meeting you too.... Juan Fernández October 24, 2013 2:20 AM
Nice article! Thanks a lot M. Ahamed Maqbool November 7, 2013 10:16 PM
Thanks for sharing this information Juan. Can... Vaibhav Mittal November 9, 2013 6:20 AM
2.3.2 if I am not mistaken. Prasanta Bhuyan November 11, 2013 7:08 AM
2.3.2! You were right, Prasanta Juan Fernández November 18, 2013 1:45 AM
[...] UI/UX Refinements - Too numerous to list... Anonymous March 15, 2014 1:03 AM

Nice article! Thanks a lot, Juan.
Posted on 10/11/13 9:32 AM.
Great article and thanks Juan for sharing this.
Will it be possible to implement responsive design?
can we incorporate device auto detection in theme?
Posted on 10/14/13 3:09 AM.
Hi Jayaram: Of course! Have a look at this first article about what we did (https://www.liferay.com/es/web/juan.fernandez/blog/-/blogs/liferay-6-2-new-mobi­le-features-pt-1-) and then you have all the bootstrap cool features, so of course you'll be able to do autodetection. Thanks for your comment
Posted on 10/14/13 7:48 AM in reply to Jayaram pokuri.
Little bit off topic.. but you can't imagine how happy you made me when you showed the support of folder structure within WCM. By the way nice meeting you at the symposium. It was a great experience.
Posted on 10/23/13 12:49 PM.
Thanks, Prasanta! It was great meeting you too.
Best,
Juan
Posted on 10/24/13 2:20 AM in reply to Prasanta Bhuyan.
Nice article! Thanks a lot
Posted on 11/7/13 10:16 PM.
Thanks for sharing this information Juan.

Can you tell us which version of bootstrap liferay 6.2 is using? I doubt for 2.x.x. Correct me if I am wrong.
I did work with version 3.0 on liferay 6.1 and found v3.0 better to use.
Posted on 11/9/13 6:20 AM.
2.3.2 if I am not mistaken.
Posted on 11/11/13 7:08 AM in reply to Vaibhav Mittal.
2.3.2! You were right, Prasanta
Posted on 11/18/13 1:45 AM in reply to Prasanta Bhuyan.
[...] UI/UX Refinements - Too numerous to list here. Responsive themes by default, in-context editing, many Mobile enhancements (including mobile previews), Control Panel awesomeness, a revamped Dockbar... [...] Read More
Posted on 3/15/14 1:03 AM.