How to make a mobile version of your site with Expression Engine 2.

Feature image

If you visit http://m.supergeekery.com, you will see a very simple version of this site. (NOTE: As of June 1, 2012, I stopped maintaining the mobile example site, but the tutorial that follows still works.) It’s not a full fledged version of this site, but it served as an experimental exercise for what I wanted to try. Basically, I wanted to have a mobile-friendly version of my site without needing to write content in 2 different entries in my Expression Engine installation. (I don’t go into the actual HTML that used to code the mobile version here, but I used my own SuperGeekery Tag Stripper to strip most of the HTML I didn’t want out of my entries for the mobile version.)

I started my project by Googling around a bit and came upon an excellent post by Jamie Pittock. He wrote a very helpful article in 2009 on doing this on Erskine Labs’ blog . It’s written for Expression Engine 1.6.x though, not for EE 2.x version. I followed the same basic steps outlined there, but there are a few different things I ended up doing for the version 2.x of EE that I thought might be helpful to point out.

We’re going to follow the steps Jamie Pittock outlined, but I’ll go over it here so you don’t need to flip between 2 sets of steps. (A big thank you to Jamie for writing that up initially. Nice work!)

Step 1: You need to have an EE site

Got an EE site? Whew. That was easy, right? ;-)

Step 2: Back up everything

What we’re about to do is a little beyond the typical installation of EE, so there’s a chance you will break your site in the process, at least temporarily. I can’t stress enough that you should back up both your database and all your files before moving forward. Having an easy way to go back to your working site is an important thing here.

Step 3: Altering your index.php to include a global variable for the site version

In the EE 1.6.x example one of the early steps was to alter your path.php file. That’s not part of the EE 2.x installation though. We’ll be altering the index.php at the root of your current site that so it will pass a global variable that you’ll use to serve the proper version of your site to visitors.

In the standard installation of EE 2.x, you’ll find an area of this file that mentions adding Custom Config Values. I’ve added these in this area, although I doubt it makes any difference where you actually put the following lines. This first line should already be in your file but commented out.

$assign_to_config['global_vars'] = array(); // This array must be associative
$assign_to_config['global_vars']['site_version'] = 'full';

This variable will now be available anywhere in your EE templates by using {site_version}. Once you’ve saved this, you can test it by putting {site_version} in one of your templates and visiting that page. You’ll see the word ‘full’ show up where you placed the tag.

Step 4: Create your subdomain

Creating your subdomain will vary depending on your server set up. I’m using Dreamhost, so I’ll tell you the steps I’ve followed there, but you will need to adapt them to your particular server and host. Luckily, Dreamhost makes this pretty darn simple to set up.

The Dreamhost control panel for setting up a subdomain

In the Dreamhost control panel, select the “Manage Domains” menu from the left navigation. It’s under the “Domains” header. In the center of your screen, you should now see “+Add New Domain/Sub-Domain”. Click that button.

You’ll see a number of options next. You’re looking for “Fully Hosted”, which should be at the top of your screen. In the “Domain to host:” text field, enter the subdomain URL you want to host your mobile site under. For example, I’ve put “m.supergeekery.com” here. (Tip: This could also be used for a variety of purposes. For example, if an all Expression Engine version of SuperGeekery, I could enter ‘ee.supergeekery.com’ here and the site could be tailored to that.)

In the “Do you want www in your URL?” select the option to remove the www.

In the “Run this domain under the user” option you must select the same user that your main domain is managed by. If you select something else, you won’t be able to make this work the way we’re talking about.

In “Web directory” I’ve entered “m.supergeekery.com” but you could put “mobile” or “iphone” or whatever you want. It will be the name of the directory that will hold some of the mobile specific files in a later step.

The rest of the steps I leave as is. (PHP 5.2 FastCGI, Yes to Extra Web Security, no to PHP XCache Support, no to Passenger).

In the Google Hosted Services, I uncheck these options for the subdomain.

Finally, click “Fully host this domain” and you’re good. At this point, Dreamhost will tell you that it will take a while for the DNS records to update. We’ve still got a little work to do, so that’s fine. (My DNS seems to update pretty quickly. Your results may vary. I recently had a client whose DNS took nearly 50 hours to update.)

Step 5: Adding files to your new mobile directory

