Advantages:

Being a niche focused firm gives us the ability to:

• become an industry leader
• learn the industry well and save the customer half the work
• become recognized in the industry as a preferred provider
• create testimonials and case studies based on similar businesses
• create and sell products, services, or applications specific to the industry
• get noticed by industry publications, associations, awards, etc.

Rye Armstrong - Avtec Media Group, Credit Union Website Design

As a industry specialist, your clients become more interested in ongoing business dealings with your firm rather than just hire a generalist on a project by project basis.

Phil Marzo - RestaurantIdentity.com, Restaurant Web Design & Marketing

Being a niche focused firm allows us to have a retainer based business model. Instead of billing on a per-project basis with smaller retainer fees - usually maintenance and hosting - we now use a solely retainer-based business model. This regularity means that our turnover and workflow can be correctly estimated month-on-month and we do not suffer - as much - from peaks and troughs, which is very important in today’s economic climate.

It has also reduced the number of companies we compete against. We carefully studied the web design market and picked a niche with few “specialist” providers. It was easier to become the leader of that niche and the de facto company our target audience turns to get a website.

Lastly, we have little to no price competition. During our setup phase we implemented processes that allow us to realize economies of scale by reducing development time. Price competition and lower project bids became a non-issue and we have more flexibility over our margins.

Leo Ludwig - Accountant Websmiths, Websites for Accountants

Beyond being just a web design firm, our clients use us as a research tool (we act as consultants for their business) which builds an incredible degree of loyalty. We have clients that have been with us for over ten years.

John Hernandez - RESI, Real Estate Website Design

After nearly a hundred legal-industry websites and marketing campaigns, we know a lot about what works and what doesn’t. We know to advise a marketing director or partner where the potential speed bumps exist in development and how to present to the firm internally, how to get buy-in from lawyers not directly involved and other important factors specific to our industry.

Further, with a focus on law firms we are constantly asked by current clients how earlier clients did something, especially when the earlier clients may be high-profile in the industry. Being able to talk about previous experiences puts the client at ease knowing that we’ve been down this road before.

Jason P. Lisi - LISI, Law Firm Website Design

Simplified and more powerful marketing as you only need to develop differentiation that appeals to one market.

Stephen E. Anson - perfectpatients, Chiropractic Web Design

Search Engine optimization is much easier because you only have to optimize for one industry and set of key phrases.

Christina Archer - Dental PC, Dental Website Design

Disadvantages:

The disadvantage is the obvious of having all of your “eggs in one basket” or industry. If that industry declines, new competitors emerge or clients choose to bring their design and development in-house, this can potentially limit the size of your marketplace.

Kent H. Tewell - L.E.T. Group, Hotel Website Design

We intially invested a relatively large amount of time and money in developing our “products”. This was done to ensure that the blueprint we developed was flawless because it is going to be used a number of time to realize the economies of scales mentioned earlier.

Web designers are creative people and after years of working on the same market segment, they might become frustrated to have to create yet another website for your niche. Allowing them to work on ‘outside’ project assures that their creative juice keeps running.

Leo Ludwig - Accountant Websmiths, Websites for Accountants

Some disadvantages of being a niche focused firm that we keep a sharp eye on are:

• Becoming too focused on a specific industry and miss other opportunities
• Skills becoming too specialized
• Getting too comfortable and lagging behind technology trends

Rye Armstrong - Avtec Media Group, Credit Union Website Design

Did you find this post interesting? Please subscribe as all my posts are focused on helping design companies and freelancers improve their business!

Any advantages or disadvantages that were missed here? What has your experience been with niche markets?

This is the first in what I hope to be a regular series focusing on additional revenue sources for design firms. I’m a huge believer in A/B testing, multivariate testing and conversion optimization.  Essentially, the art and science of improving the effectiveness of a website - whether the end goal be a purchase, sales lead or simply increased page views.

Just recently, we added an arrow to the signup form on Handbag Planet and increased conversion over 50%.  I also added an arrow on a client’s e-commerce site and increased conversion over 10%.  This is just an example of what one small element can do.

Benefit #1: Numbers-Based Sell

One of the big benefits of conversion optimization is that it’s completely numbers based.  It’s an easy sell to clients and once you have proven success with a few clients, it gets even easier.  We’ve all run into those clients and potential clients who don’t understand why design is truly important.  You won’t have that problem with conversion optimization.

Benefit #2: Long Term Revenue Source

