Webmasters Gallery

Simply put, usability is making your website easy for your visitors to find the information they need when they need it.

A common misconception about usability amongst web companies is that usability is expensive. Yes, there are multi-national companies that spend thousands of dollars on usability tests and research, but for an everyday company usability is achievable without the knowledge of usability experts or without expensive equipment for testing.

Web designers have an even easier job to do, just by reading usability articles they can accumulate a fairly good knowledge about usability basics and how to implement them on a website.

1. Include a Tagline

A tagline is a statement or a motto that represents a company’s, or in our case a website’s, philosophy and mission. It should be the most obvious element on a website’s front page and it should clearly describe the website in one phrase.

Statistics show that a website has just 8 seconds to capture a visitor’s attention for them to browse the site further. Without a clear tagline a website would have a hard time keeping visitors long enough to browse the inner pages.

 

2. Implement Site Search

As with taglines, site search is a very important element on a website. When users are looking for something they typically look for a text field where they can enter their search term.

According to Jacob Nielsen’s web usability tips, make this search box 27 characters wide in order for the text to be clearly visible and easy to use. Place the search text field on the top of your web page, because users tend to search a website according to the F pattern, meaning from the top left to the bottom right.

Include a search button and clearly specify the search text, don’t use text such as Go or Submit, because these expressions tend to mislead your website’s visitors.

3. Don’t Use Extensive Graphics

Abusive use of design elements and graphics are always bad for a website, they just mislead the site’s visitors. Only design to improve the web page not just to decorate it. From a usability point of view, less is always more.

4. Use Site maps

Site maps are a relatively new website feature that improves web page navigation and also search engine optimization (SEO). Site maps in essence are a structural representation of a website’s pages and architecture. It can be a document in any form, or a web page that lists the pages on a web site, typically organized in hierarchical fashion.

 

Recently, search engines like Google, Yahoo and MSN have started offering a Sitemap protocol which is similar to a website’s site map page, but the data is organized in XML format. There are Sitemap XML generators that create these documents for a specific URL.

5. Don’t Break the Workflow

By workflow we mean every operation that a user is doing on a website. For example filling out a form, registering on a website, browsing categories, archives, etc. Don’t break these workflows, let the user cancel any operation. By not letting the user cancel an operation, we’re forcing them to finish it even if they don’t want to.

Not every operation on a website is obvious for users, guide them through the specific workflow by using descriptive tips. (e.g. when filling out a form). Javascript links usually break the workflow, so it’s not recommended to use them on your website.

Another mistake is not changing the color of visited links, this results in breaking the navigational design. Let users know where they’ve been and where they are on a website.

6. Create Easily Scannable Web Pages

Easy to read web pages plays an important role in maintaining visitors’ loyalty, keeping them on your site and reading your content. Usability tests show that the majority of users don’t read web pages, they scan them, looking for titles, bold, emphasized text or lists.

Eye tracking studies conducted by Jakob Nielsen show that users read content that resembles an F shape, meaning that the reading starts from the upper left of the web page, next it moves down a little starting from the left again.

 

Nielsen also states the implications of this reading pattern:

• Users won’t read a web page content word by word, they will extract important paragraphs, bold text, etc.
• The first two paragraphs are essential on a web page. These must contain the most important information that your visitors are looking for.
• Sub headings and lists stands out from the regular paragraphs. Use these elements to notify users on important information.

  
  

One important method that we can learn from traditional printed newspapers is that the journalists thought of a catchy headline and a catchy first paragraph to make readers read the whole article. They organize the content in an inverted pyramid format, just picture an upside down pyramid. The broad base represents the most important information in the whole article and the narrow tip represents the least important information.

We can use this format to organize web content by putting the most important pieces on top and the least important ones on the bottom, but how do we know which information is important and which is not? With the help of news values.

7. Don’t Design Misleading UI Controls

By user interface (UI) controls we mean web page elements, components and widgets that a user can interact with (e.g. a button, drop-down list).

Don’t design graphic elements that looks like a button, but is not. We often see text that is underlined and looks like links, but are not clickable.

By not having the action that the users were expecting, they would think that the site is broken and eventually leave. One other important usability tip regarding UI controls is consistency: Make sure that your UI controls are consistent.

 

Yahoo, as the above image shows too, is a good example of consistent UI control design. Every tab on the page looks and behaves the same, every link is underlined on mouse over, every button looks the same, etc.

8. Give Meaningful Feedback

Meaningful feedback is essential for a website. This is the communication channel between the site and the users, with the help of feedback we let the users know what’s going on on the site. In case of an error on your web page, don’t just print Error occurred, instead write meaningful error messages which tell the user what went wrong and what actions they can perform from there.

Feedback works in both ways. When a user fills in a form they are essentially giving you feedback. Don’t make the users have to fill in the same information twice. For example if a user has registered on a website and needs to fill in a form at some point, don’t ask for their name or any other information that they have already supplied, because these details already exist somewhere in a file or database. By simply getting these details automatically we are simplifying the whole process.

9. Do Not Overuse Javascript

With the advent of Javascript and the AJAX technique, web designers and developers can create responsive, transparent websites, but as with all new technologies there is a cost. In our case the cost is browser inconsistency. Not every user has an up-to-date web browser. They also might not have Javascript enabled by default.

By using Javascript on a website extensively we block out these users. Instead use unobtrusive Javascript and graceful degradation.

10. Avoid CAPTCHAs

CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. Even the name sounds complex. The most general form of CAPTCHA is text embedded in an image and by testing visitors we can separate human users from spam bots.

 

The problem with CAPTCHAs are that each form of human verification method triggers a complex process in the users’ brains (e.g. figuring out the distorted text, adding two numbers, etc).

Another problem with CAPTCHAs are the inconsistencies regarding different cultures. For example Chinese symbols, numerals are different from most western letters and Arabic numerals. Chinese people have a much harder time using CAPTCHA ‘enabled’ online forms.

Summary

• Always include a tagline which should be the most obvious element on a web page.
• Implement a 27 characters wide site search and place it on top of your website.
• Don’t use extensive graphics and design elements.
• Include a site map page and register a sitemap XML document in search engines.
• Don’t break a user’s workflow. Allow every action to be canceled if necessary.
• Create easily scan able web content and place the most important information on top of your web page.
• Don’t design graphic elements that looks like a button, but is not.
• Present meaningful feedback and don’t forget that feedback works both ways.
• Use unobtrusive JavaScript and graceful degradation.
• Avoid CAPTCHAs, use more usable methods instead.

 

To celebrate the holidays, we’re releasing a great set of icons developed by Jack Cai especially for WDD.

Ravenna is a set of 92 free raster based icons that you can use for your webpages and projects. The icons come available in 9 different sizes, from 16×16 up to 256×256 pixels and available as transparent PNG files. Icons are free for all your personal projects.

If you’d like to share these icons, please refer your friends to this page.

Here’s a full preview of all 92 icons for quick reference. Download yours below and enjoy!

When you’ve been designing for a few years, it’s easy to fall into patterns. You carve out your personal style and find your inner voice. You figure out what you’re good at, and the world encourages you to play to those strengths.

Bosses, clients and peers want to see you do what you’ve always done because they know they like it. There are no unpleasant surprises. Sticking to your strengths is an easy formula for success, but only in the short-term. If you don’t adapt and grow as a designer, you’ll end up like that poor guy wearing the Members Only jacket without a hint of irony. Sure, it was uber-cool once. But styles change, and so should you.

In your personal comfort zone you feel confident. You know you can perform well there. But if you find your design work to be comfortable and easy, it means you’re not growing. Remember the pre-project jitters you used to get as a young designer? The overwhelming excitement of all the possibilities and challenges in front of you? If you haven’t felt that way in a while, you’re asleep at the wheel. It’s time to push yourself outside the zone!

Expand Your Design Arsenal

