WDTalk

When a visitor finds your site - imagine it’s like your best friend knocking at the front door. You want them to come in, make themselves at home and stick around awhile. Great web site design can make that happen. Whether you’re selling a product or service, or simply providing information, you want them to feel they’ve come to the right place.

Imagine you’re Judy, an online shopper - and you’re on the hunt for a flat screen TV, possibly 3-D. You start your search on Google by typing “flat screen TV”, and your search returns over 29 million results. What are the odds Judy will look beyond the first ten results? Pretty slim! What if she typed in “3D flat screen TV?” Hey, we’re down to 8 million results. Maybe she’ll check out the first two pages of results.

Local relevance is important - What if Judy didn’t want her new flat screen TV shipped from who knows where, and wanted to find one locally? What if she lives in Phoenix, AZ and typed in, “3D flat screen TV Phoenix AZ?” Not only will her search query be reduced to 32,000 results, the odds increase dramatically that she’ll search through more results to find the TV that appeals to her. She’s now very focused.What if you were selling 3D flat screen TV’s in Phoenix? Would Judy find your site? Possibly, but not necessarily. Is the verbage, 3D flat screen TV Phoenix AZ, anywhere on your site? Is your site indexed by Google, Bing or Yahoo?

Is your site in a good Internet neighborhood?
Internet neighborhoods are very much like real life neighborhoods. Ask your friend where to find that TV and I guarantee you that they (probably) won’t send you to a guy who is selling them out of the back of a truck. They’re going to point you to a reputable store. As well, it’s in the search engines best interests to point you to the most relevant websites. They have billions in advertising dollars resting on their recommendations.

What could land your website in a bad neighborhood?
Using blackhat SEO techniques jumps to the front of the line, followed very closely by allowing links back to spammers. If you’re running a blog or forum, be sure to moderate the comments and weed out the ones linking to obvious spammers.

The Power of the Internet - The Internet has leveled the playing field for many small and medium sized businesses. It’s not uncommon for many many more visitors to find you online than could ever find your brick & mortar location. Just as that sign on the front of your business and the landscaping surrounding your location is meant to draw walk-in prospects, your website is very much the online face of your business or organization. Your goal should be to make the best possible impression with each and every visitor. Following some very simple basics will help tremendously.

Visual Guidelines - It’s best to select a color theme that supports your site’s goals without overwhelming your visitors. Simple and pleasing versus busy and cluttered.

Navigational Guidelines - Make it easy to get from Point Query to Point Buy. Include FAQ’s to answer questions.

Add a Touch of Personality - Your site needs to be different from the sites your visitors just left. Add a touch of personality, but retain consistency across the entire site. Emphasize what makes your business unique.

Graphics and Text - The right mix of graphics and text is important. Long unbroken blocks of text will send visitors fleeing for the exits. Too many graphics may impair the search engines ability to index your site. You need a balance of graphics and text to make your site visually compelling.

Attention to Detail - Broken links give the impression that your business is less than professional. If your site is not in good working order, the perception is frequently that neither is your business. What you’re looking for is a quality experience with your visitors.

I know we all have our favorite links - for everything from hosting to retail outlets and services. I thought I’d ask if anyone wishes to share some of their favorite website design links?

Some of my favorites are:

Website Design Tools
Color Wheel - Color choices can make or break a website. Use the online color wheel at this site to find the right color and HTML codes for your site.

WhatTheFont - Have you ever seen a font that you like, but have no clue what it is? Submit an image to WhatTheFont to find the closest matches in their database.

WAVE is a free web accessibility evaluation tool provided by WebAIM.  Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.

Webmaster Tips Library at NetMechanic are a must read for website designers. Here you’ll find in depth articles on everything from Accessibility, Search Engine Promotion, HTML Tips to Usability.

W3Schools - My absolute favorite is W3Schools. Wow, if you only link through to this one site, it’ll be worth all the others combined – it’s that good. Hungry for website design info – you can certainly fill your plate here. They even offer online developer certification courses for HTML, JavaScript, XML, ASP and PHP.

Have you ever wanted to create your own fonts? A quick Google search returned these results, plus plenty of commercial ($$$) applications.

Font Constructor - Font Constructor is a standalone mac only application to build fonts in an intuitive way.