Conversion optimization is an on-going process and can generate long term revenue for your company.  Eventually, you will reach the max effectiveness of a website but for large websites it may take many months to reach that point.  The best online companies such as Amazon, Google, Zappos and Overstock never stop testing.

Benefit #3: Low Learning Curve

Study sites that are known to convert well and do a lot of testing.  Follow the resources listed below.   You won’t become a conversion expert overnight but you can still have a dramatic effect on a client’s website with only a few hours of study and experimentation.

Benefit #4: Satisfaction for You & Your Client

And ultimately, this is what our jobs are truly about.  Building the most effective website possible for clients.  There’s nothing better than a client’s reaction when you tell them their site is now twice as effective as it used to be.  This does wonders for your word of mouth marketing and client referrals.

What do you think about conversion optimization as a service?  Any positive or negative experiences?

Useful Posts & Pages
64 Elements to Test, Test Length Calculator, 108 Ways to Boost Your Website’s Profit, The Secret to Painless Google Website Optimizer

Useful Blogs & Webinars
Grok Dot Com, Marketing Experiments, Get Elastic

Useful Books
Always Be Testing: The Complete Guide to GWO, Call to Action, Web Form Design

I want the blog to be a useful resource for designers and I’m really tired of the “1001 best resources for blank” regurgitation.  The blog also needs to fit into the rest of the site and the directory.

To that end, I’ll be focusing solely on meeting the unique needs of web design firms and freelancers from a business perspective, not a “design tips” perspective.  My future posts will address client relations, management, outsourcing, marketing and more.  I will also do frequent interviews with and profiles of leading design firms. If you have any suggestions or requests, please leave a comment.

Two posts I’m working on right now include E-mail Marketing for Web Designers and Advantages & Disadvantages of Niche Design Firms.  If this sounds interesting to you, please be sure to subscribe!

1. {cycle}

{cycle} is definitely my favorite Smarty command. You pass it a string of comma-separated values and it cycles through them. I mostly use this, as the manual demonstrates, for zebra striping tables or comments or any sort of list.

{section name=rows loop=$data}
<tr bgcolor="{cycle values="#eeeeee,#d0d0d0"}">
   <td>{$data[rows]}</td>
</tr>
{/section}

2. {foreachelse}

In php, I normally do things like if count(array) > 0 then foreach the array. This essentially uses two statements and messes up my code. Smarty takes care of this for me with {foreachelse}:

{foreach key=cid item=con from=$results}
    <a href="contact.php?contact_id={$cid}">{$con.name} - {$con.nick}</a><br />
{foreachelse}
    No items were found in the search
{/foreach}

3. {insert}

Smarty’s caching mechanism is one of it’s best features. Caching your pages can really cut down on your page’s computation time and speed things up. Normally, even if only a small portion of your page is dynamic, you can’t cache the whole page. Smarty takes care of that however with the {insert} function. They work like normal {include} functions (which work just like PHP’s include() function) except they do not cache the included file, even when the rest of the template is cached.

4. {counter}

Before I realized there was a {counter} function, I would use the {assign} function to do x = x + 1. {counter} handles all of that for you with a number of other great options including direction (count up/down), skip, start, print and assign. Extremely useful for any time where you need to create a numbered list out of a database or API call.

{counter start=0 skip=2}<br />
{counter}<br />
{counter}<br />
{counter}<br />

will output:

0<br />
2<br />
4<br />
6<br />

5. {html_table}

You have to use tables sometimes. {html_table} is an easy method to output the HTML for the table without using a {foreach} and inserting all the HTML yourself. For example, this PHP:

$smarty->assign( 'data', array(1,2,3,4,5,6,7,8,9) );
$smarty->assign( 'tr', array('bgcolor="#eeeeee"','bgcolor="#dddddd"') );

and this Smarty:

{html_table loop=$data cols="first,second,third,fourth" tr_attr=$tr table_attr='border="0"'}

will generate this HTML:

<table border="0">
<thead>
<tr>
<th>first</th><th>second</th><th>third</th><th>fourth</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#eeeeee"><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr bgcolor="#dddddd"><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr bgcolor="#eeeeee"><td>9</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</table>

6. The Debugging Console

When building a large app or working with an app I didn’t build (more likely), figuring out what variables are available and what there values are can be a real pain. Rather than sticking a bunch of echo or var_dump commands in the PHP, I simply called up the Smarty debugging console. The debugging console uses Javascript to popup a window that shows you the names of all the included templates and the assigned variables for the current page.

There are three options for calling up the console.

