We’ve created a fantastic 10 Session Webinar Training Program to aid you in becoming a master mobile web design expert and we’re including an additional 11th session focusing on mobile marketing.

This webinar-based Program starts November 1st and is absolutely FREE and we’re offering it exclusively to registered Wapple users. (not registered yet…click here quick!)

During the course you will learn how to build a mobile site yourself using our fictitous car services site ‘K-Ching’ as the focal point whilst learning some of the exciting key design, marketing & technical features of our intelligent Mobile Publishing Platform.

Once registered you’ll be able to download the Training Pack which will include the Program Schedule, the K-Ching Mobile Site content (graphics, csvs ) and all relevant training preperation.

Be quick though, places are limited and registration closes THIS Friday 28th October.

Register Now for the K-Ching Training Webinar! (or sign up with Wapple first)

I’ve written a much more in-depth article over there about how we did it, but here’s a bite-sized version that you can cut out and put in your wallet:

1. Install the Wapple Architect Mobile Plugin
2. Grab a free dev key from http://wapple.net/register/plugins-signup.htm
3. Activate the plugin and enter your dev key in the Basic settings area
4. Upload a mobile logo
5. Tailor settings so that the mobile version matches the web
6. Style the mobile version so that you retain your brand identity

If you want to read the full article, you can check it out here.

And finally, here is a screenshot of the mobile and web site that shows you how good your mobile blog can look!

Content Management Systems – it seems as though they are the in-vogue tool at the moment with every man and his dog developing one or using it to power their website.

If you do a search in a well known popular search engine for “CMS” (and assuming you aren’t searching for the Church Mission Society), you’ll find Joomla at #3. With 139 million returned results that’s not bad by anyone’s standards.

As well as that, anyone publishing a list of the top five or ten CMS’s can’t fail to include Joomla. It’s had over 10 million downloads and is used on websites from travel companies in Hawaii, hotel reservation systems in Belgium to everything in between. I’m sure at one point NASA has used it for various sites so if it’s good enough for Buzz Aldrin and his chums it’s good enough for me.

Joomla on mobile?

Joomla Demo Site on Mobile

But what does Joomla provide out of the box for your mobile visitors?

Not a great deal is the short answer. I tried to access the Joomla demo site on a couple of handsets – you can see the results on the screenshots to the left.

It’s the usual story of having to view web pages in your tiny mobile window, painfully slow downloads and an awful user experience. You’ll remember that this is the same sorry tale faced by millions of WordPress bloggers until I released a mobile plugin for it, so to even things up a bit in the battle of the CMS’s, I’ve written a mobile plugin for Joomla. WordPress 1 – 1 Joomla (Drupal 0 but more on that later!). Learn more about the reasons why you need to optimize to mobile devices here.

The usual rules apply – it’s free for non-commercial (plus ‘free to try’ for commercial) and you need to sign up for a Wapple dev key to use it. But once installed, you won’t ever have to worry about your mobile visitors again as the plugin takes care of everything for you.

Joomla Mobile Plugin Options

Graphics are resized dynamically to suit the handset, menu’s are configurable as are a whole bunch of image options – there’s even somewhere to input your newly acquired dev key!

Worried about your site being Search Engine Friendly? You should be and you’ve probably installed a plugin to help you out. But what about mobile – you don’t want to have to go through the whole process again. Fear not as my plugin retains all URLs from web to mobile allowing you to promote one single domain and have Google spider a single set of website addresses.

Older phones are catered for as much as newer ones – it’ll look as good as is humanly possible on an old WML browser and will look stunning on a swanky new iPhone. With regards to styles, the plugin tries to replicate the look and feel of the selected website theme so you’ll only need a little bit of CSS tinkering to achieve fantastic results.

The MDA

I’ll write a post at a later date that describes in infinite detail the nitty gritty of how it all comes together, but if you want to see it in action, head over to www.themda.org -  it’s already being powered by our Joomla plugin! There is a screenshot to the right too of how it looks on mobile.

Get the Joomla Mobile Web Plugin!

If you’ve got a Joomla powered website and fancy getting a copy of my plugin and template, check out the plugins section of our site and download it for yourself!

Here’s a quick reminder of why you would want to mobilize your Joomla site:

• Will fit perfectly to every screen
• Future proof for bigger or more obscure displays
• 5% of website traffic now gets hit by mobile devices (read more)
• Retains SEO for mobile and keeps your URLs SEF
• Single domain promotion for both web and mobile (read more)

Overcoming the barriers of mobile web design and development – it’s the tagline of our blog and something that we strive towards each and every day.

We’ve given the development community some amazing tools that allow you to create some fantastic mobile sites and we’ve created plugins, components and classes that help you at every step.

But one thing every Wapple Architect application has in common, is that in order to use it, it must be done via SOAP.

Or should I say, used to have in common, because this week we’ve created and released a REST web service for every SOAP call you can make.

Using Wapple Architect with CURL

What this means as a developer is that you can choose whichever method you want to communicate with Wapple Architect. If you want to use SOAP, carry on doing what you’ve always done, but if you want to use REST, use it. And to show how easy that can be, here’s how you would check if a visitor to your site is mobile or not using PHP and CURL:

<?php
$headers = '';
foreach($_SERVER as $key => $val)
{
 $headers .= $key.':'.$val.'|';
}
$postfields = array(
 'devKey' => 'YOUR_DEV_KEY',
 'headers' => $headers
);
$c = curl_init();
curl_setopt($c, CURLOPT_URL, 'http://webservices.wapple.net/isMobileDevice.php');
curl_setopt($c, CURLOPT_POST, 1);
curl_setopt($c, CURLOPT_POSTFIELDS, $postfields);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($c);
curl_close($c);
if($result)
{
 // We're a mobile device! Generate some WAPL and use getMarkupFromWapl.php service!
} else
{
 // Not a mobile device - generate HTML and output to screen.
}
?>

Once you’ve established that your visitor is a mobile visitor, you can use the getMarkupFromUrl.php or getMarkupFromWapl.php services and amend your $postfields array to include the ‘url’ or ‘wapl’ keys respectively.

Architect with SOAP or REST

So if you’ve looked at using Wapple Architect before but for one reason or another couldn’t or wouldn’t install SOAP, you’ve now got another option that allows you to mobilize your site or app!

We’ve already integrated these new services into our Wapple Architect Mobile Plugin for WordPress so that if you don’t have SOAP installed on your server, you automatically fall back to using REST. And lets face it, if you’re on a shared host, getting SOAP installed is not a task to be taken lightly and can be tricky.

What do you think of these new REST services, does it mean you’ll use Wapple Architect? Do we need even more coverage of web services – XMLRPC for example? Get in touch and let us know!

In June 09 IE6 accounted for 14.9% of web access.

Take a look for yourself here.

Access from mobile devices to web sites is on the increase. It is approximated at about 5% for the same month.

That’s an interesting figure because IE6 is on a downward slide, yet the world is scared of not supporting it.

Let’s get this straight.  Mobile access to popular websites exceeded IE8, Chrome, Safari and Opera. We’re clearly on our way to mobile browsers overtaking IE6.

This is a big deal for anyone who wonders if they should be properly serving mobile content to mobile browsers. The answer is a resounding “YES” and this is how you can do it.

In fact, if you’re not supporting mobile properly, I’d be worried. More worried than I’d be about iE6. The twitter crowd will be bringing that to its knees on your behalf.

How much you should care about IE6 and Mobile Browsers

If you’ve ever had to develop a website that does anything imaginative with it’s width then you will have encountered the inclusive / exclusive discrepancy amongst browsers. For example, should your page length exceed the vertical size of a browser window, a vertical scrollbar appears – trouble is some browsers feel the need to subtract the width of the scrollbar from the width of the page – causing horizontal scroll on the page.Of course, on a mobile phone you can’t change the size of your viewport but because every phone can be different problems arise when trying to create a mobile website that works across all devices. Because mobile devices tend to lack the JavaScript support that we all enjoy in big web browsers and therefore it is not simply a case of denying the bars so that everything works.

Wapple Canvas allows you to build mobile websites in a ‘build-once / publish-many’ manner. The Exhibit engine takes care of making the site work across all devices.

Until Wapple solved the problem scrollbars had been a problem – in fact they remain a problem for those not using Wapple. In the past, to get a consistent look across all devices (as in no horizontal scroll), we suggested to customers that they never size graphics to 100% width. We advised that they change the graphic width to 97% (a feature within Canvas that allows complete control of all graphic sizes on a site) so that devices never experience horizontal scroll. The trouble was that on the ‘better devices’ sites ended up with some blank space on the right.

