Developing a Website Any Client Can Update

Screen-Shot-2013-10-22-at-6.00.02-PM1
Spread the Word

Recently we discovered one of our web developers here at WPValet, Cole Stevenson, working on a unique project.

You see the world of business – and especially technology – changes quickly. Likewise, so do your customers’ needs from their website. Cole’s project – which we’ll tell you about in just a minute – makes websites that address clients’ needs in real time. This way they – and Cole’s business – don’t fall behind shifts in technology.

But, here’s the best part: If you can learn to do something like what Cole is doing and replicate it for your clients, you’ll provide a value most developers can’t.

The Background of Developing a Website

The client requested a very interactive website to inform customers where their mobile locations would be and when they’d be there. They also wanted to personally update the information on their website on their own.

The client had already contracted with someone else for the design so Cole had to work around that. He developed the site – and the backend functionality – so it can be changed and adapted to the client’s needs. Plus, the upgraded backend is clean and easy-to-use so updating the content is simple and straightforward – even for the most technologically challenged client.

Emancipet Theme

Here’s Cole to tell you about the project in his own words …

Meet Coleman Stevenson

Tell us a little about where you’re from and where you call home now?

I’ve lived in just about every major city in Texas. Austin has the best tech community I have lived in so far, so I’m happy to call it home.

How and when did you get your start in web development?

I was probably about 11 or 12 years old and I wanted to make a video game website. So like any newbie at that time, I installed Microsoft FrontPage and started to figure things out.

Do you have any special accolades or accomplishments you’d like to share?

My accomplishments in the WordPress community are modest ones. I enjoyed creating a Fundraising and Email Newsletter plugin from scratch.

I’m generally proud of anything that made it out into the world, and I hope that at least one person found some of the things I have created useful.

What is it that you love most about developing a website with WordPress? And how long have you been using WordPress?

I’ve been using WordPress for about four years. The community is the obvious answer. The amount of sites utilizing WordPress right now seems astronomical compared to when I first started working with it.

That means there is a great deal of help and insight from others as well as opportunity to make really great plugins and themes for a lot of people.

Please tell us about the importance of a website growing and adapting with the clients needs?

When I first started creating sites with WordPress, it was your basic “hackish” beginner methods of construction. Ridiculous amounts of page and post categories or tags that were string coded to do different things in the theme.

Whenever I would return to the sites I could tell my client’s just gave up and eventually stopped using it. And, if they did continue to use it, I would get that phone call or email, “How do I add a new slide to my home page again?”

Content is king these days, and if a client can’t easily add or create content on their site as they grow they’ve wasted their money in my opinion.

The "About" page from the backend.

The “About” page from the backend.

The "About" page published.

The “About” page published.

When developing a website how do you decide what will make the backend easier for the client to use?

Plan, plan, plan, and plan. My goal during this phase is to think about the operations that are going to be used the most. Then I try to get the lowest amount of required interactions with the interface while making an effort to keep it styled as close to the default WordPress admin style as possible.

The client feedback I’ve accumulated over the years – and continue to accumulate – makes each project more intuitive and exciting to use.

What are the “custom” tools you built into the backend of this project?

Just about every section in the backend is custom to a certain extent. I think some of the more notable customized interfaces would be the live preview of Home Page Slides as you are constructing them.

The mobile location interface was the most complex. Handling multiple mobile units with multiple dates and addresses seemed daunting at first. But, with the proper UI/UX planning, it was easier than I thought it might be.

The backend for adding an event.

The backend for adding an event.

Can you tell us about how the backend of this website allows the client to easily edit, update, and keep their website fresh?

This particular client has multiple administrators that will be in charge of specific areas. So the first step was to only show the sections that are relevant to the user.

tooltipThis helps to not overload a new user with too many options when they first login. I also include helpful tool-tips for certain options that need explanation, as well as including larger contextual help buttons at the top of every page.

The biggest barrier to keeping a site fresh is being stuck and not knowing what to do. So I try to keep those users in mind from the beginning of the project.

What’s the reaction to the ability to preview changes to certain elements of the site directly in the backend?

Granted this isn’t a wildly original idea in plugins and themes but clients are just blown away by it. I think so many people have experienced WordPress with the usual process of making an edit then previewing the change – then going back and changing something else for what seems like an eternity.

It’s just not a fun user experience and the content ends up being malformed most of the time operating like that. It’s a win-win for clients. Save time and have your content look better? Yes, please!

Do you believe that a website should be a tool for interaction with customers?

On this project specifically, we did a large integration with a well known non-profit donation management system called Convio. This system offers constituent tracking that made it easy for us to relate website users to their previous donors.

Specific website interactions like purchasing something from the store, inquiring about volunteer opportunities, and looking for clinic resources are linked with Convio allowing them to retain better analytical data. This was very important for an organization that needs frequent donor interaction to stay operational.

Homepage options on the backend.

Homepage options on the backend.

The homepage.

The homepage.

Why is it so much better than just a static informational page, which many developers sell their clients on?

Fresh content keeps users engaged. This doesn’t work for every client. If you’re a mom and pop store that hired me to get a home page and contact page up and running then sure, keep it static.

But why not build your static content on a dynamic platform like WordPress to allow yourself growth in the future? It will save you money and hopefully increase your sales in the long run.

Home page widget options on the backend.

Home page widget options on the backend.

Home page widgets.

Home page widgets.

What’s your biggest goal when developing a site for a client?

My first is client satisfaction, but within that I think WordPress is one of the biggest economically equalizing forces on the internet right now. If I can give smaller businesses a tool that lets them compete with the big boys then I feel satisfied as well.

Behind-the-Scenes of the Project

Now that you understand Cole’s goals for the site, let’s take a more in-depth look at a few of the tools he built in …

Mobile Locations

This backend tool allows the client to input the location of their mobile units for up to a year in advance. It also automatically clears dates as they pass and can save locations to repeat later.

mobile-locations

mobile-locations

This is shown on the homepage with the next 10 days of where the units will be and even displays a Google map with the location directly on the homepage.

Easily Updated Slider

easily-updated-slider

easily-updated-slider

easily-updated-slider

Options are pre-set so the client only has to select a box to change the color or images and edit the text. Plus, when they make changes the homepage slider is automatically updated in real-time. To make it even easier it’s previewed directly on the backend so they can get it just how they want without going back and forth to view their changes one at a time.

tabs/iconsCustom Function Tabs

For each custom function there is a custom tab for the end user to easily find and modify their site. They’re very intuitive and user friendly with custom icons to make the right function easy to find.

As you can see from this project, a website that’s fresh and updated often is quickly becoming desired by small businesses. They simply need it to compete. And, when you give your clients the tools to achieve what they want from their site, you’ll be highly sought after – which means more projects for you!

So what about you? What are you doing to make websites more functional for your clients?

Like what we're sharing? Subscribe by email below.

Spread the Word

Posted on October 23, 2013 in Case Study, WordPress

Response (1)

  1. frederiksen
    November 25, 2013 at 6:41 am · Reply

    I’m a writer by career and it’s entirely clear to me that since I began blogging, the amount I create has boosted significantly, my daily interactions with the sights of others have never ever been so constant, the variety of voices I involve with is far higher than in the pre-Internet age– and all this has helped me end up being a lot more moderate as a thinker, additional open to mistake, much less obsessed on exactly what I do know, and a lot more considerate of just what I don’t. If this is a deterioration in my brain, after that more, please.

Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top