FontForge -  An outline font editor that lets you create your own postscript, truetype, opentype, cid-keyed, multi-master, cff, svg and bitmap (bdf, FON, NFNT) fonts, or edit existing ones. Also lets you convert one format to another. FontForge has support for many macintosh font formats.

FontStruct –  Is a free font-building tool sponsored by the world’s leading retailer of digital type, FontShop. This program lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks. You create ‘FontStructions’ using the ‘FontStructor’ font editor.

Once you’re done building, FontStruct generates high-quality TrueType fonts, ready to use in any Mac or Windows application.

Raster Font Editor -  Is an easy-to-use font editor for the creation of bitmap fonts. It supports several file formats and has a very simple yet fully customizable user interface.

The application can open font resource files (*.fnt) created by other tools such as Borland’s Resource Workshop. It can import DOS 8×16 fonts, fonts from BMP images and can convert TTF fonts to raster fonts.

You can save your raster fonts as Font Resource (*.fnt), Resource Script (*.rc), Text (*.txt) and Windows Bitmap (*.bmp). Saving as Text file is useful for debugging purposes and creating text representation of characters

Type light  - Is a freeware OpenType™ font editor.  With Type light you can design, edit and convert OpenType TrueType (.ttf) and PostScript (.otf) fonts. Type light is free for personal and limited commercial use (you can sell your fonts provided that is not your profession). Please read the license.

Features:

• Convert between OpenType TrueType and OpenType PostScript fonts.
• Edit glyphs as TrueType or as standard PostScript curves.
• Create and edit fonts containing up to 65535 glyphs.
• Map glyphs to any of 65536 unicode characters.
• Input OpenType metrics, names and parameters.
• Refer to an easy to read, colour PDF manual.
• Obtain free support and technical assistance.

System requirements: Windows 98, 2000 or XP platform, 128MB min. [v3.0.011]

Selecting which color theme to use – when developing your website often comes down to selecting a pre-coded theme that appeals  to you specifically, but will your target audience perceive it the same way? After all, color is a perceptual characteristic of light. We see the visual spectrum in colors of red, orange, yellow, green, blue and violet, but we also perceive color by its chroma, intensity, saturation and luminance – and more importantly, globally we perceive the same color schemes quite differently by regions and cultures.

Understanding the basics of  color helps you – develop websites that deliver your message, products or services to a targeted audience. Essentially colors are wavelengths of light that we see as reflections (those wavelengths that have not been absorbed). We identify these reflections of light with names, but in describing them we also need to examine variations – saturation, lightness, hues and so on. The color red can have variations of pink and crimson, but each of these also can be differentiated by its own chroma, saturation, intensity and luminance.

For reference, chroma is defined as how pure a hue is in relation to gray, and saturation as the degree of purity of a hue. Intensity is the brightness (or dullness) of a hue. Luminance is a measure of the amount of light reflected from a hue. Colors with higher content of white (think light bulbs) have higher luminance. Of course, unless you’re using the newest fad in energy efficient light bulbs which are about half as bright as the old ones. Back to color basics …. adding black increases the shade whereas adding white increases the tint.

Quite often I’ve been asked to match colors on a website - to those on a glossy brochure, but matching those goes beyond simply selecting the name of the color, or its chroma, intensity, saturation, luminance, shade or tint. The methods for producing perceived color vary by process. Most printing presses use combinations of Pantone colors (ink) and color copiers use combinations of CMYK toners (cyan, magenta, yellow and black) while most TVs use combinations of RGB (red, green and blue) and more recently yellow. I just read an article this morning addressing matching Pantone colors in Illustrator and Photoshop – very interesting.

To make matters worse – each person viewing your website may have their monitors color tuned differently – some to display 256 colors and others 16 million colors. Heck, some have their PC’s tied to their big screen TVs. I’m not there yet.

Web design has become a hot topic recently (updated)

Everywhere you look, there’s advice on what works and what doesn’t work in web design (including coding for SEO). While the intent of websites is to convey information, the design of your site weighs heavily whether anyone will actually find and read your content. If you’re running ecommerce, design becomes critical.

