Secretly Awesome Custom Service

by Brian Casel  ·  4.19.2010  ·  Business

When it comes to customer support for premium WordPress themes and plugins (and many other web-based products), there seems to be a pretty standard set of policies shared by most companies:

  • No telephone support.
  • Little if any direct email support.
  • Forums are the primary method of support, sometimes restricted to paid customers.
  • Specified hours for support forum responses (usually weekdays only).
  • No support for customizations / modifications to their product.
  • No guaranteed compatibility / support for other 3rd party software.
  • No support for free products.

There are valid and obvious reasons behind these policies.  A heavily promoted and popular site will never be able to handle the volume and deploy the resources necessary to offer phone support, free customizations, and other things on this list.

It’s important to spell out these policies clearly on your website so that customers don’t get the wrong idea.  They must know what the limitations are going in.  Otherwise, you risk making your customers angry and frustrated when they feel they’re not getting what they paid for.

You also don’t want to offer everything on day 1, then slowly cut out those benefits as your customer-base grows.  This will only turn off those customers who were with you from the start, who are likely the best promoters of your product/service.

Unofficially Awesome Customer Support

All of that being said… I still offer most if not all of the things on that list.  I just don’t make it known on the policy pages of ThemeJam.com.  I don’t guarantee these “extras”.  But I do offer them to those that inquire.

I respond to every email I receive through ThemeJam.  That has included:

  • Answering pre-sales questions, sometimes lasting up to a week of back and forth and not resulting in a sale.
  • Lengthy customer support for users of the free Gadget theme (which officially doesn’t come with support).
  • Help with theme installation and general WordPress questions.
  • Customer support for paid themes, despite the fact we have a dedicated forum for this.

Why?

I just can’t help myself :)

No, really.  Why not?  These extra support requests are opportunities to develop real relationships with potential customers.  If the customer comes away with a surprisingly positive experience, it increases the chances of them recommending ThemeJam products to their network (either through blogging, twitter, or simple word of mouth).

As I’ve said in the past, the key to success is to build a strong network of referrals.  In that post, I was talking about freelancing.  But it’s the same thing when building a customer-base for your products.  I’d say my biggest marketing goal for ThemeJam would be to boost word-of-mouth sales.  This is probably something I won’t be able to accurately measure, but still well-worth the effort.

Once again, I’m capitalizing on the fact that I’m still a small guy in a crowded marketplace.  The fact that my customer-base is still relatively small means I have the time and resources available to provide exceptional customer support that exceeds expectations and goes above and beyond what most companies offer.  This comes back to the idea that scaling your business can work both ways.

Over to you

Your thoughts?  I’m interested to hear about your experiences – positive and negative – dealing with customer support for online products.

The Importance of Stalking Your Peers

by Brian Casel  ·  4.15.2010  ·  Business

Maybe stalking isn’t the right word.

I’m talking about keeping tabs, but digging deep, on other freelancers, entrepreneurs, designers, developers… your peers in your industry.  And not only the “rockstars”, but your true peers.  The ones who seem to be on the same level as you in terms of career goals, reputation, etc.

This is an integral part of what I do

Every few weeks, I try and take the time to seek out a freelance web designer I haven’t heard about before.  Sometimes I come across their name by accident via twitter or elsewhere.  Sometimes I find them while browsing for design inspiration (the majority of sites featured in gallery sites are designer’s blogs).  Sometimes I actively seek them out.  The FreelanceSwitch freelancer directory is an awesome resource for this.  Sortfolio aint bad either.

Once I find someone interesting, with a similar background as me, I start reading their recent blog posts.  Then I follow them on Twitter and scroll down through their tweets a bit.  Then I come back to their blog and dig through the archives, scanning and reading articles like if I keep doing it I’m going to win something (when in reality, I’m just burning away what little time I have left in my work day!).  I’m trying to learn their story, what they’ve done to get to this point, and where they’re going.

Sound creepy yet?

