Time for a reset

Except for a brief, glorious period in 2009, Motionographer has always been a hobby. I launched it when I was a full-time student, and as soon as I graduated, I started working full-time to pay the bills. All the contributors have full-time jobs, too. We’re busy people, scattered across the globe. We do this because we love it.

Unfortunately, that means there hasn’t been much time for a redesign. Sorry about that.

The people have spoken

A couple months ago, I conducted a survey about Motionographer, and 574 of you shared your thoughts with me. You were honest and critical and awesome. I read every response and took it all to heart.

Some of things you said you wanted:

• Responsive (i.e. mobile-friendly) site design
• More frequent updates
• Deeper coverage, including interviews, process breakdowns and industry trends
• Improved search
• A location search on the job board that actually works

There were many other great suggestions, but the items above were the crowd favorites. This new incarnation of Motionographer:

• Is responsive
• Has been set up to make posting projects faster while encouraging the creation of longer form content
• Has a new search engine
• Has new filtering tools (check the homepage)
• Has a job board with a location filter that actually works

Motionographer is fully responsive, even though we don’t own all of these devices.

Pro tips

Try these things:

In a hurry? Click images with play buttons for an overlay frame that will instantly play the video.

• If a post has a little play button in the lower-left hand corner, clicking on the image will play the associated video in an overlay frame.
• When a video is playing in an overlay frame, use your keyboard arrows to watch other videos on that page.
• Make a few typos in the search box. The new search engine can guess commonly misspelled words.

An agile approach

I’ve been wanting to redesign Motionographer for years. (It’s been about 6 years since our last substantial overhaul.) We had so many plans, too. Amazing plans. Beautiful plans. They would have moved you to tears.

And that was exactly the problem.

I was so busy trying to design the perfect site that it never happened. It was too big. It would have taken me a few weeks of full-time effort just to manage a development team to build it all. Then we’d have to spend even more time keeping all the new awesome stuff up to date and full of content.

Did I mention that Motionographer is a hobby?

In product development parlance, I was using a waterfall approach. That’s the old school way of making stuff with loads of sketches, a giant timeline on a piece of paper and a bunch of unrealistic milestones.

What I needed was a more modern approach, an “agile” approach.

A different kind of MVP

I won’t go into details, but the primary difference between waterfall and agile methodologies is that with agile, you’re not trying to make something perfect. You’re trying to make something that’s good enough to satisfy your basic requirements. This is sometimes called a “minimally viable product” (MVP).

If that sounds uninspiring, hang on. Agile is all about making something fast and then iterating on it over and over again, making it better each time. With agile, you’re constantly responding to your users, tweaking and polishing and sometimes destroying things to make the best possible product.

Never done, never perfect

Why am I going on about this? I want you to understand where we are now. This is the beginning. This is our MVP.

Is it perfect? Good lord, no. Are things missing? You bet. All sorts of things.

(Also: I don’t want to overstate my use of agile. I’m not an agile expert; I was simply inspired by the agile philosophy.)

What’s next?

There are lots of things on my to do list, but generally speaking, I want to focus on creating a vibrant community anchored by amazing artists and designers. (Those are two different things for me.) That means:

• curating and producing awesome content
• building tools that let people discuss that content in a meaningful way
• fostering community online and offline to help steer our industry towards its best possible future

Technical details

For those who are interested, here are some technical bits about the redesign.

WordPress FTW

Motionographer has been running on WordPress (.org not .com) since 2006. Before that, Tween (Motionographer’s predecessor) also ran on WordPress. In other words, I’ve been using WordPress for a long time. Luckily, WordPress has turned into an incredibly powerful content management system with one of the largest, most supportive communities in the open source world.

The host with the most

Motionographer has been running on MediaTemple since birth. For the relaunch, we moved to a DV Level 4 setup, and I’m really excited to see how it goes.

A solid foundation

To start, I worked with Bones. Bones isn’t a framework — it’s like a starter kit that saves you a bunch of setup time (if you know what you’re doing).

Bones is an awesome starter theme for intermediate to advanced WordPress people.

Kicking some SASS

Bones was built with SASS, a fancy way of writing CSS that has changed the way I think about web design. If you’ve been on the fence about whether or not to learn SASS (or the equally popular LESS), find a small project to treat as a guinea pig. It’s well worth the time.

SASS allowed me to easily design for phones, tablets and desktops all at the same time. I won’t lie. It got dicey here and there, but knowing that I just needed to tweak a few lines instead of hundreds encouraged me to take some risks and learn.

FacetWP and SearchWP

I used FacetWP for an internal project at work and was amazed by its power. FacetWP is what allows for the filtering functionality on the homepage, and while it’s not free, it’s worth every penny.

The same people behind FacetWP make SearchWP, Motionographer’s new search engine. Over time, I’ll tweak the search settings as I learn from people’s behavior. SearchWP gives me analytics and simple weighting tools that should make that pretty easy.

Drop me a line

If you want more details about the redesign, hit me up on Twitter. If you spot something wrong with the site, please drop us a line via the Contact page.