Responsive design in Liferay

(Robin Frodé Skogesjö)

When building a new website you are more often than not confronted with the challenge that your site has to look nice on a regular desktop as well as mobile devices with small screens. While you could build several different sites and forward depending on the browser information, it would be much nicer if you could just build one site and have it adapt to the device as needed. Let's use our own site as an example and let's get started.

Responsive design has the ability to change layout and style of a site when reloading and resizing the browser window or when accessed via a mobile device.

In CSS3 you can for instance write this in your CSS-file:

@media screen and (max-width:320px) {
    #footer {display: none}
}

This means that if the user's screen-size is less than 320 pixels, don't show the element identified by  footer.

However, in Liferay there's a script that checks the width of the window and looks at 4 size-specifications, which are:

960, 720, 480, and 320

To start using the script you need to declare this line of code in your javascript:

AUI().use('aui-viewport');

We're using the 960 size-specification for tablets and 720 for mobile phones.

For example, we want to hide the right-most part of the footer to fit mobile phones, so we use this block of code:

.aui-view-lt720 #footer .footer-right {
    display: none;
}

And for tablets we want to customize the style of the footer, so we use this block of code:

.aui-view-lt960 #footer {
    background: #ddd;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

We faced some problems especially with large images and code tags (pre). Images which are wider than the screen size didn't scale well when we set to width to be 100% of the are which they are displayed in. Also, when changing the width of an image problems with the aspect ratio can occur. We solved this by setting a max-width for the image and the height to adjust itself, like this:

.portlet-blogs .entry-body img {
    max-width: 95%;
    height: auto !important;
}

Note that the above code doesn't use lt960 nor lt720, this is to protect the blog from too large images for desktop screens as well as for mobile devices.  !important is used to override the height, which was already defined for this CSS-class.

For the pre-tag, we also uses the attribute max-width in conjuction with:

white-space: pre-wrap;
word-wrap: break-word;

pre-wrap preserves whitespace in the browser and the text will wrap when necessary and on line breaks.

word-wrap allow long words to be broken onto a new line.

A neat way to work with responsive design in Firefox is to use the Responsive Design view in development tools.

Tools > Web Development > Responsive Design View

Detect mobile devices in Liferay

On Liferay market place there's a plugin named Device Recognition Provider plugin, which integrates with the WURFL database.

With this plugin installed we can setup rules in Liferay's control panel. For this site we have a rule which looks for mobile devices, of any brand and OS, which isn't a tablet. And if the plugin detects a device with those conditions met it will then change the page layout to be 1 column. For desktop screens and tablets it's a 3-column-layout.