Webmasters Gallery

There comes a point in time where we want to improve our website’s interface or provide a captivating experience that our users will remember.

We have three main options (from hardest to easiest): write the scripts ourselves, use a JavaScript framework such as jQuery or mootools (which will make coding easier), use a pre-made script that works with existing JavaScript frameworks or that the author has developed from scratch. This article’s for the individuals who chooses to make things a bit easier and those who don’t want to re-invent the wheel.

Here’s a collection of 10 powerful – yet easy-to-implement — JavaScript effects to supplement your web page’s interface. These were picked using a “bang for your buck” methodology; meaning that these effects were chosen specifically because they provide high-impact effects with very little effort in installing and using them.

Author’s note: Title of this article, by request, was changed to reflect the content featured in this list. I apologize for the confusion this may have caused, and better quality control will be implemented in subsequent articles.

1) GreyBox

GreyBox allows you to launch other websites in a modal window (like a pop-up window, but it doesn’t open another browser). This is great for when you’re linking to multiple websites and don’t want the user to navigate away from your web page or to open another browser window that might be blocked by the user’s browser. Using GreyBox is easy and involves a 3-step process outlined in the web page.

Here’s some key pages regarding GreyBox: Download page, Documentation, Examples, Installation, and Advanced Usage (for the more experienced JavaScript’ers, check this page out for tips on how you can extend the library’s functionality).

2) instant.js

instant.js effect dynamically adds a Polaroid-like effect to your images (it tilts it and adds a border with a drop shadow), simulating this popular image technique without having to use a digital-image editing application such as Photoshop.

This can be utilized for when you’re applying this popular visual technique on multiple images and you don’t want to manually edit the pictures yourself (you can probably batch process, but that’s really only effective for simple actions such as resizing images, cropping uniformly, etc.).

3) mooTable

mooTable allows you the ability to provide sorting of table data ( without a page refresh) by utilizing the DOM instead of requesting the data again, sorted another way. Implementation is simple, and configuring the sorting of tables is a breeze.

This library needs the mootools framework, which you can download You can also find a  on the mootools boards by the author of mooTable, with feedback from other mootools developers.

4) FancyForm

FancyForm replaces boring form controls such as radio buttons and check boxes, with fancier ones. The basic implementation is a two-step process: (1) include JavaScript files on the web page, and (2) assign your form controls the class="checked" or class="unchecked" for checkboxes and class="selected" and class="unselected" for radio buttons. Very unobtrusive JavaScript.

This script needs mootools as well (and was developed for version 1.1).

5) image menu

image menu, developed by phatfusion, is a spiffy horizontal menu that expands when you hover over menu items (such as images).

You can use this for displaying a montage of images that are each partly hidden, but that the user can reveal fully by hovering over it.

This script needs mootools as well (and was developed for version 1.1)

6) AmberJack: Site Tour Creator

Here’s a lightweight JavaScript library that allows you to create a scripted website tour, allowing users to visit key web pages in real-time with a small description box on each page.

This allows users to take a tour of the various sections of a website, without them having to view a static demo created in flash or some other method. Extra bonus, you can download various “skins” or even create your own, to match the look and feel of your website. Here’s the Lightbox so you may see if they have a theme that doesn’t clash with your website.

7) ImageFlow

Inspired by iPod’s “coverflow”, ImageFlow is a simple effect that displays a collection of images that the user can scroll there using a scroll bar at the bottom of the image set. Advanced developers can probably modify the slider to spruce it up a bit more.

When the user clicks on an image, it re-directs them to another web page with the image displayed, so an excellent idea would be to use this in conjunction with a modal box script to open the image instead.

Update: Just now, the author of ImageFlow emailed me announcing ImageFlow version 0.9. Check it out (it fixes the issue of the image opening another browser window when clicked, and it works with Lightbox compatibility). Thanks for the update Finn!

8) ShadowBox.js Media viewer

ShadowBox is “a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript” (wow that’s a mouthful, isn’t it?).

What distinguishes shadowbox from the plethora of other modal boxes out there like Lightbox 2, is that it supports other file types besides images, such as a flash videos, embedded youtube videos, Apple.com Trailers, and web pages (a log-in page for example, that saves the user a trip to another page just to log on). Worthwhile script to test and play around with.

9) TJPzoom 3 – image magnifier

TJPzoom allows you to zoom in on particular sections of a high-resolution image. Holding down the mouse button and dragging up or down, can decrease or increase the zooming of the image magnifier tool.

One way of utilizing TJPzoom is to scale high-resolution pictures down to fit a web page, and then allow the users to zoom into parts of the image using the magnifier tool.

10) mootools Tips

mootools Tips is part of the mootools framework that allows you to provide a highly configurable way of showing tool tips to the user; when the user hovers over a link or image, additional information about the element appears on the screen.

Some options that you can tweak are the: CSS styles (to make it look different from the default black background and white text), transition speed, style of how the tool tip appears on-screen, and how long you want the tool tip be displayed. This requires the mootools framework.

A recent article of mine entitled “20 Websites That Made Me A Better Web Developer” attained a large amount of popularity and I was pleased to find out that many people found a link or two that they’ve bookmarked.

The list started out as a massive collection of 100 websites (after going through my massive-huge bookmark collection) , but I then decided that, instead of overwhelming readers with 100 links that will be skimmed and forgotten the next day, that I would filter it down to only 20 quality websites that have been truly helpful and rich with information. A few things on the list were there for sentimental reasons, such as Web Monkey and SitePoint, which did help at the beginning, but now I’ve outgrown.

I received plenty of feedback regarding sites that should have been on the list. Here, I’d like to make amends and list down websites that have helped you (and me) further our understanding of web development and design.

1) Smashing Magazine

smashing_magazine.gifI started out as a freelancing graphics designer. During my college days, I depended on print (branding, brochures, post cards, posters, etc.) and web design projects to help me attain the necessary things that all college students needed (beer and Xbox 360 games). But as time passed, I realized that my passion and skill set were better suited working in web programming (.NET, Perl, ActionScript, PHP) and CSS/HTML mark-up.

But nowadays, in order to be successful in the field of web-building, you’ve often got to double as a fairly-proficient designer as well. Knowing what designs work and what doesn’t is essential if you’re able to become a valuable asset to your employers or clients.

Several readers mentioned Smashing Magazine, a popular weblog run by Vitaly Friedman and Sven Lennartz.

It’s a website I frequent to stay up to date with the graphics design side of things, as well as to inspire me during the Monday morning slumps. Smashing Magazine is a quick way of obtaining information as they have a way of filtering out the fluff so that you can get to the good stuff faster.
2) Firefox (and some extensions)

Firefox logoFirefox is a key tool for web developers — it’s not really a website — but nonetheless deserves attribution for enabling us to be more effective developers (as described in my earlier work on “9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension“).

Here’s a screenshot of how my home office Firefox set-up looks like (you can click to enlarge the image):

screenshot of Jacob’s Firefox set up – Click it to enlarge