We decided that this was simply not good enough. So we put a stack of effort into sorting this out once and for all.

Over the course of a week we implemented a new Browser singleton. Previously we had been using our Device object to perform a lot of screen related functionality. Separating it into a Browser class means that we can separate the logic for browser screen decisions from the values that need to be based on the actual device sizes.

Upon instantiation, the Browser class deconstructs the screen into viewport and scrollbar values. These are stored in both pixels and percentages. Everything stems from here.

From then on, all screen calculations are handled by this class. Older phones usually have quite large scrollbar widths. Newer devices often overlay the scrollbar onto the screen when necessary. These phone have a determined scrollbar size of zero, creating 100% viewport, 0% scrollbars in the process.

From then on it’s the same calculations working on every device to handle the screen every time it is required.

We have also put on a few min-height things. This keeps things tidy on certain devices.

Obviously, this new system is optional to our users. A site built with 97% width graphics should not have it turned on until sizes have been adjusted accordingly. Otherwise, graphics will be 97% of a viewport width, which might be 95% of the screen. Easily adjusted, though so no worries.

I think that this week we’ll probably roll this out as an option to Architect users.

Of course in order to do any of the clever stuff above you’d need a dyanamic and intelligent mobile browser and device handling system like Exhibit there in the first place. The conversations we had on this topic have lead us to discuss some very interesting community-based tools. More of that to come in the future…

You’ve installed my Wapple Architect Mobile Plugin for WordPress and entered your Dev Key only to find that although your mobile blog looks great, it doesn’t look as awesome as some of the other blogs that are using the plugin.

So what can you do about it? Luckily for you I’ve compiled a list of some of the top tips to make your blog look awesome on mobile, just follow it and by the end of it you’ll have a great looking mobile site.

Step by Step Guide

1. Upload a header image into the Basic Settings section of the Wapple Architect settings page. The best logos that work on mobile are ones that have solid colours in the background and are as big as possible – the image will be dynamically resized on the fly to fit a visitors mobile phone so anything over 500 pixels in width is good.
2. Don’t forget that once you’ve selected an image, change the “Use Mobile header Image” option to be “Yes”!
3. Turn on commenting on posts. In the “Posts Settings” area, change the “Allow comments on posts” to “Yes”.
4. If you have lots of really long posts, turn on “Do Pagination” under “Posts Settings” – it’ll dynamically chop up your posts into mobile friendly pages. If you want even more control over pagination, change the “Post length” setting to something suitable – around 2000 is what we’ve found to be the magic number.
5. Turn on the “Show home link” and “Show next/previous links” in “Posts Settings”. This will put some handy navigation links at the top and bottom of the page back to the homepage and to the next and previous posts – remember, it’s harder for mobile users to navigate so they need all the help you can give them.
6. Check for any wide elements. Sometimes your web theme may have specified the exact width of elements to be quite wide and as the style is carried across from web to mobile, it may cause horizontal scroll. Have a look at what elements may be wide and reset them in your mobile stylesheet.
7. If you want a bit more control over the various areas of your mobile site, try switch the layout mode from “table” to “div”. If you go to the “Advanced” settings, it’s an option in there.
8. Get styling! There’s 2 mobile stylesheets for you to tinker with and they’re both in the “Mobile Theme Settings” – the first one is a more generic stylesheet that clears a few things down ready for mobile, the second is there for you to make your changes in. You might have installed a completely customized web theme for your blog so you’ll have a little bit of work to do to make it look amazing on mobile!

Here’s a few screenshots of some of the best mobile blogs out there that have followed the guide above: (click on the image to get a bigger version)

WordPress Showcase - Mobile Web Junkie

WordPress Showcase - Red Yellow

WordPress Showcase - The Notebook World

WordPress Showcase - Ben90

WordPress Showcase - The MDA

WordPress Showcase - David Harrell

Hopefully you’ve now got a mobile site to be proud of – if so, let me know! Send over a URL and I’ll feature your blog in the gallery above.

Finally, a few people have asked if they can see the mobile CSS used to style one of the sites in the showcase – as this site was one of them, here is the custom mobile stylesheet used to style Mobile Web Junkie – just drop something similar into your custom stylesheet and tweak it to suit:

