Archive

Archive for the ‘Web Design’ Category

Landing pages and Flash intros

October 8th, 2009

Using a “flashy” landing page as the standard entry to your site can cause more harm than good.  Flash movies can be cool and attention-grabbing, but if your visitor is looking for specific information on your site, the added time to view your cute little introduction could aggravate them enough to leave your site before they even arrive at your true Home page.

Combine “Flash” with “Function”
Instead of requiring visitors to click on “skip intro” or “enter site” after 5 seconds of wasted time, consider just making your actual main website page more interesting while maintaining easy navigation to each topic.   If you’re sure that surfers would enjoy your site more with some added excitement, just work backwards and include a cute little button to “View our movie” or “Watch us in action”.  You can have your cake and eat it too, but you’re not annoying the percentage of folks who want to be helped quickly.

When entry pages are OK
To play it safe, take your cue from competing websites.  If you have a beer website and all of the other breweries play cool videos, maybe that’s what visitors will expect of you. (Just don’t forget to give them the “skip” option).  If you’re in the music or art field, an animation or brief movie makes more sense to showcase your talent.  A legal site with dancing lawyers could drive away visitors within seconds – even if the entire video actually would have made a good point if viewed to the end.

Your road to more traffic & sales!

Your road to more traffic & sales!

Guidelines for media use
Everything on your site should support your message.  If a video really would be the easiest way to convey your thoughts, include the link prominently on your index page along with brief explanation such as:
“See how we can help you in this 30 second video!”
Give the viewer control and give the viewer the information they need.

Audio messages can be helpful, but speakers may not be turned on, so again, instead of the default being set to play an audio message when site is entered, show a link to click for the message and include an alternative such as a page with the same introductory text along with photos.  Even a PDF document that can be downloaded for easy printing (of course you list your website address and contact info on the pdf!!)

Make it easy for visitors to find what they want and put control into their hands and it’s more likely that they’ll stick around to the next step of the buying process!

Site Structure and Uniform Layout

September 29th, 2009

Color schemes, font size, layout of pages, and navigation structure must be consistent throughout the site for the benefit of both humans and those search engine “tigers” that we want to keep well fed at all times!

Functional and uniform layout
Keep navigation consistent and clear. It is the most important concern for good “usability”. Visitors are more likely to stay at your site when they realize how quickly they can find their way around. Keep the link names (“anchor text”) as simple as possible. Your home page link should be easy to find so people can “start over” if they get lost.

Large link buttons are hard to miss!

Large link buttons are hard to miss!

Understandable Navigation
Arrange the pages (navigation) as if you are giving a tour which culminates in a purchase or contact. The hierarchy of the site should flow from most requested information to the least important so that significant areas are easy to find.

Keep site structure logical
Create a list or flowchart of the major content areas and sort individual pages into their relevant categories. It will be easier for visitors to locate the specific information they want if the structure makes sense. If a series of pages is dedicated to a particular purpose, include it as a directory name within your hosting account, giving you additional credit for keywords. For example, a shoe store may categorize items by type and then each type by brand. Great choices of directory and page names for “ABCShoes.com” could be:

Running Shoes
ABCShoes.com/running/asics.html
ABCShoes.com/running/brooks.html
ABCShoes.com/running/nike.html

Tennis Shoes
ABCShoes.com/tennis/reebok.html
ABCShoes.com/tennis/brooks.html
ABCShoes.com/tennis/nike.html

Keep the structure relatively flat, meaning as few layers (directories, sub-directories) as possible. Shorter paths to internal pages result in more credit by search engines.

Organize link menus
Ensure easy access to each page. Large sites may need a Site Map, Search Feature or drop-down menu such as at http://www.HealthandEndurance.com. In particular, a horizontal or vertical drop-down menu allows easy categorization of pages, while using a small area of the page. With multiple sub-menus, visitors can jump from one page to another with minimal clicks. New pages can be quickly added at to the appropriate location.

Top and side navigation

Top and side navigation

Maintain consistent layout features
All pages must show consistency in terms of backgrounds, colors, navigation, font sizes, etc. If they don’t look like they all belong to the same website, you don’t look professional. It also invites confusion.

Website Content Tips

August 13th, 2009

For best visitor retention and sale conversion rates, use conversational tone and provide plenty of text to generate interest. Use the terms that people are searching for.

Speak in simple language
Explain in terms that the average visitor would understand. Avoid using industry jargon when your target audience is the general population. It’s easier to trust you if they understand what you’re saying.

bgreatonKeep text easy to read
Use short sentences. Longer sentences are often more difficult to follow. In most cases, a conversational tone will be more interesting and readable than a scholarly explanation. Don’t put too much information on a page. Instead, “continue” on to additional pages.

More text = more content
Don’t skimp on the total amount of overall text. Think of a search engine as a hungry tiger and your text as meat. Feed the tiger! Give it lots of juicy text to chew on. As long as page length isn’t excessive, more applicable words on a page means better results. You can work in many more keywords and keyword phrases in 300 words than you can in 100 words. As long as you break up the text with subheadings, bullet points, and graphics, human visitors will devour it as well.

