Recently I moved my family’s travel blog from ExpressionEngine to Craft CMS. You can read about the why here, but I wanted to take a few minutes and talk about some of the things I’ve learned building a travel blog with Craft.
I know, I’m late to the game. Craft CMS has been around for 3 years now, and while I’ve peeked in occasionally I never really built and used anything real with it until recently.
For a small web shop, creating estimates and quotes can be a joy killer. I just want to make stuff, man - not write out endless spec documents! It's true. Being old school print designers let me tell you how this process went for years:
Open up our quote InDesign document
Save it as a new file
Pour over every legal aspect to make sure it was right
Do the whole spec part of the job in the middle
Make sure all the styles were right so it would look awesome
Do all the math (arghhh)
Save as a PDF
Email it
And. We. Hated. It.
When we rebuilt and re-designed the site last year we knew some things had to change. First of all, we didn't want to go through that huge document and re-do all the styles. Bleh. Second of all, it had become a huge bottleneck and we wanted to fix that.
For those of you in the ExpressionEngine universe there was a lot of “hot drama” the beginning of this week. Brand new websites, sweeping licensing and support policy changes, taking down the whole Pro Network without any prior notice. I'm not going to try to analyze anything that EllisLab is doing because quite frankly their business is their business (see what I did there - you know you giggled).
However, I do think that this whole situation sheds light on the importance of building your own brand and not basing your business entirely on top of someone else's.
Your Brand
We've worked hard at FortySeven Media to create a brand that stands on it's own regardless of the CMS we use. We write on this blog, go to conferences, do silly web video shows, and all kinds of other projects that don't make money, but help build our brand. We also do great work for our clients and they spread the word.
And while we love ExpressionEngine, we don't just do EE development - we bring branding, design, marketing and consulting to the table as well. The technology is just a means to the end of an amazing final product for our customers. It's tempting to piggy back off of something like EE's success and build your business solely around it, but you have no control if they make drastic changes.
If the news this week is pulling the legs out from under you, maybe it's time to step back and focus more on your brand and how you're different from all those other EE shops.
But that's not the whole story. Because while our brand doesn't live or die by ExpressionEngine and web design work, a good chunk of our income does.
We’ve had a few people ask us how in the world we built Kicktastic, our video business training project, so we thought we’d tell you.
Real quick - what is Kicktastic?
Kicktastic is unconventional video training for gutsy businesses. Every month you'll get fresh content in the form of a main topic video, transcript and resources, and related video tips. We'll be interviewing the smartest minds in the business and refining it down into info packed, entertaining videos that don't waste your time. Plus, each video has its own discussion thread below so members can ask questions, share their stories and help each other out.
Pretty straightforward, right? Well, not so much. If you’ve ever tried to build a video training platform that takes recurring payments, and do this for under $1,000 in expenses (minus the time to build/design of course) things get a little nutty. Let’s look at each piece.
Note - I was going to have this all be one article, but it was too big and I don't want to bore you. So! Part Uno will focus on the design and stragegy while Part Dos will focus on the dirty technical details - from HTML5 & CSS3 to Responsive layouts and ExpressionEngine programming. Part Uno begins now:
Have you ever climbed to the top of a mountain, cooked a whole pound of bacon, ate it, hiked back down and built a mansion with your bare hands? That's what it felt like redesigning the FortySeven Media site.
Version 1 of fortysevenmedia.com was super gray and boring (seriously, it was gray). We were afraid to be ourselves and thought that in order to make it as a design studio we needed to be stuffy, businessy and impersonal.
Next year we sat down and decided that if we were going to have our own company we should darn well act like it. With version 2 we overhauled the identity, made snarky pages like “Don't Hire Us,” created a blog and before we knew it, we were getting business from all over the place.
We had stumbled onto something, and quite frankly re-designing that kind of success is scary, especially when it provides for your family. The Lizard Brain was in full effect. We got talked about quite a bit when we launched the old site and we didn't want miss that magic this time around. Every time I sat down to work on it I just got overwhelmed. Could we make something nearly as iconic as the first go around? Turns out it didn't matter, because after waiting 4 years we were becoming obsolete. Don't get me wrong, the business was doing better than ever, but the jobs coming through the contact form were less interesting than they were a few years ago.
If we haven’t made it plain before, we love ExpressionEngine and Structure. When betrothed together in holy matrimony they make a beautiful pair. But as with any relationship there are some snags. More specifically – blog pagination, categories and comments. Let’s take a look at the problems they have and then some quick tips I’ve stumbled across on how to fix them.
Basic Structure Setup
Before we jump in I’m assuming you know a bit about Structure. It lets you create pages based on URL’s not templates. But it does use templates. Confused yet!? Ok. If you’re creating a blog you will need to do a few things.
Create two templates - A “show a list of my entries” template and an “individual article” template.
In your Structure tree, go to settings and add your blog channel as a listing and set it to the individual article template.
Create the main blog page with Structure, but choose your list of entries template instead of the default template. Also choose to make the page have listings and choose the Blog channel.
Now back in your Structure tree you’ve got the blog page in your navigation and the option to edit or add new blog entries as listings.
Here’s basic versions of what the two templates should look like:
It’s been far too long since we had a proper ExpressionEngine tutorial here so without further adieu I present to you a solution for running Google A/B Tests with a Structure setup. Be warned, if you’re not familiar with how Structure works or basic EE templating you might get lost. I just can’t cover all of that here.
We had the pleasure of working with a kick awesome company called Firmex a few months ago and built them out a sweet Structure based site. We didn’t actually design this one - credit goes to Laura Wills at Messenger Design for that. But we did do all the HTML/CSS and ExpressionEngine work.
One of the main things Firmex wanted to be able to do was use Google’s A/B Optimizer to track the effectiveness of just about every page on the site. Wait, what – every page I hear you say? That’s right. And that’s some serious flexibility right there. But let’s start with exactly what A/B testing is.
A/B Testing - A Quick Overview
Let’s say you had the best homepage ever on your site. But you weren’t sure if the picture and header at the top of the page were sending the right message. With the A/B testing you could setup multiple versions with different pictures and headlines and track the results to see which is the most effective.
We’re a little late to the party, but wanted to give a quick wrap-up on our experience at EECIEU 2010. The ExpressionEngine & CodeIgniter Conference was in it’s third iteration, and I think it was the best. Robert from Whoooz! has been refining the schedule while still taking risks and trying new things. The single channel format this time around was much more enjoyable. At past conferences I kept having to choose certain tracks and felt like I missed things, so the simplification was great. The venue was very cool as well.
Last year Nate and I got to go on a grand adventure. We travelled overseas, saw the beautiful city of Leiden and met a ton of amazing people in the ExpressioneEngine community. EECI was the premier EE conference, pulling in designers and developers from all over the world, and doing it with style to spare.
Alright kids, less than two weeks until EECI2010 in Leiden and we're brining some more EENinja shirts. The question is what color? The shirt itself will be offwhite, but do we print gray or the beloved EE2 pink? Or do we go back to the original black shirt with white text? And just to make sure the printer doesn't kill us, let's do this thing quickly . Let the duel begin. Take the poll. Let us know.
Welcome to The Kick Awesome Show! That’s right, Nate and I have decided we need to hang out more, so why not in front of a camera? We’re going to attempt to talk about cool and interesting things every week so go hit that subscribe button now.
Being that this is our first shot the format’s still up in the air a bit. But that’s ok, we know you’ll tell us what you love and don’t love in the comments.
Hey Everyone! How’s it’s going? It’s been a while since we’ve posted as things have been silly crazy awesome busy, but we wanted to let you know about some of the super sweet conferences we are speaking at and/or just going to. Check the video:
Links to things in the video:
We are very excited to be speaking/attending these events and we would absolutely love to meet you there. Let us know in the comments if you’ll be coming to any of these events and we’ll keep an eye out for you!
I’ll just come out and say it. DesignHope has taken way too long. What started as a great idea with support from some of the coolest companies out there turned into a long drawn out process that still isn’t finished. Scott, we’re sorry, man. I hope you haven’t minded being the guinea pig. We still have big plans for DesignHope, but obviously we need to get some structural details worked out.
I still remember the day I found the ImageSizer plugin from Lumis. “Holy crap, I can upload any file and this thing will crop it and resize it on the fly in multiple places throughout my whole ExpressionEngine site?” To say I was psyched would be an understatement.
We often use ImageSizer in conjunction with the FF Matrix FieldFrame field type to let users add as many images as they want with captions. Then we pull at the first one and give a link to view the rest in a lightbox gallery. Works great! Until my clients started putting images in themselves.
I recently had a reader ask about the pop-up contact forms and lightbox scripts we’ve used on some of our client sites - were they built into ExpressionEngine and how did we get them to work? Well the answer to the first question is generally no. EE lets you setup whatever js effects with whatever libraries you want. So can choose exactly how you use it. It really is a different way of thinking about putting together dynamic websites, especially if you’re used to most of the other CMS’s out there.
So for this example I’m going to show you how to create a “Tell a Friend” box that fades in and auto populates with the page you’re currently on. It’s a bit of HTML & CSS, a bit of jQuery, and a bit of ExpressionEngine. Ready to get started? Let’s go!
I’m pleased to announce that I’ll be doing a workshop at the ExpressionEngine and CodeIgniter Conference in Leiden, Netherlands October 22-23, 2009. I’m really excited about this trip because 1.) I’ve never been out of the country and 2.) The group of people at this conference are amazing. Honestly, I’m quite humbled by the lineup. How did I get to be invited again? I can’t even list them all here, but include household names like Leslie Camacho of EllisLab, Veerle Pieters of Duoh!, Brandon Kelly of LEVEL Studios, Leevi Graham of Newism and Ryan Irelan of Happy Cog. Like Veerle laments, I’m not much of an EE coder compared to everyone else, so here’s to hoping I can bring something good to the table. In fact, I’ll be talking about how we take our static HTML/CSS pages and speed up development putting it into EE first and then building out real links and content.
Well, Nate and I made it back from our trek to the sunny St. Petersburg, FL and the Front-End Design Conference where I was a speaker. Let me tell you right now; we both had a great time. Dan Denney (@webdesignfanboy) went all out for his first event and went out of his way to make us feel welcome. From the coffee cups with our cartoon characters printed on it to the swank afterparty, we felt like nerds just might rule the world. We also got to meet a ton of new people and twitter friends face to face; not to mention talk about the things like HTML and CSS without getting the “look.” If you don’t know what that means, you’re probably not married or in a relationship!