Now you’ll log into your remote server to the root level of the user name for the 2 sites. (Remember, we selected them as the same user in the previous step.) You should find the new folder that we created in the step above, “m.supergeekery.com” in my example, as a sibling to the directory that holds your main site. Your web host may require that you make this folder for the new subdomain if it wasn’t automatically created for you.

If this folder was automatically created by your host, it probably contain some ‘junk’ starter files. We don’t need those. You can get rid of them. The Dreamhost version file is called ‘quickstart.html’ but you don’t need it.

What you need to do now is make a copy of the index.php file that was in your main directory and place it in the new mobile directory.

Step 6: Updating the new copy of index.php in your mobile directory

Open your new copy of index.php in a text editor and look for the line where you created the ‘site_version’ variable. The word ‘full’ should be changed to ‘mobile’.

$assign_to_config['global_vars'] = array(); // This array must be associative
$assign_to_config['global_vars']['site_version'] = 'mobile';

Now look for the line that allows you to configure the ‘site_url’. For me, this was on line 82. It will probably be commented out if you aren’t using the Multiple Site Manager. You should remove the comment marks and change the site_url to your mobile site’s URL. In my case, this reads:

$assign_to_config['site_url'] = 'http://m.supergeekery.com';

One note about assigning this variable. Jamie’s post didn’t suggest doing this, but it ended up helping me out quite a bit so that internal links between stories would continue to point to the mobile URL instead of the main URL.

There is one more thing to change in this file. It’s near the top, on line 28 in my case. The $system_path needs to reflect the location of the system folder of your Expression Engine installation. It probably currently looks something like this which reflects the path your full site accesses the system files from:

$system_path = './system';

Since, in my case, the mobile directory is a sibling directory to the main site structure the new system path needed to go up one directory level then back down to the main site directory and then into the system folder like this:

$system_path = '../supergeekery/system';

Depending on how your own directory structure is, you’ll need to figure out the correct relative path. You may find it easier to put the full server path to the system folder here instead. That should also work.

Step 7: Two identical sites

If you’re DNS has propagated you should now be able to to go your mobile URL ‘m.yoururlhere.com’ and see a duplicate of your original EE site. As Jamie pointed out in his original post, some images and CSS may be broken in your new site depending on whether their paths are absolute or dependent. If you still have the {site_version} tag in your EE template, visit that page from your mobile domain URL and you should see the word ‘mobile’ instead of ‘full’. Pretty nifty, right? One EE database, but 2 views of the content depending on the URL.

Step 8: Serving different templates based on the {site_version}

From this point, you can serve up different content in any number of ways by using the {site_version} global variable and conditional logic. An easy example would be to show a 3rd column if the variable reported “full” and nothing if it reported “mobile”.  It’s really wide open for you to tailor the site now.

Jamie’s original post is how I executed the mobilization of SuperGeekery though. I liked having 2 separate templates I could alter for the different views of the site. I’ll walk you through it quickly.

I originally had a main template called “index” which is the default template file for the site. I made 2 copies of that file and named the first copy “_full_index” and named the second copy “_mobile_index”. Next, I changed the original index template in my main template directory to embed the appropriate of these new files based on the {site_variable}.  (Note, if you didn’t name the site_variable in index.php in your ‘mobile’ directory with the word ‘mobile’ you’ll need to rename the file I call “_mobile_index” to match your variable name.)

{embed="home/_{pv_site_version}_index"}

What will happen is that your default template for this template group, ‘index”, will be parsed by Expression Engine. It will evaluate the {site_variable} variable and then embed the appropriate template. It’s simple and elegant. (Again, props to Jamie for that tip.) From that point, I went to work on the “_mobile_index” template. The version that is live at the time I write this is using jQTouch, http://www.jqtouch.com/, but when jQuery Mobile, http://jquerymobile.com/,  reaches 1.0 (scheduled for January) I will think about updating it using that and making it more robust than it currently is. (As of May 2012, I’ve changed my mind on further developing a more robust m. version of the site. I’m going down the responsive design route instead.)

I hope this was helpful. Good luck.

This article has been translated to Serbo-Croatian language by Vera Djuraskovic.

Comments on this post.

Responsive Web Design? http://www.alistapart.com/articles/responsive-web-design/

By Tomas on Jan 04 2011

Hi Tomas,

Media queries are definitely a way of dealing with a mobile version of your site. A separate template like this can be used for a variety of purposes though, not just a reformatted view of the site’s content.