body{padding:0;margin:0;}
.main{background:#ffffff;padding:0;}
a, .navigation a{color:#BF362A; margin-bottom:5px; text-align:center;}
a:hover, .navigation a:hover{color:#ffffff;background:#bf362a;}
.homeCategoryHeader, .homeCategories, .author, .search_row, #header, #switchToDesktop, .entry_row, .entry_row_row td, .entry_row_row div,.post-date_row, .post-date, .postTitle, .navigation, .postmetadata, .postmetadata.alt, .spacemaker, .commentTitle_row td, .commentTitle_row div, .nav, .description{background:#f2f2f4;padding-left:2px;}
.entry_row.h2 a{color:#2C343F;font-weight:bold;font-size:1.2em;background:#f2f2f4;border:none; text-decoration:underline; padding-left:5px;}
.entry_row.h2 a:hover{text-decoration:underline;}
.nav{text-align:center; padding:9px 0px 14px 0px; font-size:115%;}
.author{padding-bottom:12px; padding-left:5px;}

To help the community at large, I’ve created a WordPress mobile plugin and theme that provides a perfect WordPress experience to mobile web users and here’s how and why I did it.

Plugins … but not one that truly understands mobile web

If you want to do anything slightly out of the ordinary with WordPress you have to use a plugin. If you want to edit your content in a weird and wonderful way then there’s a plugin to do it. Want better search capabilities? Someone’s already written something to do it. Simply put, plugins are little chunks of code that you install on your site to add extra functionality to the basic set.

Yet I searched high and low for a plugin that would properly mobilize an existing WordPress site, and my definition of properly is:

• Being able to use the same one single domain for web and mobile
• Maintain URLs across platforms
• Retain SEO for mobile search
• Carry through the same look and feel of the website on every single mobile device and browser

I did find one that renders your site for iPhone only, but that’s no good if you’re one of the 90% of mobile users who don’t actually have one. There’s another for PDA’s and a third that renders XHTML only, there were also other plugins that forwarded you round to an alternative mobile URL.

Themes … even fewer mobile options

The other extendable aspect of WordPress are themes, allowing designers to create great looking sites by modifying a relatively small number of files containing chunks of PHP code and HTML. Whilst this is great for web, it’s bad news for mobile because phones that require anything other than XHTML will never be given it.

At the time of writing, there’s only one single, solitary mobile WordPress theme available out of a total of 797 so the cupboard looks a little bit bare when looking for something to mobilize your blog.

So as I couldn’t find a plugin or a theme to fulfill my criteria, I set myself the challenge of writing one that caters for every mobile device and creates an enjoyable user experience for every visitor. As Mobile Web Junkie is one of the many millions of sites using WordPress, it made sense to make it the guinea pig.

How I did it

At a very high level, the plugin works by dynamically switching themes dependant on what platform the user is visiting on. By using the add_action function in WordPress to trigger my own functions at certain points, I made sure that device detection took place early on in the script in order to control what happened, here’s a snippet of code from my plugin.

function deviceDetection()
{
	if(__testForMobile())
	{
		// Load the correct file depending on the URL (copied from template-loader.php)
		$template = __templateLoader();
		$file = WP_PLUGIN_DIR.'/architect/theme/'.$template;
		if(file_exists($file))
		{
			include($file);
			exit(0);
		}
	}
}
...
add_action('template_redirect', 'deviceDetection');

Template_redirect is an action that is triggered immediately before loading a theme – the posts have been created but nothing has been echoed out to the browser. By hooking the ‘deviceDetection’ function into it, I dynamically switched to my Architect theme depending on whether the visitor was on a mobile device or not. There’s a couple of functions missing in the above example, one to get the correct template file (from the ‘__templateLoader’ function) and one to actually do the test for mobile (__testForMobile()). If you get the code for yourself, you can take a look at what they do.

If at this point the visitor was detected as being on a desktop browser, none of the code to switch themes was executed and the code carried on as if nothing had happened.

However, if a mobile was detected, the plugin loaded in the correct template file – if the home page was being viewed, it’d be index.php but if it was an actual post, single.php was the file it tried to load. Here’s a few chunks of my index.php to see what it does:

include_once('functions.php');
$waplString = get_wapl_header();
$wapl = new WordPressWapl;
if(have_posts())
{
	while(have_posts())
	{
		the_post();

		$waplString .= $wapl->link(array('rowClass' => 'entry_row', 'display_as' => 'h2', 'label' => get_the_title(), 'url' => apply_filters('the_permalink', get_permalink())));
		$waplString .= $wapl->chunk('words', array('class' => 'post-date', 'quick_text' => apply_filters('the_time', get_the_time('F jS, Y'), 'F jS, Y')));

		if(get_option('architect_home_showexcerpt'))
		{
			...
			$content = $wapl->format_text(get_the_content(), $homepagescale, $homepagequality, 'entry_row');
			$waplString .= $wapl->chunk('words', array('class' => 'entry_row', 'quick_text' => $content));
			...
		}
	}
} else
{
	$waplString .= $wapl->chunk('words', array('display_as' => 'h2', 'quick_text' => 'Not Found'));
	$waplString .= $wapl->chunk('words', array('quick_text' => 'Sorry, but you are looking for something that isn\'t here.'));
}
...
$waplString .= get_wapl_footer();
process_wapl($waplString);
?>

Instead of having a get_header() function (which is the norm for most WordPress themes), I created a get_wapl_header() function that returned markup from header.php file instead of echoing the contents to screen. I then looped through the posts in the same way as other themes and built up a WAPL string along the way.
At the end of the example, the WAPL string is sent through the ‘process_wapl’ function, here’s what that function looks like in its simplest form:

function process_wapl($waplString)
{
	global $waplHeaders;
	global $waplSoapClient;

	$params = array('devKey' => get_option('architect_devkey'), 'wapl' => utf8_encode($waplString), 'deviceHeaders' => $waplHeaders);

	// Send markup to API and parse through simplexml
	$xml = simplexml_load_string($waplSoapClient->getMarkupFromWapl($params));

	foreach($xml->header->item as $val)
	{
	    header($val);
	}
	echo trim($xml->markup);
}
?>

This function is very similar to some I’ve used in other projects, it takes the WAPL string and sends it through the getMarkupFromWapl SOAP service. You can see how it’s used in my Intro to Architect Mobile Web Development and mobilize your cake app in minutes article on the Cake Bakery. Infact, the whole process of doing device detection in one area and the building of WAPL in another is a pattern that could be applied to any other CMS or framework – I’ve already started work on a Joomla plugin and you could also use the same logic for Drupal.

There are a whole load of builder classes and functions included in my theme that will turn WordPress markup (mostly HTML with other bits thrown in) into plain text and Wapple Text Formatting. The WordPressWapl class also allows you to build WAPL markup that will always be valid and conform to the schema.

Get the plugin

Now I’ve created a plugin and theme that not only makes sure that my blog works for every single device, but will do the same for anyone else with a WordPress blog who wants to mobilize it.

If you want to take a look at my plugin, head over to http://wordpress.org/extend/plugins/wapple-architect/ and check it out for yourself! There are extensive instructions on there with regards to installing as well as a few screenshots so you can see what you could accomplish.

Plugin Features

• Create mobile specific page header and page footer images
• Customize your blog for mobile by configuring options in the control panel
• Make sure long posts get split up into manageable pages
• Dynamically resize your uploaded images
• Pull through the look and feel of the website theme
• Fully customizable mobile CSS
• Extendable for other WordPress plugins
• Works for every single device
• Correct markup is delivered to the right handset
• Retain one single domain
• Maintain SEO friendly URLs

How to Install

The installation process is simple. Upload the contents of the architect.zip file into the /wp-content/plugins directory, activate the Wapple Architect plugin and enter a valid dev key. From start to finish, you should be able to mobilize your blog in under 2 minutes!

The Result

Here’s a screenshot of what my plugin has done for this blog, but if you want to see the results for yourself, visit Mobile Web Junkie on your mobile phone.

Mobile Web Junkie

But whilst my plugin works perfectly, it’s missing a helper to actually build the WAPL for you. So I was really impressed when I saw that Gordon Pettey had written his own article on the bakery using mine for a bit of inspiration that not only did everything my plugin did but included a helper!

I’ve tested the code and it works just as expected, so if you’re using CakePHP and want to mobilize your website or app, you should check out his Universal Mobilization with WAPL article.

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.