We've Responded: Mobile Symposium shipping soon!

Godzilla not included

Coming to a mobile device near you

Things have been going fairly well in converting the Spain Symposium website into a mobile-friendly experience.  The goal is to give our Symposium goers all the info they need at the flick of a thumb, all the while allowing the Spain events team to update on the fly (even during the event!) and have it refresh live.

At this point we are about 90% done with development, only left with code review and design review for (hopefully) minor tweaks.

 
Preserving the dynamic navigation

The good, the bad, and the humbling

Some things that we were initialy worried about were solved really quickly:

1) Liferay layout columns made hiding content consistent and clean.  It was literally 1 line of CSS (3 lines with source formatting) and all the page layouts across the site were done!

2) All the Alloy UI popup widgets (aui-overlay-context-panel) were already rendering correctly on mobile.  Only a couple adjustments to the align property made things centered and mobile-screen friendly.

3) Adding a small form language toggle into the theme was two lines of code.

  • #set($selected_languages = $stringUtil.split("es_ES,en_US"))
  • $taglibLiferay.language("fm", null, "languageId", $selected_languages, 1)

One line to define what languages we're using and one line to display the toggle. The toggle works flawlessly.  A snap.

4) We utilized $velocityCount on the main navigation to give each link its own numbered class name.  This allowed us to give color and icons to the existing nav, and if the Spain office needs to add more pages, we can now style those too.

5) We also added id="page$layout.layoutId" to our body tag, giving us #page1, #page2 etc. This is how we we're able to easily hide/show content on a per-page basis.

 
Car = Liferay.  Bird = webteam.

What wasn't as fun:

1) grabbing each mobile device around the office and saying things like, "Wait!  I thought [device x] was supposed to be [some pixel count] wide!"  We had to take extra care to convert fixed widths into percentages and plan for elements to "flow" on each page.

2) Oh, retina displays. We replaced most images across the site with 2x images, using width percentages for img tags, and background-size for background images.  Retinafying?  Retinacation?  Retinanamification. But it looks beautiful now.

3) Fixing styling for content in both English and Spanish.  This is a testimony as to why it's good to put as much HTML as possible into the template, and leave only copy inside the article.

What was humbling:

We could not leverage Alloy viewport as we had anticipated because out of box Liferay loads AUI last (for a plethra of good reasons), but this made the mobile site "pop" in from the full site, instead of loading up the viewports we needed immediately.  I talked with some of our UI Engineers and found that it can be adjusted to load first, but only portal-wide, affecting Liferay.com as a whole - not an option for us.  Regardless, Jon Neal (who makes responsive watermelons) had a handy js script that works great and loads fast for the seamless experience we wanted.

Coordinating articles, localization, templates, and theme into production

 

Takeoff is optional, landing is mandatory

The theme is committed, and now it's just a matter of careful timing and gluing together all of our "behind the scenes" content changes and the deployed code. Overall it's been an amazingly smooth process, from starting off wishing we had an extra two weeks, to saying 5 days later: "Hey.. we're done!" We can't wait for the code to roll out so you can kick the tires and give us some feedback (we'll let you know when it's up and running).

Favorite quote from Design department: "is it fat finger friendly?" Liferay Design, your friendly fat finger advocate.

If you have any questions or suggestions, feel free to throw in a comment.

Your's truly,
Liferay Webteam

Blogs
I would recommend adding the icons through manage pages. That way the image resources don't have to be added to the theme and css. On the desktop theme you can hide the icons, but on the mobile theme display the icons for each of the parent pages.