1. Set the $debugging config variable to TRUE. The console is always shown when this variable is turned on. Useful when you’re in the middle of development.
2. Set the $debugging_ctrl config variable to TRUE. In this case, simply add SMARTY_DEBUG in the query string of the page you want to debug. This is useful when you want to debug a live site.
3. Use {$debug} inside a template when you want to debug just one template. Useful when extending a live site or editing just one template.

Did this post help you? Did you know it all already? What else do you like/dislike about Smarty?

The urge for good design is the same as the urge to go on living. - Harry Bertoia

I’ve been working on an upgrade to the web design company directory and this design was intended to launch with the upgrade, but it’s been taking too long to complete the development and the blog was really hurting in the previous design.  So for now, this design will only be on the blog and I’ll get the directory upgraded as soon as I can.

The design was created by the extremely talented Evan Agee of Agee Design.  Evan was an employee of mine at Auction Floor, Inc. (which we both left last summer) and I’m extremely happy to have collaborated with him on this design.  I really look forward to having it up on the directory as well.

It’s not a 100% complete yet, but I’ve got some client work I’ve got to get done this weekend.  The sidebar in particular needs a little focus.  That said, what do you think so far?  What’s good?  What needs work?

The point of our posts was not that a large company or a freelancer is better or worse because of their size, but that there are some advantages and disadvantages that generally come with size. I think we both wrote our posts focusing on the average large design company or small design company. We were not trying to stay that this is what ALL large or small design firms are like.

The real key is the quality of the company and people who work there, not the size. With that in mind, Calvin and I have co-written this post with 10 little tips, 5 from each of us, on ways to select a great design company.

1. Interview 2-3 of their clients
   Don’t just call their clients and ask what they think of the design firm, prepare a list of detailed questions beforehand. Ask about budget, communication and delivery times. How much did the design firm interact with the client? Think about what’s most important to you and ask their client about it.
2. The devil is in the details
   Most attention-detailed people pay attention to detail all the time. Call them at a weird hour, what does their voicemail sound like? Is it professional or an afterthought? Can you tell the last time they updated their website was? Was it recent? Consider all the details of the designer’s website because your website might be next. Do they have a written contract? As it should be, for most businesses, this is a must. But for others, a written contract is just a detail that’s not important.
3. The questions they ask
   When you do contact a design firm, you should be extremely prepared and have a very good sense of what you want. Even still, the designer will should always have a lot of questions. Analyze what kind of questions they’re asking, Can you think of something they’re forgetting to ask? Does it sound like they’ve worked on projects similar to yours before?
4. Ask for samples of documentation they’ve provided to clients
   If you’re talking to a freelancer or very small firm that typically only works on relatively simple projects, this may not apply - but for a larger firm or if you have a larger project, be sure to ask this. Many design firms provide more hands-on training and support and less written documentation, but this is a good question to ask regardless. You should get a good feel for their perspective on supporting the client after the project is complete.
5. Ask who they’d recommend
   This is a relatively well-known trick, but I’ve never had a potential client ask me before. E-mail all the local design firms or designers you can find on LinkedIn.com and ask who’d they recommend besides themselves. Simple but extremely effective. Hint: Connect with me on LinkedIn.com, I’m connected to about 500 web developers.

For the next five tips, read Calvin’s Post: 10 Great Tips for Choosing the Right Web Design Company Regardless of Size – Part 2. If you liked this post, please subscribe to my RSS feed. My next post will offer some great tricks for the Smarty template engine.

TechCrunch launched a new design today.  As one the of the few blogs I actually read every day, I’m extremely glad to see this new design.  The old design was too cluttered, slow-to-load and too bright.

The new design is a pleasant change to a much more minimalist look with a clean interface.   The navigation is more logical and well-placed.  The site’s HTML isn’t valid, but I don’t really care.

The biggest change is a switch from Full Post to Excerpt.  While I like the look and feel of this change a lot, I find it’s much more difficult to read all the stories as I normally do.  Fortunately, they thought of that and placed handy Next/Previous Post links at the top and bottom of every post. This will probably be great for their pageview count and advertising revenue which I’m sure they didn’t consider at all…  There also appear to be more posts on the homepage.  I’m not sure what affect this will have on SEO or anything, but it is nice to be able to quickly review all the new posts.  Overall, I’d say the change to excerpt is an improvement.

The sidebar is also much cleaner in appearance.  Rather than being a complete distraction as in the past, I feel it’s almost worth having.  The CrunchBoard Jobs and Seesmic widgets standout a lot more to me now if only because they blend in more.