The great Milton Glaser said “To design is to communicate clearly by whatever means you can control or master.” Which means it always make sense to acquire a few more communication techniques in your personal design arsenal. Here’s how you can push yourself outside your comfort zone:

1. Identify the boundaries of your personal comfort zone

So much of what we do during our design process is unconscious. If you don’t stop to examine yourself every now and then its easy to fall into a rut. You might use the same typeface in nearly every comp without even thinking about it, for instance. Or you might automatically put a gradient on your buttons, or always use white backgrounds, or put beautifully detailed illustrations on every homepage you design. Whatever your habits are, it is important to make yourself aware them.

Look at your portfolio and try to see the big picture. Make a list of all the things that make up “your style”. While you’re doing this, take an honest look at your strengths and weaknesses. We all have areas we need to improve in. Admitting you’re lousy at something is the first step toward getting better at it. If you feel like you can’t make an honest assessment of your own work, ask a designer friend to be brutally honest or go to an online design forum and request a critique. While the truth can be hard to hear, it will definitely motivate you.

2. Set Specific, Attainable Goals

 

Those things you’re already good at? They represent past successes. They worked for you once, so you know they’ll work again. But why let your skills stagnate? Other things can work too… perhaps even better. Think about the designs that inspire you daily. Are there certain styles you admire but feel you can’t recreate? If so, make a pact with yourself:

Pick a design technique (or two or three) that you would like to explore. The key to becoming a more well-rounded and flexible designer is a willingness to new things. You need to embrace risk every now and then to push your own creative boundaries. That said, its important to pick your moment. Everyone knows its hard to risk failure when you are getting paid to be good. There is a time and a place for exploring new design directions. If a client has hired you specifically because you’re great at typography, they don’t want to see you test out an illustrative concept. But opportunities to stretch your creativity come by all the time. You just have to make them work for you.

Don’t aim to become a radically different designer than you are now. Build on what you’re good at – don’t throw it away and start over. Aim to be yourself only braver and more well-rounded. Work on being the designer you always wanted to be put felt you couldn’t possibly pull off. Make a list of specific, attainable goals you would like to achieve in the next three months. Mine might say

1) Create a typography-heavy site design

2) Create a conceptual illustration for use on a homepage

3) Work with a dark background color

Post your list where you will see it every day. The next time a new project comes in, look at your list and see if this project can help you to meet one of your goals.

3. Get Passionate About Change

Now that you know what areas you want to improve, it’s time to inspire yourself. If you really want to change and grow you have to get passionate and excited about your new goals. Feed your brain with inspiration from as many places as possible. Soak up ideas. Whatever you do, don’t stick to the web galleries or the same old blogs you’ve been reading for years. Find new sources and explore new avenues. Look more closely at your peers at work, or rock stars within the design community. Examine at their growth as designers and take cues from them.

A quick flip through a few portfolios can be incredibly enlightening. The designers you think are top-notch probably weren’t always so amazing. If you dig back a few years, you will be able to see their progression. They had to stretch too. Pick a few role models to remind yourself what all the hard work is about.

When you’re trying to move outside your comfort zone as a designer, it’s important to do it in other areas of your life as well. Try listening to music you wouldn’t normally listen to. Take your laptop somewhere unfamiliar. Walk to work a different way each morning. Get out of your routine and wake your mind up so it starts to look forward to something new and different.

4. Dive In and Do Something Differently

All that time you spent assessing and inspiring yourself won’t go to waste. A project is going to come along that fits perfectly with one of your goals. And when it does, you’ll be more than ready to try out some new techniques.

To really maximize your learning, start big instead of just dabbling. Don’t be afraid to dive headfirst into the style you’re trying to learn. Chances are your first attempts won’t be completely successful, but you can always reign it back in later on. Now is the time to forget about failure and give yourself a free pass.

Even if you throw away everything you do at the beginning, working through the process will teach you things and help you feel more comfortable with your newly adopted techniques. The final design will probably only reflect a slight shift in your personal style, and that’s ok. In fact, that’s GOOD. You want to evolve your old style, not destroy it.

Starting big lets you play and learn, which lets you grow. Then you can take those too-big concepts and boil them down to something worthwhile. The end result? You’ll learn a new way to communicate through design. And you’ll find out that even if you’re not as talented as you’d like to be, you aren’t as horrible as you imagined either.

Creating new web designs from scratch can be lucrative, but it’s also time consuming. If you want to make money repeatedly off of one design — without having to spend more time on it — the easiest way is to sell it as a theme or template.

More than a few web designers take full responsibility for selling their themes, but it can actually be harder to sell a template on your own than through one of the many sites selling themes from a wide variety of web designers.

It comes down to the fact that buyers would rather visit one site and sift through a whole stack of templates quickly than search the web for a theme here and a theme there. While you might take home a smaller percentage of the sales price on a template site, you’ll likely make more sales.

There are plenty of sites out there willing to sell your templates for you and some are better than others. Different sites offer designers a larger cut of the proceeds or have more traffic to guarantee higher sales. The ten sites listed below are some of the better choices when it comes to selling your work and are loosely listed in the order of how much work it will actually require to sell your templates through them.

1. Theme Forest

ThemeForest offers the opportunity to sell HTML templates, WordPress themes, Joomla templates, Flash templates and Photoshop templates. The price for a theme or a template does vary — as does your cut as the designer. Your cut depends on whether or not a design is exclusive to ThemeForest: for non-exclusive themes you will receive 25% of every sale. For exclusive themes, you will receive between 35% and 50%, moving upwards as you sell more themes. You can find the full payment scheme on ThemeForest’s Payment Rates page and the site’s legal information is also available. Before a web designer can start selling on ThemeForest, he or she must first read a tutorial and complete a short quiz.

2. Templamatic

has some simple requirements for templates it posts for sale: valid HTML and CSS mark-up, cross-browser compatibility and no copyright problems. In exchange, the site offers web designers 65% of all sales. Uploading a template or theme is a matter of setting up a free account and adding your work. You can set your own price for your work — although it’s important to remember that you don’t get the full amount you set. Templamatic accepts a variety of templates, including WordPress, Drupal and Joomla. The site also accepts skins for MySpace, phpBB and other social sites and platforms. All templates and themes are approved by Templamatic staff before they become available on the website.

3. SuCasa

WebAssist developed a template marketplace, SuCasa, and launched it just a few months ago. Despite SuCasa’s relative youth, it can provide a good option for selling your web design work. You will need a free publisher account in order to upload your templates and themes, and you’ll need to make sure that you select the “I want to charge for my templates…” option. You can upload as many templates as you wish, set your own price and assign your theme to the appropriate categories. SuCasa will pay you 90% of each sale. If you use WebAssist’s Dreamweaver plugins while creating your designs, the entire upload process can be streamlined — however, you do not actually need to buy anything to be able to upload your work to SuCasa. There is a brief review process for all SuCasa submissions.

4. FlashDen

There are plenty of sites that sell specific types of templates.FlashDen is one site that handles only Flash website templates, along with a few other Flash files. FlashDen is owned by the same network as ThemeForest and operates in a similar manner. You receive a percentage of every sale, with higher rates for exclusive templates. You’ll also need to complete a quiz to begin selling on FlashDen — you can start the process at the Author Program page. The network that owns FlashDen and ThemeForest also provide opportunities to sell audio and video files.

5. SitePoint

While SitePoint’s Template Marketplace may look like just another forum, it provides a forum with templates for sale. The marketplace does lean towards WordPress themes, but you can list just about any kind of website template you have available. There is a fee to list your templates — but Sitepoint does not take a cut of your sales. To begin selling on Sitepoint, you’ll need to create a listing for a new auction. You set your price when you create a listing, as well as establishing whether a template is exclusive to Sitepoint or if it is available elsewhere.

6. TalkFreelance