As you can see, my set-up’s fairly minimal. The only development extensions I use (and which you should definitely check out) are:

    * Web Developer extension
    * Colorzilla (check this out if you’re still Print Screen‘ing a web page, pasting it onto Photoshop, and then using the Eyedropper tool to figure out the hexadecimal color values)
    * Firebug, which can’t be seen in the screenshot, but is an excellent tool box that allows the developer capabilities such as easily debugging JavaScript (i.e. no more alert(whatsInThisObject)), finding page errors, and a tree-navigation visual tool for checking out the DOM. Hint: Disable Firebug on AJAX-heavy sites (like Gmail) unless you’re developing it, it slows them down (it seems).

3) Flashkit

Flashkit logoFlashkit is the online “convenience store” for beginning to expert Flash Developers. They have 600,000+ members, a true testament towards their ability to provide solutions to those seeking to improve and learn more about developing Flash applications. Don’t be fooled by the “I didn’t get the web 2.0 memo” user interface, it’s the content and the community that matters the most.

The website features a categorized tutorials section (topics range from “Getting Started” to “Math-Physics” and “3D“), and a collection of free sound loops and pre-built flash movies.

Perhaps the most helpful feature of the website though, is their very large community forums (1 of the 40 forum topics entitled “Flash ActionScript” has 144,000+ threads!). Whether you’re just starting out or you’re already a professional-grade Flasher (a playful term I use for flash developers), Flashkit, if you haven’t heard of it, is the spot to check out.
4) kirupa.com

kirupa.com logokirupa.com is another favorite resource of mine when it comes to Flash. The site has very well-written tutorials and articles for the beginner to advanced Flash developer (though he writes about other web-building topics such as PHP and ASP.Net).

The site’s run by Kirupa Chinnathambi, a young and accomplished (he was offered a book deal by McGraw-Hill in his teens) author and software developer. His writing is light and easy to read, and he often provides several versions of a particular solution that caters to the reader’s skill level.
5) PHP.net

PHP.net logoRecently having to work with XML data on a remote site within a webhost that’s disabled fopen() and runs on PHP4 (and thus doesn’t have SimpleXML), I had to find an alternative way of doing this task. I found my solution in one spot, (cURL and xml_parser) — at PHP.net’s documentation section.

The example above is just one of the problems I encounter on a daily basis, and PHP.net is the first place I look at when troubleshooting problems or if I want to discover better/easier ways of doing certain things.

This deserves a bookmark for the times when you need a quick reminder of core functions that you’ve forgotten about, or to discover some that you never knew existed. The pages allow developers to comment and provide scripts so that you can further your understanding of the concepts involved.
6) Popular JavaScript frameworks

A congregated image of jQuery, script.aculo.us, YUI, and prototype JS logoThis is a combined listing. In my previous post, I mentioned mootools as my choice when it comes to JavaScript frameworks, “but that you can’t go wrong with the popular ones”. I failed to mention what the other “popular ones” were. These frameworks/libraries deserve mentions and deserve serious consideration when first deciding which solution is best for you.

    * jQuery – this framework, in my opinion, is the easiest to learn and the most elegant of the bunch. Here’s the documentation page to get you started.
    * script.aculo.us – This is more of an effects library than a fully-featured JavaScript framework, but it’s got some serious stuff going on.
    * YUI – The Yahoo! User Interface Library, if you’re the type of developer that has to have it all (and is willing to pay the price in page load times) — this is probably the one for you. Yahoo’s in-house developers, in my opinion, tend to come up with very bulky solutions even though they have some of the best front-end engineers such as Steve Saunders (who’s article on “Best Practices for Speeding Up Your Web Site” is a very worthwhile and enlightening read).
    * Prototype JS – the big dog, mootools used to require Prototype and script.aculo.us still requires it.

There are others such as dojo and Rico, but those listed above are what I consider to be the most popular and effective.
7) mezzoblue

mezzoblue logomezzoblue is a weblog by a highly-talented designer, Dave Shea, who’s also known for his article on A List Apart, regarding the CSS Sprites technique, css Zen Garden, and his book “The Zen of CSS Design: Visual Enlightment for the Web“.

A notable article that deserves a look-see is mezzoblue’s Testing Grounds Revised Image Replacement which showcases and analyzes the most popular CSS Image Replacement techniques.

mezzoblue seems to put an emphasis on quality over quantity, so articles may sometimes be few and far in between, but they’re worth the read when they come out.
8) Dynamic Drive

Dynamic Drive logoDynamic Drive is a source for CSS and JavaScript solutions. They’ve been around for approximately 10 years and have amassed a wonderful collection of scripts that you can apply onto your web projects.

They also have online tools such as a FavIcon generator (though personally I use Photoshop or favicon.ico Generator) and Button Maker.
9) StumbleUpon

StumbleUpon logoAs BBC news describes it (and quoted on the front page of StumbleUpon): “StumbleUpon is a brilliant downloadable toolbar that beds into your browser and gives you the chance to surf through thousands of excellent pages that have been stumbled upon by other web-users”.

When configured the right way, Stumble’ing allows you a unique way of getting new and interesting websites about web technology that many of the 4+ million subscribers have submitted, reviewed, and liked. It’s where I encountered Magento, an open source e-commerce suite that will soon be a popular contender in the e-commerce application realm, and interesting web applications such as htm2pdf which you can use to convert html mock-ups to PDF so that you may email your designs in one document.
10) Google code

Google Code logo screenshotNot only has Google solved much of my development road-blocks with their search engine (.NET and PHP errors, rendering bugs of particular browsers, existing solutions to a particular feature request, etc.) but it provides you with high-quality resources and API’s saving you the time and effort to develop them yourselves. Google code is a section at Google, geared towards developers and programmers.

Additionally, If you haven’t already, also check out these services and references:

    * Google Charts API – build charts dynamically onto your web page using easy-to-use URL-based requests.
    * Google Maps API – create custom maps.
    * Google Code Search – search public source code.
    * Google Help: Cheatsheat – Improve your search engine savvyness using these search engine commands. Must know stuff for effective troubleshooting of issues.

If you liked this article, be sure to also check these out:

    * 20 Websites That Made Me A Better Web Developer
    * 10 Web-Building Resources You Should’ve Already Bookmarked
    * 9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension – If you liked the entry on Mozilla Firefox, this is a tutorial on the Web Developer extension

Thank you!

… for your wonderful feedback on my first list.

Many of the entries on this list were inspired by the following people’s comments (thanks for the reminder):

    * Aron Filbert (from Digg) for the Firefox entry and the JavaScript frameworks entry
    * hiro protagonist for Dynamic Drive and PHP.net
    * Lee and DieselDaddy for reminding me about Smashing Magazine
    * Jive for reminding me that I forgot to mention Dave Shea on my A List Apart entry in my previous article, which inspired the mezzoblue entry (although css Zen Garden was mentioned, I just didn’t attribute it to the creator).
    * Fragle1980 for the Flashkit comment.
    * Johnathan and Hal for the Google Code entry

