« Back

Liferay 6.2 new mobile features (pt. 1)

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

Hi community!

 

One of the most important and remarkable improvements of the new version of Liferay Portal are the new mobile capabilities that come out of the box. 

 

We will be presenting these features all around the globe via symposiums and roadshows, but for those of you who can’t wait, or can’t attend one of our events, here’s a preview before the official launch of the product.

 

Among the mobile improvements there are the following: mobile device preview, usage of responsive modules, usage of native components, UX improvements on mobile device rules, the usage of site hierarchies to build mobile websites, the new Mobile SDK (beta coming soon!) and a new version of Liferay Sync Mobile.


As you can imagine, it is impossible to write a blog entry that covers all these new features, so I’ll focus on the first two of them: mobile device preview and the responsive modules that comes out of the box with this new version.

 

Mobile Device Preview

 

With the clear intention to bring website admins’ attention to the mobile world, we decided to offer a mobile device preview menu a click away from all your site’s pages:

 


 

 

On this menu we provide a preview of your page as it is going to be seen by users with devices of that screen size. We added most common configurations, but offered the possibility to configure any screen size you might want to test.

 

 


 

Using the device preview we want to give our users the possibility to feel the same experience as the visitors of your site, despite the device they are using to reach your content.

 

 

 


 

Responsiveness out of the box

 

Thanks to AlloyUI and Twitter Bootstrap we can offer a high level of responsiveness out of the box. For example, all page layouts are responsive and we have made a mobile optimized version of many of our UI modules so that the navigation experience using mobile devices is optimal.

 

Here are a couple of examples of mobile-optimized modules, for you to better understand the kind of enhancements we have implemented:

 

The new dock bar, which looks like this on the desktop


becomes simplified on mobile devices


 

Search, links and view mode buttons that appear on many portlet’s headers, look like this on the desktop:

 

 

and they become like this on mobile devices:


The toolbars that appear on the WYSIWYG editor are like this on desktop:

 

but for mobile device we have create a light version, better suited to the usage on the go. It becomes something like this:


All buttons in the portal become finger friendly, are much bigger so that they are easy to tap with your fingertips:


 

The pages navigation, which usually looks like this on the desktop:


 

is merged into a single button, so that it frees screen space and on mobile devices it looks like this:

 

And, well these are just a bunch of examples, but there are many more all around the product...and many more still coming!

 

I'd like to thank the UI team, who has invested a lot of time an effort to make responsiveness and mobile a reality on this version: Bruno, Eduardo, Chema, Iliyan, Nate, Patrick, Mark, Jonathan (and more I might forget): thanks, UI team!

 

We are looking forward to start receiving your feedback so that we can continue improving and delivering the best product possible for you, our users and community.

 

Thanks,

Juan Fernández

 

[Update: here's a link to the second article of this series]

Threaded Replies Author Date
Excellent write up Juan and great work UI team!... Glenn Saler October 9, 2013 8:11 AM
Hi Juan, thanks for the update. We're all very... Shayne Tanner November 17, 2013 7:40 PM
Hi Shayne! Thanks for your comment. You can... Juan Fernández November 18, 2013 1:44 AM
Hi Juan, Can you explain more about how this... Dave Weitzel June 10, 2014 8:35 AM

Excellent write up Juan and great work UI team! We are all excited about 6.2 and more particular the mobile features as we see the trend for mobile usage skyrocketing!! Looking forward to the 2nd part of this post.
Posted on 10/9/13 8:11 AM.
Hi Juan, thanks for the update. We're all very excited downunder!

Agreed, look forward to part two.

Shayne
Posted on 11/17/13 7:40 PM.
Hi Shayne! Thanks for your comment. You can read second article here: https://www.liferay.com/es/web/juan.fernandez/blog/-/blogs/liferay-6-2-new-mobil­e-features-pt-2-
J
Posted on 11/18/13 1:44 AM in reply to Shayne Tanner.
Hi Juan,
Can you explain more about how this achieved not just what you have done?

I am using the classic theme as a starting point for a new 6.2 GA2 CE theme and my dockbar disappears when shrinking to 768 (phone) size instead of inheriting the drop down menu and dropping elements as in classic theme. Any idea why?

In previous versions I have been using the aui viewport system to detect changes in screen size through classes such as .lt720 how is the 6.2 responsiveness detected and passed to CSS as I cannot see in classic theme any similar styles being added.

Thanks
(Couldnt find this posted anywhere else)
Posted on 6/10/14 8:35 AM.