Users spend most of their time on OTHER websites
Their experiences on other websites form their expectations for YOUR website. Take some time to research what others in your industry are posting. Your competitor may market inferior products and services, but still outsell you online. Why? The perceived value of their products and services may be enhanced because of the way they’re presented online.

What turns users OFF?

• Excessive use of flash
• Poor navigation
• Excessive use of animated GIFs
• Obtrusive background images
• Unreadable font and background color combinations
• Clutter
• Blinking or scrolling text
• Blatant keyword stuffing
• Irrelevant content based on their search query
• Broken links
• Splash pages with no important information
• Internal links that pop up in new windows
• Itty bitty type points
• No way back to the previous page
• No way back to the home page
• More than 2 or 3 consecutive words in ALL CAPS
• For ecommerce – NO PRICING
• Poor grammar
• Audio with no OFF option or auto loading
• Loooooooooooong paragraphs
• Embarrassing misspellings
• Slooooooooooooow page loading times

What turns users ON?
This ties directly to what users become accustomed to on other sites. You don’t have to spend thousands on design work – just enough to give you an edge or a niche. Of course, these help:

• Effective use of flash
• Fast page load times
• Appropriate amount of white space
• Relevant content based on search query
• For ecommerce – PRICING
• Inuitive navigation
• Unique theme with READABLE font and background color combinations
• Professionally written content
• Easy to get from Point “Search Query” to Point “Buy”

Recommendations

• If your plan is to make money from advertising, then go for a ratio of not less than 70-80% editorial to 20-30% advertising.
• Avoid pop up windows unless it’s for a feature like LiveChat.
• Compress your images to increase your load times.
• Don’t make any line of text longer than 500 pixels. Longer lines of text make it difficult for the viewer to scan back to the next line.
• Increase your leading (the space between lines) to at least 1.5. This will help readibility.
• Don’t underline words if they’re not hyperlinks, and do use color/descriptive words to highlight links.
• Test your links frequently to assure they’re functioning correctly.
• Don’t hotlink to other sites (other than your own).

Designing your site for e-commerce – begins with keyword research, matching keywords and phrases that most closely match today’s search queries. Why? Because designing a site with keywords or phrases that no one searches for makes conversions very very difficult (lack of traffic). Of course you can still advertise via article, blog and forum posting, or micro-sites, which should provide some very targeted leads, but you lose the viral power of organic search results.

I’ve seen sites that dominate –  SERPS (search engine results pages) for their particular niche, but can’t convert a prospect. Frequently, keyword research reveals that NO ONE is searching for that niche. In simple terms, if you’re getting 6 pageviews/month, it doesn’t matter if you have the best design, intuitive navigation and a kick a** shopping cart, your ROI (return on investment) will suffer.

Taking keywords one step further - selling anything is about the perception of providing value & solutions, and this applies to everything from selling toothpaste to cloud hosting – which leads us to Landing Pages and relevancy, and on to compelling calls-to-action. The words you use cross-site and intra-site need to be relevant to the search query. Getting traffic from a search query that leads to a product or service that’s either in conflict with the search, unreadable (poor theme or contrast), not compelling or out of alignment with the rest of the industry won’t convert well.

My recommendation - absolutely use keyword research tools to match the products and services you want to sell – with the keywords and keyword phrases currently entered into search queries – that will produce sufficient traffic to sustain and grow your business.

I routinely stumble across – WordPress sites using default themes … and move on. More often than not, their content is composed entirely of Google Adsense ads and RSS’ed articles. The good news is I also routinely find WordPress sites with beautifully customized themes, many of them corporate websites. And they were designed by the average Joe, with information freely available on the Internet.

For the average WordPress author – WYSIWYG works well. You can switch back and forth between HTML and Visual window panes to create an impressive website. Part of the recent popularity with WordPress though, can be attributed to the ability to customize its platform.

Custom fields can be anything from – storing URL’s of images that can be pulled to the home page to create magazine style layouts – to adding HTML to your post titles.  

What’s to gain by customizing your site? My answer is ‘perception of value’ to your targeted audience. Value drives traffic, rankings, SERPS and conversions.

To explore the - possibilities of using custom fields to fully personalize your website, I recommend:

10 Awesome Things To Do With WordPress’ Custom Fields