There are many ways of doing this, I just wanted to share what I’d tried.

By John Morton on Jan 05 2011

Responsive media queries aren’t a great solution for limited bandwidth connections - you’re essentially delivering the same content/assets with different css.  For the most part, you aren’t actually reducing the content/http requests downloaded by the client.  I’ve seen some advocate hiding content with methods like display:none, but that content is still downloaded by the client.  Separate templates is a better approach.

By Mario on Jan 05 2011

John, thank you for taking the time to write this post. It was exactly what I was looking for.

By Jason on Jan 07 2011

Thanks for the tips for the Express Engine2.0 version and it make a good sound knowledge to do the website updates.

By Clave on Mar 22 2011

Thanks for taking the time to write this up - as with most things there seems to be a million ways to skin a cat.

BTW creating a sub domain through 123 web you can only set Web forwarding, so not sure if this will work.  Not sure if to use Framed web-forwarding to a single page or Framed web-forwarding or if neither would work?

andy

By andy Kirkpatrick on Apr 06 2011

Thanks for this brilliant tutorial. The bit at the end was the icing on the cake.

Very useful for facebook iframe-tab pages. Dynamic EE content IN Facebook.

Oh lawdy

By Rory on May 09 2011

Hi, can I achieve the same result with a new domain name using add-on domain pointing to the new folder with the copied index.php?

subdomain works fine thanks a lot for the article.

By Tasos on Sep 21 2011

Hi Tasos. I don’t see any reason it wouldn’t work. I have not tried it personally though. I’ve also not worked with the Multisite module that Ellis Labs makes for Expression Engine, which sounds like it might also be a solution for you. If you’re just trying to mirror your content to a new domain though (perhaps in Greek instead of English, for example) I’d give the solution you suggested a try first. Let me know how it goes if you try it. Good luck.

By John Morton on Sep 21 2011

It worked fine I followed the instructions of your tutorial and instead of subdomain I used add-on domain.
the only problem was some css and query as you hinted already I changed the path and works fine now.
The only problem now is with the imgresizer plugin it can’t read the images so for now I just don’t use this plugin.

By Tasos on Sep 21 2011

Well, that’s really a helpful tip. I’m sure with that we can gain more traffic for our website by the mobile users.

By verhuren on Oct 07 2011

Thanks for this great write-up. I got it working so (all dev server) you can go to http://fc-mobile.dev.tinkfullcircle.com and it serves up the mobile template and http://fc2.dev.thinkfullcircle.com serves up the standard template. However, since this is really serving up the same EE instance at two different URL’s shouldn’t I be able to visit another template group and have it show at both URL’s?

For example…
http://fc2.dev.thinkfullcircle.com/brand-development/
http://fc-mobile.dev.thinkfullcircle.com/brand-development/

Shouldn’t those be the same thing?

The second URL doesn’t come up.

Any help would be great!

By Nick on Nov 17 2011

Nick,

You’re getting there. Nice work.

Regarding your question, I would expect that 2nd URL to work, too. For a semi-working example, take a look at http://m.supergeekery.com/about, the ‘mobile’ version of my about page. If you open up your inspector you’ll see why it looks so bad. The paths to all the CSS and JS are broken because I never built those pages to be mobile ready. (One of the many things I have on the to do list…) The thing is does show is that other pages from other template groups can be accessed. (I have this ‘about’ page in a template group called ‘static_pages’.)

For your brand development page, do you have a template group called “brand-development” or is that being served by the pages module?

By John Morton on Nov 17 2011

Nick,

I had another thought. I bet it’s your .htaccess file, or lack of one, in your mobile directory. Do you have one?

By John Morton on Nov 17 2011

Hey Nick, I think that’s it. Check out this http://fc-mobile.dev.thinkfullcircle.com/index.php/brand-development/ and you’ll see it works.

By John Morton on Nov 17 2011

You’re a genius! I was so focused on everything else I forgot about the simple stuff.

Thanks!

By Nick on Nov 17 2011

‘Your system folder path does not appear to be set correctly. Please open the following file and correct this: index.php’

I think there’s a problem with your mobile version.

By Elliot on Dec 05 2011

Elliot, Thanks for the tip! I did some updates and I missed the ones in the mobile folder. (I moved my control panel for security reasons and neglected to update the path in my index.php in my mobile directlory.)

By John Morton on Dec 05 2011

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?