You’ll find that TalkFreelance operates similarly to SitePoint — along the lines of a forum. Overall, the site caters to webmasters and a specific forum has been set aside for web designers looking to sell themes or templates. You can set your own prices and hold auctions through TalkFreelance, and the site does not take any percentage of your sales. If you’re interested in selling through TalkFreelance, you’ll need to become a member of the forum. The site limits sales in its forums to members who have made at least five posts on the forums: there is a whole section of the site devoted to discussing web design, so the barrier to entry is not actually that high. There are a few other guidelines that TalkFreelance has established, which are available on the website.

7. Webmaster-Talk

There is a lot of potential for selling templates on webmaster forums: Webmaster-Talk is another good reason. These sites provide useful marketplaces because they cater to individuals who typically own multiple websites — a target audience more likely to purchase website templates than other demographics. There are minimal limitations on listing templates for sale at Webmaster-Talk. The site does automatically treat every listing as an auction, but you can easily sell multiple instances of a theme or template at any time.

8. eBay

You really can sell anything on eBay, including website templates. While it may be harder to sell pricier templates on eBay, the sheer quantity of buyers searching the website can mean a volume well worth the effort of selling your work on eBay. Website themes and templates sell on eBay exactly like any other product: you list the item you wish to sell and either set a ‘Buy It Now’ price or an auction. Depending on how many templates you want to sell, setting up an eBay store can be worthwhile: you can list multiple copies of a template for sale with a little more ease, as well as multiple templates with minimal efforts.

9. Other Designers

There are thousands of website designers out there who rely on templates and themes they can quickly tweak to provide customers with quick websites. Just browsing through a designer’s portfolio can give you an idea of how heavily they use templates. Offering to license a template to such designers — especially if you offer some level of exclusivity — can get you a solid amount of money, usually more than if you sell templates through various online marketplaces. You will need to market your work, to a certain extent: sending out emails to a number of web designers is enough, but without that promotion, they won’t know that you exist.

10. Your Own Website

While I did mention that it’s harder to sell themes and templates through your own website, it can be done successfully. The key is to find a specific niche of templates to offer — perhaps templates for a certain kind of business or skins for certain websites — and to advertise your products.

Hugh Briss offers a great example with his website, TwitterImage. Hugh has found a very narrow niche — custom Twitter backgrounds — and a way to advertise his offerings for a minimal cost — free custom backgrounds to any Twitter member with at least 2,000 followers. If you can follow Hugh’s example, you can sell themes and templates effectively from your own website. It will require more work, including promotion, than other options.

You may have noticed that a lot of big template retailers aren’t on this list. That’s because companies like TemplateMonster aren’t easy to sell your work to. In general they work with on-staff web designers to develop and sell themes, rather than using work from freelancers or independent companies. Selling your templates through those sites isn’t a side income — it’s a full-time job. Instead, the options here are options to provide you a steady stream of income that doesn’t take as much work as designing a website from scratch. It is not impossible to make your entire living by producing templates, but most web designers simply don’t treat it as such.

There are other template marketplaces out there, many of which are specialized: some sell only a specific type of template, others sell templates optimized for a particular language. If you create specialized themes or templates, such sites may provide you with a better price for your work.

 

Rich-text editors, also known as online rich-text editors, are web components that allow users to edit and enter text within a web browser. Rich-text editors are used in numerous ways such as in enhancing your comment input form or as part of a web application that allows entry of user-generated and formatted content. Rich-text editors are essentially web-based WYSIWYG (”what you see is what you get”) editors.

There are many rich-text editors out there. What’s even better than a lot of choices? Many of the best rich-text editors currently in the market are free.

In this article, we present 20 exceptional (and free) rich-text editors.
1. TinyMCE

TinyMCE is an open source (under the GNU Lesser General Public License) rich-text editor released and maintained by Moxiecode. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API. TinyMCE’s plugin system allows you to download themes and plugins to extend the core installation.

2. FCK Editor

FCKeditor is another wildly popular open source online rich-text editor (check out some of the websites that use it). It has a “Word clean-up” feature that automatically detects and cleans up text that’s copied from Microsoft Word documents. It has one of the best HTML table editing and creation features, making it very easy for users to create and edit tables for displaying data.

3. NicEdit

NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features. You can serve NicEdit remotely from the NicEdit website; all you have to do is copy a JavaScript code snipplet and voila – it just works (as well as saving your server some system resources).

4. BXE

BXE is an XML-based WYSIWYG editor that allows you to change an entire web page. It has been an open source application since 2002 – and with a devout following – you might be able to quickly find some help if you run into any issues in the BXE IRC channel.

5. MarkItUp!

markItUp! is a JavaScript-based markup editor built on top of the jQuery library. With markItUp!, you can easily turn any HTML textarea into a fully-featured WYSIWYG editor. It’s lightweight (the script weighs in at only 6.5kb), supports keyboard shortcuts, has a built-in Ajax live preview and many more features that make markItUp! an excellent choice.

 

6. WidgEditor

The widgEditor is an open source project of Cameron Adams released under the GNU General Public License. It’s a simple and no-fuss HTML rich-text editing solution that converts regular HTML textareas into a WYSIWYG. Because it’s JavaScript-based and designed to degrade gracefully, users with JavaScript turned off will still be able to use the HTML textarea.

7. EditArea

EditArea is a free JavaScript source code editor. It’s an excellent solution for weblogs and websites that allow developers to contribute and format their own code.

8. Cross Browser Rich Text Editor (RTE)

Cross-Browser Rich Text Editor (”RTE” for short) is a free rich-text editor released under the Creative Commons Attribution 2.5 license. It’s a work based on the designMode functionality introduced in Internet Explorer 5 and implemented in the Mozilla Rich Text Editing API. It just has basic features, so it’s perfect for individuals looking to add simple rich-text editing support.

9. YUI Library Rich Text Editor

The YUI Library Rich Text Editor is a UI control that’s part of the YUI Library. It’s a great solution for those already using YUI and individuals that want to save some server resources (since you can serve it directly from the Yahoo! servers). The YUI Library Rich Text Editor also has excellent mobile device support, making it a great web-accessible rich-text editing solution.

10. FreeTextBox

Web professionals using the .NET framework that want to add editing capabilities to their web pages and web applications should check out FreeTextBox: a robust, fully-featured, and extremely popular rich-text editor for ASP.NET. It has a built-in image gallery, a helpful JavaScript API for customization, and a full list of editing controls for constructing tables, ordered/unordered lists, and even spellchecking (using the IE spellchecking engine).

11. Damn Small Rich Text Editor

Damn Small Rich Text Editor (DSRTE) is a lightweight, free rich-text editor built on top of the jQuery library and a PHP backend. It’s plugin-enabled (meaning it’s highly-extensible), has image-uploading capabilities (using Ajax for responsive user interaction), and an HTML cleanup feature to tidy up messy markup.

12. Silverlight Rich Text Editor

Silverlight rich text editor is the first rich-text editor for Silverlight. It has many useful features such as “find and replace” to quickly find specific text or to batch-replace them with something else, keyboard shortcuts support, serialization of text input for security, and much more. Note that the original creator has stopped further development (so cross your fingers someone picks up his project).

13. Free Rich Text Editor

Free Rich Text Editor is a free, JavaScript-based HTML rich-text editing solution released under the Creative Commons Attribution 2.5 Generic license. The interface is reminiscent of Microsoft Word 2003’s interface, so users of this desktop application will find it quite familiar. It has everything you’d expect from a robust rich-text editor, as well as a code view to preview and edit the HTML source code directly.

14. Dijit.Editor

The Dijit.Editor is Dijit’s (Dojo’s widget library) fully-featured rich-text editor. Built on top of The Dojo Toolkit (a popular JavaScript library/framework); it’s an excellent solution for those already using the Dojo Toolkit.

15. WYMeditor

