Cross-browser compatibility and screen resolution concerns

January 28th, 2010

Are you sure that all of your website visitors see the same thing when coming to your URL? There are many different viewing possibilities such as browser, screen resolution and individual PC color and contrast settings.  View your site in various combinations to be sure that everyone receives the same experience.

Strive for cross-browser compatibility
The same web page can appear differently when viewed in different browsers.  Internet Explorer, Mozilla Firefox, Safari, and others each display code differently, so you must be careful to view pages in each before going live.

Do we all see the same page?

Do we all see the same page?

Usually, you can find common ground by utilizing code (stylesheets/CSS) that all of the major browsers recognize, but there may be cases that you should create distinct versions of the same page(s).  Issues that may arise are the use of features such as image maps, frames, javascript, java applets, or operating system-specific controls.  Test in as many environments as possible!

Layout and design for multiple screen resolutions
As mentioned earlier, another challenge is to make your pages attractive at various screen resolutions.  The vast majority of PCs display 1024 x 768 pixels while most laptops are set to 1280 x 1024.  There are still a number of surfers using 800 x 600.  Setting pages to show a set page width of 800 pixels will display the same on each of these, and if centered, will simply have larger left and right margins to those with greater resolution.

Be careful with the code

Be careful with the code

Validate your HTML code
After designing pages, it’s a good habit to get into using HTML Validator software to reduce errors that could cause display problems in some browsers and penalize you in some search engines.

Things to avoid on your website

January 21st, 2010

Here are some bad ideas—things NOT to do when designing a website. You can annoy visitors to the point of driving traffic away forever.  Large files slow down pageloads.  Pop-up windows create more work and confusion for visitors. Splash or “entry pages” serve little purpose on most sites.

No pop-up windows
Don’t annoy visitors with automatic pop-up windows.  It is fine to allow new windows to open when links or text or images are moused over or clicked on, but let the viewer control that decision.  And provide a “close” button if the window does not disappear by itself.

No spaces in file names
Filenames (including page files and images) should not contain spaces.  Some servers do not support spaces.  The underscore may be used. 
These are good:  “bob3.jpg”, “about_us.html”.
These are not good:  “bob 3.jpg”, “about us.html”.

Audio must be controlled
Sound files must be used with caution.  If appropriate, automatic sound bites or background music can add to viewers’ experience. Give visitors control to turn on and off.  Music can seem very unprofessional for most business sites.  Even on more casual websites, it must be remembered that many viewers—particularly at the workplace— have speakers turned off.  Sound files can also cause delays in loading pages if not properly optimized or incorporated.   

Optimize image files
Compress image files which can cause slow page loading.  Especially if a viewer is using dial-up, a 25 KB image loads more quickly than a 200 KB one, and a 2 or 4 MB photo (right out of a digital camera) can cause severe delays. Don’t make your customers wait! 

Reduce file size of images

Reduce file size of images

Once you or your webmaster learns how to crop photos and resize them to proper width and height for the web, adding new photos will be quick and easy.  Open the image in editing 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 for using Microsoft Paint are listed at http://www.AttractWeb.com/images.php. You should “Save As” a different name, so that you still have the full size original.

Don’t overdue multimedia
Beware of excess multimedia – too many cool effects can cause confusion and hurt search engine rank.  Multiple blinking or moving images can make your site look like a circus.  Even an expertly created Flash movie can detract from nearby text if it commands too much attention.  Keep visual effects as subtle as possible, unless you happen to be a circus, or children’s site or rock band.

Avoid “Splash” or entry pages
Stay away from “Splash” pages unless it’s vital for you to convey an artsy or glamorous feel and can afford the risk of losing visitors. An entry page is usually the index or main page that directories and search engines would review and refer visitors to.  If there is little more than a movie or a handful of words, the search engine tigers will be furious for being given so little content to eat.  Visitors who are pressed for time may not be happy to have to click ‘enter’ to get to the meat of the site either. 
If at all possible, try to combine your impressive introduction to the website with the general overview of home page material.  In that way, your video, Flash movie or slideshow is directly supporting the words of description on the page.

Don't be too Flashy

Don't be too Flashy

Do not overuse Flash
To make websites more visually appealing and interactive, many designers specialize in using Adobe (Macromedia) Flash software.  Flash movies may be integrated into pages or entire websites may be constructed with Flash.  The danger is that more Flash means less content as far as Search Engines are concerned.  A completely Flash site offers no text for the tigers to feed on since it is all just movies and images on each page.  Even the internal links can’t be seen, so Search Engine “spiders” fail to see (and index) all of the pages on the site. 

Flash is fine if used on pages or websites that visitors are already aware of or directed to from more search engine friendly pages.  They can offer video game types of visual experiences that are attention grabbing for artistic or entertainment related themes.

Don’t use Frames
By designing a site with “frames”, certain sections of a page remain in place while others (usually the main section) can scroll up and down.  This is useful for maintaining a navigation area on the screen while reading long pages.  But search engines have difficulty indexing pages, so they are not worth the effort.