There’s a lot less green and little more grey in this approach.   Some of the commenters were complaining about the site looking too newsy or traditional.  Personally, I love the new appearance.  It’s a more accurate representation of what TechCrunch is today.

I have two negative comments.  Their new featured posts widget is centered on the homepage and on the sidebar of every post page.  The background color (light tan/yellow) for this widget just doesn’t seem to fit with the green and light grey. I’m not exactly sure what I’d do instead, but I’d experiment with it a little more.  Maybe go with a dark green or dark grey header and a light grey body.

Secondly, the footer seems seriously underused.  Over the past months, a lot of attention has been paid to blog footers in the design community.  I think this is a great trend and well thought-out footer can be a tremendous benefit to a website.  Maybe I’ll design a footer for TC and see what they think as a follow up post.

In summary, I’d have to call this redesign a great success and even overdue.   Nice job, TC!

Update: Here’s some additional reviews:

DailyBlogTips:  TechCrunch Got Redesigned

Mark Evans: TechCrunch Redesign A Sign of Things to Come

reaact.net: The TechCrunch redesign

Online Media Cultist: TechCrunch redesigns: over undesigned?

Devlounge: Design Critique: The TechCrunch Redesign

And it looks like TC already addressed the background color  of the featured post widget and edited it slightly.  Still not quite perfect, but definitely much better than the original version.

1. Large design companies have much better project management tools, processes and experience. They make sure projects and deliverables are accurately defined as well as schedules and expectations. This is critical to any medium to large project.
2. Large design companies typically have a greater attention to detail (at least good companies do). Case in point: I have a client (a software company) who hires me to do design customization work on their software for their clients (cable companies). One of their clients recently hired a large design agency to redo their site. This design agency sent me a 13 page PDF with a mockup of every page in the software so it would perfectly match the site the agency was building. They went over every minute detail with me. They didn’t have to do this, no one else ever has - but this is part of their job. They’re paid to make sure that their client’s brand is presented 100% perfectly every single time.
3. Large design companies write more documentation. For most smaller projects, this isn’t a huge deal, but for larger projects it’s a must. Most large companies should have processes in place to create detailed documentaion such as a website style guide.
4. Large design companies can provide better support. They don’t go on lunch breaks (all at the same time). Their kids don’t get sick (all at the same time). The billing department will be familar with your account history and their billing policies. If a developer is in a car wreck and in a coma for three months, another developer can step in and take his place (having that detailed documentation and programming guides help here).
5. Large design companies have individual experts on staff. Most freelancers and small companies will probably know a lot about website design, but they won’t have a full time graphic designer, web programmer, interface designer, copywriter, SEO expert and social marketer on the payroll. Not only that, but all these people have friends and their own personal support network. More experts will have eyes on your project at a larger company.
6. Large design companies have a history of excellency (or at least decent mediocracy). They’re big for a reason. They’ve been there and done that. Those big-name clients on their client list trust them.
7. Large design companies have less risk. Less risk of the owner dying and crushing your project. Less risk of the company going under. Less risk of getting over their heads and not knowing what they’re doing. Sure, it may cost more and take longer - but if you randomly chose a large design company your chances are probably better that you’ll get a decent website than if you randomly select a small one. Which is why it’s important to very carefully choose your design company, large or small. For help with that, read Jonathan Kelly’s article on Xemion on Choosing a Web Design Company or another great post from Calvin Cox, 8 do’s and don’ts when choosing a web designer.

In summary, most of these really depend on the size of the project. Larger projects or projects from larger companies with brands to protect should normally go to larger companies. Small projects, especially from small companies, are great for freelancers and small companies.  Regardless of company size, selecting a professional web design company is more important than anything else.

Am I wrong or crazy? What do you think?

Personally, I’m sick and tired of the convention coverage already so I thought I’d put my own twist on it and take a detailed look at the convention’s websites.

Republican Convention

The Republican website is XHTML Transitional and has both invalid CSS and HTML.  An even bigger deal in my mind, is the complete lack of alt tags and support for screen readers.  For an event of this magnitude, I would expect better.  The design is very clean and except for the pastel colors in the main content area, I like the look and feel.  It’s very clean and gives off a good visual impression of “power”with the dark blues.  The river background is a great touch and really brings the design together.  That said, the background’s repeat pattern is pretty noticable.  The background is also 3000 pixels tall with most of it being just a dark blue color.  It should just be a 1000 pixel tall pattern and use the CSS repeating and BODY background color to set the dark blue color.

