I threw this idea out on Twitter a few days ago and got a lot of requests, both personal and publicly, to go forward with it, so I am!
As the Senior Developer of Impact Communications Group, I’ve had the pleasure of working with some excellent clients. One is the Canadian Breast Cancer Foundation — Atlantic Division.
We’ve launched a campaign called ‘Do Everything’ — it’s essentially a campaign that shows what everyone can do to help with Breast Cancer research. The campaign consists of print ads and TV commercials linking users back to the website, doeverything.ca. Ryan Quigley, our Interactive Director, designed this site. I had the pleasure of implementing it in HTML/JS/EE.
This review will be from a clients’ perspective — in other words, the control panel that the client sees, not that I see.
There are a few critical things that I think about when I’m deciding on what should be entries, what should be in a Matrix, etc. A lot of my experience comes from 4 years of developing Rich Internet Applications and as a CRM consultant. CRM consulting is really all about information architecture and understanding workflows. A lot of that knowledge has been used in determining how to build the channels/database.
Ease of Use is critical in any web application, and the control panel is no exception. Many developers don’t look at their clients’ website from their eyes. Many clients get confused based on the setup of the system. This is something we are responsible, as senior developers, for addressing.
It’s great if you understand the limits of your technology. It’s even better if you understand how your users interact within these limits.
Let’s get on with it, shall we?
The Menu
As you can see in the photo, I use NDG Flexible Admin to control exactly what the client sees in the menu, straight down to the words chosen. I didn’t automatically populate this so that I could have ‘News Entry’ under Create New and ‘News Entries’ under Edit. I’m picky, leave me alone. 
I renamed Structure to Site Map for clarity.
NDG Flexible Admin has done it’s job, and done it well.
The Navigation
Do you even need to ask?
Structure. It’s fantastic. Get it. For these who are unfamiliar with Structure, Structure allows your administrators to administer the website based on a site-map view. But it gets better — it also handles URL management and navigation bars.
Our main navigation is listed here. We exclude the Homepage entry so that it doesn’t show up in the main nav and give each entry a unique ID (If you look on the site, you’ll see Donate Now on the far right of the nav bar instead of at the beginning – that’s because it’s floated to the right via directly referencing it’s ID!)
I allow my clients to control the main navigation, so the users can rearrange all of these pages by simply dragging and dropping the handle on the left of the entry and it then rearranges in the appropriate order. The navigation bar was built with the expectation of not being able to support a sub-navigation; Thank You is actually a “Hidden” entry, as you can see below: (excluded the status ‘Hidden’ from showing up in the main navigation)
This was done to allow the client to have control over the ‘Thank You’ message you receive after submitting an event.
Page Specific Layouts
I used a fantastic module called Blueprints to give each template it’s own specific set of fields. All page fields are stored in a single channel, and just stripped from the layout when not needed.
Blueprints also adds this excellent little Structure-related tool on the right toolbar:
This is phenomenally helpful when you’re looking for a specific page. That search box at the top lets you search through not only the pages, but the listings as well! You can also expand the list of the listings, as shown above.
I also use listings on entries that appear in multiple places on the website, or that require advanced sorting — Your Stories, Community Support and Upcoming Events to be specific. All 3 were to show up on the homepage, however, we removed the Community Support items and replaced it with a more specific ‘Tip’ list instead.
Homepage
There are 3 main sections to control on this page. The first one is the list of stories:
This FieldType is Playa, by Pixel & Tonic. We used this module to choose which stories, out of the list of 28, would appear on the homepage. I absolutely LOVE this module! Not only does it give you a fantastic multi-select interface, it also remembers the order and allows you to sort the related entries. That was CRITICAL in this case, because we had very specific requirements on the order of the videos, and we needed to be able to switch them out on the fly. WOW. First time I’ve had the pleasure of playing with Playa, and it certainly won’t be the last!
Second is the What is Do Everything? block.
This block is controlled by the excellent Wygwam, also by Pixel & Tonic. This was actually originally going to be a Poll using a custom module I built, but we decided to pull it at the last minute. Wygwam is my editor of choice, and as of the new version includes integration into Structure!
Finally, we’ve got the tips:
I fell in love with this field. I really, really, really love this field. This is a Matrix, also from Pixel & Tonic. Oh. My. God. LOVE it. In this case, I used a single column Matrix to allow endless tips to be added to this page. These tips are randomly selected (supported natively by the Matrix component) and displayed on the homepage. I’ve used a mini-Wygwam inside to keep complete control over the styling on this page.
What you don’t see is the little plus at the end; it allows you to add new entries. Had it mattered, you can also rearrange these entries by dragging and dropping the number on the left in the order you desire.
That’s it for the homepage. Any questions? Good. Let’s move on.
Donate Now
Yes, I know this is at the end of the nav bar, but it’s at the beginning of Structure, so deal with it.
This is an extremely simple layout with three text fields. I usually include 4; 1 as a StructureFrame, which is missing; but in this case, I don’t want the client linking to an internal page.
Nothing special here, just triggers a CodeIgniter redirect().
Your Stories
Your Stories is a bit more complicated than it looks. The content is actually all stored on the listing, so I’ll skip this for now.
Community Support
Like the above, this is all stored in the listings. I use 2 Wygwam fields to allow the lower areas to be edited.
Upcoming Events
Guess what I’m going to say? Yup. Read Community Support. 
Side-note: I used SafeCracker for the Events submission form. It submits them directly to the Upcoming Events listing, under a custom ‘Pending Approval’ status. Yay workflows!
Thank You!
Wygwam. No screenshot for you! (Do you really need one?)
What Can I Do?
I used a Wygwam on the left, but because of the unique design on the right of this page, I decided to use a Matrix control to iterate the subsections listed here.
This gives the client the ability to sort each section, title it what they want, etc.
Contact Us
Wygwam. Will be a custom form someday, when we get a chance to breathe!
Listings
Ahh, the fun part.
Stories
I love the Stories.
Nothing special or surprising here! the Icon is actually set as a background image, and the Vimeo ID is passed to the player. The YouTube link is just a freeform link. Simple, but effective. This is more for our designer to access, than the client, when he wants to add a new story.
Upcoming Events
Nothing surprising here — Contact Email/Phone is for internal use only, and the Region dropdown is what controls the jQuery sorting by province on the page.
Map Item
I love all of my babies, but if you were to ask me to pick one, it’d definitely be this map. I spent a while making sure it couldn’t break, and my efforts paid off. The front-end is fantastic. Here’s what the back-end looks like:
Nothing surprising here, either — you can see how the drop-down lists allow for easy filtering on the front-end. Here’s where the magic is:
Geotagger is a FANTASTIC Module for pinning things to a map. This Module adds a tab to your entry; You type the address in the ‘Address’ section and hit the Geotag Entry button. If you’re not happy with the geocoded data, as displayed above, you can just drag and drop the pin where you want it to be. It just can’t get much more simple than that.
Conclusion
That concludes our overview of the DoEverything.ca back-end. I’m pretty sure that covers everything. Is there anything you would have done differently? Do you have any suggestions on how to make this even easier than it already is? Do you have any questions? Please feel free to drop it down in the comments. Otherwise, feel free to provide feedback to if I should do this again. I hope it was helpful and gives everyone a quick bit of insight into what a few custom modules can do for ExpressionEngine usability.
Quick Note – Paid Extensions:
Trust me, the modules listed on this page are worth the price you pay. Think of how many hours it would take you to duplicate the functionality you’ve seen above. Now take your hourly rate and multiply that number against your hourly rate. If it’s less than what they’re asking, then you’ve saved (and made) cash. The Modules and FieldTypes I’ve featured here today provide amazing support for their extensions. Their time is worth money, just like ours is.