Create user friendly websites

January 14th, 2010

Show your visitors that you appreciate them and respect their valuable time. Provide beneficial information while making it easy to find what they need.

Provide beneficial information
Build trust by actually providing solid information.  Free information is good, but high quality free info can set you apart from the crowd.  Extensive FAQ or self-help sections of websites can start a priceless domino effect of word of mouth publicity.  Of course this works best for informational websites that draw revenue from advertisers, but it can improve the reputation and recognition of any organization and help you build a list of warm leads.

Make it easy to contact you
Place contact info, or a link to it, on the top and/or bottom of each page.  Make your first choice of contact most conspicuous, such as easy-to-read phone number, possibly with smaller cell, fax, physical mailing address if they are secondary avenues.   

Easy navigation keeps visitors happy

Easy navigation keeps visitors happy

Explain what makes you special
Why should visitors stay at your site for more than 5 seconds?  What separates you from the competition? What is your niche?  What valuable items or information are you offering at no or low cost?  Answer all of these on your home page and other main pages. 
Use the magic words:  Best, Free, Leader, Lowest prices, Most experienced, etc., then back it up on secondary pages with lists of features, testimonials from happy customers, statistics, side by side comparisons, product reviews from respected sources and instructions for best results.

Say “Thank you”
Thank your visitors for purchasing, completing a questionnaire or just visiting!  Look for opportunities to show your appreciation and they will remember your friendliness.
Set this page up as confirmation of submitting a contact form.

Keep information current
Consider a “Last Modified” date on time-sensitive material, particularly if there is any question as to if this could be relevant only to a previous date or version of the topic being discussed.  Caution:  Only use this if your content is clearly valid.  If the only date on a page is “copyright 1998″, visitors may assume that this page (and possibly others) is old and untrustworthy.

Avoid distractions
Keep blinking text, scrolling text, animated GIF images, and sound files to a minimum.  Use these only if they highlight important sections of text and blend well with the look of the site.  Do not place too many of these moving features too close to each other, to avoid a nice page from seeming tacky.

Better code can speed up the website

Better code can speed up the website

Remind visitors where they stand
Don’t rely on the memory of users.  If an article extends to a second page, repeat its title, possibly with the word “continued.”  During each stage of an online purchase, display the key transaction details on each page.  Include a “Back” button if they don’t wish to continue moving deeper into a particular area.  Guide them throughout your website, prompting them to take action when appropriate.  Clean navigation keeps visitors happy.

Internal and external page links

November 17th, 2009

Abide by ‘best practices’ for linking within a website and to other internet resources. Use appropriate colors, underlining, Anchor text and code to receive the most value.

Links must be obvious
Make internal and external links apparent (blue, underlined) and stand out from the rest of the text on page. If links are bold, make them a different color than other bold text. Roll-over effects such as lighting up are very helpful. It’s wise to include internal links within page text in addition to those in the navigation menu. It facilitates visitors finding the specific details they seek.

Avoid underlining words that are not links
If links are underlined, don’t underline regular text. Visitors may become aggravated when they click on words that aren’t active links, since underlining is a conventional way to present them.

Text links instead of buttons

Text links instead of buttons

Include keywords in Anchor Text of links
Describe what you’re linking to, both internally and externally. You’ll get more credit by using search terms in the text of links. For example, let’s say you’re linking to a page about circus animals. “Click Here” doesn’t use terms people may search for, but “See circus animals” contains the exact phrase and will help give your circus animals page higher rank.

Text links are more valuable than buttons
Since buttons are basically images, even though they’re attractive, they don’t quite pull as much weight as standard text links, so if much of your navigation is based on clicking buttons or other images, at least include an additional set of text links (possibly at the bottom of the page). This keeps the tigers well fed and is also helpful to human visitors who find themselves at the bottom of long pages.

Add more internal links
Besides regular navigation links, include links within the text of pages to guide readers toward important (income-producing) areas.

• For long scrolling pages, links within text prevent people from having to go to top or bottom of page to move on.

• Contextual links make it easy for people to continue to the next step of the process as soon as they’re sufficiently excited. So you may want to include it in several places. Some people will want to read the whole page, but others will be happy to save time by continuing where they are being directed.

Ensure that all links function correctly
Remove dead or “broken” external links and test to be sure that all links function properly.  Bad links annoy visitors and penalize you in search engines.

Tell search engine spiders which links to ignore
This is a little technical, but important. All links on a page share the total value of “link juice” that search engines assign. If there’s one link, it gets full credit.  Three links would mean each gets one third of the credit and so on. More links mean less value per link. If there are certain pages on your site that don’t require high search engine position (such as privacy policy or contact forms or other administrative pages), you can tell the spiders to ignore those links, thereby keeping higher credit among the more important internal and external links. We use the “nofollow tag“:
<a ref=”privacy.html” rel=”nofollow”>Privacy Policy</a>

