Bloggers recientes

Sandeep Sapra

2 Mensajes
17 de noviembre de 2017

Zeno Rocha

17 Mensajes
7 de noviembre de 2017

Yasuyuki Takeo

3 Mensajes
5 de noviembre de 2017

John Feeney

1 Mensajes
3 de noviembre de 2017

Gregory Amerson

30 Mensajes
3 de noviembre de 2017

Minhchau Dang

13 Mensajes
3 de noviembre de 2017

Petteri Karttunen

5 Mensajes
30 de octubre de 2017

Alex Swain

2 Mensajes
27 de octubre de 2017

Jamie Sammons

10 Mensajes
23 de octubre de 2017

Jan Verweij

2 Mensajes
23 de octubre de 2017
« Atrás

Liferay 6.2 new mobile features (pt. 1)

General Blogs 8 de octubre de 2013 Por 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.



Juan Fernández


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

Respuestas anidadas Autor Fecha
Excellent write up Juan and great work UI team!... Glenn Saler 9 de octubre de 2013 8:11
Hi Juan, thanks for the update. We're all very... Shayne Tanner 17 de noviembre de 2013 19:40
Hi Shayne! Thanks for your comment. You can... Juan Fernández 18 de noviembre de 2013 1:44
Hi Juan, Can you explain more about how this... Dave Weitzel 10 de junio de 2014 8:35

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.
Publicado el día 9/10/13 8:11.
Hi Juan, thanks for the update. We're all very excited downunder!

Agreed, look forward to part two.

Publicado el día 17/11/13 19:40.
Hi Shayne! Thanks for your comment. You can read second article here:­e-features-pt-2-
Publicado el día 18/11/13 1:44 en respuesta a 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.

(Couldnt find this posted anywhere else)
Publicado el día 10/06/14 8:35.