WYMeditor is a web-based HTML editor that emphasizes the use of standards-compliant markup. It was developed to output compliant HTML 4.01 Strict Doctype HTML, so it’s the perfect solution for the standards-aware developer.

16. Whizzywig

Whizzywig is a free JavaScript web-based rich-text editor. Aside from features you’d expect

7 Free Tools to Identify A Font

from a rich-text editor, Whizzywig also has a Spanish and German version, a web-safe color picker to change your text’s colors, and custom-designed UI controls.

17. openWWYG YSI

openWYSIWYG is a free and feature-packed web-based content editor that’s perfect for a host of content management systems. It has a very intuitive “table creation” feature to help users construct HTML tables. It also has a wide range of browser support including IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.

18. XStandard

XStandard is a highly-standards-compliant rich-text editor. It comes in two versions: XStandard Lite – which is completely free, and XStandard Pro. XStandard Lite has Microsoft Word text cleanup, spellchecking, and the ability to interact with third-party applications.

19. Xinha

Xinha is an open source, community-built rich-text editor released under a BSD style license. It’s highly-configurable, extensible, and feature-packed. Xinha emphasizes on community development, and as such, you’ll find many helpful contributors in the Xinha forums.

20. Kupu

Kupu is an open source “document-centered” client-side rich-text editor released by the international association for Open Source Content Management (OSCOM). It features easy integration into a variety of content management systems including Silva and Plone, easy customization and extension, and Ajax saving for an uninterrupted user experience.

Although there are lots of posts that evaluate different design blogs, I haven’t seen many that focus specifically on corporate websites.

Therefore, I thought it would be fun to take a look at the homepages of the Top 30 technology companies (the order of this list was determined by the InfoTech 100 from Business Week), and assign them a PASS or FAIL rating based on the quality of their homepage design.

Click on the screenshots to check out each website.

 

1. Amazon.com: PASS

Although it may be a little cluttered for my taste, it would be short-sighted to say that the Amazon.com homepage is a FAIL. Amazon has created a company that has landed at the top of the InfoTech 100, and the fact that one hundred percent of their sales are made online shows that they understand how to use their website to attract and retain customers.

 

2. Apple: PASS

As an Apple user, I may be a little biased, but I honestly don’t think that anyone could look at the Apple homepage and say that it fails in terms of design. The homepage is uncluttered, provides easy to use navigation and gracefully showcases several of Apple’s products.

 

3. Research in Motion (RIM): PASS

Let’s be honest; the RIM homepage is not going to win any awards for being innovative. However, while this may be true, the homepage does get the job done. Not only does it provide links to all of the relevant topics of interest, but it also showcases their latest product. If I was a school teacher, the RIM homepage would probably get a B- (while the Apple homepage would be at the top of the class with an A+).

 

4. Nintendo: FAIL

Okay, I already know that this is going to be a controversial one, but I have to give the Nintendo homepage a FAIL. While I do like the color scheme of this homepage, there are simply too many elements in the layout. Since it already looks like they are trying to replicate the Apple homepage, Nintendo needs to take another look and realize that they could benefit by cutting out about 75% of the homepage elements below the navigation bar.

 

5. Western Digital: PASS

This homepage falls into the same category as the RIM homepage. It’s definitely not pushing any envelopes, but at the same time, there’s nothing wrong with it. This is a corporate homepage we are talking about, and not only does the menu make navigating the website easy, but I like the fact that they use the main area of their homepage to promote a single product (instead of making Nintendo’s mistake and trying to cram as many products onto a single page as possible).

 

6. America Movil: FAIL

Although this isn’t technically their homepage (it’s the first page of their website, but you have to click “Enter Fullscreen” to visit their actual homepage), I do not appreciate a website that forces me to go into a fullscreen mode. Unless I’m watching a movie, I do not want a window to be in fullscreen. Not only it interrupts my flow of browsing, but it’s going to cause problems for people who don’t have a 1024×768 resolution.

 

7. China Mobile: PASS

First of all, kudos to China Mobile for having their website in multiple languages. While I think they could cut the size of their Press Releases area in half (and do a better job at emphasizing the “Hot Products” on the right side of the page), the China Mobile homepage successfully accomplishes the basic goals of a corporate homepage.

 

8. Nokia: PASS

I really like the fact that Nokia puts all of the necessary navigation elements (links and search box) at the top of the page, and then uses the main real estate of their hompeage to showcase their latest products (the large box actually scrolls through several different products). Additionally, they finish things off with a few other boxes that lead to destinations of potential interest (such as capitalizing on the new “Twilight” trend).

 

9. ASUSTeK Computer: FAIL

Although you can’t see it in the screenshot, there are simply too many moving elements on this homepage (including the left and middle columns). Unlike the main area of the Nokia homepage (which scrolls through several different elements), the main area of this homepage is animated, but it simply loops the same offer over and over. Additionally, there’s too much clutter on the homepage for a user to figure out what they actually want to do.

 

10. High Tech Computer (HTC): PASS

If I was going to pick my two favorite homepages out of the first ten companies on this list, Apple would be #1 and HTC would be #2. The homepage is relatively uncluttered, and (in addition to the navigation) simply displays four main elements (three of which are to popular products/offers).

 

11. Google: PASS

If you need proof that minimalist designs are more effective than cluttered ones, just compare the stock prices of Google and Yahoo. Google is a search company, and from the second that you visit their homepage, you know exactly what you are supposed to do with their website.

 

12. MTN Group: PASS

It’s definitely not my favorite homepage on this list, but it gets the job done. In addition to providing visitors with easy to find navigational links, MTN Group promotes all of the latest news that’s related to their company.

 

13. IBM: PASS

I actually have to admit that I was little surprised with the IBM homepage. Given the reputation of the company, I was expecting an extremely bland homepage, but theirs actually has a little flair. I also like the fact that each of the main navigation links is actually a drop-down menu, which makes it easier for users to find exactly what they want.

 

14. Mobile Telesystems: FAIL

I want to like this homepage. However, there is simply too much red in the design, which results in an overwhelming experience when the page loads. On top of that, Mobile Telesystems really needs to increase the size of their fonts for their navigational links.

 

15. Telefonica: FAIL

I don’t think I need to go into much detail about why this design is a fail. I guess that it’s a decent attempt at a design, but it simply doesn’t come together well. Telefonica’s needs to scrap this design and start over from scratch (it wouldn’t hurt them to get a little inspiration from some of the top homepages on this list).

 

16. VimpelCom: PASS

Like several of the other websites on this list, VimpelCom could benefit from increasing the size of their font. Also, I’m not sure why the paragraph under the “Brief Business Description” is one long hyperlink. However, those are both minor details, and I otherwise like the design of this homepage. I think their use of ample white space helps to bring attention to their main content.

 

17. Foxconn (Hon Hai Precision Ind.): FAIL

Although I will give them credit for making it easy to switch their site between English and Traditional Chinese, this homepage just doesn’t do it for me. I think what really turns me off is the badly done header. If they could come up with a more attractive header and improve the link structure below the header, Foxconn might be able to move into the PASS category.

 

18. AT&T: PASS

Even though they have a lot on their homepage, AT&T is a company that offers a lot of different products and services, so I don’t think their homepage is overwhelming or too cluttered. Additionally, I also like that their main content area highlights several of their best offers.

 

19. Accenture: PASS

Not the most exciting homepage (although I do like the picture of Tiger), but like several of the other homepages on the list, it gets the job done. This probably doesn’t come as a surprise, but my one suggestion would be to increase the font size of the links on the right side of the page (I think a lot of designers underestimate the importance of having text that is large enough for people of all ages and monitor sizes to read).

 

20. LG Electronics: FAIL

I like this homepage. However, I have to give it a fail because even though I have a fast Internet connection, it takes this page forever to load. Not only do you have to wait to load the “Select Your Region” page, but then there’s another delay before the actual homepage loads!

 

21. Bharti: PASS

