Theming Responsively

There is a pressing need for websites to respond to the ever-changing technology which is used to visit them. As mobile devices become more powerful and more prevalent, more and more people surf the web and visit websites on an array of devices. These devices range from small screens to large monitors, from ios to android, to other operating systems and internet browsers. Supporting all of them is quite a chore, and next to impossible depending on the method you use. This is why I believe the best way to design a website is responsively.

I do not intend in this blog post to define responsive vs adaptive or defend why I believe responsive is preferable. My goal is to provide a few basic concepts and implementations that I have found very helpful while creating responsive themes with Liferay. Essentially, these are the things that I would put in just about any theme I create in order to make capable of being viewed on any screen size. In essense, this is just a chunk of css that will work with Liferay (6.0 and 6.1 at least) and create a fluid layout for you to build on and some extra classes to use as you populate content on your site. Before we dive into the code, here are some basic rules I have found helpful in responsive theming:

  • Avoid setting fixed widths over 300px

    As a rule of thumb, just don't set widths over 300px. Usually I set the min-width of the body to 320px, meaning I support a screen size as small as that before it will scroll horizontally. If you set anything, such as content, containers or images, with a width over 300px, it will interfere with the layout when it gets smaller. If you really need to you can use the max-width to a larger number and then the width to 100%, or set larger widths and then use media queries to change them, but it is best to structure your site simply and efficiently to respond to the situations naturally. It will save you code and time in the end.

  • Use percentages as much as possible (aui widths are great ie. aui-w50)

    This point is similar to the last one, but more of the positive side of it. Use percentages as often as makes sense. The aui width classes are very useful and available out of the box with Liferay. They are being used in the default layouts, and can be used as you create content and other structures on your site.

  • Design things with mobile in mind

    The key to having a responsive site is to plan for mobile first. This means when you are structuring your html, think about what will happen when the screen shrinks. If you have multiple columns, make sure that they will wrap nicely when the screen width decreases. This rule takes a little more planning and is not always in your control, especially if you have an existing site that was not designed to be responsive. It is possible to mobilify an existing site, but it is much cleaner and easier to plan it from the beginning. I would even go as far to say that you should have two separate mockups of your site before you start, a mobile view and a full view.

 

With those basic rules, there are now two areas that need to be addressed, one is a fluid layout and the other is navigation.

Fluid Layout

This is the basis of your theme. Thinking out the framework is vital in order for your theme to be fluid and respond to whatever screen size it is viewed on. I have found a few lines of code which have served me well in creating a fluid layout with liferay. It takes what comes out of the box with Liferay and makes it respond well, and it also gives you the structure for how you develope content. Here is the code you would add to the custom.css in your theme:

#wrapper {
	margin: 0 auto;
	max-width: 960px;
	min-width: 320px;
	width: 960px;
}

.container-column, .portlet-column {
	display: table-cell;

	.container-column-content, .portlet-column-content {
		padding: 0 10px;
	}

	.container-column-content-first, .portlet-column-content-first {
		padding-left: 0;
	}

	.container-column-content-last, .portlet-column-content-last {
		padding-right: 0;
	}

	.container-column-content-only, .portlet-column-content-only {
		padding: 0;
	}
}

.responsive #wrapper {
	width: 100%;
}

.responsive-only {
	display: none !important;
}

@media all and (max-width: 720px) {
	.responsive {
		img {
			max-width: 100%;
		}

		#wrapper {
			width: 100%;
		}

		.container-column, .portlet-column {
			display: block !important;
			width: 100% !important;

			.container-column-content, .portlet-column-content {
				padding: 15px !important;
			}
		}

		.responsive-hidden {
			display: none !important;
		}

		.responsive-only {
			display: block !important;
		}
	}
}

 

Basically what this code is doing is taking all of the columns in your layout, which already run off of percentages, and making them 100% when the screen width is under 720px. This will cause the columns to stack, and be easily viewable on a mobile device. It also implements a class to hide elements when the screen width is under 720 (responsive-hidden) or a class to only display elements when it goes below that screen width (responsive-only).

These classes are helpful to have, but perhaps the most useful class are the ones with "container-column" in them. Let me explain why. On the web team for Liferay, we are very often creating new pages. Most of the time we create the content on the page using the Web Content Portlet. Having a set of classes we can use to create a structure on the pages that makes it automatically responsive is incredibly useful. The easiest way to explain this is by showing an example.

<div class="aui-w100 container-column">
	<div class="container-column-content container-column-content-only">
		<!-- Your Content Here -->
	</div>
</div>

<div class="aui-w33 container-column">
	<div class="container-column-content container-column-content-first">
		<!-- Your Content Here -->
	</div>
</div>

<div class="aui-w33 container-column">
	<div class="container-column-content">
		<!-- Your Content Here -->
	</div>
</div>

<div class="aui-w33 container-column">
	<div class="container-column-content container-column-content-last">
		<!-- Your Content Here -->
	</div>
</div>

Essentially we are mimicking how the layouts are made, but with a different class name. When you form sections, these classes will take care of all of the padding for both full screen and mobile views, as well as the sections wrapping. All you have to do is remember to add the class "container-column" and "container-column-content" and everything structurally takes care of itself. You still have to be mindful of the content inside of it, but using these classes saves a lot of time and css in your articles.

Blogs
hi....
How to Post my issue in Liferay ?
hello, you will want to post problems that are not related to this post in our forums section, and find the correct category, such as https://www.liferay.com/community/forums/-/message_boards/category/4624761