Everyone needs a website made, but not everyone can talk “tech” like we can. From the farm owner in Indiana to the brain surgeon in Malaysia, we quickly see that employers can come from all walks of life. Learning how to carry on a compelling conversation about web development is a paramount skill that all web developers should possess if you want to keep the checks coming in. Maintaining your audience’s interest and gaining an accurate picture of what they truly need to get done can prove to be a challenging part of any web development project, but here’s a few tips that might help a bit.

Get an estimate of their computing/technological expertise.

So that you know how in-depth you have to explain certain concepts or ideas, you should first try to determine the individual’s computing/technology knowledge. This can be accomplished indirectly with, what I’d like to call, fishing questions (similar to “fishing for compliments“).

For example, you can ask in passing, “Hey, what operating system do you have on your home computer?” or “What’s your preferred web browser?”. What you’re really trying to learn is: (1) if they know the basic terminologies like operating systems and web browsers, (2) if they have any experience with computers and the internet, (3) their tech savvy-ness, (4) how and why they use IT. A person using Linux probably knows a thing or two about computers and Mac’s are generally appealing to artists, designers, and musicians.

Other fishing questions are:

• What do you already know about search engine optimization?
• Do you use Adobe Photoshop (or a similar digital-image editing software)?
• What are some websites you frequent on your spare time?
• Do you subscribe to any RSS feeds?

Don’t underestimate a person’s knowledge.

You know that colleague who insists on explaining to you the difference between HTML and (X)HTML when you’ve just finished a strict-doctype XHTML website? Don’t be that guy. People don’t like to be treated like they’re stupid, and not being able to understand a person’s knowledge is a sure-fire way of landing yourself on his or her bad side. If you’re unsure of their grasp on a particular subject, don’t assume they don’t know anything, ask fishing questions and judge by their reactions whether or not you’ve explained enough.

Use actual examples.

When talking about a web project, it helps to have a computer with an internet connection nearby so that you can both communicate look at stuff that’s on the internet. For instance, if you’re trying to determine what look-and-feel a client wants for their website (i.e. “web 2.0?, dark, clean, etc.) you’d get a more precise answer if you were to show examples of websites that may have a similar theme that they described.

Keep an emphasis on the bottom-line.

People may not understand what SEO is, or how it’s accomplished, or why valid mark-up matters when trying to achieve a search engine optimized site, but if you talk in terms of results, they’ll be inclined to keep listening. For example, trying to describe the importance of standards-compliant XHTML, you can say: “standards-compliant XHTML ensures that the website’s mark-up is valid and supported by most modern web browsers which in the end means less maintenance and fewer customer support due to browser-rendering issues“.

Keep it simple.

Sometimes we have a tendency to overwhelm employers with technical jargon and over-explanation because we want to show them our knowledge and expertise. There’s no need to explain how you’re going to mock-up the web design in Photoshop (layer by layer, in excruciating detail). Most probably, they don’t care and you’ll only risk complicating things and adding to the client’s anxieties about a topic they’re not well-versed in.

Encourage questions.

It’s always good to figure out any questions or needs for clarification as early as you can to avoid dissatisfaction at the end. Give off the attitude that you’re always willing to answer questions and that no question is too simple or silly. If you have the luxury to meet with a client in person, you can do this by judging their facial reactions to the things you say. If they seem confused, ask: “should I explain further?”. If you’re meeting remotely (emails or phone calls), regularly say things like: “I’d be more than happy to answer any questions you may have”.

Talk using familiar analogies.

A great way to relate information to employers is by using scenarios and situations that are pertinent with their background. Be creative, make analogies funny, and most of all, use it to relay complex concepts. To illustrate with a satirical example: if you were talking to a basketball fan, you could say “using tables instead of div’s for page layout is as bad of a decision as picking Michael Olowokandi over Michael Jordan on your fantasy basketball roster because…“.

Be yourself.

Don’t pretend like you’ve worked on hundreds of websites and that you’ve been doing this for 15+ years… if you really haven’t. If you look uncomfortable or unsure of yourself, it gives off the impression that your trying too hard to impress or appear knowledgeable in the subject. A lot of web designers and developers nowadays don’t hide the fact that they are small, young, and playful. When working in an industry that’s complex and intimidating to outsiders, it’s a welcoming relief to find people that are normal. It can prove to be a plus when you don’t obfuscate the fact that you’re just starting out in the business. It’s easier to talk to a person who’s honest, sincere, and up-front then someone who appears to be B.S.’ing you all the time

I spend a large portion of my day connected to the internet, and as a result I’ve amassed a large collection of websites and links pertaining to web development. Here’s 10 of my favorites:

web_building_resources_01.jpg

1. Web Developer’s Field Guide

A collection of links that web builder Wade Meredith has created over time. A big resource list, and I go to it from time to time when I need some web development inspiration. Some categories include “inspiration”, “color theory”, “DOM”, “blogging”, and much more. The Web Developer’s Field Guide stemmed from another website by Vitalie.Friedman.

web_building_resources_02.jpg

2. mycelly.com’s Nice and Free CSS templates

Here’s 12 common CSS-based layouts for when you’re in a rush or just starting out as a CSS developer. It’s great to know and understand basic layout styles such as two/three column fixed widths, two/three column fluid widths, etc. and there’s no better way to learn than to study pre-made templates.

web_building_resources_03.jpg

3. Cheat Sheet Cheat Sheet by foxinni

A collection of cheat sheets organized in 5 categories: Server-side (PHP, MySQL, Ruby On Rails), Client-Side (JavaScript, CSS), Blogging (Word press, Movable Type), General, and others.

web_building_resources_04.jpg

4. CSS Sandbox

A web application that let’s you experiment with styles in real-time. Great way to preview what styles will look like.

web_building_resources_05.jpg

5. Resources For Web Design

A mega-huge list of Web Design resources. Some of the topics include: HTML Tutorials, CSS Tutorials, Browsers, Search Engine Optimization, Perl tutorials, and much more.

web_building_resources_06.jpg

6. DEVLISTING

Another large list of Web Development and Design links.

web_building_resources_07.jpg

7. FreeTechBooks

A website that lists free online books (e-books), textbooks and lecture notes on the topic of computer science and programming. A couple of e-book examples: “Safe-Guarding Your Technology” and “Computer Animation: Algorithm and Techniques“.

web_building_resources_08.jpg

8. MiniAjax

Quoted from the MiniAjax Website: “nice looking simple downloadable dhtml and ajax code.” Some of the code listed are: “Digg-like spy script”, “Reflection.js” which allows you to add a reflection effect on text just by assigning it a class=”reflect”, and “Draggable Content” which allows users to drag page objects such as div’s around the web page.

web_building_resources_09.jpg

9. PSDTuts

One of my favorite blogs/tutorial sites. Showcases very high-quality Photoshop tutorials. Great instructions, great content, and I follow their tutorials to sharpen and hone my Photoshop skills — I’ve been using Photoshop for close to 8 years, but it’s always good to practice to keep yourself up-to-date with current techniques.

web_building_resources_10.jpg

10. CSS Remix

A growing collection of spectacular web designs to inspire you on your next design project.
How I Come Across These Links