I think one of the key factors that drives me forward as a business owner and entrepreneur is my obsessive hunger for information.  I listen to podcasts while I work and watch video interviews on a daily basis.  I read Inc magazine cover to cover.  I bought a kindle so that I can read everywhere I go – that is when I’m done reading my RSS feeds on my iPhone.

Just as it’s important to stay on top of trends and happenings in the industry as a whole, it’s also important to see what others in the trenches are up to.  This is where I get my real inspiration and cultivate ideas for how I can move my business forward.  Seeing what others are doing and have done up to this point is one of the best ways to stay on your toes, keep the inspiration alive, and keep going.

Learn to love archives pages

Archives pages are one of the most important, yet undervalued pages in a blog.  They tend to be one of the last things we think about when designing a WordPress theme or reading a blog.  But there is so much to learn just by browsing through an archive page of a blog that’s been around for some time.

You can compare and contrast how their stories differ from the past to the present.  You can see how their writing style has developed.  You get an idea of the major events that happened in their career up to this point.  You can find the lessons they learned and shared based on those events.  And most importantly you can relate their past and present to your own path and draw inspiration for how you’re going to move forward.

Love your work.  Love your business.  Obsess over it.  But don’t forget to remain equally passionate about watching and learning from others.

WordPress Theme Development Process

by Brian Casel  ·  4.13.2010  ·  Education, Opinion

In the first part of this series about my WordPress theme design process, I covered how I go about the concept and design phase.

This post covers my process for developing a WordPress theme.  That is, after the PSD mockup is complete, this is how I go about coding and preparing to release it as commercial theme on ThemeJam.

NOTE: This is not meant to be a tutorial, but rather me sharing my personal style and process.  I mention many technical aspects of web development here.  If you’re unclear or interested in more detail on anything discussed here, let me know in the comments and maybe I’ll post an in-depth post about it!

First, the markup.

Panic Coda has been my coding application of choice for the past 2 years or so.  A few months back I gave MacRabbit Espresso a try, but it didn’t stick with me.  Coda has everything I need:  A clean interface, user-defined keyboard shortcuts & snippets, and a built-in seamless FTP client.

I start by coding the main templates in valid XHTML and CSS.  I’ve never been one to use a CSS framework or pre-built template created by others (like the 960.gs).  I prefer to make every line of code my own to ensure that every bit is optimized for this particular theme, with nothing leftover that I don’t need.

That said, I have crafted my own “new theme” template, or set of files/folders if you will.  I’ve been tweaking and improving this set of templates over time.  It to speed up the process at the very beginning by covering all the items that I always put in every theme.  My starter template consists of:

  • Index.html – blank-slate HTML doc, including the doc type, basic HTML page structure, and a call to the stylesheet.
  • reset.css – Created by Eric Meyer, with a few of my own tweaks.  I haven’t always used this in the past, but recently I do.  It’s good for making things consistent across all browsers from the very beginning.
  • style.css – This has all of the basic elements of a typical WordPress theme stylesheet, including the theme info declaration at the top.  It includes the clearfix method, basic styles and margins set on the common elements like P, H1-h6, UL, OL, etc.  It also has a few WordPress-specific styles that I know I’ll need later such as some basic comments styles, .alignleft, .alignright, .aligncenter, blockquote, and a few other things.
  • Scripts folder – I always include jQuery here.  I realize that WordPress has jQuery built in, but I’m first starting with the static HTML templates, so I’ll need my own copy of it.  I also have the jQuery cycle script here because I use it so often.

With my starter template fired up in Coda, and my finished mockup open in Photoshop, I get to work on slicing and coding up the static HTML template.  My goal here is to get as much of the site structure and details coded as I can.  The things I want to have coded at this stage are:

  • Overall structure and layout.
  • Typography, including implementation of Cufon (my choice for font-replacement in commercial themes.  For other sites, I go with TypeKit).
  • jQuery enhancements.  This includes dropdown menus, featured posts sliders (though I use static content for now), etc.
  • Widget styling.  Again, using static content now, but styling the markup to be used later in WordPress.