Repeat yourself (again and again?)
Drive home important points by explaining yourself in a number of ways or by providing examples to illustrate details.

wistarxPut critical information near top of page
Important points and ideas should be visible “above the fold” to human visitors. Help them easily find key content without becoming impatient and having to scroll for it.  Long pages could include some links to “jump” to lower sections of that page.

Place targeted keywords prominently on page
Keywords that are introduced towards the top of the page actually count more towards that page’s search engine ranking as well. This is logical in that the main theme of any page is expected to be discussed at the very beginning. Think of each page as having its own headline, lead paragraph main discussion points, supplementary or supporting information, and finally a summary (including a call to action like “Sign up now!”). Thus, the first and last paragraphs on any page should emphasize the targeted keywords.

Use bold text for keywords
Where your targeted keywords or keyphrases appear on pages, make them appear in bold text at least once or twice to catch the attention of visitors and tigers! Using HTML, these tags are placed around the words: <b>word word</b> 
Yes, search engines give these highlighted words additional increments of credit towards pagerank!!!

free4Use the word “Free”
Find a way to work ‘free’ – in bold letters – into your site, especially the home page. You probably have something that you can give away, even if it is a PDF full of good advice. The internet was built on the premise of ‘free’. In fact, your customers may have typed in ‘free widget’ as a search term!

Use the words “Today” and “Buy now”
Why wait until tomorrow? Order now! Don’t delay! Take advantage now! Enjoy our product today! Be the first on your block! Foster a sense of urgency. Your visitors are looking for reasons to take action. Facilitate the process.

Website Images and Video

July 15th, 2009

Integrate photos and graphics in attractive ways.  Slideshows, photo galleries, videos and flash movies bring your site to life and stir interest, while reinforcing text.

Images on your website reinforce text for better conversion rates.  Pictures, photographs, graphics, diagrams all help visitors more quickly grasp your content.

Bring your site to life with images.

Bring your site to life with images.