Treat external links the same way. If a third-party website may have helpful information to visitors, add it. But include the “nofollow” tag if their search engine rank is not as important as other external links, such as a second website you may have yourself!

Find out more about best linking practices and over 200 additional web design tips in my Boost Your Website’s Profitability eBook.

Standard Fonts and Use of Page Text

November 9th, 2009

Use standard fonts for text
Avoid utilizing fonts only you have installed on your computer. For those without them, they will be converted into a dull font and ruin the effect you were trying to achieve. Save special fonts for specific headers and convert them to images. The bulk of your site should use standard fonts so that as many browsers as possible will see it in the way you intended.

Recommended fonts for greatest compatibility are Arial, Verdana, Tahoma, Helvetica and Comic Sans MS.  Make sure your text is large enough to read, especially if your target audience includes seniors!

Small text blocks & white space,

Small text blocks & white space,

Do not center align most or all text
A large amount of centered text can be difficult to read, so except for headings and maybe subheadings, left-align the majority of text across the site.

Keep width of text blocks reasonable
Wide columns of text are difficult to read, so don’t allow them to stretch across the entire screen. Keep the width below five inches if possible

Always check for errors
Check for spelling mistakes, incorrect grammar, and typos because even one error noticed can give the impression that you are uneducated, unprofessional or just not concerned with accuracy. Perfection is expected, so proof-read all pages manually before and after uploading.

Avoid clutter and “busy” backgrounds
“White space” is important so text is easier to read and it is easier to decipher different sections of the page. Make sure that the text color contrasts enough with background colors or graphics to be easily read by your entire audience, especially if that includes visually impaired people.

Be concise
Avoid too much text on main pages of site. Your home page may be fine with only a few paragraphs worth of text, as long as you cover the main points of your site. It is better to have more short pages than fewer long pages that can feel like more work to read through, as long as you keep in mind an approximate minimum of 300 words to give the search engines something to chew on. (each page of this book contains about 350 words) Main pages can direct visitors to more detailed pages.

Make it easy to skim
I repeat: Use lots of subheadings and short paragraphs. Get ideas across quickly. If you are providing more details, put them farther down on page or give them a page of their own for those who are interested.

Many more ideas in website tips eBook!

Email Marketing and Newsletters

November 2nd, 2009

One of the most effective internet marketing methods is gathering emails to build a list of prospects.  You can then either send individual (personal) messages and/or send messages to the entire list occasionally or on a regular basis.  This allows you to keep your products or services in front of prospects along with the opportunity to build a relationship with them.

Build your list by gathering contact info
To use your website to generate a list of prospects, you can take many different avenues:

  • Offer something for free (PDF, white paper, eBook) to anyone who submits their name and email address
  • Add a “Newsletter sign-up” form in prominent places on your site
  • Add a checkbox to receive regular emails on your contact form
  • Run a contest, take a survey, or any other way to gather addresses to add to the list.

mail

Once on the list, be sure that any regular emails allow for people to “opt out” so that you don’t start to annoy potential customers.  As long as it is the truth, tell them that their contact information will not be sold or shared.  Display a privacy policy to put visitors at ease.

Marketing to your email list
The larger the database, the more valuable it is and the more worthwhile it is to take an organized approach to converting visitors into customers or to ensure a greater re-sale rate.  Individual or random messages can take lots of time.  Sending bulk emails in text or html format allow you to better track the information that is being sent out and give you more bang for the buck when you have timely promotions or new product announcements.

Give FREE stuff or something of value!
To ensure that people actually read your messages (and maybe even pass them on to friends), be sure to include useful information or offers that contain real value.  Don’t just try to sell, sell, sell or your messages will be ignored or sent to their spam folder.

Email marketing vendors
You should consider one of the popular email marketing software solutions to easily send bulk emails, formatted monthly newsletters and auto-responders to build your customer or prospect mail list.  They save time by providing newsletter templates that are easily customized with your logo, images, and information.  Lists are automatically updated.  Price depends on the number of contacts on your list and usually start at $9.95 per month or less. 

Start a free trial newsletter
Get more info or start a free trial for Constant Contact, Vertical Response, or iContact at our email marketing page.

Here are some of the benefits, according to iContact’s website:

  • iContact has whitelist agreements with major ISPs so our clients can enjoy industry-leading deliverability. A third-party company, Pivotal Veracity, scores our email deliverability rates between 98%-99%.
  • Track the performance of your email blasts at a glance with our charts and graphs that are populated in real time.
  • Use one of our 250 professionally designed email newsletter templates or one of your own for beautiful permission-based email marketing campaigns.
  • Easily set up, organize, and leverage your mailing list to boost your email marketing into overdrive!
  • iContact combines sophisticated features such as surveys, autoresponders, and RSS feeds into one easy-to-use all-inclusive product.
  • Ready to start a free trial?  Check out Constant Contact, Vertical Response, or iContact at our email marketing page.