Blogs

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]