Slideshows reduce need for scrolling
For your home page or another page that you wish to keep clean and compact, a slideshow is a collection of two or more alternating images.  You can incorporate effects to transition from one image to another in a set or random order.  Besides showing your story, this is a simple way to bring your site to life with motion.  [Sample: http://www.pcvrc.com]

• Display products – show  samples of your work
• Examine a process -  give a visual tour of each stage of your service
• Text statements / quotes – complementary famous quotes, lists of accomplishments, awards, recognition
• Logos of affiliations – move through logos of your  professional affiliations, vendors, partners, customers or any groups that help build your credibility

Photo galleries tell your whole story
Set aside pages or portions of pages to providing enough photos to satisfy visitors and persuade them to get in touch.  A slideshow may be best for home page, but details pages can devote more space for all to display together.  Make it interactive so visitors can control what they want to view, clicking or mousing over thumbnails of their choice.   [Sample: http://www.jmweddingcreations.com/gallery.php]
• Show a process – include a storyboard from step one through step “x”
• Display o;ptions – show samples of each color, style, or other variation
• Multiple applications – Show samples of different ways to use the same product

Video can be casual
From a 20 second “Welcome” message to a 30 minute movie, allow the visitor to sit back and relax while you introduce your company or a particular product.  Decide whether to upload a movie viewer to your own server or just let the visitor open the movie with an application installed on their own machine.  The most  common client-side pluggins are Windows Movie Viewer and Quicktime.  [Sample: http://www.gndcollects.com]
• Automatically running welcome message on home or about page
• Video clips collection to allow viewing of any particular clip
• Longer movies should indicate their file size and length so the visitor can decide if they have enough time (or fast enough internet connection)
• Humorous video can entertain while explaining your message
• Include link to download (free) movie player in case visitor does not have one installed.  Never make assumptions about your visitors.

A good video can convey your ideas and demonstrate your product much more quickly and effectively than lengthy paragraphs of text.  Search Engines may reward sites with higher rankings, knowing that you’re more likely to please visitors. 
An excellent resource for online video marketing tips is http://www.ReelSEO.com

Flash presentations are fancy
Flash movies can contain a multitude of effects and can integrate video, graphics, still photos and text on a server-side platform, to be independent from the visitor’s computer configuration.  But costs can be greater to create and to change. Some web designers specialize in these sites or can create an individual flash movie for inclusion on “non-Flash” sites.

Images On Your Website- Best Practices

July 1st, 2009

Let’s explore how to best use images on your website to reinforce the text for better conversion rates (for more sales or return visits).

Images reinforce text
Images can include photos, graphics, illustrations, logos of your own or that you create or purchase.  Professionally photographed images may be a requirement for glossy brochures, but there are sections of your website which may work well with simple candid photos or basic diagrams.  “A picture is worth a thousand words”, so use visuals to complement and help explain what you are saying in text form.

Images should reinforce text.

Images should reinforce text.

Dispose of unnecessary images
Do not include images unless they support the message of that particular section of your site.  Don’t confuse visitors by adding photos just because they’re pretty.  If the correlation of images to your text isn’t apparent enough, you are not only wasting space, but wasting the time of visitors.  If they came to your site to find a solution to a problem, a photo of your family on your Services page may aggravate them since they have to scroll past it to find what they seek.  However, that same photo on your “About Us” page may put them more at ease since they appreciate the human touch.

As many images as possible
Insert appropriate photos and graphics, even if they are not the primary subject matter.  On the web, you have plenty of room to add them.  Convey your message in seconds, saving viewers time and the work of reading those extra thousand words.
 - Take the time to gather or photograph images if you don’t already have a sufficient quantity.  Choose the best so your webmaster doesn’t have to guess what to use.
 - Several small images may be better than one larger one, since you have more opportunities to show just what the visitor is looking for
 - Besides products, people or places, images can be used as metaphors or to illustrate a theme:  a clock to signify time savings; a handshake to signify a successful partnership; a lightbulb to signify an idea.
 - Include actual photos of your organization rather than stock (clipart) photos.  You’ll make more of an impact with the real thing!

Crop images
Page space is valuable, so before uploading photos, remove any excess space that is not important and ensure that the subject is centered in the image. 

Optimize images
You must optimize the photo or graphic to reduce the dimensions and file size to an appropriate degree for internet viewing. Photos out of a digital camera may have dimensions as large as 4000 pixels by 3000 pixels and file size of 3-4 MegaBytes (MB). For the web, these numbers must be much lower, for instance, 300 pixels by 200 pixels and under 80 KiloBytes (KB).  Follow these steps, generally:

Open the image in editting software such as Photoshop, Windows Picture and Fax Viewer, or another program that came installed on your PC or came with your digital camera, scanner or printer. Specific procedures are listed below for using Microsoft Paint, which comes installed on many PC’s. When you complete the following steps, you may want to “Save As” a different name, so that you still have a full size original.

1. Crop the image to get rid of any unimportant parts except for the subject(s) of the photo/picture.  Also take the opportunity to adjust brightness and colors.  Snapshots often need some brightening for proper display.

2. Reduce the width/height, maintaining the proper ratio. It may start as over 1200px of both and you need it to be at least under 500px for both for a very large display and as little as 150-250px for a large thumbnail size.

3. Doing both of these will greatly reduce the “file size”. For a regular size photo on a website, we need it to be under 80kb, unless it will be appearing in a new window as a blown-up size. If the file size is too high, many imaging software programs will allow you to reduce the “image quality” (for example, from maybe 95% to 85% or from 10 to 8 on a scale of ten.)
Image filenames
“Name” of image is something like “joe23.jpg” or “DSC001255.JPG” or “logo1.gif”. It is usually case sensitive so joe.JPG is different from joe.jpg.  Do not leave spaces in filename. Underscore character is OK to use.  To prevent typos, it is usually best to shorten image names.

Image format must be .jpg or .gif. If it has an extension such as .tif, .bmp, .swf, .png or something else, it must be changed.  Since working with images can be time consuming, any of the above that you can do before sending them to a web designer will save you money.
More info in my website tips eBook.

Get a Great Domain Name

June 24th, 2009

Finding the best domain name (web address) can help you achieve higher search engine ranking.

Use search terms in domain name
When the internet was in it’s infancy, everyone scrambled for the shortest possible web addresses.  This works well when your name is “IBM” but can get tricky if your name is “Peoria Day Nursery and Children’s Center Preschool”.  Abbreviations can work well if they are logical, but for search engine purposes, “PDNCC.org” is not helpful since it doesn’t include words that people would search for such as nursery, children, preschool, daycare, etc. 

Keywords included in web addresses carry considerable weight with search engines.  They figure that if the word “school” is part of a web address, then that site would likely be of interest to a web surfer doing a search including the word “school”.  So if the name of your organization is “ABC company” and you sell shoes and boots, for SEO purposes, instead of ABC.com you’d be better off with ABCShoes.com or ABCShoesandBoots.com.  Adding dashes (-) to separate words does not necessarily help, and it could confuse people. 

While it is always proper to use the company name as the domain, if your site has a particular geographic focus, including it can give a significant boost in rank.  Using your location as part of the URL helps you show up when visitors key in the city or state they are interested in.  “ABCShoesNewYork.com” tells us your company name, what you sell and where you are.

Many organizations purchase several domain names, to prevent their competition from using similar ones to try to confuse people into visiting the wrong website.
At around $10 per year for each name, purchasing a few could be inexpensive insurance.  ABC may go with ABCShoes.com, ABC-Shoes.com, ABCShoesandBoots.com, ABCShoes.net and have each of those domains forward to the official web address so visitors would end up at the same destination regardless of which of the above they punched in.
More information