I think that the picture on this page is a pretty cool. I also like their one sentence mission statement about 2020. I would recommend formatting the description of their company differently, but other than that, this a pretty good corporate homepage.

 

22. Oracle: PASS

I like the use of white space, and unlike the Mobile Telesystems homepage, Oracle successfully uses red in their color scheme without going overboard. My only suggestion would be to move the bottom navigation (Customer Spotlight, News and Special Event) above the list of links, and to potentially prune down the total number of links in those four columns.

 

23. Microsoft: FAIL

As an Apple guy, I was hoping I would get to fail Microsoft. Although I remained objective, I’m glad that I get to give them a FAIL. The reason is because of the “Microsoft Silverlight” pop-up that automatically appears when their homepage loads. Just like America Movil forcing a full screen, I don’t want anything to pop-up while I’m browsing (especially when it forces me to click the Install link or the No Thanks link).

 

24. Maroc Telecom: FAIL

Since I’m not one of their target customers, I don’t mind the fact that I can’t read what’s on the homepage. However, I do have to FAIL this page because they are trying to cram too much into a small space. If they would actually take advantage of the full page and spread apart their layout, they might actually be able to earn a PASS.

 

25. Turkcell: PASS

As you have probably noticed, I really think that this general type of layout is one of the most effective for corporate homepages. It gives companies the ability to highlight the main elements of their company, and generally draws visitors deeper into the website.

 

26. LG Display: FAIL

This homepage suffers from the same problem as the Maroc Telecom homepage. Instead of spreading things out, they have crammed all of the elements of their layout into a small space. They don’t necessarily need to remove any of the elements from their homepage, but they do need to spread out the elements that are there.

 

27. NHN USA: PASS

I really like the bold header that is a part of this layout. It really grabs your attention, and the five links that are integrated into the header make navigation easy. I would suggest potentially changing the navigation links from grey to black, but other than that, this is a great looking homepage.

 

28. COSMOTE: FAIL

Like the Maroc Telecom homepage, this isn’t getting a FAIL for being in a different language. The reason that it’s receiving a fail is because it is way too cluttered. There are simply too many elements jammed into this layout. Additionally, I’m really not a big fan of how much they used bright green in this layout.

 

29. Millicom International Cellular: PASS

Especially when you consider the fact that this is a corporate homepage, the design is quite nice and bright. The navigation is easy to use, and the main area of the layout is divided well between information about the company, links to documents for investors and a couple elements with additional information.

 

30. HP: PASS

Not every website can get away with a black background, but the HP website pulls it off successfully. Their use of big images in the middle of the page seems like a really effective way to grab visitor’s attention and get them onto specific product pages.

Recently we looked at the characteristics of effective blog theme design, and I’d like to take a similar look at the portfolio sites of freelance designers.

A designer’s online portfolio is a critical part of the business, and in some cases the most valuable asset of the business.

A good portfolio site is a constant lead-generation tool, but what is it specifically that makes a great portfolio site?

1. Clear Communication

A portfolio site should clearly and concisely communicate with visitors about the services that are provided and what the designer has to offer to potential clients. Because there are so many different types of design and various specializations, it’s not safe to assume that visitors will have a clear understanding of the services that are offered without them being communicated.

The purpose of a portfolio site is to show the work of the designer and to attract new clients. However, without a website that communicates effectively with visitors, it’s unlikely that visitors will make the extra effort to contact the designer about potential work.

Tony Geer not only has an attractive portfolio site, but he also uses prime screen real estate to quickly tell visitors what he offers and allows them to contact him or browse through his work.

 

Leigh Taylor has a little badge on her site that lets visitors know that she is currently available for work.

 

Some freelance designers choose to post prices on their portfolio site, whether it’s an hourly rate or project-based pricing, and others choose not to post prices. Whichever method you choose, it should be communicated clearly on the site. If you’re using set prices, the details of services provided and what fits into those packages should be listed and explained, if necessary.

If you’ve decided not to display prices, which is the choice of most freelancers, it should be clearly stated to visitors how they can get more information about services and pricing, or perhaps get a quote for their specific needs. Most freelancers accomplish this by simply asking the visitor to complete a contact form that may help to get some of the details of the project in order to get a quote.

The method you choose for pricing is a matter of personal preference, but whatever you choose, be sure that it is clearly and concisely communicated.

Adaptd offers web design, web development, and SEO services, which is very clear from their navigation menu that is on every page. Once you click on one of the options you’ll see a clear description of each of the services, and they have chosen to list prices on the site as well.

 

2. Personality

When potential clients are looking at freelancers for their project, there are a number of factors that will weigh in to their decision. Of course, they’ll expect to see that the designer has the abilities and experience to do a good job, and cost is also a common concern. Just as important as these factors is the desire of clients to work with someone that they like and someone that will give them a good overall experience.

Most business owners or decision makers who are responsible for handling and overseeing the design process of their company’s website are at least somewhat intimidated by the process. They typically want to work with someone that will help to make it a smooth, enjoyable, and successful experience. If a freelancer is able to show some personality through their portfolio site, potential clients are far more likely to feel a personal connection and to see them working together.

Winnie Lim uses a brief message as a greeting to visitors that gives a personal touch, and it encourages them to read more on her About page.

 

3. Creative

Portfolio sites often feature some of the most creative designs. Because design is an artistic and creative profession, the website of a freelance designer is seen as a true representation of their work and their skill levels. Portfolio sites sometimes take more creative liberties without the potential negative results as other types of sites. In fact, in many cases potential clients will expect to see some creativity and originality from the site of a freelance designer.

Creativity can come in any number of different forms. Maleika Attawel uses a soft textured look on her portfolio.

 

4. Lack of Excess

The first point we looked at was the need for clear communication. One of the biggest influences on the communication of a website is how much information is provided. While portfolio sites have some necessary items that need to be stated and explained, getting rid of any excess will help the existing information to stand out more and to be easily understood.

In addition to eliminating excess wording and content, excess design elements can also be avoided. Some of the most elegant and highly-respected portfolio sites are very minimal in their approach. The basics of a portfolio site are very simple: a listing of services, description of qualifications, showcase of past work, and a means of contact. Excess elements outside of the necessary can often do more harm than good. Many portfolios are now including a blog (which we’ll look at later), but most other content and excess elements in the design will do little to help attract new business.

Rob Morris has a great looking portfolio site that features a clean layout with only the relevant information.

 

5. Examples of Past Work

Of course, a portfolio site would not be a portfolio site with examples of past work. This is what most potential clients will want to see, and in most cases they’ll be gauging your skill level based on these examples.

The quality of work in your portfolio is a major factor on the success of the portfolio site, but presentation can also make a big difference. In some cases designers display their work in a creative or impressive way that almost overshadows the work itself (which can be good or bad).

Matt Dempsey’s site showcases his work with nice, full-size images.

 

6. Shows the Best Work

Not every design you’ve ever done needs to be included in your portfolio. In fact, it’s better to only showcase specific examples rather than everything. Most potential clients aren’t going to sit and look through everything anyway, so be sure that what you display has been chosen for maximum impact.

In some cases you may be offering different types of design (such as blog theme design, e-commerce sites, logo design, business cards, etc.), so it’s good to have a few high-quality examples to show for each category rather than having one big collection of all of your work. Smaller, more selective portfolios are also easier for visitors to look through in order to find something relevant to them.

Robbie Manson’s homepage showcases his featured projects prominently. Each one has more detail of his work explained if you click on the images.

 

7. Call to Action

Since the ultimate purpose of the online portfolio is to attract new customers, it only makes sense to ask visitors for their business. How you go about this is up to you, but most portfolio sites simply encourage visitors to contact them for a quote or to fill out a form for more information. It’s a simple act, but prompting potential clients to take that step can make a big difference in the number of inquiries received.

