Not all client web design work needs to be custom built from the ground up.  In fact, most of the time it shouldn’t be custom built 100% of the way.  There are so many powerful tools at our disposal, including open-source content management systems such as WordPress, and even more plug-ins and themes to expand the design and functionality.  Not to mention loads of 3rd party specialty services that can be used alongside their WordPress website, such as iContact for email campaigns, or FreshBooks for online invoicing.  Virtually any requirement can be met through utilizing one or several of these tools.

So where do you, the web developer come in?

Clients look to you to connect the dots.  They’re looking for someone who can recommend the right combination of tools, themes, plug-ins, and services to meet all of their goals.  And guess what?  They’re willing to pay you for your expertise in these areas as well as your skills to custom tailor everything to their specific requirements.

Here are the specific services you could (or should) be offering to your clients:

Consulation

Before you get into re-arranging layers in Photoshop and applying CSS classes, you’re in the business of web design consultation.  I might go so far as to say this is the most important service that you will offer.

It starts with a deep understanding of your client’s business, their specific goals and requirements.  This “Discovery” phase (as it is commonly referred to) often involves a series of meetings to flesh these things out.  Many clients like to provide Word documents, PowerPoints, and other docs to better illustrate what they’re going for.  The more materials and more detail the better.  Go through it all, dissecting any points that may be unclear.

Then it’s your turn to do the talking (which may come in a later meeting, proposal document, or other communication).  Based on your client’s needs, you will recommend the best set of tools to meet (and exceed) their requirements.  Remember, they may not be familiar with terms like “CMS” and “Web Hosting Provider” so take it slow and ensure they understand every piece of the puzzle.  TIP: Skip the technicalities and focus on how each tool impacts the big picture.  For example you can say something like “WordPress will allow you to easily manage and update your website content.”

Implementation

So your client is on board with all of your recommendations.  Now it’s time for action.

Set your client up with suitable web hosting and install the latest version of WordPress.  Optimize it with your fresh WordPress installation checklist.

Install and activate a suitable WordPress theme, and customize it to meet all of their needs.  ThemeJam WordPress themes are built with developers in mind.  That means all of the code is validated, clearly commented and organized in a way that makes customizations a breeze.  Plus, every package includes the layered Photoshop file for even more design flexibility.

Up selling

Just because the site launched, doesn’t mean your client relationship should end.  Stay in contact and offer various up sells that enhance or expand their web presence and bring you continued repeat business.

One example would be designing and implementing an email marketing campaign to match their website.  Of course, we design our Deluxe Theme Packs with this type of thing in mind.  Or perhaps they need a Twitter presence.  Using the graphics in our layered PSD files should help you design a cool and consistent Twitter background to complete their online brand.

Customer support.  This brings us back to consultation.  Just as we offer you ongoing support for our themes and templates, you should be offering ongoing support to your clients (at your hourly rate of course).  That includes additional consultation, website redesigns, training and other requests.

A few final notes

On Pricing - Don’t be afraid to charge what you’re really worth.  Don’t under charge because you’re using pre-built templates and open-source systems.  It’s your expertise and custom work that will make these tools achieve your client’s goals.  Plus, since we develop all of our themes with the highest professional standards, you can be confident you’re delivering top quality to your client.  Price based on value to your client, not how easy the process may come for you.

Affiliate links - Recommending a WordPress theme?  A web host?  An email marketing service?  All of these things have affiliate programs.  You should be an affiliate and make yourself a commission every time your clients purchase these things.

Over to you

How have you leveraged WordPress and other tools for your web development business?  Share your thoughts and tips in the comments!

For web professionals, using keyboard shortcuts is a great way to increase speed and efficiency in your workflow.  In fact, I’d say they are an essential for true mastery in web design, development, or any computer-intensive trade.

In every program I use, from Mac OSX to Photoshop to Panic Coda and Tweetie, I’m  constantly striving to reduce the number of mouse clicks and adopt as many keyboard shortcuts as possible.  You can say it’s an obsession of sorts

Learning Keyboard Shortcuts

When learning to use a new program, I highly recommend learning the keyboard shortcuts right from the start.  That way you don’t develop habits with excessive mouse clicks.

Some programs, like Photoshop, will display the keyboard shortcut when you mouse over the feature.  Others display then in the program menus.  And others even allow you to customize your own keyboard shortcuts, which makes it really easy to work into your personal workflow.

The process of learning keyboard shortcuts usually goes like this:

1. Determine the most common and repetitive actions you perform in the program.
2. Learn the keyboard shortcuts for those actions or define your own.
3. For an entire day, consciously utilize the shortcut.  If you can, keep your hand completely away from the mouse.  For the first day, your workflow will likely be a bit slower than usual.
4. After that first day, the shortcut should now be ingrained in your workflow.  Now you can unconsciously use the keyboard shortcut every time, vastly improving your speed.

Useful Keyboard Shortcuts for Web Designers

Here are a few shortcuts I use on a daily basis and find particular useful for web design/development.  I’ll spare you the obvious ones like Save (command + S) and Undo (command + Z).  Hopefully you’re already using those.  Of course, there are many more to find and use so I’ve added links to other articles with more exhaustive lists.

System-wide Shortcuts

Screenshots (mac) - Command + Shift + 3 takes a screenshot of the entire monitor.  Command + Shift + 4 lets you choose which window to shoot.

Screenshots (windows) – Control + Print Screen will save the current screen to the clip board.  You can then paste it in photoshop or another imaging application.

Duplicate file – Command + D

Save As – Shift + Command + S

Close active window – Command + W (mac) / Control + W (windows)

Here’s an extensive list of system-wide keyboard shortcuts.

Web Browsing Shortcuts

Open a new tab – Command + T (mac) / Control + T (windows)

Reload the page – Command + R (mac) / Control + R (windows)

Reload the page with a refreshed cache (useful when updating images) – Command + Shift + R (mac) / Control + Shift + R (windows)

Zoom in / Zoom out – Command + / Command -

Find text on page – Command + F (mac) / Control + F (windows)

Activate Firebug – Command + Shift + C (mac) / Control + Shift + C (windows)

Here’s a complete list of Mozilla Firefox shortcuts.

Photoshop Shortcuts

Copy Flattened Selection – Command + Shift + C (mac) / Control + Shift + C (windows)

Group selected layers – Command + G (mac) / Control + G (windows)

Show/Hide Guides – Command + ; (mac) / Control + ; (windows)

Flip the foreground and background color – X

Here’s a list of Photoshop “Secret” shortcuts

Share your favorate shortcuts

Which shortcuts could you not live without?  Which have had the biggest impact on your workflow?  Share your secrets in the comments!