Most of the time, I’ll do a home page (index.html) and generic interior page (page.html).  Sometimes I’ll create an additional blog page if blog posts will have a unique layout or something.  Usually in website development I would implement a system of includes, like a global header and footer.  However, since WordPress will have it’s own include/template system, I don’t bother creating includes for the static HTML templates.

Browser Testing & Validation

When it comes to browser testing, I always say test early and test often.  Some folks don’t even look at IE until they’re done coding everything.  This is a bad idea, because more often than not, IE requires you to re-think your (perfectly logical) code and you’ll end up wasting time to go back and re-code.

I prefer to test all browsers as I go along, especially as each major piece is implemented.  For example, I’ll get my featured posts slider working perfectly across all browsers before moving onto the rest of the site.

To finish off the static HTML phase, I put my pages through the W3C validator until that refreshing green light appears.

Alternate Colors

Most of the time I implement alternate color stylesheets after doing the static HTML templates, but before integrating WordPress.  I do this so that I can release the static HTML templates as their own product, with multiple color options built in.

The way I do this is simply by creating additional stylesheets, which override specific styles and colors found in the main stylesheet.  Basically, I commit the main stylesheet to being the “default” color scheme, and use additional stylesheets for the other options.  I take very special care in picking alternate colors.  Sometimes I’ll go so far as to pick and implement a color scheme, only to trash it later because I feel it’s not good enough for release.

Time to integrate WordPress

Finally, the real fun begins…

I create a fresh installation of the latest version of WordPress within the ThemeJam demo section (this particular demo is not live yet).  Then I import some basic blog content.  WPCandy has a great “test content” import file you can download and use to quickly fire up a new demo site.  I have created my own version of this, which I think works better to showcase my themes on ThemeJam.

Then I begin creating the theme.  For this, I have created my own personal starter template, which I have named “FrameJam” (Framework + ThemeJam, get it?).  It’s not meant to be a WordPress Framework in the common sense of the word.  Really just a starting point for my own personal use.  Included are a few things I like to have across all my themes:

  • The ThemeJam Options panel – with basic options included.  I’ll add more options specific to this theme a bit later.
  • Various SEO markup and template tag enhancements.
  • Some PHP functions I always use – like images and thumbnail handling, registering widgets, a custom widget template, custom comments markup, custom excerpts, etc.

I duplicate FrameJam and rename it to the new theme name.  Then I overwrite the entire style.css file with the one I created earlier for the static HTML templates.  Now we have basic styling, but the markup isn’t together yet.

I go line-by-line integrating WordPress tags and functions with the markup I already created earlier.  It’s just a matter of pasting chunks of markup from the static HTML templates into the WordPress templates.  I start this process by setting up header.php, index.php, and footer.php as these 3 templates will basically create a full page from top to bottom.  Then I’ll fill in the rest of the template files.

Now is a good time to re-test everything across all browsers.

The last phase of WordPress integration is to implement all of the theme options.  This adds an additional layer of template tweaks, turning static things into variables, adding inputs and sets of inputs to the Theme Options page, and whatnot.

Then of course, there is testing, testing, and more testing.  TIP: Test at night, but test again in the morning when you’ve had a good nights sleep.  You’d be surprised how many things you miss when you’re bleary eyed.  There are so many little things that go into a WordPress theme, it can take a whole week just to tie up all the loose ends.

That wraps up the wordpress development phase.  If you have any questions for me, or if you have a different approach you’d like to share, please leave your thoughts in the comments.

Next up…

In the final post in this series, I’ll cover how I go about preparing my finished theme for release on ThemeJam.  Stay tuned…

Scaling Your Business Can Work Both Ways

by Brian Casel  ·  4.5.2010  ·  Business

