Having experimented with several different content management systems, one feature I really value is the ability to dynamically create a navigation menu based on the content of the site.  When I started using ExpressionEngine, I liked it’s user interface, flexibility and ease of implementation but I missed the automatic navigation builder’s that are included with some open source packages such as CMS Made Simple.

These examples are built for ExpressionEngine 2 but the same techniques can equally be applied to ExpressionEngine 1 by switching ‘channel’ for ‘weblog’.

A simple one level menu

The following will use the standard channels module to iterate over all items in a chosen channel and use their titles as the navigation’s list item text.  I have set dynamic = “off” to ensure all menu items are shown on every page.

<ul>
{exp:channel:entries channel="inner_pages" dynamic="off" sort="asc"}
<li><a  href='{title_permalink="/TemplateGroup/TemplateName"}'>{title}</a></li>
 {/exp:channel:entries}
 </ul>

A two level navigation

More often than not, some sort of split level navigation is needed in my sites which needed a bit more work to implement. In this example I have a main navigation and a sub-navigation.

For the main navigation I created several categories that each acted as a parent item for my sub-menu items.  ExpressionEngine was then able to  iterate over all the categories in the specified channel and create a list of all the parent items, using ‘path=’ to link the item to the top page in each category.

<ul id="mainNav">
{exp:channel:categories channel="inner_pages}
<li><a href='{path='TemplateGroup/TemplateName/index'}'>{category_name}</a></li>
{/exp:channel:categories}
</ul>

I then used the first single level menu above to create the sub-menu.

The first slight problem I ran in to was the fact that all the sub-menu items were showing on every page, regardless of the category that they had been placed in. I needed to incorporate some way of telling the sub-menu which category of items to show. To do this I needed two bits of information, the category that the current page was in and the category that each menu item was in.  To get the page’s category I used a small snippet of php at the top of the template to create a variable which was then passed to a ExpressionEngine tag as follows.

{exp:channel:entries channel="inner_pages" limit="1"}
<?php $current_cat_id = "{categories}{category_id}{/categories}"; ?>
{preload_replace:current_cat_id="<?php echo $current_cat_id ;?>"}
{/exp:channel:entries}

This created a tag named {current_cat_id} to hold the category of the current page.  The next step was to create a tag to hold the category id for each of the menu items as they were read.

{preload_replace:side_nav_id="{categories}{category_id}{/categories}"}

This snippet was placed inside the navigation’s channel tags to make sure it was refreshed for each item.  Then all I needed to do was compare the page’s category tag to the current item’s tag and only display the list item when the two matched.

<ul id="side_nav">
{exp:channel:entries channel="inner_pages" dynamic="off" sort="asc"}
{preload_replace:side_nav_id="{categories}{category_id}{/categories}"}
{if {current_cat_id} == {side_nav_id}}
<li {if "{url_title}" == "{active_url}"} {/if}><a href='{title_permalink="/TemplateGroup/TemplateName"}'>{title}</a></li>{/if}
{/exp:channel:entries}
</ul>

The result was a main navigation that displayed all categories in the site and a sub navigation that just showed items that were in that category.

Active highlighting

This method can be extended further to include active highlighting for each item by including a short if statement to check the active status of the link against a predefined variable.

I created a tag that holds the url title of the currently active page at the top of the template:

{exp:channel:entries channel="inner_pages" limit="1"}
<?php $active_url = "{url_title}"; ?>
{preload_replace:active_url="<?php echo $active_url ;?>"}
{/exp:channel:entries}

Then I placed this if statement within the link to compare the page’s url title tag to the url title of the  current link to add an active class if they matched.

{if "{url_title}" == "{active_url}"} class="active" {/if}

Likewise I added an active class to the main navigation by comparing the {current_cat_id} tag created earlier to a new tag called {main_nav_id} that is iterated over in the main  navigation’s channel, defining the category of the current item.

<ul id="mainNav">
{exp:channel:categories channel="inner_pages}
{preload_replace:main_nav_id="{category_id}"}
<li><a {if {current_cat_id} == {main_nav_id}} class="active" {/if}  href='{path='TemplateGroup/TemplateName/index'}'>{category_name}</a></li>
{/exp:channel:categories}
</ul>

This solution is obviously not perfect or as slick as something like you would find in CMS Made Simple, but if you have settled on ExpressionEngine and you want a way for clients to be able to add new pages without too much fuss then something like this could be your solution.

Whilst developing siblify.com and msibley.com I was unsure how best to implement my blog which I wanted to be accessible from both sites. I considered having two blogs, one for art and one for web design, but I felt that the two should overlap and I wanted to find a middle ground where both topics could be discussed along with some more random thoughts when I felt like it.  I was aware of the fact that duplicating content can cause problems with search engines and I felt that having two blogs with identical content may cause confusion amongst users so it was a bit of a conundrum.

I finally decided that the best solution was to host the blog on siblify.com as this was where I expected the majority of traffic to stem from and to link to it from msibley.com.  Due to the fact the blog link was going to be in the main navigation, it was of prime importance that users were immediately aware of the fact they were now in a different domain and given a quick and easy method to return.

To deal with this problem I added a query string variable to the URL of the blog link to tell the landing page that the user has come from msibley.com and that a message needed to be displayed. The link was formatted as follows:

<a href="http://www.siblify.com/blog?sourcepage=msibley">blog</a>

The information after the question mark creates a new variable called sourcepage with a value of msibley which can be processed by the destination page and trigger the message.  To do this I used the following piece of code at the top of the blog page:

<?php

//check if the variable sourcepage has been set

if (isset($_GET['sourcepage'])) {

//if it is, check whether it has a value of msibley

if ($_GET['sourcepage']==msibley) {

//If it does, write the message at the top of the page alerting the user

echo '<div id="uvleftmsibley"><p>You have left msibley.com to read Michael\'s blog at siblify.com - <a href="javascript:javascript:history.go(-1)">Click here to return &raquo;</a>
</p></div>';
}
}
?>

I kept the message simple but put it in red to make sure the user is immediately aware of it.

So now the user knows they have left msibley.com and has an option to return but how does the link know which web page to return the user to?  Using a simple bit of javascript I’m able to redirect the user to the last page they were on.  The link would look something like this:

<a href="javascript:javascript:history.go(-1)">

Now if the user visits my siblify blog from msibley.com they are alerted that they have left msibley.com and given the option to return to the page that they navigated from. Problem solved.

Click here to see it in action.

HTML emails are notoriously difficult beasts to tame thanks to patchy/non-existant  support for web standards in most of the main email clients.  One of the worst offenders and the most widely used of these is Microsoft Outlook and for those of us who try to spend as little time as possible in a Windows environment, it can be tricky to test.  In this article I will give an outline of how I test HTML emails using my mac with both local applications and online test suites.

Testing locally

Online ’screen-grab’ systems are great for testing html emails in the full range of email clients but there is something re-assuring about seeing your handy work natively in the actual email client.  Whilst some of the major clients are easy to test on a mac (apple mail, thunderbird, gmail etc..), outlook is a little trickier and requires a copy of windows running under bootcamp or a virtual machine.

Outlook 2008

Probably the most important client to have tested thoroughly on I found that it was possible to install the trial version of Microsoft Office 2008 then keep on receiving email long after the trial had expired.  Whilst it does prompt you each time you launch to register the application this doesn’t pose an issue and this method has proved a quick, reliable and simple way to test emails in Outlook 2008.

Outlook 2003

This was a bit trickier to track down as there are no longer trial versions available to download but I eventually  came across a portable version of Outlook 2003 available from less official sources (do a search for Outlook 2003 portable torrent).  Whilst this method might not be strictly ‘by the book’ it is a great way to test on this still widely used browser.  Just download the folder to your Windows installation, launch the application file and set up your email account – no installation necessary.  Outlook 2003 can also be tested for free on Email on Acid and Litmus online services (see below).

Online test suites

One really convenient way to test in a multitude of email clients all at once is to use an online test suite which takes your html email and renders it in a variety of the main email clients.  The three I have used are Litmus, Email on acid and Campaign monitor.

Email on acid

Pros: Whilst it is no longer free to use it is still one of the more affordable paid for services with a couple of email clients still available to preview without charge.  As well as the screen renders they also offer a useful code conflict tool which highlights any possible conflicts with individual browsers.  With both pay as you go and monthly tariffs are available and you can perform tests from as little as $3 ($1 if you are willing to buy 300 credits at once).  I found Email on Acid to be the fastest of the three to produce the finished renders and with a user friendly and fun interface.

Cons: I have had a couple of results with text formatting that turned out to be slightly inconsistent with results from the actual applications but this was whilst the product was still in Beta so may well have been remedied by now.

Above: Email on Acid’s main render screen with code conflicts displayed below.

Campaign monitor

Pros: Convenient to use if you are already using their product for distributing your email campaigns as your account will already be set up with the emails uploaded and ready to test.  I have found the results to be consistently accurate and the spam filter test that is included with the service is useful.

Cons: I found Campaign Monitor to be slower than Email on Acid to produce all the renders and it was also a couple of dollars more expensive for a single test.

Above: Campaign Monitor showing thumbnails of all the available renders.

Litmus

Pros: Whilst Litmus is a paid for service it can be used free of charge with the Pure 360 distribution system or to view a couple of clients via their main portal.  I have found the results to be reliably accurate and inline with real world results.

Cons: I have on occasion struggled to get renders to appear for all the different email clients and sometimes I have only managed a couple  but this may be a restriction placed on the free service bundled with Pure 360.  It can also be a little slow to produce results and there doesn’t seem to be a pay as you go option, only subscriptions.

Above: Litmus displaying render results via Pure36o.

Summary

I tend to use a combination of methods to test my html emails.  I would usually start by testing locally until I am pretty sure everything is rendering correctly in Outlook, Apple Mail etc… then move to a test suite for the final check and for backup to show the client if things go wrong once the email is out of my hands.  If the client is using Pure 360 I tend to use the Litmus testing service as it is free, otherwise I would use Email on Acid.

In a hurry? Read the 30 second version »

Here are 10 Joomla extensions and hacks that I’ve found useful.  Some of them are a bit obscure but I have found them all invaluable at different times for making Joomla the flexible content management system I need it to be.  I generally wouldn’t use all of these hacks in one website but just knowing what is possible by changing a few lines of code or by installing a free plugin can broaden your scope when designing for Joomla or help you when deciding if Joomla is suitable for a specific project.

1. Remove Mootools 1.1

Included in the core Joomla install and feeling its age a bit is Mootools 1.1.  It can come in handy depending on the extensions you are using with your website but more and more I am either finding I don’t need it or worse it is deterring me from using other more powerful Javascript libraries for fear of conflicts.

There are two easy options for removing Mootools 1.1 from the front-end without affecting it’s uses by the admin panel, either through a few lines of PHP in your template file or using a simple Joomla extension.

Option 1

This tip uses a snippet of PHP at the start of the template’s index.php file and came from Highub – web tips.  It only removes the Mootools 1.1  library from the front end but they also provide instructions for removing caption.js if you want to go all the way in streamlining your site.

<?php</pre>
// Remove auto generated mootool from header
$headerstuff = $this->getHeadData();
reset($headerstuff['scripts']);
$moo = key($headerstuff['scripts']);
unset($headerstuff['scripts'][$moo]);
$this->setHeadData($headerstuff);
?><jdoc:include type="head">
<pre>

Option 2: ‘Mootools control’ plugin

This may be a more user friendly method if you are more familiar with the Joomla admin panel than the template files and requires nothing more than a simple plugin to select when and where Mootools 1.1 is implemented.  This extension also enables you to change the Mootools file itself if needs be.

Mootools control is a free download from Kinesphere and is the method I have found myself using on a regular basis thanks to its ease of use.

2.  Add classes to your menu items

I have needed this hack on a couple of occasions where I have been handed a design to be built in Joomla with a menu system that could only be achieved either by targeting each individual list item with a class selector or at the very least by styling the first and last menu items.

The solution came from Cecil Gupta’s blog in the form of a small adjustment to the mod_mainmenu/default.php overide file .  Cecil’s solution only applies the class names to the first and last menu items but I modified it slightly to apply a class name to each specific menu item in order. This is the adapted version and instructions on usage can be found on Cecil’s blog.

</pre>
//NEW CODE STARTS HERE

 $children_count = count($node->children());
 $children_index = 0;

 foreach ($node->children() as $child) {

 $child->addAttribute('class', 'nav'.$children_index);

 if ($children_index == 0) {
 $child->addAttribute('class', 'first nav'.$children_index);
 }

 if ($children_index == $children_count - 1) {
 $child->addAttribute('class', 'last nav'.$children_index);
 }

 $children_index++;
 }
 //ENDS HERE

3. All Videos Reloaded (AVR)

One of the reasons I often find myself turning to Joomla is when the client needs to be able to easily add video to their site.  The extension All Videos Reloaded is a fork of the popular All Videos project and offers a flexible and powerful solution to adding video to your Joomla website.

4. Readmore Link

This is another case of being handed a design which isn’t possible to achieve with a standard Joomla installation. I had one particular case where the intro text needed to be nothing more than a large image and as such the whole thing needed to be a clickable ‘read more’ link.

The Alternative Readmore Link plugin turns any text or image into the readmore link by simply wrapping it in a pair of tags.

5. Superfish

This is by far my favorite drop down menu script which is now available as a plugin for Joomla 1.5.  Superfish uses Jquery  1.2.6 and whilst it does come with an option to run Jquery in Mootools compatibility mode, if possible I would suggest removing Mootools (see tip 1) to avoid clashes and bloated pages.

6. Featured Items module

This may seem a bit of a strange choice seeing as there is a free Featured Articles module that performs a similar task but at only £5 I really liked this commercial version for the added flexibility and hackability which enables it to be used for a far broader variety of uses than the basic Featured Articles module.

The module offers the option to display a short excerpt from articles in a selected category, with link and optional thumbnail image.  You can choose the number of characters displayed, the section, category and ID to be displayed, and whether to display a thumbnail image using the module parameters.

7. JoomlaFCK Editor

I install this alternative editor plugin at the beginning of every Joomla site I work on due to it’s rich set of features and easy to use interface.  One really useful function that isn’t available in some other popular editors (uh hum… TinyMCE) is the ability to upload images straight from the editor interface rather than having to upload to the media library first.  It doesn’t stop there though with bags of customisation options and a snappy, responsive feel.  Best of all, it’s free.

8. Pop-up login box

More and more websites seem to be utilising modal windows to display additional information to users and whilst this can pose usability issues one common use of this type of  functionality is to display login forms and this handy little hack on the Art of Joomla website enables you to do just that with a small adaptation to default_login.php override file.  It uses the built in Mootools 1.1 Javascript library to do most of the work and just needs a few lines of extra code to get it working.  If like me you are inclined to remove Mootools altogether to make way for a different library then I found this hack gave me all the clues I needed to achieve a similar effect using Jquery fancybox.

9. Joomla pack

A regular feature of best Joomla extension lists and for good reason, this component for Joomla 1 and 1.5 provides a really easy and powerful way to both backup and restore not only your Joomla databases but the entire install!  Having toiled with Mysql dumps and automated database backups in the past discovering JoomlaPack was something of a revolution and an essential part of every Joomla install.

10. Confirm new users

Whilst this hack tampers with core Joomla files which can cause issues when it comes to upgrading your install it can also provide the solution to a problem which in my opinion should have been addressed by Joomla 1.5 from the outset and that is to allow new users to be vetted by the site administrator before becoming active.

This post over at Katipo Developers Blog provides instructions to change the sign up process to send both a acknowledgment email to the new users whilst sending the activation email to the site administrator to either grant or deny membership.  It does take a a few steps to achieve this functionality but could be a life saver if required by the client.

It was an article in smashing magazine entitled  45 Incredibly Useful Web Design Checklists and Questionnaires that started me thinking about this.  Whilst I think it is a great idea to keep website contact forms as simple as possible for users, I also wanted to offer the ability for potential clients to provide more in-depth information about themselves and the projects they represent.

I had noticed an effect on other websites where contact forms or additional information slide out from discreet tabs to reveal hidden content and whilst I am generally not a big fan of hiding content that the majority of users will want to see, I decided that this might be an occasion where it’s use was warranted.

[View with PicLens]

For the most part the contact form remains pretty basic but users are given the option of clicking a ‘Reveal extended form’ link to reveal a short questionnaire that should not only help me to get a better idea of what they require but also help them to consider their needs more thoroughly from the outset.  The added benefit I have found from having this type of contact form is that it is easy to identify the people who are really serious about the possibility of working with me as they are the ones who take a bit of extra time to fill in the answers.

The code is really simple and basically just uses jQuery slideUp and slideDown to slide the div holding the contact form in and out of view whilst using hide and show to make sure that the correct link is showing.

$(document).ready(function() {

//make the extended form link visible and clickable
 $("#extend_form_link").show(); $("#extend_form_link").click(function() {

//when extended form link is clicked, hide 'Reveal extended form' link & show the 'Hide extended form' link
 $("#extend_form_link").hide(); $("#retract_form_link").show();

//use the slidedown effect to reveal the div with id 'extended form'
 if ($("#extended_form").is(":hidden")) {
 $("#extended_form").slideDown("slow"); }
 }

//use the slideup effect to hide extended form
 ); $("#retract_form_link").click(function() {
 $("#retract_form_link").hide(); $("#extend_form_link").show(); $("#extended_form").slideUp("slow"); }
 ); }
);

In a hurry? Read the 30 second version »

In the course of my work as a freelance web designer I have been forced to use a multitude of different web hosts and have come to realise that all web hosts are not equal.  Here is a list of 5 web hosts that I have used with a brief review of my experiences with them.  I have had more experience with some than others so this is by no means a conclusive study but I hope it will help you if you are looking for a web host and don’t know where to begin.

Before I start I’d like to make clear my perspective.  I am a web designer working mainly in HTML, CSS and a bit of PHP with experience of various CMS platforms including Wordpress, CMSMS and Joomla.  I am not a web app developer or database ninja or anything else that sounds complicated so my views do not really take into account the requirements that someone working in these areas might have.

5. Easily – Rating: ★★★★

Bottom of the pack and for good reason is Easily, the 9th largest web host in the UK with a 2% market share.  Their name gives me a chuckle every time I read it  just for the pure irony.  My initial impressions of Easily were just how ugly and cryptic their control panel was, links to the various functions were denoted by a single letter logo, the key to which was below the viewing threshold of my screen.  Once I had located the various departments I was still left wondering how to do simple things like set up a mysql database or change your version of php without phoning customer support.  You just don’t seem to be able to manage much stuff on your own from the control panel and if you can, I couldn’t work out how which is just as bad if not worse.  As well as the short comings of the control panel there is also no way of manually adjusting file permissions which was in the course of time to present me with more problems.

Click hear to continue reading my easily rant ...

[View with PicLens]

4: Namesco – Rating: ★★★★★★

Names co. is the 5th largest web host in the UK with about 3% of the market share and I have only used them for 1 site.  My overall impression isn’t bad really.  Their control panel is fairly straight forward and easy to use and doesn’t look too bad aesthetically speaking.  You can manage things like your mysql databases, quotas and email accounts and the file permissions can be set from your ftp program without problems.  My only issue came when I wanted to upgrade my PHP version and had to contact the support line to do so, not a big issue but it took them 24hrs and a couple of emails to get it done so not ideal.

[View with PicLens]

3: Nethost – Rating: ★★★★★★★

I have only recently used nethost for a site and at first I was a little skeptical.  Their control panel is pretty ugly (It looked like it was based on cPanel) and a bit confusing with hundreds of icons and options to filter through but in the end I actually found them to offer a pretty powerful hosting package with a good level of user control.  Things like adding databases and changing php settings are really easy to do and they include some nice usability features like actually showing you your database passwords from the management panel rather than blanking them out which is handy when you are setting up a cms and have forgotten your mysql details.  I also like the prices which were the lowest of all those I have reviewed, offering a fair amount of functionality for relatively little money.

On the down side their customer support seems pretty lame.  They don’t have a phone number to call and when I emailed them (twice) I didn’t receive a response.  I also found that the site was sand boxed from public view during development which was great until I was ready to go live, at which point I couldn’t find any way of activating it.  It took a couple of emails from the account holder before the problem was resolved.  If it wasn’t for these issues I may have given them an 8 stars or more so if you are confident you wouldn’t need much help and have a tight budget they might be a good bet.

[View with PicLens]

3: Easyspace – Rating: ★★★★★★★★

Update (20/02/2010): Since writing this post it has been brought to my attention from a couple of different sources that some Easyspace customers are having issues with the reliability of their email service (see comment below).  I probably wouldn’t mention it if it were just one case, but I have now heard of three separate instances and felt it was worth drawing attention to.

Easyspace was the first ever web host I used and I’ve used them for a couple of sites since.  This host has a more ‘corporate feel’ than most of the others I am reviewing here, with an overseas support desk and a slightly pushier sales technique which could either be taken as annoying or reassuringly ‘big business’ depending on what sort of person you are.

Their control panel is probably the prettiest of the five hosts I’m reviewing here but I have always felt it needed some more user testing as many simple tasks can be confusing and unintuitive to achieve. I’ve often had to run people through simple tasks like setting up autoresponders on the phone over and over again. I did recently receive an email notifying me of a new beta version of their control panel (picture included below) which looks promising but it is still not fully featured at the time of writing this article.  They claim to have based the new UI on extensive user consultation and testing so it could be a big step forward.

I am also quite impressed with a new service of theirs that notifies you via email of any security holes they have spotted on your site, giving you the opportunity to sort them out before your site is compromised.  Their general standard of telephone and email support, whilst not perfect, seems fairly prompt and efficient at dealing with issues.  They also offer free domain names with a lot of their hosting packages which is something to bear in mind when reviewing the prices.

If I were to say anything negative about Easyspace it would be that I have found their email accounts to be a little temperamental with the odd outages and rogue spam filters but I guess no host’s email servers are perfect.

[View with PicLens]

1: Virtual names – Rating: ★★★★★★★★

Update (20/02/2010): Since writing this review, Virtual Names have been subject to a serious hack attack in which the passwords to all hosting accounts held with them were compromised.  As you can imagine this raises some major concerns regarding security and whilst I felt their response to the situation was transparent and fast, it has still dented my opinion of what is otherwise a really reliable host.

Virtual names was the second host that I ever used after it was recommended to me by an agency I was working for.  Initial impressions might be a bit poor due to the basic looking homepage with it’s pink background and the rather functional design of the control panel but what they lack in slick interface has definitely been made up for in ease of use and flexibility.  Just about every adjustment I have ever needed to make to my hosting I have been able to make quickly and easily via the control panel without needing to contact customer support.   Another strong point in their favor is the speed at which they deal with support requests on the rare occasions that they are necessary.  I have always received an answer to my email within minutes of sending it and the problem has been sorted.

My only negative issue with Virtual Names has got to be the value of their professional packages.  In comparison to some of my less preferred hosts such as Easily, their storage and bandwidth offering is pretty paltry with a 1GB upload limit compared to Easily’s which is unlimited and a 60 GB bandwidth cap which is once again unlimited with Easily and all at nearly double the price.  Having contacted Virtual Names to ask them about this they did say that they do not penalise users who exceed their bandwidth limitations and that they are looking to increase storage limits in the near future.

As a result of this I would say that unless money is no object, I would only recommended Virtual names for smaller websites where ease of use and reliable support are more important than unlimited storage.  For large scale sites I would wait until they have become a little more competitive and maybe take a look elsewhere for the time being.

[View with PicLens]

Conclusion

The various web hosts I am reviewing here vary greatly and the right one for you depends on the requirements for your site. None of these hosts are disastrous choices (although Easily has had me close to tears at times).  My personal recommendations would be Virtual names for smaller sites where you would benefit from a simple-to-use yet powerful control panel and great customer support and Easyspace for a larger business sites where the price, whilst certainly not the cheapest, is more acceptable and comes coupled with an efficient support system and a more corporate feel.

Here’s a breakdown of the different hosting provider’s basic and professional hosting packages.  I have excluded any packages that don’t include php and mysql support as I regard these as essential for modern web development.