Liferay Recipe: Steps To Baking Websites For Mobile Consumption

A Recipe For Going Mobile

The Spain Symposium site is now mobile ready! Check it out!

I thought this would be a great chance to look back and share the development recipe we followed. Again, we did all of this in a little over one week's time, so I cannot promise that it is the absolute best way, but it's definitely a way to get it done without losing too much hair.

Everything here applies to either theme level development, or changes to content/template styling. My goal is to keep this somewhat high level, just hitting on the parts that may not be totally obvious to everyone (well, at least not all of this was obvious to me before starting on the project). I hope this is helpful for someone out there. It sure would have been helpful for me 2 weeks ago, ha.

 

1) Class Management - adding the classes you need so you can start styling NOW

a) Add classes for your viewports
Using Alloy's Viewport gives you a set of nice classes to work with for common browser widths (mobile or not).  Add these lines between the <head></head> tags in your portal_normal.vm theme file to get the classes auto-injected:

		#js ("$themeDisplay.getPathJavaScript()/aui/aui-viewport/aui-viewport.js")

		<script type="text/javascript">
			     AUI().use('aui-viewport');
		</script>
	

 

b) Add a class to hide content from mobile
Some content probably isn't applicable to mobile. So you can create a class like .mob-hide to hide those things. Prepend them with whatever viewport width(s) that you need:

	.aui-view-lt720 .mob-hide {
	     display: none;
	}
	

 

c) Add a class to fix content flow
Some content may already be styled with hardcoded pixel widths. Defining a class like .mob-100 can convert them to 100% width (or any other useful percentage that you need), allowing elements to adjust without overflowing or breaking:

	.aui-view-lt720 .mob-100 {
	     width: 100%;
	}

 

d) Add a class for your homepage
We needed a class just for our homepage so we could do major surgery on it without affecting the whole site.  To add .home-page to your home, add this to your init_custom.vm:

		#if ($plid == $page_group.getDefaultPublicPlid())
	       #set ($css_class = $css_class + " home-page")
	#end
	

 

Clever use of CSS classes allows us to make dramatic changes without creating too much new/duplicate content

2) Layout Management - prepping your layout to stretch and grow with screen size

a) Setup your meta tags Setup your meta tags to make sure that smaller viewports load pixel for pixel to the width of the device's browser by placing this meta tag between your <head></head> tags:

	<meta content="width=device-width" name="viewport">
	

 

b) Replace fixed widths on your "wrappers"
If you have fixed width on your wrapper, banner, content, or any of your outermost wrapping elements, convert them over to percentages (probably width: 100%) so your site can breath in and out with the viewport size.

c) Wrap or hide your 2nd, 3rd, 4th etc. columns
There is very little screen width for mobile, so do what you can to either wrap your columns or even hide them if they're not needed.

d) Add percentage widths on your images
Any relatively large images in <img> tags will prevent your site from flowing properly. Make sure to give them a percentage width so they will shrink with the wrapper. Same goes for iframes or any other embedded content.

Different examples of navigation styling to accomodate mobile

3) Navigation Management - converting the main navigation to something that is intuitive

a) Let your nav items wrap
If your navigation elements are inline left to right, then you'll likely need to re-style them so they wrap to accomodate less screen width.

b) Don't let your main navigation and your content fight
Don't leave your main navigation stacked on top, just to push all the actual content down below the fold. This forces users to scroll down on every page of your site. Instead you can either put the main navigation on the bottom, or create a popout navigation, or just turn your homepage into the main nav, and provide a back button on all other pages (that's the way we went).

Nate getting feedback from Ce (manager of events)

4) Top Liberally With Testing

Test in your browser. Test on your phone. Test on your coworker's phone. Test on tablets, test on phablets. Have other people hit the site on their own so you can get their feedback. We found random, random, bugs on specific phone models that we wouldn't have found with phone emulators. You get the idea.

 

That's all I have for today. Hey! Have a great week. Friday is only a day away.

Blogs
nice recipe Ronald, it's the perfect dessert for Nate's responsive post emoticon
If I may... I would add one more ingredient to step 2d... max-width/height, particulary for some img tags in -lt480 and -lt320. We have experienced better results with it. Do you recommend it?
Sorry for late response - yes, max-width/height in conjuction with .aui-lt and .aui-gt classes work great too if there are scenarios where percentages will not get you the specific results you need.
Thanks for your informative blog! Is there a way to load AUI().use('aui-viewport'); at the beginning of the page so that aui-view-lt720 etc classes are added to <html> tag right away? Now, the content is glittering when the aui classes are applied "at the bottom". A possible workaround is appreciated.