A Mobile Approach in Concrete5

To compliment my short post on Multi-Site deployment of Concrete5, I thought I would add to it with a candidate approach for generating a mobile site.

Assumptions

With this approach, I’m assuming a setup of a mobile site on a subdomain as opposed to sub folder.  I would consider this best practice as URLs stay consistent between the desktop and mobile site, which is encouraged in the Mobile Web Best Practices Guidelines from the W3C (http://bag.gs/gReORJ).

I’m also assuming that the desktop site has been created already.  I appreciate that this may not always be the case and that in some circles, it is encouraged to consider mobile first.

1. Set up another site on your mobile domain

Follow the steps in Multi-Site deployment of Concrete5 for your mobile domain.  In my case, I’ll use the example m.example.com but do not go back to the basic install steps at the end and do not set up your site by providing the name, URL, and database details.

2. Share the Desktop Site Content

With thanks to the great MVC design of the Concrete5 product, all the content resides in the database away from the templates and the controls, which affect the view or presentation.  Therefore, sharing the database between sites is like sharing the content.

So, open up your site.php (e.g. /var/www/m.example.com/config/site.php) and simply copy into it the contents of the site.php from your desktop site.  This means you bypass the latter install steps.

3. Themes, Controllers, and Templates

Now that we share the content, we have a blank canvas for how we would like that to appear.  I actually take a copy of the desktop site files as a starting point as I can then build into them the various mobile optimisations and at least have a starting point where all the theme templates and blocks exist so nothing breaks.

So at this point, the site will be effectively a copy of the desktop site but on a different domain.

4. Device Detection

There are different services available for device detection but they all are orientated around detection through reading the User-Agent HTTP Header.

I ended up using Tera WURFL (http://bag.gs/ewCsoc) as I didn’t want to pay for something and thought that I could manually update ok.  This is working out fine for me but your needs may be different.

Based on the simple example available on the Tera WURFL site (http://bag.gs/fKsG2X), you can extract various properties about the device and make a decision about how you want to serve that device.

I chose to categorise devices based on certain screen resolutions and other capabilities meaning that I ended up with 3 different device profiles to serve: Basic, Intermediate, and Advanced.  From this, I can make decisions based on the profile within my templates.

 

Summary

I don’t make any claims for this being the best approach but I sure would like to get the conversation going about this.  I know there are other smart ways where people change the theme based on device (in comparison to the changing of domain based on device as exampled in this post).

As mentioned earlier in the post, I like this approach as it keeps a balance of URLs between the main and mobile site.  Additionally, block templates are not tied to a theme and so the view.php or custom template for a block on the desktop version could be totally different than in the mobile version.  This also means that you can use Concrete5′s great image helper in such templates to help optimise image sizes for mobile.

Please feel free to leave comments and questions and I’ll do my best to answer or improve the post.

 

8 thoughts on “A Mobile Approach in Concrete5

  1. Dave

    Thanks for these posts. I was wondering how exactly you use Tera WURFL with Concrete5 to accomplish this-

    “I chose to categorise devices based on certain screen resolutions and other capabilities meaning that I ended up with 3 different device profiles to serve: Basic, Intermediate, and Advanced. From this, I can make decisions based on the profile within my templates.”

    How exactly do you accomplish having three different versions at the mobile sub-domain? Is Tera WURFL capable of choosing different Concrete5 themes?

    Thanks again!

    Reply
    1. Danny Baggs

      Hi Dave,

      Your question does stimulate some good thoughts about possible improvements to the approach I took. However, I chose the profiles based on the criteria of the device and saved these profiles into the session, from which I dynamically evaluate within the concrete5 templates to decide how to display certain things.

      For example, the basic profile means that I include a simple CSS stylesheet but the intermediate and advanced profiles use other ones. I can also choose to adapt the html structure within certain templates as a result also.

      All that said, your point about switching the theme could be an appropriate approach that keeps things nicely separated, which in turn helps the maintenance and management of the code.

      Regards,

      Dan

      Reply
      1. Dave

        Dan,

        Thanks for the reply.

        Is this dynamic evaluation done with a script you wrote or does Tera WURFL give you the ability to choose different css and html files based on the profiles?

        Thanks!
        Dave

        Reply
        1. Danny Baggs

          In summary, the part of the code I’ve implemented within the concrete5 templates that use the TeraWURFL classes ends with the placement of certain properties into the session. From there, it is purely the if else type logic I’ve coded within the concrete5 templates that decide on which HTML to include.

          Reply
  2. Andrey

    Hi,

    Thanks very much for this post — sadly, it seems to be still (nearly a year later) the most solid information about getting C5 configured for mobile.

    I have a question regarding your implementation of Tera-WURFL. I cannot find ANY information about how to use that tool (the Wiki was not nearly sufficient to explain anything to me), and their forum appears 100% empty (possibly a consequence of their acquisition by ScientiaMobile). Could you please describe exactly how you are able to implement that tool in C5 (for dummies — I mean really). What code did you use, and where? If you could post example code, and describe where to put it that would be the best.

    Thank you very much, I am very grateful for this info and any other you could provide.

    Andrey

    Reply
    1. Danny Baggs

      Hi Andrey,

      Thanks for the comment. The points you make can’t really be answered well enough in a reply comment.

      Therefore, I’ll endeavour to either update the post or make a new post to try and cover the points you make.

      Consider it on my “to do” list.

      Regards,

      Dan

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>