Luke Larson’s site has a link that says “hire me” that takes you right to the contact form. The link is a small change from just having a standard contact link, but it obviously encourages the visitor to take action.

 

8. Ease of Contact

Once you’ve made that call to action for visitors to contact you about your services, it’s critical that they have an easy way to contact you. Most portfolio sites use a contact form, although some will choose to just list an email address. Either way, the contact information should be easily found and accessed from any page (meaning, if you have a contact form, make sue that each page on your site links to that contact form).

Most designers want to get some basic information from potential clients about their needs at the time of initial contact. This can be easily accomplished through a form, but remember that if too much information is requested or required, some contacts may be lost. The easier you make it to contact you, the more likely people will be willing to do so. You’ll have to make a decision about what information is critical to you so that you get what’s necessary, but not enough to turn off potential clients.

Marius Roosendaal has a contact form on his homepage that requires minimal information from the visitor. Also, by having the form right on the homepage it’s even easier for people to see and to use.

 

9. Visibility

A portfolio site can do everything right and have incredible work to display, but if no one sees it, it will do no good. There are so many freelancers and design studios out there that it’s not possible to set up a small portfolio site and expect it to draw search traffic that will convert into potential clients. In order for the site to be effective it needs to be visible.

There are a few different options when it comes to getting a portfolio in the view of potential clients. First, there are literally hundreds of design galleries that showcase exemplary work. Of course, smaller ones have relatively little traffic, but many of the larger and more established galleries have helped freelancers to land a number of new clients. Almost all galleries allow anyone to submit websites to be included, and those that are worthy will get featured.

Most of the visitors that will come to a site through a design gallery will be other designers, but many designers have benefited immensely from this exposure, and the links are great for SEO purposes as well. To find galleries to submit to, see The CSS Gallery List. New galleries are popping up all the time, but this list is comprehensive enough to keep you busy for a long time.

You can see that Dawghouse Design has received a ton of exposure from galleries.

 

A second method that’s used by some freelancers to gain exposure is the use of a blog on the same domain as the portfolio. Blogs are great for drawing traffic, building links, demonstrating expertise, and encouraging repeat visits. the blog posts may attract visitors that wind up becoming clients. Of course, maintaining a blog takes time, but it’s one of the best methods for getting eyes on your portfolio site.

In addition to just helping your portfolio site to be more visible, blogs also help to show your personality to visitors and to start to build there trust. Earlier we looked at the need for personality on a portfolio site, and a blog is a great way to show visitors more of you.

Chris Spooner uses his blog to gain exposure and find new clients. Although he doesn’t use his blog to directly promote his services, Chris has established his name and become a repsected leader in the industry primarily through the demonstration of his expertise on his blog.

A third way to get people to see your portfolio site is to use localized SEO techniques. Although competition for general web design-related terms is very stiff, you may be able to easily rank on the first page of search engines for a local term. You may even prefer working with local clients anyway. To target local visitors use city, state or province names in your page titles and throughout your site when appropriate. Additionally, work on building links to your site with localities in the anchor text of the links. (To read more, see Search Engine Optimization for Local Business Results.)

Another method for exposure is to use Pay-Per-Click advertising. With PPC you can choose which search phrases you’d like to target and how much you’re willing to spend. You can also set geographic restrictions so you’re only targeting people who are looking for your services in your local area. PPC is a great option for a small advertising budget.

10. Valid Code

Some people feel that valid XHTML and CSS are important on any website, and others feel that it doesn’t really make a difference. Even if you don’t see the need for valid code in most situations, portfolio sites are an exception. A portfolio site that has all kinds of validation errors sends the wrong message to visitors. Although most potential clients won’t care about valid code, and many probably won’t even know what it means, some will. And those that will care are unlikely to consider a designer that doesn’t have a valid website of their own.

Some designers will choose to display evidence of validation and others will not. Again, this is a matter of personal preference. The little logo or icon showing that you have valid coded isn’t really what’s important. It’s more important that if visitors decide to test your code that it will validate.

Andrew Bradshaw’s site includes a simple message in the footer to show that his code validates.

• Social media sites and technologies like Twitter and Digg are something that the tech savvy take completely for granted.  We just automatically assume that if you are on the Internet, you are using social media. This isn’t really the case. There are some very important people that are not yet aware of social media and what it can do – your clients.

  Social media is definitely a source of new income for you as you have the opportunity to go back and update your old clients to current technologies.  The foundation-laying for social media came in 1999 when Rick Levine and others wrote the Cluetrain Manifesto.  This manifesto lays out simple rules for online markets and social media.

   

  Cluetrain Manifesto – see Cluetrain.com for more.

  Interaction and Your Clients

  Gone are the days where an e-mail newsletter and an occasional site update were enough to assuage the information junkie consumer.  Now people want up to the minute interaction, with live help on websites and Twitter updates from the CEO whenever they can get them.  While you know the power of interactive marketing, the guys in the boardroom may not yet “get it“.  It is up to you to make them get it.

  The best argument that you can make for social media is that it is replacing traditional SEO practices.  Gone are the days when a link from a highly pageranked site got you some street cred with Google – although that still doesn’t hurt – now it is all about how many Diggs your content gets.  The key argument is that traditional SEO work is now not enough – it needs to be supplemented with social media.

  There is a bit of a fear surrounding social media for companies that like to “stay on message”, or in other words not give the public a forum to air complaints about its products or services.  Your argument here is that by giving the customers that forum, your business is extending an open hand in friendship to its clients.  This hand will rarely get slapped away unless you are dealing with a really irate client base, in which case you probably won’t have a business for much longer anyway.

  There is more to be said for allowing your business to be interacted with online than there is to be said for the time lost.  In the end, employees will be communicating with customers so it isn’t really time lost.  We spend too much time in business on hunting new prospects and not enough farming our current customers.  If we aren’t careful, another business will be happy to come along and pick up that slack.

   

  How to Start Marketing Social Media

  If your past clients do not yet have a social media strategy, it is time to present them with one.  If you don’t already have an e-mail newsletter set up to go out to all of your clients, go set that up.  We’ll wait.  Don’t forget to add a “join my newsletter” page or link to your site as well.  Send out an e-mail newsletter talking about how you would like to update their sites with access to Twitter, Digg, Facebook and other social media technologies and sites.  Determine what is within your scope and develop a social media package that you give past clients a discount on.  Make sure it is a clear and decisive package that is priced reasonably enough to be accessible.  We’ve developed one here below that you can price out at whatever you think is reasonable.

  Once you have created it, include it on your website as a new product.  Simply having it available will give you an “edge” over other web design companies.  Web designers aren’t the only tech-savvy people on earth and those who already use Twitter and Digg are more likely to call your company than another if you have these technologies showcased on your site.  Not only does it give you a new item to sell, it gives you a bit of variation – you’ll probably look forward to your social media projects quite a bit when you start getting them.

  Suggested Social Media Package

  Core Package – Must-Haves

  • Make key content of website “Bookmarkable” on social bookmarking sites like Digg and StumbleUpon.  Price per page.
  • Remember that E-mail newsletter thing?  Make sure they have it too.
  • Create Facebook Group and Facebook Page for your business
  • Set your business up on Twitter
  • Add a WordPress blog to your site
  • Training for your staff on updating Facebook, Twitter, and your blog

  Add-Ons – Nice-to-Haves

  • Set up your site to display live Twitter feeds
  • Create a social media press release template for the public relations department.
  • Create a YouTube page with introductory videos
  • Add Live Help component to site
  • Find online communities for employees to join and prepare a report with your suggestions.

  The various features above can add up, so you want to package your Social Media kit like a Chinese Food menu – allow deletions and substitutions.  Just make sure that you have adequately priced out each component so that you do not leave yourself holding the bag on hours worked.  There are also a few key items you can’t leave out, which is why we have separated out the core package from the add-ons.  All of the components in there are necessary unless your client is just adamantly against it – in which case all you can do is present them with this article and move on if they still don’t want it.

   

  How to Not Set Up a Social Media Package.

  You should also make it clear that your package is to initially implement a technology, not to maintain it.  While this may create a good income stream for you, social media maintenance isn’t like site maintenance – it is very time consuming and best left up to the company that wants to use it.  You have nothing to offer someone who is asking you for a quote on dog grooming – only the dog grooming company that hires you can answer that kind of question.  Make sure that your client knows that you are there for them if implementation falls down, but that they have the responsibility of updating things like Twitter and their blog.
  
  

  Social Bookmarking Site-Ready

  Your clients will ask what a social bookmarking site is.  The best way to explain it to someone who doesn’t know is to ask them if they know how to Favorite or Bookmark a site in their browser.  Most will say yes.  Digg and other social bookmarking sites simply serve as a website that acts as a more organized Favorites list, allowing you to tag an article for reading later, or a useful resource to come back to later.

  A good argument could be made for going back and making every single page of website content on your client’s site “Diggable”.  However, this would be somewhat time consuming.  Best to make a few key pages “Diggable”, such as a company’s environmental policies, key product pages and press releases.  Basically anything that you consider “Diggable” material should be “Diggable” to the public.

  Don’t forget to make the page accessible to more than just Digg.  There is a fine balance to walk here – you don’t want to saturate the web visitor with choices of too many social media outlets.  You can use a script called “Bookmarkify” that allows to choose which social media outlet icons show up below the content and which can be expanded on from a menu item.

  It allows access to all social bookmarking sites but allows you to show just a few on your page.  It is available for PHP and as most of you already know, you simply need to give the page that you are putting it on a “.php” extension in order to insert the script.

  

  Setting Up a Blog

  While it isn’t instant gratification for the consumer, a blog and weekly updates to that blog keep customers coming back to your site.  That and they can be marketed on directories that are reserved exclusively for blogs, including Technorati and Blogarama.  Having a Technorati authority is quickly becoming just as important as a Google pagerank and you simply cannot have it without a blog.  After minimal staff training, company staff should be able to update the blog using WordPress or a similar blogging platform.  Do yourself a giant favor and don’t use Joomla – it’s a huge headache and not user-friendly enough for your clients to use.  Play around with both if you like but really, just save yourself the time and go with WordPress for client sites.

  The blog shouldn’t be all about company specials and company products.  It should cover related industry news and topics that you know are important to your demographic.  A company selling investments for seniors may post activities for seniors, a daily crossword or sudoku puzzle, and profiles of healthy and active seniors.  If you are offering good, hard information, you can plug your product about once a week.  Try to keep it to news and updates about your products or your company rather than straight out promotions unless you are cross-promoting with a company wide campaign.

  Social Media Press Releases

  There’s a new press release in town.  A social media press release gets your message out to traditional outlets and social media with the simple click of a button.  It incorporates RSS feeds, social bookmarking sites, and many other features.  I could go on about it for a while but it is best just to direct you to a template for it where it is fully explained.

   

  
  Creating a YouTube Page

  If your client has television commercials or video of any kind, you’ll want to set up a YouTube page for them.  For a basic page, this takes the form of a simple YouTube account in the name of the company.  They can then customize their profile page with their own videos and gain subscribers.

  Links to the YouTube profile should be included in their site and blog.  Much like a Twitter page, you can customize the YouTube profile with background art and your own color scheme.  Machinima did a particularly nice job with this.

   

  If the company is willing, they can even bust out things like old training videos that you can have converted from VHS to digital.  The quality won’t be awesome but the vintage value may be something that the customers enjoy.  Anything that attracts customers to the company and doesn’t go too far off the wall is good.  Be careful when you are quoting out that you include pricing for converting VHS tapes to digital.  If you don’t have sufficient expertise in this area, find a freelancer to partner with on video.

