March 01, 2012
There's no doubt: mobile websites are all the rage these days, and all signs point to it being more and more important in the coming years. As such, a lot of attention is being paid to having a "mobile presence", being "mobile ready", and a whole host of other ill-understood buzzwords. However, there are a few ways to approach a mobile website. I'll try to break down some of the different options that are available with some pro and cons along the way, as well as a note on how Joomla fits into this conversation specifically.
A point that most website owners don't think about until they start diving into the possibility of a mobile site is this: What is important to a mobile user is often not the same thing that's important to a user on a desktop browser. Mobile users can be further broken down into on-the-move users looking up information quickly and casual users who are viewing the site on a mobile browser simply because it was the closest device to them at the moment (as opposed to a laptop sitting across the room). The needs of both types of users need to be taken into account when thinking about the final mobile product that they'll be interacting with.
As the website owner, it'll be your job to come up with a way to balance these needs by providing a focused experience while not watering down the real purpose of the website. How that's accomplished depends a lot on the goals of the website: conveying information, a marketing/sales conversion, etc. It's often a good idea to work with an impartial 3rd-party with no particular attachments to the site to help with this process. For most website owners it ends up being a pretty eye-opening exercise to realize what is at the core of their web presence and to strip away all of the extraneous bits that they thought were so essential to the website.
Once you're armed with a clear view of what your mobile users want, you can dive into how to best deliver it to them.
So much has been written about responsive or adaptive designs in the past year that it's almost dizzying. The basic premise is that you have one design (or codebase) that works across every viewing experience. This has huge advantages for cost and development since only one codebase has to be maintained at any given time. Also, this is the most forward-thinking approach since it accounts for viewing experiences as small as a tiny mobile device and as large as a living room TV.
The huge caveat with responsive design is that a redesign of the full-width website has to take place at the same time. If you're happy with your current website design/layout, it's nearly impossible to "responsive-ize" a pre-existing design. Usually decisions were made (or weren't made) in the design or markup (underlying code) that make it prohibitively complicated to utilize this method. However, if your website is due for a redesign anyway, there is no excuse not to think of it in terms of being responsive. When you work with a designer on this, make sure they're aware of the implications of how responsive websites work. It's no longer as simple as going the traditional route of designing a full-width layout and a separate mobile-width layout. Instead, responsive design focuses more on proportions and interactions of the various elements contained within the website through a full range of widths. For more about this, Trent Walton sums it up nicely in recent article*. Also, our friends, OS Training, recently posted a roundup of Joomla templates that are responsive out-of-the-box.
*Make your designer read this!
Sometimes a responsive design isn't a possibility and it's necessary to serve a completely different layout to your mobile users. This is often the case when the full-width layout is packed with so much content (clutter?) that you need the full width of a large screen to see what's going on. This is where mobile templates come in handy. Whereas responsive designs would just hide whole chunks of the website (while still being downloaded to the mobile device), a mobile template will be able to leave out selected chunks of the site so that they aren't downloaded at all. Also, with a responsive layout a developer will have to juggle making the same layout code work for both the full-width layout and the mobile layout. A mobile template doesn't have that restriction. It can use its own separate layout code without having to be mindful of the full-width site.
Mobile templates are typically the route most established websites take, for better or worse. There are ways to detect when a user is on a mobile device and serve them the mobile template instead of the full-width template. With the proper design, this can be a fairly cost-effective route to take as well.
In some cases, a website will have lots of information or interaction that will disqualify it from going the responsive design or mobile template route. In these cases, it's necessary to serve up an entirely different website, tailored specifically for mobile visitors. Large sites in the non-Joomla world typically build a site that simply pulls from the same data-source as the main site (usually via an API). Since Joomla doesn't have a RESTful API out of the box*, this approach can be quite a bit more complicated. However, if your site has content that doesn't change that frequently, you may elect to build a static mobile site.
The main advantage of a mobile-dedicated site is that you have full control over every bit that gets delivered to a mobile visitor. You no longer need to figure out how to juggle the CSS for a viewport 2000px wide and 320px wide. More importantly, you don't have to make your mobile visitors download assets that will only be used on a full-sized site (such as larger images or scripts for a slideshow). Speed will be the biggest advantage of going this route.
*Our pal, Brian Edgerton, built an extension called the RelaxAPI to fill this gap. It's aimed at developers, but it works beautifully.
You can't snap your fingers and expect a good mobile experience to appear. It will be a lot like developing your website all over again. There are solutions that promise an instant mobile website just by installing an extension. Take this with a grain of salt, but I think you are doing your website a disservice by using something like this. What is better: a mobile visitor seeing your full-sized site on their mobile device and having to zoom in (which, by this time, will not be uncommon to them), or having a mobile site that looks nothing like your brand or full site, and what's worse, looks like everyone else's site who has used that particular extension to make their site insta-mobile?
Approach your mobile site like it's a new website and really think about the needs of your mobile visitors and how to best serve them. Making them wade through everything on the full site may end up being a disservice. Not giving them access to everything may drive some users crazy. Often it's a matter of finding the right balance for your website. Spend the time to do it the right way, and your mobile visitors will thank you.