I like the fact that the domain name for the website is RepublicanConvention.com in comparison to the Democratic Party’s DenverConvention2008.  I think this is good for marketing, SEO and driving repeat traffic both now and in future years.  Just much simpler.

From a content standpoint, the site doesn’t focus enough on potential convention visitors.  It has information for delegates, but no links to the Minneapolis/St. Paul visitor websites.  Most of the content seems focused around trivial “facts” for the media and bloggers, but lacks any real depth to the content to truly engage visitors and create genuine buzz or excitement (sort of sounds like the entire Republican party…but that’s another matter).

On a scale of 1 to 10…I’d give the site a 7.

Democratic Convention

Unlike the Republican site, I was able to quickly identify the designer of the Democratic site as Betsy Kimak, an independent web design consultant.  Big kudos to Betsy for getting such a nice and highly-visible project.  Betsy only appeared to handle the design of the website though, not the development.

The site is coded XHTML strict with valid HTML!  The CSS is very close to validating.  The site appears to be much friendlier to screen readers and users with difficulty with low contrast.

Unfortunately, I do not care for the Democractic site design near as much as the Republican site.  While I really like the header’s grunge affect, my overall impression is one of weakness and not strength.  The site is practically devoid of any dark or bold colors.  I’m not saying such colors are necessary for a good design, simply that color theory and impressions matter a lot in political campaigns and this site simply doesn’t measure up to my expectations.   The design is not a bad design, I just don’t think it’s the best fit for this site.  The background is also very light and while nice, it doesn’t extend to the entire width of my monitor (20″ widescreen?) and comes off a little strange.

The content of the Democratic site is much stronger though than the Republican’s site.  The sole exception is making a rotating sponsor list front and center on the site.  Maybe it brings in the bucks, but it just seems really tacky to me.  The rest of the site is focused on events, visitors and even how the convention the “greenest” convention in history.  The content of the site seems much deeper and includes links and information on visiting Denver.  Overall, I believe it does a better job of meeting the needs of the website’s visitors than the Republican site.

On a scale of 1 to 10…It’s just a 6 in the design department, but I have to up it to a 7 for the content and increased usability.

In Conclusion

Both website’s have the appearance of being slightly overlooked in the media campaign.  I’d expect a bit more out of both parties.  You can tell the difference in focus when you read Dustin Brewer’s comparison of the candidate’s websites. The candidates obviously spent more time and money on their websites and while that’s the be expected, it wouldn’t take that much work to really increase the effectiveness of both of the convention’s websites.  I’ve probably missed a lot in the comparison as well so please point out where you disagree with my opinions.

<script>utmx_section("Your First Test")</script>
<!-- YOUR HTML GOES HERE -->
</noscript>

Ignore the strange , that’s just the way GWO works. Once you’ve implemented the script, you then upload alternative versions of your HTML to the GWO website. GWO will insert the alternative versions of the HTML randomly to your visitors to test which versions perform better. You can test page layout, button color/sizes, ads, textual content, navigation structure or anything else you can imagine.

The problem occurs when you want to test dynamic pages or the same section of HTML across multiple pages. For example, I want to test a different product page layout across my site (because no single product gets enough traffic to reliably traffic). I cannot insert HTML into the GWO script because the HTML will be different on every page.

The secret (which many of you may have already figured out, but it took me a while so hopefully this post will help some of you) is to insert CSS or Javascript ONLY into your GWO script. View GWO as a rotating CSS/JS file, not as actual HTML. This may involve using CSS to hide or change various aspects of your page and I’ve even used GWO to alter the HTML structure via Javascript on pages I did not have full control over. Before, your code might have been:

<script>utmx_section("Your First Test")</script>
<h1>Large Product Title</h1>
<img src='bluebutton.gif'>
</noscript>

Now you can do the below and apply the same test to every product:

<script>utmx_section("Your First Test")</script>
<style type='text/css'>
.producttitle {
font-size: 24px;
}
</style>
<script type='text/javascript'>
document.getElementById('addtocartbutton').src = 'bluebutton.gif';
</script>
</noscript>

This is a very simple example, but the power of this concept is that you can now test large sections of your entire site. You can use CSS to move switch the positions of content sections or hide all the product prices for your category pages (early testing shows this actually improves the conversion rates on one of my sites…).

If you have any questions about GWO implementations, please ask in the comments and I’ll be happy to assist.