I mostly come across links such as these through social-bookmarking sites such as Digg.com and del.icio.us. A majority of these links I came across by using StumbleUpon (an addiction of mine!). Also, I get links from my co-workers and friends (usually through their Gtalk messages).

Feature creep, also known as scope or requirement creep, refers to unforeseen requests for additions and changes that are outside the project scope. It typically happens due to inadequate requirements gathering, poor initial planning, and an unclear protocol for change implementation, among other things.

In this article, I’d like to discuss eight tips and suggestions, based mostly on my experience, to help minimize and manage the effects of feature creep in your own projects.

 

1. Accept that feature creep will happen.

That’s right. Here you are thinking that this article’s all about preventing feature creep. On the contrary, I feel that it’s a natural part of any project-based work. Acknowledging this eventuality will allow you to be prepared when it finally rears it’s ugly code-retrofitting, design-wrecking head. Anticipating unforeseen changes in your plans forces you to be more adaptable, and promotes the development of a solution that’s flexible and malleable to your client’s ever-changing needs.

2. Commit enough time to requirements-gathering.

Easy enough, fairly common sense, but we’re all guilty of rushing the planning phase of projects. Maybe it’s because of time and budgetary constraints, or our eagerness to show our clients tangible results, or the assurance we get that the project’s in the bag once we start it (and won’t be given to competition). Skimping on this step can lead to agony at the end, and can take the form of unanticipated feature requirements because of our failure to establish the client’s actual needs. Take time to survey the people involved, observe and shadow employees to see how they might use the system you’re developing, and get an accurate estimation of the technical expertise the organization has. An ounce of prevention is worth a few thousand lines of code revision.

3. Giving a hand might cost you your arm.

If you constantly give in to changes, you might be get more of them in the future. Try to set boundaries of what is and isn’t appropriate to revise, this not only prevents unneeded requests for changes, but gives the project strict quality-control guidelines. When you do decide to comply to un-scoped demands, make sure that you indicate that you’re doing something out-of-scope, and that this can cause delays and additional financial requirements. This may make them re-consider the value of the feature requested, or at least give you an extension in time and budget.

4. Be the devil’s advocate when changes are requested.

You were hired and assigned to the project because of your knowledge and expertise in the solution required. If a client asks for a Flash-based navigation menu, it is your expert obligation to convince them that the CSS-based menu you developed is a much better solution. Don’t be afraid to contradict unwise feature requests; providing well-formed reasons will assure them that you know your “shizznit”, and they may actually allow you to proceed as originally planned.

5. Be task-oriented, not vision-oriented.

Be clear on what it is, exactly, you’re developing for them. Don’t promise a grand, exciting, but ambiguous/ambitious end result. Instead of giving broad generalizations such as “I’ll be developing a search engine optimized website”, try to outline the deliverables that you will provide, such as: “I’ll be using image replacement techniques for sub-headings, creating and implementing a Sitemap.xml, submitting the site to major search engines, and optimizing page titles with relevant keywords”. This makes the project less ambiguous and prevents additional tasks, such as developing a link-exchange program to increase page rank results, which is clearly not part of your duties.

6. Shed the “Customer is Always Right” mentality.

You, more often than not, are a more qualified judge of how things should be developed. You’re not working to get a big tip at the end. You’re working (most probably) on a flat rate fee or an agreed-upon compensation. All you have to worry about is your reputation and producing an excellent solution. The employer can hate everything about you, but if you’ve provided an amazing profit-generating product, you’ll get hired back to do more. In the end, it’s more about profits and deliverables and less about how your employer loves your “reasonable personality” (because they love nothing more than making a bundle of cash or reducing their overhead due to the solution you developed). So don’t give in to unwarranted requests and unreasonable timelines simply because you want to be on your employer’s good side. Don’t feel pressured to do something that isn’t in the job description or something you feel will lead to a less desirable end product.

7. Research before committing.

Assuage the temptation to immediately accommodate a change in project scope, no matter how seemingly simple. If you think the budget and timeline can handle a modification in plans, research thoroughly on what the change actually entails before committing. For example, in a CMS development project I was involved in, I was asked if it was possible to migrate the system from our servers, to the client’s. This wasn’t part of the project scope, as the original plan was to also provide hosting for the system. I agreed to it thinking that a database export/import and file migration would take an hour’s work at most. I failed to account for the fact that our server set-up (being IIS 6.0/Windows and the client’s being Apache/Linux) and server settings were different. Suffice it to say that it took longer than anticipated and the task is still unfinished.

8. Realize that feature creep is a two-way street.

Clients and employers aren’t (purely) evil. They don’t intend to make our jobs more difficult. Oftentimes it’s our desire to please, to prove our worth, and our perfectionist mentality that can be, in part if not equally, to blame. If feature creep happens, it’s only because we allow it to.

I hope this article was able to impart some tips on how to manage feature creep. The suggestions here are based on my own mistakes with regards to allowing scope creep to affect my projects. I hope that by reading this, you have better luck in alleviating the impact that features out-of-scope can have on your timelines and budgets.

Just when you thought you were done with IE 6 and its hacks and exceptions, now you’ve got a new browser to consider: Google’s Chrome.

The good news is that Chrome is a lot more compatible with web standards than IE 5 and 6. However, Chrome has its own idiosyncrasies and bugs.

No one knows if Chrome is here to stay, but it has already captured a surprisingly decent share of the web browser market in a short period of time.

Here are some tips to get your web pages working in Chrome and hopefully looking the way they were designed to look.

Mac Users

As of February 2009, Chrome is still a browser for Microsoft Windows PCs. If you use a Mac, you will need to run Microsoft Windows through Bootcamp, or one of the virtualization products for the Mac (Sun’s VirtualBox, Parallels, VMWare Fusion). If you are really daring, you can try and get Chrome to run using Darwine. Google promises to have a native Mac version of Chrome available in the coming months.

Vanishing Pop-Ups

Pop-Up blocking is great unless your website really needs pop-up functionality. If you have a web page that must use pop-ups, you won’t see them in Chrome. By design, Chrome only displays the title of a pop-up and minimizes it to the bottom right corner of the browser window. Users will need to click and drag the pop-up’s title in order to view its content.

SSL is Broken?

By design, Chrome will only certify a valid SSL (secure sockets layer) page with the padlock icon if all the elements on the page are served via SSL. In other words, if your page is served via SSL but it calls elements via non-secured HTTP, Chrome will give your page an exclamation point icon indicating that it considers your page to be an inconsistent SSL transmission. To get around this, make sure that all the resources loaded by your web page, including all images, are prefaced with HTTPS.

Declare Encoding First

If your web page text is garbled or otherwise just plain wrong in Chrome, you may need to insert encoding information into the <head> section of each web page. If you already have encoding information, it must come first, before any CSS or Javascript. Otherwise, Chrome will just ignore it. A working example:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251?>
<script type=”text/javascript”>
… your JavaScript code …
</script>
… your CSS code …
Also, Chrome will ignore encoding specified by Javascript. Period. For example, the following would be ignored:

document.write(”<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251?>”);
Instead of using JavaScript, you must insert your encoding into the beginning of the <head> section of each web page as shown above.

Bookmark Favorites

When users choose to bookmark your web site, you can control the default bookmark name, description, link, and bookmark icon. Just make sure to place your code in the <head> section of your web pages. Here is a working example:

<head>
<meta name=”application-name” content=”Greatest Website”/>
<meta name=”description” content=”The very best on the web”/>
<meta name=”application-url” content=”http://www.superfantasticgreatestweb.com”/>
<link rel=”icon” href=”great-icon_32×32.png” sizes=”32×32?/>
<link rel=”icon” href=”great-icon_48×48.png” sizes=”48×48?/>
</head>

Fixing JavaScript

If your JavaScript is not working properly in Chrome, check Chrome’s JavaScript console, accessible from the Page menu icon -> Developer -> JavaScript console. That should give you some direction as to what you can change.

For the more advanced JavaScript developers, you can also use the JavaScript Debugger, accessible from the Page menu icon -> Developer -> Debug JavaScript. That will allow you to watch variables and set breakpoints.

CSS Image Problems

If you are using images or backgrounds implemented through CSS and they are not rendering properly in Chrome, you might want to convert images between GIF, JPG, and PNG to see if a different image format solves your problems. Although this makes no sense, it sometimes works, especially with random spacing and image formatting problems.

CSS “First” Selector Hack

Chrome can be finicky and unforgiving about CSS and may ignore styles applied to certain page elements. You might try using the “first-of-type” keyword which will be ignored by all other browsers (except for Apple’s Safari). For example, if you cannot get a particular style applied to the <body> section of your web page to work in Chrome, add in something like the following:

body:first-of-type p {color:#ff0000;}

“First-of-type” will simply be ignored by the browsers that are already displaying your page the way you intended.

GiantIsland CSS Hack

Chrome interprets cascading style sheets (CSS) differently than other browsers. Then again, IE 5, 6, and 7 do not even interpret CSS the same! The GiantIsland CSS Hack is a relatively simple CSS markup hack that makes use of square brackets [ ] to target CSS on specific browsers like Chrome. As a bonus, it can also help you conform your CSS to IE 5, 6, 7, Safari, and Firefox, all at the same time. For more details, check it out at http://www.giantisland.com/Resources/LitePacificHackforSafariAndIE7.aspx.

Stay Away from HTML5

Chrome does not try to conform to HTML5 API standards yet, even though Webkit, its rendering engine, does support HTML5. If you use HTML5 features or syntax, you will likely run into problems. Stick with HTML4 standards and you should have an easier time. Chrome will likely support HTML5 in the near future.

Validate Your Pages

Before swearing at Chrome and throwing in the towel, validate your pages to make sure you have not inadvertently used a non-standard HTML call. You can validate any web page at http://validator.w3.org/. Some web browsers allow you to take some shortcuts with web standards, but Chrome is not very lenient.

Try it with Safari

If you can’t get your web pages to look right under Chrome no matter what you try, try your web pages in Safari before giving up. Safari is Apple’s web browser and is available for both Mac and Windows PCs. If you use Windows, you can freely download Safari from Apple at http://www.apple.com/safari/download/. Both Chrome and Safari are built using the open source “Webkit” browser rendering engine. If you can see a rendering error in both Chrome and Safari, there is a good chance that Webkit is the culprit. You can post a bug for the Webkit developers at http://webkit.org/quality/reporting.html.

Aw Snap!

The Chrome developers have provided some funny error messages (if an error can be considered funny). If Chrome gives you the dark grey “Aw Snap!” page which also says “Something went wrong while displaying this webpage,” it might not be your web page at all. Chrome has a tendency to crash on some PCs depending on system settings and other installed applications. Try a few other well-known web pages, and see if they crash. Also try closing Chrome, re-launching it, and then test your web pages again. Some people have found Chrome to be unstable on some PCs. Google intends for Chrome to become more sturdy with each new version.

Bug Reporting

If you find a bug with Chrome’s rendering, report it! You will be making the world a better place. Google maintains a public bug list for Chrome at http://code.google.com/p/chromium/issues/list.

Written exclusively for WDD by Derek Underwood, a professional web designer and software developer. You can read more about Derek and contact him at his website:

Do you ever feel like you are endlessly repeating the same day? I do, every time I attend a kickoff meeting with a new client. Each time I find myself covering the same old issues from explaining the client’s role, to encouraging investment in content. I find it incredibly frustrating and this is what ultimately led me to write the Website Owners Manual.

This is not a criticism of clients, however. There is so little information that clearly defines their role. Sure, there is no shortage of material on usability, accessibility, online marketing and copywriting, but who has the time to read all of it?

The problem is that the client does need to have a very broad understanding (certainly more than can be communicated in a single article), however I have found that understanding certain key issues can make an enormous difference to the efficiency of a client.

What follows is a list of the 5 things that I believe will have the biggest impact on a client’s site. At least they should, if the client understands them and chooses to implement them.

1. The client is the secret to a successful website

I have worked on hundreds of websites over the past 15 years and each site’s success or failure has always been attributed to the quality of the client.

As web designers we, of course, like to emphasis our role in the process. This is what justifies our fee, however we can ultimately only point our clients in the right direction. It is their decisions that shape the site and their commitment that defines its long term future.

As web designers, I believe we need to clearly communicate to the client the importance of their role and dispel the misconception that they can hire a web designer and walk away.

Not only do we need to emphasis the importance of their role, we also need to define the extent of it.

2. Clients have a diverse and challenging role

I believe that the role of the client is by far the most complex and challenging in web design. Sure, dealing with IE6 is a pain, but that pales in comparison to the shear extent of issues that most clients need to handle.

A client has to be a:

• Visionary – capable of establishing the long term direction of their site
• Evangelist – able to promote the site both internally and externally
• Content guardian – responsible for ensuring the quality and relevancy of content
• Project coordinator – overseeing all aspects of the site as well as dealing with suppliers
• Referee – making final decisions between conflicting priorities

What is even more is that the client is supposed to know enough about a broad range of disciplines (from marketing to interface design), in order to make informed decisions. It is hardly surprising that, as web designers, we sometimes feel our clients “just don’t get it!” They are simply expected to understand too much.

Unfortunately their role is also often massively under resourced. Most of those responsible for websites are not dedicated website managers. Instead, they run their websites alongside other responsibilities in IT or marketing.

It is our responsibility to explain the role of the client and ensure that they understand how much work is involved. We cannot assume that they instinctively know this.

The danger is that if you do not clearly define the clients’ role, they will end up trying to define yours instead.

3. Clients identify problems, designers provide solutions

One of the biggest problems in most web projects is that the client starts making the decisions that are best left to the web designer. Not only does this lead to bad decisions, but also inevitably leaves the web designer feeling undervalued and frustrated.

This problem can manifest in a variety of ways, however ultimately it comes down to a single issue – the client is trying to find solutions to their problems instead of relying on the web designer.

Let me give you two examples. The most obvious occurs at the design stage. After seeing your design the client comes back with comments such as ‘make the logo bigger’. This is their solution to a problem that they have with the prominence of the branding. If they had expressed the problem instead of the solution, it would have enabled you to suggest alternate approaches. Instead of making the logo bigger, you could have possibly added more whitespace or changed its position.

Another less obvious, but more significant example, is in a client’s invitation to tender. These documents are inevitably a wish list of ideas that they have for the site. They are the client’s attempt to solve an underlying issue. For example, their problem might be a failure to engage with customers, therefore in their invitation to tender, they suggest adding a forum. Of course, in reality there are many other ways to engage with customers, however unless they express the problem to you, you will never have the opportunity to suggest a solution.

At the beginning of every project, encourage your client to focus on problems and not solutions. Whenever the client suggests a solution ask why. This will enable you to understand the underlying issues.

Unfortunately by the time we have been engaged as web designers, the scope of a project has already been set and it is hard to contribute ideas. This is because the way clients commission websites is fundamentally broken.

4. Sites should evolve

A typical website goes through a constant cycle of redesign. After its initial launch, it is left to slowly decay. The content becomes out of date, the design begins to look old fashioned and the technology becomes obsolete. Eventually staff stop referring customers to the site and it is perceived as a liability rather than an asset. In the end, senior management intervenes and assigns somebody to ‘sort out the website’. This inevitably leads to the site being replaced by a new version, and the cycle repeats itself.

This problem primarily occurs because there is no real ownership of the website within the organization. Often the client you deal with is only assigned to it for the duration of the project. Afterwards, the site is left to stagnate.

This cycle of redesign is wasteful for three reasons:

• It wastes money because the old site is replaced, and the investment put into it is lost.
• It is bad for cash flow, generating large expenditure every few years.
• For the majority of its life, the site is out of date and not being used to its full potential.

We need to start encouraging our clients to invest regularly in their websites. They need a permanent website manager and an ongoing relationship with their web design agency. Together they need to keep content up-to-date, improve the user interface and ensure that the technology keeps pace with change. Ultimately this is more cost effective than replacing the site every few years.

The ongoing management of content is an area that needs particular attention. Unfortunately it is often massively under resourced and generally neglected.

5. Content is king – Act like it!

I am constantly amazed at the difference between what clients says and what they do. Take, for example, content; most clients fully accept that content is king, yet few are willing to spend money on ensuring its quality. This is all the more absurd considering the amount they spend on implementing complex content management systems.

Most clients that I encounter feel that hiring a copywriter to ensure the quality and style of their content is unnecessary. Perhaps this is because they feel they are capable of writing copy themselves, however writing for the web is not like writing for any other medium. It presents some unique challenges that cannot be under estimated.

It is strange because clients are perfectly happy (well… maybe not quite ‘happy’) to pay for design. They realize that they cannot do the design without a professional designer, so why then do they believe that they can write good copy themselves?

Often when clients do write copy, it ends up being verbose and inaccessible. Stuffed with sales copy and jargon, which is largely ignored by most visitors to the site.

However, in many cases the reality is even worse than poorly written copy. In my experience, clients under estimate the time involved in producing copy for the web and resort to copying and pasting from a wide variety of offline printed material. This leads to Frankenstein copy, using a mix of styles that are often entirely inappropriate for the web.

It is our role as web designers to educate our clients about the importance of copywriting and explain the size of the task, if they choose to take it on themselves. Without previous experience most clients will significantly underestimate this task.

Conclusions

This is far from a comprehensive list. I have not mentioned success criteria, usability, accessibility, online marketing or subjective design. In fact I have hardly begun to touch on any of the things a website owner should know, however I do believe that if our clients were only to adopt the 5 points above, it would make a profound difference to the success of their website. Now it falls on you to persuade them.

When someone visits a website you’ve designed, the odds are that they don’t care much about the colors, images or sounds, they’re immediately looking at the text.

No matter how many bells and whistles you’ve built into a website, everyone relies on text to accomplish whatever they’re visiting the site to do.

That alone should make typography, the art of arranging type, a priority for any web designer.

In this article we take a look at 10 easy rules to keep in mind when designing your next web project.

1. Read through the text yourself

With a design like JonesingFor a designer without a great grasp of the text would have struggled to put together the typography that makes this site really work. As you tackle your own typography, you probably don’t have to worry about writing a site’s text — but you do have to read it!

Some web designers think that just copying and pasting out of a text file constitutes the total of their textual duties. But reading through the text provides at least a basic idea of how the text can be integrated into a website, avoiding the disconnect between the writing and the design of a website.

You can kick your typography up yet another notch, if you can read through the text once it’s in place in your design. Take special note of the space around the letters. Do you have any unusually big spaces that look odd? A little careful typography can eliminate those issues. You can also get an idea of lines that might be too long to easily read, awkward line breaks and similar issues.

• 2. Dump Lorem ipsum as soon as possible

  Do you think you could have designed Jesus Rodriguez Velasco’s website without the actual text? The site is heavily dependent on the written word — and very specific words too. Even the body text got special attention with a drop cap and some other tweaking that just wouldn’t have been possible with Lorem ipsum.

  

  Unless the text of your website is actually Lorem ipsum, dummy text will bear no similarity to the real thing. That means that any tweak you might make to the text — or the design surrounding it — will have to wait until you get the real thing. Asking for (and getting) text from your client as early as possible in the process will give you the ability to match your overall design and your typography.

  3. Show a clear hierarchy

  

  When you arrive at Rik Cat Industries, you know immediately where you should start reading. Even though there are a few links at the top of the page, Rik’s welcome catches your eye first. It’s much bigger, using typography to establish a clear hierarchy.

  Every site needs a well developed hierarchy: indicators of where to start to start reading and how to proceed. Your typography can provide that hierarchy — just as Rik’s does — as long as you know your hierarchical order ahead of time. By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

  Your design’s hierarchy goes beyond just the typography you employ, of course, but since users almost always start with the text, it makes sense for designers to do the same.

  4. Pay attention to both macro and micro typography

  Relying entirely on typography for their front page, the Crowley Webb and Associate’s website was designed with two factors in mind: both macro and micro typography.

  Macro typography is the overall structure of your type, how it appears in the context of your design and its aesthetic when you consider your text as a block on its own.

  Micro typography is more concerned with the details of spacing, the issues that determine whether words are easy to read. Micro typography is an absolute necessity when it comes to putting together a block of text: if it isn’t legible, there’s no point in proceeding. Crowley Webb and Associates addressed this question through both careful writing and spacing out those words that the site would highlight.

  But macro-typography provides you with the opportunity to make your text more than well-spaced: it’s the chance to make it look appealing and a part of your whole design. The choice of typefaces and colors on this website create a viable whole. Ignoring either facet of typography is detrimental.

  5. Take care with type colors

  It would be so easy to lose text in the background of ArtofElan, especially the bright red on dark red combination used by the designer. When a web designer works with colored type, care is absolutely necessary, there’s no guarantee that a red on red combination, or even a yellow on red combination will be visible. After all, everyone has visited a website where the text seemed to be only one shade off from the background color and gotten a case of eye strain when they tried to read it.

  The easiest fix for this situation is to make sure that the color of your type is drastically different from that of your background. Black and white work so well because they are as drastically different as you can get, but there are some color combos that work well: something along the lines of a dark blue on a light pink will get the job done. Reversed out text is pretty tricky… while you can work with light pink text on a dark blue background, you’re more likely to get a complaint about it.

  6. Get serious about your CSS

  If your CSS is solid, you can move between pages of your website seamlessly, just as the different versions of Hutchouse.com rely on different stylesheets to create some impressive effects. Even if you don’t take things as far as Hutchhouse, CSS can help eliminate amateur typography issues like changing up typefaces and sizes between pages.

  CSS can provide easy consistency between your typography across the entirety of a website. If you are consistent in how you use type, however, breaking that consistency even a small amount can make whatever you wish to highlight truly stand out, just like establishing and then breaking a grid can make for an effective design. In web typography, keeping your fonts consistent can be a simple matter of CSS.

  7. Ditch the centered text

  Choosing an alternative to centered text can make a website design easy to read, just like DesignCanChange.org. Opting for centered text, especially on a page like this, would make for a problematic page: the jagged edges centering creates on each side make it much harder to read and there are plenty of opportunities for perfectly centered text to wind up distorting the rest of your designs on different displays.

  In some circles, centered type is only one step up from using Comic Sans in a website design. You might consider it for a headline, but in general, aligning your text to the left will make your readers much more comfortable, unless they read from right to left.

  8. Deal with smart quotes and other symbols

  Luigi Ottani’s site showcases what careful attention to quotation marks and other symbols will get you: a complete lack of problems when the site displays those symbols. Many websites are dotted with symbols a browser cannot display. It’s a legacy of the fact that most of the text a web designer works with was probably written in Microsoft Word or another piece of word processing software that makes all sorts of little changes to text without the writer paying much attention.

  One of the worst changes is smart quotes: the curly quotation marks Word automatically substitutes for straight quotation marks. Another problem area comes when you work with text written in another language: accents and umlats can cause just as much trouble as Word’s helpfulness. If you just copy and paste text with such changes into your design, you’ll likely have to go back and fix them later, at least for some web browsers.

  Instead, get them early in the design process so you can focus on making your text fit better with your design. If you do want those fancy symbols and smart quotes showing up in the final design, break out your HTML entities.

  9. Plan for your text to get larger

  When you increase the size of the text on Veerle Pieters’ website, it’s not quite as pretty than if you use the font size she picked out. However, you can still read everything, locate links and so forth, something that is true of very few websites.

  That’s because, in part, many designers make sure to layout text in 10 point font or even smaller. Most people are comfortable reading such fonts, but Baby Boomers make up a huge section of the web-browsing population and a lot of those aging web surfers are going to have their browsers set to display type as large as they can. Your text, as well as your design, needs to be able to adapt to that fact.

  It’s also worth taking into account the fact that browser size can vary dramatically, moving text around to unexpected locations if you aren’t careful. If bumping the size up a point creates problems, that older demographic is going to move on to the next website in a hurry. Having to scroll forever over to the side will have a similar result.

  10. Show a preference for sans serif

  If you look at the A List Apart’s website, pretty much every big block of text is set in a sans serif typeface, making it much easier to read. Headlines and other smaller blocks of text are laid out in serifed fonts, creating a balance between the two.

  When it comes to laying out text on a screen, sans serif fonts are almost always the best bet, especially if you chose a font like Verdana that was designed for display on a computer screen. Serifed fonts have a higher chance of displaying poorly, becoming blurry or even pixelated.

  It’s not possible to entirely avoid serifs, of course. But for large blocks of text especially, using a font without serifs can offer an extra level of guarantee that visitors will be able to easily read a site’s text. When you’re choosing fonts for a project, look through your sans serif options first.

A professional logo can enhance a company, an organization, or a product. On the other hand, an unprofessional logo can ruin a brand and mar an otherwise good designer’s portfolio.

Many logos in use are unprofessional and carry all the tell-tale marks of an amateur or a beginner. Everyone thinks they can design a great logo, but simply knowing your way around Photoshop is not enough.

Here are some insights into the process and workflow of effective and modern logo design. With these tips and your creativity, you can make your logo designs shine with the very best.

1. Design: Sketch and Brainstorm

A lot of beginners jump right onto the computer to create a logo. However, more often than not, a lot of time is spent fiddling with special effects and filters. While this can be useful, it usually means that the thoughtful design and artistry of the logo itself has taken a back seat.

A better way to start is to get a fresh sheet of paper and a pencil. Think about the meaning and the feeling you want the logo to impart to the viewer. Is it for a high tech game company or a historic non-profit organization? Should it be complex or simple? As you are thinking, sketch and doodle your ideas. Don’t worry about making everything perfect. You just want to let your natural creativity flow without your computer software taking over at this stage.

As you sketch different options, start eliminating the designs that seem weak or inappropriate. When you are satisfied with your ideas, move to the computer. (For those of you with graphics tablets, you can try sketching your ideas directly on your computer, but try and keep away from special brushes and effects.)

If you are designing a logo for a customer, keep in mind that they might not like all your ideas. So, before spending too much time on each design, you may want to present some work-in-progress designs to gauge their level of interest. This can be a huge time saver, especially if your customer has not given you a lot of direction or if they tend to be very particular.

2. Build: Vector Graphics

Ah, the world of vector graphics. This is a topic that many beginners (and some professionals) find confusing. In recent years, some software such as Photoshop, Paint Shop Pro, and Fireworks have blurred the lines between vector and bitmap graphics.

Common image formats like GIF, JPEG, BMP, and TIFF are all bitmap formats. Digital photos are perfect examples of bitmap graphics (also known as a “raster” images) – because they are made of dots which are also known as pixels. Bitmap graphics have a specific resolution. If you zoom in on a digital photo, you will see the individual pixels. You can scale a bitmap down in size, and get some decent results, but increasing the size of a bitmap means that you are blowing up the pixels and you will get mixed results depending on the amount of enlargement. Photoshop, Pixelmator, Paint Shop Pro, and Painter are all good examples of applications that are primarily designed for bitmap graphic creation and photo editing. They are not the best tools for logo design.
In contrast, vector graphic files are not made of dots or pixels. Instead, they are mathematical formulas for shapes. Vectors can be enlarged or reduced, to any size, with no loss in detail or sharpness. For example, the lines and curves of a vector graphic will look equally as sharp on a small business card as they will on a giant advertising billboard. Professional logos are made with vector graphics so that they can used for commercial printing, web sites, television, and all other forms of media. Vector-capable file formats include EPS (encapsulated postscript), PDF (portable document format), and AI (Adobe Illustrator).

If you learn to use vector-specific drawing software to create logos, you will be able to create perfect straight lines, smooth curves, and accurate shapes quickly and easily. Excellent commercial vector drawing programs include Adobe Illustrator, Lineform, FreeHand, and Corel Draw. In addition, there are excellent free alternatives including Inkscape which is shown below.
Using your pencil sketches as a guide, use your vector drawing software to recreate a crisp version of your ideas. If you are new to using vector software, take a few moments to learn the basics of using the pen tool to create lines and “bezier” curves. Keep in mind that vector shapes can have a “stroke” of varying thickness (the outside line of the shape) and a “fill” color or pattern (the inside of the shape).. Decorate: Color Schemes

When thinking about “fill” and “stroke” colors, try and use color combinations that make sense for the logo. For example, you might not use bright pink and orange for an investment bank. For color inspiration, look online at Adobe’s free Kuler service or pick up a copy of Jim Krause’s Color Index 2.

4. Versions: Black and White

After you’ve made brought your logo to life with color, consider how it will look when photocopied or faxed. If it looks muddy and incoherent when converted to black and white by a copier or fax machine, its time to get back on the computer and make a separate version of your logo that is purely black and white and ready for anything. The black and white version may differ somewhat from the original, but it should retain the overall look and feel. You may find yourself converting a solid shape to a hollow shape or vice versa.

5. Planning: Media

While developing a logo, keep in mind your target medium. For example, if a logo will only be displayed on a web site, you might jazz it up with multiple colors, fades, or even special effects. However, if a logo will also be used for commercial printing, you need to consider the complexity of the logo and the expense that multiple colors and effects will add to the printing costs. For some logos, you may want to create a web version and a less elaborate print version. In the printing world, each color is called a “spot” color and the more colors that are required, the more expensive the printing.

You should also take into consideration your “trapping” settings for your logo graphics. Trapping refers to the space between two colors. On a printing press, each color is usually printed separately and there can be some slight movement of the paper and machinery as each color is printed. These slight movements can cause thin hairline blanks between colors and even half of a millimeter will be noticeable if you have 2 colors that are designed to touch each other perfectly. This is equally important for colored shapes that are outlined in black. In your design, you can create an overlap (known as a “choke” or a “spread”) to occur between adjoining colors to reduce the chances that movement on the printing press will be noticeable.

However, if you look at a lot of professional logos, you will notice that different colors do not always touch and there is frequently blank space built into the designs. Blank space (”white space”) is not only an important visual tool but it can also eliminate trapping worries.

6. Refine: Typography

Words that form a part of a logo are just as important as graphics. A lot of beginners will use any old font for a logo. However, the lettering style, fonts, and even the case (uppercase, lowercase, mixed) in a logo can have a dramatic impact. Never underestimate the need to use effective typography. Also, if your logo uses a font, use your software to convert the letters into shapes/outlines. That way, if you need to send the vector file to someone, they won’t need to have your font installed on their system.

Most web design companies are one or two person operations, with little to no free time for items like after-sales service.

You are usually so busy with current projects that answering calls from past customers can seem like an unnecessary and non-profitable chore.

Here is how you can plug back in to your client base and turn customer service into the profit center that you never thought it would be.

1. Ditch the “Pump and Dump” Model

Many of us tell ourselves that web design isn’t like other businesses. Therefore, we don’t have to behave as other business people do. We can design websites, get our final payment from the customer once the job is done and move on to the next client. This is completely wrong thinking. Web design is a service just like landscaping, legal representation or car repair. You are providing a service for money. While you may be in demand now, in a downturn you will only keep your business profitable if you provide outstanding service.  While you do need to devote a certain percentage of your time to finding new leads, you should devote the same amount of time each week to helping out your past clients.

2. Make Your Terms Clear

Most web design firms offer maintenance packages or charge for updates. While it is important to provide good customer service, you should spell out clearly what constitutes free customer service and what constitutes a paid request.

This is best handled in your initial contract with the customer. Many web designers don’t like to produce contracts as they are worried about scaring off the customer. On the contrary, the customer will often view such a move as a legitimate business transaction and a sign that you are a professional. Be very wary of any company that is not willing to sign a contract for whatever reason.

The contract should include a copy of your quote to your customer with a statement that anything over and above what is included in the quotation will be charged out separately. One-time charges for updates and maintenance packages should be on offer in the contract and on your website so that clients can refer back to these charges.

3. Deal With Emergencies

We’ve all gotten that strange call from a client declaring that something is an emergency and needs to be fixed RIGHT NOW, regardless of what that emergency is. While it may not be an emergency to you, your client perceives it as such and how quickly you deal with that emergency will reflect on your business. It may be helpful to explain to your client that something isn’t as bad as it seems after the fact, but don’t even go there unless you have fixed the issue at hand.

4. Treat Every Contact as an Opportunity

From simple questions about search engines to irate clients, each call is an opportunity for you to reach out and either educate or placate your client. One of the most common complaints about web design companies is their lack of responsiveness after the project is complete. All you need to do to combat this is answer your clients when they phone or e-mail you.

You can build on this by weaving sales techniques into your after-sales service. The key to doing this properly is to address the actual needs of your customer. When a customer calls you, ask them at the end of the call how everything is going and if there is anything more that you can do for them. This is when they’ll start telling you about a form they have been thinking of adding or a new technology that they want to try out. Leave it open-ended and let the customer talk. If they simply say “No.”, then thank them for their call and move on to your projects. At least one in ten of them will probably say “Yes” and give you more business.

E-mails are a tricky subject. One of the problems with e-mail is that we get so many of them in our business day that it is easy to let a customer request fall to the bottom of the pile. Flag customer requests or put them in their own folder for immediate answering so that this doesn’t happen to you. If an e-mail isn’t something that requires an e-mail reply, such as a customer asking for a link to something, pick up the phone and call them. You’ll have a much better chance of impressing the customer over the phone then you will over e-mail.

5. Identify and Cultivate “Angel” Customers

Develop an 80/20 list. It is a general rule that 20% of your clients are responsible for 80% of your income.  Once you have identified them, treat these clients as “angel” customers. You need to retain their loyalty in order to keep your business viable. This may mean taking each of them out to lunch a couple of times a year or bringing them to a lecture on search engine marketing at a local trade show. Whatever you do, make sure that you don’t just know their names, but can actually come close to calling them friends after a while.  While this concept may seem tacky, it is an old school way of doing business that most people still appreciate. Loyalty is earned by doing a good job first and forging a relationship second. If you don’t forge that relationship, your customer does not have the necessary loyalty to return to you for their website needs.

6. Turn The Rest of Your Customers Into “Angels”

Look at the remaining 80% on your list. Ideally, you would like to move them into the 20% column. You can do this by sending out educational e-mail newsletters, sending Christmas cards once a year and occasionally calling them to see if they need anything or have any questions for you. Treat these calls with the same importance as your sales calls – they will lead to just as much business. Consider having pens or other promotional items made with your logo and sending them to your customer, then following up with a phone call to make sure that they got them.

If you can find a way to incorporate at least a few of these customer service ideas into your everyday business, you’ll be making your clients happier and making a little more money in the process.

Written exclusively for WDD by Angela West.