Every word here talks us through the process of going mobile with ExpressionEngine using a dedicated approach
In the last few years mobile has absolutely exploded. It's the way people shop, browse the web and check email and the numbers are increasing exponentially. Because of this, we need to shift our focus on building websites explicitly for the desktop and really start thinking about the context that our work is being seen in and interacted with. We need to rethink the way we're building websites.
In this tutorial we're going to run through some ways to integrate mobile into our ExpressionEngine workflow.
Getting started
To follow along you'll need a licensed copy of ExpressionEngine 2. You can download it as well as find step by step installation instructions from the ExpressionEngine website.
You'll also need to download the core files for our example site, Know your viral enemies, a fictitious educational website about common viruses and why we need to wash our hands!
Dedicated vs responsive, in a nutshell
When it comes to a mobile web experience we've got two options: dedicated and responsive.
A dedicated mobile website is a mobile optimised version of our website that usually resides on its own domain or subdomain. With a dedicated approach we can easily give our users the option to view desktop or mobile. We've also got more control over resource optimisation and load time.
A responsive website is created with a mix of fluid layouts, flexible images and media queries. It gives us a tailored experience based on the width of the browser window using the same HTML and CSS. This approach also forces us to think about website structure and create cleaner, more focused design and front-end code. Since this is all done in the CSS, we won't go through that in this tutorial (though I have included a responsive version of the example site for your rummaging).
So, without further ado, let's get started.
The dedicated approach
With a dedicated approach, we can have two versions of a website using the same installation of ExpressionEngine.
Create a global variable in index.php
First off, we need to create a global variable that we can use to tell our templates to load the full or mobile version of our website. Open up your index.php file and find the following line:
// $assign_to_config['global_vars'] = array(); // This array must be associative
Right below that line, we need to add the following:
What we've done here is created a new global variable, just like site_url or site_name, that we can use anywhere in our ExpressionEngine templates.
{gv_site_version}
Set up a subdomain
The next step is to create a subdomain to house the mobile version of your website. This step is highly based on where you host your site, so I'll let you and your host's support team take care of this one.
Once you've got your shiny new subdomain setup, you need to copy index.php (the one we just edited) into the subdomain's root directory. Open up your new index.php file and change the gv_site_version variable value from 'full' to 'mobile'. You'll also need to edit the $system_path to point to your main website's system folder.
$system_path='../domain.com/system';
/* gv_site_version: set to 'full' or 'mobile' */
$global_vars['gv_site_version']='mobile';
Set up your templates
Finally, we can set up our ExpressionEngine templates. Log in to your ExpressionEngine control panel and click the Design button at the top and then choose Template Manager under Templates.
Before we create any templates we're going to need a template group to house them. From the Template Manager screen click New group to create a new template group. For the Template Group Name, type _home_. Leave Duplicate an Existing Template Group as is, and tick the box next to Make the index template in this group your site's home page. Click Submit. You should now be taken back to the Template Manager screen, with your new _home_ group selected.
Now we need to make two new templates to live inside of our new template group, one for our full site and one for our mobile site.
Be sure that your _home_ template group is still selected, and then click the New Template button at the top right. For the Template Name type _index_full. Leave the rest of the options as is and click Create. You should now be taken back to the Template Manager screen. Repeat the last step to create our last and final template, and name it _index_mobile.
Bringing our new templates to life
Now it's time for us to integrate the Know your viral enemies files into our ExpressionEngine website.
The first thing you need to do is open up the index template in your _home_ template group, and copy the following snippet of code into it:
{embed="home/_index_{gv_site_version}"}
This is where the magic happens. When a user hits our homepage (the index template), it's going to load either our _index_full or _index_mobile template, depending on where they're coming from. Remember: gv_site_version will either be equal to 'full' or 'mobile'.
Now we need to copy the static folder into the root of our main ExpressionEngine website so that it lives along side admin.php, images, index.php, etc. The static folder is where all the CSS and images are.
Lastly, copy the contents of desktop.html into _index_full and copy mobile.html into _index_mobile.
Now you should have a working desktop and mobile version of our website using the same ExpressionEngine installation. Yeehaw!
Giving the user the option
The dedicated approach doesn't have to stop here, we can easily add in some functionality to give the user the option to view desktop or mobile with MX Mobile Device Detect. Download and install the add-on, then uncomment div.notification in _index_full. In order to make this work, all we have to do is change this:
<div class="notification">
<p><a href="">Hey, there's also a mobile site!</a></p>
<p><a href="">Hey, there's also a mobile site!</a></p>
</div>
{/if}
{/exp:mobile_detect}
This notification will only be exposed to the frontend if the user is on a mobile device. With this in place, the user will get notified that we have a mobile version of our website if they're browsing from a mobile device. Don't forget to add the link to your subdomain in the anchor.
There it is. That's all it takes to integrate a mobile experience into our ExpressionEngine workflow.
This post has been a long time coming. Whether on Twitter or in the blogosphere, the question often arises, and I have been asked numerous times for my opinion on the ExpressionEngine vs. WordPress debate, and why one would choose one content management system (CMS) over the other.
My usual answer is that they cannot be compared. While WordPress had made huge strides in usability, for anything other than a blog it is an apple.
ExpressionEngine, with the release of version 2.0, makes for a lovely platform that is, as we will see, an orange.
Handling Content
The biggest difference between WordPress and ExpressionEngine is the way in which content is handled.
In WordPress, we all know that you can create a new post. This new post usually has a content section but may have some custom fields that are defined either on the fly or by the developer who created the template’s framework.
So, when you create a new post, the content will be displayed in different ways, depending on the category chosen and whether the category is a parent or child (i.e. sub-category). For the most part, though, whether they choose a new category or input data into pre-defined custom fields, the user will see the same input screen.
The items chosen by the user determine how the content is displayed. Some users like this. I think it shows WordPress’ roots as a blogging platform. This is not a knock because WordPress has certainly pushed the envelope on what can be done with a CMS just by uploading a few files. More to come on themes later.
Changing Channels
ExpressionEngine handles content quite differently. In ExpressionEngine, the user defines channels.
Each channel can be thought of as a separate blog—in fact, this is what it was called back in version 1.6.x. For each channel, you can define custom fields, categories and behaviors.
All of this is hidden from the average user in the administration portion of the website. The user would typically have access only to the “Publish” and “Edit” sections of the website and possibly some modules (which is similar to plug-ins in WordPress).
An Example
Recently we built a website for the Bay Community Church using ExpressionEngine. The website has a media section, and in that channel we created the following custom fields: title, description, image, audio and video files, file sizes, file lengths, and date on which the files were recorded.
Of course, channels can be as simple or as complex as you like (this particular website had five to six more custom fields for the media channel alone).
Most ExpressionEngine developers realize the power of the CMS’ add-ons, which also happens to be why most of them have been slow to move from version 1.6.x to 2.0. They know that most of the add-ons won’t be available for 2.0 for another couple of months.
With just a few add-ons, we extended ExpressionEngine, allowing church staff to add multiple files per entry. In the content structure of this particular website, a sermon series would be an entry on its own, and individual sermons for that series would be added to it.
To make it even more complicated, you could have any number of different types of fields in a channel (e.g. textbox, textarea, checkbox, S3 Integrated BucketList, FieldFrame Matrix, nGen File Field).
The website also has a section for small groups of people who gather for studies or fellowship.
If you navigate to a “New entry” page for the small groups, you would see a completely different set of custom fields (title, leader, location, meeting time, etc). So, from the user’s perspective, entering new content is easy because each channel is tailored to the content they are recording.
Why I Love ExpressionEngine
As a web designer, I love ExpressionEngine because it gives me extensive control. Most of my clients don’t have a single WYSIWYG editor anywhere on their website! I can control headings, MP3s, PDFs, lists and whatever else needs styling through CSS.
Unless they decide to learn HTML in order to apply inline styling, the design won’t be horrendously violated with 50-pixel blinking red fonts.
Content Construction Kit
I believe the Drupal community originally coined the term Content Construction Kit (CCK). CCK basically allows the user to define various types of content.
Perhaps the folks at EllisLab would disagree, but I would define ExpressionEngine as a CCK system. WordPress seems to be moving in that direction but is not there yet. Plenty of WordPress template developers are designing and adding to the framework, giving WordPress new kinds of functionality.
Changing the Look and Feel
For the most part, anyone can set up a WordPress blog or website with little knowledge of WordPress, PHP, HTML or anything else that would keep an Internet newcomer from blogging.
I have a non-technical friend who has set up several WordPress blogs without any of my help. Just download a template package; unzip it; upload it to wp-content/themes; log in; activate the new template; and voila! Magic happens, and you end up with a whole new website. WordPress shines in this area.
ExpressionEngine 2.0 Moving in the Right Direction
ExpressionEngine, on the other hand, has no easy way to add or change themes… yet.
With version 2.0, we are seeing the team at EllisLab starting to move in that direction. The team has added functionality that allows users to upload HTML and CSS files into folders with specific naming conventions (blog.group, main.group, portfolio.group, etc.), and you can synchronize the HTML and CSS files with ExpressionEngine, which will recognize and render them.
The problem is that ExpressionEngine only begins to shine when you get into its CCK capabilities. So, syncing files is great, but that does not get you the custom fields, categories and channels that bring ExpressionEngine to life.
EllisLab has added a file to the CMS named default_content.php, which is required to install a theme and which specifies default content, channels, custom fields and the like. But the file is not exactly intuitive.
ExpressionEngine fields are highly relational, so you definitely need to grasp SQL if you want to put a default_content.php file together.
Changing Themes
With WordPress, you can upload a new theme to change the look of the website at any time.
ExpressionEngine, on the other hand, allows a theme to be added only at the point of installation. So, if a user wants to change the look of their website, they’ll have to jump through hoops.
They would either have to keep their HTML, custom fields and other elements and then change the CSS and images. Or they would have to learn the system and then define custom fields, categories and channels. But this goes back to the way the two systems handle content.
Themes in WordPress typically all handle content the same way. Themes in ExpressionEngine do not.
What Have We Learned?
WordPress is especially good for PHP developers, tinkerers and bloggers. It is great for PHP developers because they can bend the CMS to their will; they can add functionality to the framework, as well as add custom fields and modify them at will.
It is great for tinkerers, who can set up a website easily; and if they ever get bored with the look and feel, they can search online for a new theme and have a completely new website in 20 minutes.
They can also download widgets and plug-ins that add functionality quickly. And having started out as a blogging system, WordPress really shines as a personal blog. ExpressionEngine is great for front-end developers and designers because it does not require that users learn a difficult programming language in order to manipulate it.
Most HTML and CSS gurus can grasp the simple expressions and how to use them.
ExpressionEngine is the tool of choice for some well-known designers: Jesse Bennett-Chamberlain, Veerle Pieters and Andy Clarke, to name a few. It is extremely flexible, and few things cannot be accomplished with it.
As you can see, then, it really is an apples to oranges comparison.
ExpressionEngine is great for front-end developers and designers because it does not require that users learn a difficult programming language in order to manipulate it.