• 

  Live Help

  Live Help should only really be implemented if the company makes a clear commitment of personnel to it.  There are often monthly charges for Live Help services and these can add up if there is no instantly recognizable return on investment for the company.

  Due to the charges, you may want to gear any suggestions of Live Help services towards the sales section of your client’s site rather than customer service.  Despite this suggestion, customers looking for service will still use the Live Help portion of the site, so the company should be prepared for that.

  Live Help is also only really good if your client is actively selling something online.  Sometimes a little hand holding is all a customer needs to gain the confidence to purchase from a particular company.  Live Help is particularly useful if your customer has customizable packages that they sell such as software packages or subscriptions with different components.

  If this describes your client, hook them up with any one of the Live Help services out there.  Simply do a search on Live Help and pick the one that you and your customer like best.  You can also ask your customer to pick out the one that they prefer, which may make more sense since they will be buying the monthly subscription.  Once they have selected their service, they can have you implement it on their site for them.  Some Live Help services even include free site implementation, so your services may not even be required.  Your client will appreciate the suggestion when their conversions increase.

   

  What Else Can I Do?

  Obviously the package put together above is meant as a start, not as a finish.  If you have a company that sells youth-oriented items, such as sports gear, you may want a MySpace profile as well.  You’ll notice the line about finding other directories and sites that your customer should be on.  This may involve adding them to directories or commenting on blogs with a link to their site.  It can be argued that this fits more into search engine marketing territory and should be charged out by the hour as ongoing work.

  Overall, it is easy to see where social media can become a huge profit center for web designers.  With it you will move your customers to the next level and prove that you can give them added value that nobody else can.  Except other people who have read this article!

WordPress is a great tool for creating blogs. It works well most of the time, it offers automatic updates, and it offers the numerous benefits of open source software … including the fact that it’s free to use.

WordPress certainly isn’t perfect, though. (Then again, what software package is perfect?) Fortunately, most WordPress problems can be solved with a few tweaks.

Here are nine common WordPress problems and solutions.

1. I’m receiving a “Cannot modify header information – headers already sent” warning

This error message typically specifies a problem with stray characters, some of which are not visible, in front of the opening tag or after the closing tag of the file. Check the error message to find the particular file name that’s generating the warning. (The file name usually is at the end of the error message.)

To fix this problem, you have two choices. The easier choice, if you haven’t made any significant editing changes lately, would be to replace the file that’s causing the error message with your backup copy that was working correctly.

If a working backup copy isn’t available, you’ll need to download the file that’s causing the problem. Open the file in a text editing program that doesn’t create hidden characters; Windows Notepad is a great choice. Do not use a word processing program, such as Microsoft Word, because it sometimes will insert hidden formatting characters in the file. Make sure the first characters are <? and the last characters are ?> in the file. Check for any hidden characters at the end of the file, such as spaces, by moving your cursor to the end of the file and deleting any spaces.

2. The backups of my WordPress database files are way too large

Making regular backups of your database is an extremely important process, one that most people don’t perform often enough. For additional peace of mind, it’s probably best to keep three or four copies of your database backup file, just in case your primary backup file is corrupted. That can be difficult if your backup files occupy a lot of storage space, however.

Most of the time, a large database backup file is caused by certain plugins storing a significant amount of data. Plugins that block spam or that collect statistics on your blog can generate a large amount of data that really isn’t necessary to store in your database backup file.

If you’re using a common backup tool, you should be able to select the specific tables included in the database backup file. Just include the tables that are important to your blog’s data in your backup file; leave out tables that generate interesting data, but that don’t contain the core information for your blog.

Image files can add require a large amount of storage space, too. If you have some image files that you’re no longer using with your blog that are being backed up with your database, try deleting the old image files.

3. WordPress doesn’t appear to be saving my changes

Sometimes, this problem carries an easy fix: Just force your Web browser to reload the page from the server. The Web browser stores copies of Web pages in cache, or a memory area, on your computer. Upon subsequent visits to that Web page, the Web browser loads the page from cache, which allows it to load faster.

