The Manos Blog

 

Three Strategies for Going Mobile with Joomla

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 Preface on Mobile Users

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.

Responsive Designs

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!

Pros:

  • Fast development
  • Single codebase
  • Works on all devices

 

Cons:

  • Not easily bolted-on to existing websites
  • A talented designer who knows how to design responsive layouts is absolutely required (is this also a 'Pro'?)
  • If done improperly, full-site contents can be sent to mobile users on low-bandwidth connections resulting in frustrated users, half-downloaded pages, users insta-leaving, or all of the above.

 

Mobile Templates

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.

One of the big catches for a developer is that the mobile markup will only be as good as the markup the extensions (especially the components) are spitting out. The overwhelming majority of Joomla modules and component developers put no thought into how their extension's output will look on a small screen. If you're using components that were built properly, you'll have template overrides at your disposal and this may not be as big of a deal. However, if one of your extensions breaks Commandment #3 (and a surprising number of the big ones do), you've either got to use some really creative javascript/styling or (*gasp*) hack the poorly-made component's output to get it to do what you need it to.

Pros:

  • If you have any experience building a Joomla template, building a mobile template will be a piece of cake.
  • There are 3rd-party plugins that will help you handle serving the mobile template to mobile users.

 

Cons:

  • It could get very messy or expensive (often both) if you use an extension that doesn't adhere to MVC properly.

 

Mobile-Dedicated Website

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.

Pros:

  • Can often be developed quickly because it usually lacks a lot of functionality that the full site has.
  • Usually has a much smaller file-size to download, making the site feel a lot more responsive to mobile visitors.

 

Cons:

  • You will need to maintain two separate codebases.
  • If you setup an API to pull data from your full site, expect extra development costs associated with that level of expertise.

 

The Takeaway

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.

 
star