Mobile Web Junkie

Last week something exciting happened inside the colourful walls of Wapple – the latest version of the mobile site was launched. Below are the obligatory before and after screenshots and at first glance you’ll probably notice that they look pretty similar. However, all is not as it seems because underneath the bonnet – everything has changed.

Built with Canvas

Built with Architect

Since its conception a number of months ago, we’ve been telling anyone who will listen how good Architect is, how you can use one domain, use the same URLs on mobile as on web, retain SEO from web to mobile and centralize all underlying business logic no matter which platform you are browsing on.

Now we’re practicing what we preach

The previous site was built with Wapple Canvas, a superb tool with full drag and drop functionality perfect for creating mobile marketing campaigns. There are some awesome mobile sites built with Canvas that look amazing and convey the exact message they’re designed for, here are just a couple of them:

Watchmen

Alfa Mito

The above sites work better in Canvas as they’re designed specifically for mobile advertising campaigns, there’s no corresponding website and they can be targetted at a mobile audience. You’ll find more detail on Wapple Canvas here.

One domain

For websites like Wapple’s, it’s essential that if you’re on a mobile device and hit the wesite url (http://wapple.net in this case), you get something that looks perfect on your handset no matter what screensize or capabilities your phone may or may not have. It is essential to use Architect to deliver the mobile site with pages written in WAPL if you want to provide a great user experience to everyone.

During the week I read a tweet from Brian Fling about a one-day mobile workshop, and in the spirit of “if you can do it so can we”, we thought we’d have a go at building wapple.net with Architect & WAPL in one day.

We already had a mobile site built in Canvas with all graphics already saved out and we’d used our experience on mobile to make intelligent decisions over what was to be displayed on mobile rather than the website. For example, the big slider the sprawls across the home page of the website could be turned into a smaller and simpler version for smartphones such as the iPhone but wouldn’t really be appropriate for a tiny phone with no javascript capability.

This is where the magic happens

Mobile Shopping Review

The Wapple website is built with CakePHP, an MVC framework that gives us flexibility and speed of development. We’d previously mobilized plenty of other cake apps such as mobileshoppingreview.com plus I’d already written a plugin and article for the cake community about how to mobilize a cake app which, incidentally, we used to mobilize wapl.info. Development was going to be easier with the plugin already available :-

Once the Cake plugin was in place, it was just a case of writing WAPL for every page we wanted to mobilize.

Within half an hour we had the component in place that did device detection and altered the view and layout path accordingly if the visitor is on mobile, a layout that would take the WAPL code inside the view files, wrap it in a bit of header and footer WAPL and send it through a SOAP web service, and placeholder view files for the pages we wanted to mobilize.

Another half an hour and all of the ready made graphics were in place, the header and footer of the mobile site looked smart, the main menu was sorted (which actually looked better than the Canvas version) and we’d implemented a new bit of functionality that displayed the latest wapldevs tweet. And because we’re using cake and all business logic is centralized, latest tweets from wapplemobileweb are also available on the website!

After a quick break for lunch, a game of pool and a much needed cup of tea, we pressed on with creating view files for the pages. The home page was sorted first, shortly followed by the rest of the top level menu, the other product pages and lastly the contact form and latest news. By mid afternoon we were ready to send the site to QA for testing.

We noticed at this point that the quality of the images generated through Architect didn’t match that in Canvas. A short investigation ensued which resulted in a quick fix going up to the live WAPL server which fixed all of the image quality issues. After another short round of testing, the code came back with zero bugs so we were ready to launch.

Or so we thought

When deploying the code to a test live box, a number of elements on the website were being displayed twice or in some cases, three times and seeing as some of these elements were only referenced once in the code, it was a little confusing (it worked fine on the local dev server). The problem was an issue with cakephp, rsync and windows / linux file formatting and after running a touch command over all .php and .ctp files it resolved itself, however, this little setback meant we were near to 5.30pm and no-one wants to deploy anywhere near going home time.

We did build the site in a day

We did build the site in a day and although it would have been nice to launch on the same day, common sense meant it was launched first thing the next morning, however, it does prove how quick and easy it is to mobilize a website. We now have URLs that work both on mobile and web, we’re using just 1 domain for every browsing platform and we’re retaining all of our website SEO giving us the ability to promote our sole domain and not resort to m. or /mobile or a .mobi.

We’d been seeking a solution for a long time that will mobilize existing web content so it was a really significant step for us to employ Architect as the technology behind our mobile wesite. Inventing WAPL was very much an epoch defining moment in Wapple’s history!

So in summary

Developing properly for mobile is now an easy process, especially if you’re using a framework that does all of the heavy lifting for you. Gone are all the barriers for web developers which I’ve written about in my intro to architect article – you should be able to mobilize an entire site in a single day with Architect.

To see how we got on and view the site on your mobile, visit wapple.net or scan the QR code to take you directly to the site.

If you want to make a truly mobile friendly version of your own website just like we did, sign up to our Developer program for free usage and a dev key.

Related posts:

1. Intro to Architect Mobile Web Development
2. IE6 Must Die, Mobile Browsers Must Live
3. How I Mobilized WordPress – the Technical Howto for Devs, Coders, Web Geeks and Wizards
4. Podcast on Making money and mobilizing your wordpress blog
5. Importance of Single Domains for Web and Mobile