If your Web browser is loading a stored copy of the page from cache, it might not be showing your latest changes because it’s an old copy. To force the Web browser to load the page from the server: In Firefox, hold down Ctrl and Shift, and then press the R key. In Internet Explorer, hold down the Shift key while clicking the Refresh button. Depending on your browser’s setup, though, these key shortcuts might not work.

You also can try visiting a proxy site, such as guardster.com, and load your page from there. Because it’s a proxy site, it won’t use cache and will always load the latest version.

4. WordPress STILL doesn’t appear to be saving my changes

Sorry to deliver bad news, but, most of the time, if your browser isn’t causing the problem, user mistakes are to blame. Rarely, you might experience this problem if you’ve downloaded a plugin for WordPress that changes the way your browser cache behaves. If you suspect a plugin problem, you’ll have to check the documentation for that particular plugin, looking in particular for how it clears the browser cache.

Otherwise, common problems that might cause WordPress to appear as though it isn’t loading or saving your changes include making sure that you’ve uploaded the latest version of WordPress and you haven’t make a mistake in the actual coding. You might have to go through your coding line by line to look for mistakes.

5. I cannot delete old posts or pages, I just receive an error message

Users have reported this problem sporadically on message boards over the past several months. Although narrowing down the specific cause of the problem has been difficult — in part because of the sporadic nature of the problem — it appears that certain plugins interfere with the deletion option.

Until more information is discovered about which collection of plugins are causing the deletion problem, you can try a workaround solution: Just deactivate all of your plugins, make the necessary deletions, and then reactivate your plugins.

6. My version of WordPress doesn’t seem to allow workable permalinks

Permalink problems can be especially difficult to solve. Here are a few common potential issues related to permalinks, but, if these tips don’t fix your particular problem, you may need to check WordPress forums for information on your specific problem.

If you recently installed or upgraded WordPress, the software might not have correctly created the .htaccess file, which is key to creating permalinks. (You might even see an error message during WordPress installation related to the .htaccess file.) Such problems can occur because some hosts do not allow WordPress or you to access or edit the .htaccess file, which can cause permalink errors. Most of the time, you can check your Control Panel to see whether your host allows .htaccess file editing.

If you suspect this problem, contact your host to see what types of permissions you need to set on your server to allow WordPress to gain access to the .htaccess file.

7. I can’t seem to block spam from my comments section

WordPress has a few good automated tools for limiting the amount of spam that appears in comments. Blocking spam permanently, however, requires stringent moderation on your part.

To control the WordPress features related to managing comments, click Administration and Settings Panel. You can control all aspects of discussions here. To help in limiting spam, try these tips.

Click the A Comment Is Held For Moderation box if you want to receive an e-mail each time a comment is made, thereby giving you the option of accepting or denying the comment. Of course, if you receive dozens of comments each day, this option will generate an overwhelming number of e-mail messages.

Click the Comment Author Must Fill Out Name And E-mail box, which forces anyone making a comment to provide the necessary information. Some spammers might be deterred by this extra step.

Because spammers sometimes include multiple hyperlinks in their messages, you can tell WordPress to hold comments that have a certain number of links through the Content Moderation section. In the same section, you also can enter keywords that you think you’ll see in spam comments. WordPress will flag any comment that contains these words.

8. A WordPress plugin that has always worked OK in the past suddenly isn’t working

The first potential fix of a plugin problem is the easiest: Make sure that you’ve downloaded the latest version of the plugin. New releases of plugins add features, but they also often fix bugs, including the one you might be having. To check for new versions of your plugins, just click Administration and Plugin. WordPress should list all of your plugins, along with notifications of any that have upgrades available. Click Upgrade Automatically, and you’ll have the latest version. (In fact, checking for the latest versions of all of your plugins is something you probably should do on a regular basis, perhaps two to four times per year.)

If that doesn’t work, you have a few other options. You can try reinstalling the plugin from scratch; perhaps the plugin software became corrupted. Try to remember if you made any other software changes or installed other plugins between the time the problematic plugin was working correctly and the time that it failed. You could have an incompatibility issue between the malfunctioning plugin and the software changes you made. See if the author of the plugin has a blog where you can report your problem. It’s possible others are having the same issue, and the plugin author will create a fix or knows a workaround.

Occasionally, if you upgrade your version of WordPress, you could end up with multiple plugins that stop working correctly. You’ll just have to deactivate the malfunctioning plugins until the author comes up with a new release that will be compatible with the new version of WordPress.

9. I’m trying to delete a WordPress plugin I no longer use, but it’s not working and it’s causing errors on my site

Before uninstalling a plugin, it’s a good idea to visit the plugin author’s site, just to see whether the author has created any specific instructions for uninstalling the plugin. If you remove a plugin incorrectly, it could cause multiple errors.

You’ll also want to make sure you didn’t make any changes to your template files based on the plugin. Some plugins require such changes upon installation. If you can’t remember whether you made such changes, read through the installation instructions for the plugin and see whether the instructions called for such changes to your template.

Once you’ve checked for any problems related to deleting the plugin, take one final step before deleting it: Make sure you open the Plugin Administration screen and deactivate the plugin before deleting it. Trying to delete an active plugin could cause error messages.

Finally, we offer two important tips related to troubleshooting:

At some point, you may encounter a problem that cannot be fixed or that corrupts your data beyond repair. There’s only one solution: Reloading your data from your backup source. Backup your database on a regular basis. Better safe than sorry.

Second, make sure you always have downloaded the latest version of WordPress. Version updates will fix various bugs and security problems as users report them. Some new releases might seem minor, but that minor tweak might be the one that fixes your perplexing problem.

So you’re browsing through your favorite website and found a site that uses a font you love. You want that font too, (and must be as quickly as possible!)… so how do we go about finding out what that font is called? Sounds familiar? Yes… we’ve all been there before!

One easy option is to simply email the webmaster and ask for the name of the font and where to get it.

This can take some time and not all webmasters will reply. So, I’ve decided to compile a list of free online tools to speed up the identification process.

1. What The Font

Developed by one of the largest font providers, WhatTheFont is your number one spot for identifying your fonts. Simply upload an image of the font that you want to ID and upload it to their servers (or add a link to the image on the WTF interface), and the system will show you multiple font results. If unable to find it, it will prompt you to go to their Font Forum where you can post the image and wait for feedback from font experts as to what that font may be called. I’ve used both systems and this usually solved most of my font questions.

WhatTheFont | Font Forum

2. Identifont

This service takes a different approach and finds your fonts by asking a number of questions about the font. This one can be useful if you do not have an image of the font you’re looking for. I’ve never managed to find any fonts using this service to be honest, but maybe I’m the exception! The service claims to be ‘the largest independent directory of typefaces on the Internet, with information about fonts from 534 publishers and 143 vendors’.

Identifont

3. Message Boards: Typophile

This is probably the greatest and largest community of font experts. You get your answers simply by posting an image of the font you’re looking for in their forum. If unsuccessful there, most font sites (usually the free font sites) have message boards where you can post questions and images about the fonts that you’re looking for.

Typophile

4. Bowfint

This site offers a ton of information as well as multiple online tools to help you find your font, by answering questions on the shape of the glyphs of the font in question. Similar to Identifont, but seems to be quicker to input all the data as it’s all in one page while Identifont goes through multiple pages and can get tedious.

Bowfint Printworks

5. TypeNavigator

Developed by Fontshop, this one uses the same principles as the Bowfint system by asking questions about the shape of each character.

Typenavigator

6. Flickr Typeface Identification

flickr has a group dedicated to identifying fonts and another group that showcases fonts used in different images called Fonts in Use which can be useful for quick reference.

Flickr Typeface Identification

7. Lists of Fonts

Sometimes the best way to find a font is just by looking at lists of fonts already created with the most widely used fonts. Here are a few popular lists that you can use for quick reference.

Modern Life Blog

The Logos of Web 2.0

Just Creative Design

Smashing Magazine