I’m running a unique promotion for this month over on ThemeJam.  Buy any WordPress theme, get 1 hour of free private consultation.

The idea came to me while reading Rework last night.  I was up to the chapter that talks about promotion during the early days of your company.  Their advice is to use your lack of “big-ness” to your advantage.  The fact that your audience is small right now means you’re free to try out different ideas, mess things up and fix them before your brand hits the mainstream.

So this got me thinking.

Since ThemeJam hasn’t reached overwhelming sales numbers (yet), I can take this opportunity to offer a personal touch to the customers who do purchase products from my new company.  By offering 1-to-1 consultation sessions with my customers, I’ll be able to meet and interact with them on a personal level.  That means offering assistance, support, expertise, bouncing around ideas, and most importantly, answering any questions they have for me… about anything!

By reaching out to my customers on this level, I hope to build real trust with them, repeat business, and maybe develop some new friends as well.  Ultimately this should result in encouraging customers to personally recommend ThemeJam to their contacts who use WordPress.  I’ve had success growing my freelance business through personal referrals and I aim to build this type of organic growth with ThemeJam.

The advantage of being the small guy

The big WordPress theme companies (many of which I admire) wouldn’t be able to do something like this.  Well, they might, but they’d need to use a lot more resources, personel and time to offer 1-on-1 sessions with their customers.

Since my business is still small, I’m able to devote the time to a promotion like this.  And I hope it exceeds expectations and fills up my schedule.  I’m hungry!  I’m ready to win over the trust of WordPress users, one customer at a time.  That’s what being the small guy is all about.

Scaling your business

So the concept of developing a scalable business can work both ways.  When folks talk about “scaling”, they’re usually referring to the idea of putting systems in place to let the business run itself and grow and grow and grow.

But don’t sleep on the flipside to the concept of scaling.  Every business starts out small.  Look for ways to take advantage of your small size.  Most of the time, you’ll things that your larger competitors won’t be able to match.

WordPress Theme Design Process

by Brian Casel  ·  3.31.2010  ·  Education, Inspiration, Opinion

One of the interesting things about web design is that everyone has their own way of doing things.  Sure, there are industry standards for quality and practice, but the road to achieving that final product is always executed differently depending on who you ask.

In this new series of posts, I’d like to share my personal process for designing a WordPress theme.  I’ll take you from initial concept, through the final testing stage and presentation on themejam.com.  This series is split into three parts:

  1. Concept and design
  2. Coding and WordPress integration
  3. Testing and release on themejam.com

Note:  read on for some downloadable goods…

It starts with inspiration

When working for clients, I usually need to actively seek out that inspiration based on what the client wants and needs.  On the other hand, when designing themes as products for ThemeJam, the inspiration can come from anywhere, and through a variety of channels.  This was one of the things that drew me into this business.

The spark might come from my daily web browsing, which might include glancing over the portfolios of other designers that I respect.  It might come from something I saw on Twitter.  Or one of the many design blogs I subscribe to.

Design inspiration might not come from the web at all.  My latest kick has been to actively seek inspiration for web designs by flipping through print magazines.  There are a ton of beautiful and unique layouts to be found in the pages of magazines these days, with a huge variety in style.  Wired magazine would be my favorites as of late.

Inspiration might also come from television or the movies.  Ever since I was a little kid, I’ve been fascinated with the opening credits in movies.  The combination of intro music, typography, and visuals is always fascinating to watch.  It’s all about setting the tone and feel for the movie, often without relying on plot and dialogue, but by pure texture and tone.  I don’t think I realized it when I a little kid, but I think that opening credits in films was my first instance appreciation of  typography design/application.

Television can be another source of inspiration.  Have you noticed that with today’s HD programming, the graphics built into television shows are designed like user interfaces?  Take a look at the news tickers, info captions, and split screens when watching the 24 hour news networks.  Or notice the way they break down tons of different stats, timers, and informational tidbits while watching a sporting event on TV.  Lots of details to dig through.  My latest theme, MistyFlip, was originally inspired when watching the X-Games on ESPN.

