« Back

Making a website responsive... in about one week

Company Blogs October 10, 2012 By Ronald Sarayudej

Sometimes lightning strikes.  Sometimes lightning strikes twice.  And sometimes lighting strikes a bunch of times while you're already busy with the Liferay North America Symposium and a pending website upgrade and a bunch of Liferay Marketplace updates and other ongoing, daily website tasks.

A few weeks ago our team got a JIRA ticket, requesting us to make the already beautiful Spain Symposium website, into a mobile-responsive website.  So the backstory is that North America was able to whip up iOS and Android mobile apps for their event with the efforts of James Falkner, but the Spain office has less bandwidth to do the same.

BUT we have Liferay.  Bandwith or not, large teams or not: where there is Liferay, there is hope.  That or.. Liferay is like a box of chocolates?  Whatever cheesy pun, we know what to do: we need to make the Spain Symposium site mobile-friendly for our end users... and in a pinch.  Due to review and release processes, not counting weekends, we really only have 7 business days to get this thing done. (insert delirious laughter)

Spain Symposium Mobilization mockup

Thankfully, our Liferay instance makes the process easier than it would be without.  We have Theme Variations, we have Alloy UI to make our viewports a snap, and we do have a Jon Neal who can squeeze mobile responsiveness out of a watermelon.  I am not kidding.

The requirements we are aiming for are:
1) Reduce content to one column
2) Utilize the SAME content, so the Spain office can update content in one place, and it will show on both versions of the site
3) Convert the homepage into main navigation only, and all other pages will only have a "home" button to link back to it
4) Users should not have to "zoom in" to read or interact with the site.

Today we meet to create our development game plan, tomorrow we start coding, the rest of the week is just dodging other quick deadlines.  Dodging lightning...

dodging lightning

...or dodging trailers on horseback.

Threaded Replies Author Date
Great real world example of Alloy viewports! Thiago Leão Moreira October 11, 2012 6:21 AM
I have to admit that I watched the gif loop a... JR Houn October 11, 2012 1:06 PM
@Thiago - yes! Alloy viewport is so slick! I... Ronald Sarayudej October 11, 2012 1:12 PM
We got bit by the "duplicate source of data"... James Falkner October 11, 2012 7:59 PM
Thanks, James - we'll see how it turns out. We... Ronald Sarayudej October 15, 2012 4:22 PM
Ron, you are funny :) Brian Chan October 18, 2012 4:20 PM
What an amazing example !!!!! It's south... Jignesh Vachhani October 21, 2012 11:31 PM
@Brian - thanks, Brian. Just explaining it how... Ronald Sarayudej October 22, 2012 10:05 AM

Great real world example of Alloy viewports!
Posted on 10/11/12 6:21 AM.
I have to admit that I watched the gif loop a few times before I read the content. Hahahaha. Great post though. ;)
Posted on 10/11/12 1:06 PM.
@Thiago - yes! Alloy viewport is so slick! I added one line of script and within minutes I was already working on the styling for mobile. Awesome.

@JR - yes, the .gif is amazing. Even more amazing that it's all real, like everything else on the internet.
Posted on 10/11/12 1:12 PM in reply to JR Houn.
We got bit by the "duplicate source of data" issue a few times at NAS, so this is the right way to go! Kudos for taking it on, on such short notice!
Posted on 10/11/12 7:59 PM.
Thanks, James - we'll see how it turns out. We told Cecilia about the effort, so now we have another option on our hands (and mobile devices) for the 2013 Symposia.
Posted on 10/15/12 4:22 PM in reply to James Falkner.
Ron, you are funny emoticon
Posted on 10/18/12 4:20 PM in reply to Ronald Sarayudej.
What an amazing example !!!!! It's south Indian movie trailer emoticon
Posted on 10/21/12 11:31 PM.
@Brian - thanks, Brian. Just explaining it how I see it, ha

@Jignesh - yes, Indian movies are awesome! Thumbs up to Bollywood
Posted on 10/22/12 10:05 AM in reply to Jignesh Vachhani.