Developing a concept

After something sparks my interest and provides inspiration for a new design, I work to develop it into a concept.  I’ll actively seek additional pieces of inspiration based on that first thing.  For example, after watching the X-Games I saught out various examples of design in the world of extreme sports (snowboarding, skateboarding, BMX, etc.).  I knew I wanted to design a theme that could work for a site or blog in this industry.  So I clicked through various sites such as burton.com, seahwhite.com, elementskateboards.com and others.  Then I went out and picked up a copy of Transworld Snowboarding Magazine.  This was what really got the juices flowing.

Flipping through the pages of that magazine, I was able to craft some core ideas about how I want the typography to interact with photos and content.  I drew some inspiration from the way apparel is designed in the extreme-sports industry and developed some ideas for textures and highlights throughout the theme.

At this stage, I also try and decide what type of theme this is going to be.  Will it be a personal blog layout?  A news/magazine theme?  A theme with portfolio functionality?  Or a hybrid of these and other theme types?  I’m basically trying to merge the creative ideas with some concept of structure, usability, and ultimately what the customers of ThemeJam will find most useful.

Sketching

I probably sketch on paper less often than I should.  Many designers always begin with a pencil and paper before hitting Photoshop.  I’d say that I do this about 50% of the time.  If the concept is a really unique one, I’ll craft those ideas using my sketch pad.  I use pencils and grid paper to do this.  It usually involves 3-4 takes before it really takes form.  What I’m drawing are the main elements of the page – navigation bars, image boxes, chunks of copy, and maybe a few detailed elements like how the slider buttons might work, or gallery thumbnail layouts.

The process of sketching is actually fairly new for me.  I’ve always been more comfortable designing with the mouse and computer screen.  But about a year ago, I made the conscious decision become better at sketching my ideas on paper before firing up Photoshop.  The biggest tip I’ve found is to draw each line slowly.  At first I felt I needed to scribble things down extremely fast (not really sure why).  But I’ve found that if I slowly draw each line I end up with a much clearer picture and the design will take a more defined direction.

Design in Photoshop

The bulk of the design phase is spent in Photoshop, creating layers, text blocks, images, textures, effects, filters, etc. etc. etc.

I always start with a blank grid template.  I have several of these saved on my computer.  Some are based on the 12 and 16 column 960 grid system.  Others I created myself, including a 5 column and 8 column grid.  These grid templates basically consist a series of columns and rows, framed with guides.  This makes the process of creating balanced layouts quick and much more efficient.

I tend to place all of the page elements using a temporary colors and fonts.  By temporary, I mean choosing quick go-to options like Arial or Georgia and a pallette of black/white/gray and red for highlights.  I feel it’s more important to lay down the overall structure before perfecting the details.

Next I spend time carefully making typography decisions.  This is when I pick out fonts, sizes, spacing, weights, etc.  It’s a process of finding balance and prioritizing content in a tasteful, systematic way.  These days I spend more time on this than ever because the choice of fonts to use on the web has greatly expanded thanks to tools like Cufon and TypeKit.

Finally, it’s time to set the first color scheme (by “first”, I mean the version I’ll use as the screenshot for the purchase page, thumbnail image, etc.).  For this, I often scroll through Colour Lovers.  There are so many awesome user-submitted palettes here.  I usually pick one and make a few modifications to it.

Once the first color scheme is all set, it’s time to find a few more to offer various options.  On some themes, I duplicate the PSD and apply the alternate color scheme across all elements (background, text, links, headers, etc.).  On others, I’ll apply the alternate colors later on in the CSS, not worrying about creating a PSD version.

Moving on…

After several rounds of tweaks and perfecting, the design phase is nearly complete.  It’s time to move onto the coding phase, which is the topic of the next post this series.  Stay tuned…

Page 5 of 18« First...3456710...Last »