Ok, you’ve just purchased that new web development software and you’re ready to jump into getting your website posted so that you can start raking in the cash. I know just how you feel. When I first purchased FrontPage 98 years ago, I couldn’t wait to get going. I was putting together a website for the Church and was excited about the opportunity to just be involved with the internet. Several days back, I was searching for JavaScript code that I knew I had used on that site. When I pulled up the site my reaction was YUCK! I couldn’t believe that I had even told anyone that that site existed. Content was super. Looks, navigation, color mix, and everything else about the site was anywhere from poor to yuck. As time passed, I spent more time looking for nicely designed sites and learning what is visually appealing; i.e. what makes a visitor stick around and see what you’ve got to offer. Let’s face it. There is stiff competition out there and we want our visitors to stay put and look at our product(s) or service(s).
An excellent resource for proper web site design is Website Design From Scratch. They don’t try to sell you anything and they have excellent examples.
Almost everyone out there who is coaching others on website layout has a list of what they feel is important. I’m no different. Here’s things you should consider before dropping the first line of text on a HTML page:
Many web hosts offer templates you can use. If you’re using FrontPage, you’ll even have themes that are provided free with the software. Should you use them? Maybe. Before you do, take a look around at your competition, as well as the award winning sites on the Internet. How does the template compare in looks to the best of class (i.e. The Webby Awards, American Design Awards, American Association of Webmasters)? If it looks really poor, consider something else.
Most people traveling the Internet are using a screen resolution of 800 pixels wide by 600 pixels high, and a color depth of 65,000 colors. Page layout should be considered using this criteria to ensure a visitor experience that is pleasing.
Have you ever visited an eBay auction where the seller has used stock graphics from the manufacturer that is so large it won’t fit in a 1024X768 window. People selling digital cameras are the worst offenders! When you have a graphic that is large, consider that most users have a screen size setting of 800 Horizontal X 600 Vertical, so no graphic should exceed that size. Now let’s talk reality… Should your graphic occupy your whole screen….no supporting text…. no navigation….Sounds kind of silly to me. For an 800 X 600 screen setting the maximum size graphic should be no larger than 400 X 400. Smaller is preferred. I try to size graphics anywhere from 200 to 400 pixels for both horizontal and vertical. Not only will your page layout be more appealing, you will have significantly reduced your page download time.
Now, there are cases where the detail is needed. So what do you do if you need the user to see the super-sized graphic? Use thumbnails on your web page that launch a new browser window with the super-sized graphic. Conversion utilities are built into the leading web site development software packages (FrontPage, etc.). You insert the full size picture into your webpage and the utility will automatically create a thumbnail replacement with a link to the full-sized image. Keep in mind that when you tell the super-sized picture to load into a new browser window, the browser recognizes this as a pop up, so make sure you put text under the picture asking the user to enable pop ups.
High resolution graphics, even in 400X400 or thumbnail sizes can still take a long time for the user to download. Here’s where a program such as Adobe Photoshop comes in handy. It’s “Save for Web” feature allows you to reduce the image quality from 100% down to 1% and reduce the size of the image. Handy preview windows allow you to choose the best tradeoff between file size and picture clarity. Resizing the image in Photoshop and then using the “Save for Web” feature will help to keep your page size small, was well as the download time fast.
There’s no reason for missing graphics. When you upload your website, you MUST test every page. If a graphic isn’t showing up correct it. Generally it is a path problem on your website. If everything seems to be working ok from your computer, try your web site from another PC. If a graphic is missing, it’s likely your HTML code is trying to access a file on your personal computer rather than from the web site. If you don’t have access to another computer with Internet access, review your code and make sure there are no file references going to “C:\”.
Ever been to a homepage that should have been broken up into about 10 individual pages? Your homepage is the entry to your website and should entice the visitor to want to know more. If you can’t get all of the information about your product or service onto a page that doesn’t scroll into oblivion, brainstorm the layout and look for logical breaks to split the information onto as few pages as possible.
|
Who cares? I don’t and no one else will either. If your site is under construction, people will move on to something more interesting and you’ll lose business. If it’s under construction, it doesn’t belong on your site. When it’s ready, launch it!
On your homepage, be sure NOT to use the phrase “Welcome to my Homepage.” Sounds silly, but it really portrays the image of the thousands of amateurs who have posted their site on Anglefire.com. Anyone and Everyone has a website now days, so you have to be different and professional. Your business is a professional business and you have to portray your product or service offering as just that! Check out any professional business website out there and you’ll be hard pressed to find one with the words “Welcome to my Homepage.”
This is a topic, that is somewhat subjective. More of “I know what I want, and I’ll know it when I see it” kind of thing. Whitespace is basically putting open areas between text and other text, or between text and graphics. It can be accomplished in an number of ways, but perhaps the best way is to actually see the difference between good and bad examples. Here’s a few examples
GOOD EXAMPLES OF WEBSITE LAYOUT:
http://www.webdesignfromscratch.com/best_and_worst.cfm
BAD EXAMPLES OF WEBSITE LAYOUT:
http://www.webdesignfromscratch.com/best_and_worst_worst_sites.cfm
There are literally thousands of fonts available to the web designer, some free and some you have to purchase. Unless there is a specific reason for a specially designed font style consider only the use of the Arial or Verdana fonts. They are supplied for free to all computers, making them the standard of choice for most all web sites.
Keep header font sizes consistent between all pages. Make sure your body text is also consistent across the page and across your web site. The Scent of Success web site uses Arial fonts with the headers sized at 4 and the body text sized at 2.
This is a touchy subject to a lot of web developers as having a FLASH intro screen is really coooooool! I love the technology. Many of the online videos are now streamed from Flash. There are some really fantastic things you can do with flash, as well. But should you use it? Do you need it? Does it add value to the site, or just show that you know how to do some really coooooool things? For most sites, Flash is a huge overkill. It adds to the download time significantly and generally (in the way most people are using it) adds little value to the site. All that said, and to be fair, there are websites that do a really good job with flash (i.e. http://ge.ecomagination.com) and it does add value, however, for a single product or service, using Flash for anything other than a training video or personal assistant is a huge waste of your visitor’s download bandwidth.
This mainly has to do with background color vs. text color. I wasted many weeks (really) trying to get a color scheme going that I though would be terrific.
You can take a look at it
here. I was in love with the background concept. The first problem I had was people’s screen sizes. They jacked with my gradient design. To adapt, I used a script to detect the screen size of the user and then created special screens for each screen setting. Since I was using a frame design with 4 frame areas that meant 4 files for each screen setting.
When I finally defeated those obstacles, it was time to put text on the screens. I was using a gradient background so now I had areas that were light and others that were very dark. So now I had to limit my text to the centermost portion of the screen (dark area) and try to find a light text color that would work. Yellows and whites seemed to bright. Versions of grey seemed just that; grey. Nothing was working. I finally chucked the whole idea as a very bad learning experience. (It took me an hour, just to get all the files in the right place so you could
view this
example. I also left the include errors in the code so you can see the text coordination obstacles). All in all, I had forgotten the
KISS principle (Keep It Simple Stupid).
Light background colors with darker text not only lend themselves nicely to a whitespace appearance, but are very appealing to the eye. Take a look again at the
examples of good website
layout. You’ll likely never see a dark background in this list.
This is a problem for all large websites that link to other sites around the Internet. The Internet is constantly changing, so links that work today, may not work tomorrow. Check your website links often. Web development software such as FrontPage will do the job for you allowing you to verify bad links and correct them before they become obvious to your visitors. In the event that your visitors locate a bad link, make it easy for them to report the bad link to you. Make sure your code is smart enough to pass the page URL to your Contact Us form so that you can easily rectify the broken link.
With all the buzz about identity theft, many people are scared stiff about doing business online. While there are still many who are not, you must provide a secure shopping environment by incorporating SSL. If you’re using PayPal, this won’t be a problem, however, if you are depending on merchant software from your web host, be sure that your checkout process incorporates the protection of SSL.
with all the pop up protection adds that AOL is running, even someone who has never visited the internet understands the annoyance. if you haven’t heard of pop ups, you’ve surely encountered them first hand, especially if you venture onto more questionable sites. Even latest versions of browser software block pop ups, even the legitimate ones.
It seems like there are an endless number of Java, JavaScript and DHTML students out there just trying to design the next really cool thing for you to include on your web page. Things like Spinning Navigation, Flashing Text, text that zooms in from part of the screen, etc. You name it, someone has probably thought of it. Should you use it? Generally I would say no. It often distracts from the message of your web page and increases the download time. Categorically, I can’t say that it should never be used, however. Determine if it truly adds value before considering its use. Flashy stuff may attract kids and monkeys, but may not keep the serious buyer on your site.
Special effects can also cause screen flicker and interfere with form field entry. If you must use the fancy stuff, verify that you haven’t created problems that will cause your site visitors to move on down the Internet highway.
I cant thnk of anytng wors then a porely constrcted page thet is filled with speling and grammor errors. It hurts just to read the previous sentence, however, it’s really surprising to see the number of professional sites that have spelling and grammar errors. Use a editor that checks for these types of errors and correct them. Proofread your entire site and have someone else do it as well. Make sure that all sentences are easy to read and clearly understood. While I’ve tried to eliminate all errors, it’s likely on a document of this size that I have overlooked many. I always appreciate folks who take the time to tell me how to make improvements to my copy.
Never put links to other websites on your home page. The homepage should be devoted to you and no one else. While many of the free sites will have click through links posted there, this is not the type of website you are building. You are selling a product or service and you want the visitor’s attention focused ONLY on you and your product line.
If you decide to provide links to other sites, make sure that you ALWAYS launch the link in a new browser window. That way when the visitor has finished viewing the material from the other site and they close that window, they will have your window displayed for further consideration of your products.
Make it easy for your customer to contact you. If you’re not positioned at your computer 24 hours a day (and who is) make sure that you set up an appropriate auto responder to let your questioning visitor know that you will be responding to their email. And when possible, provide a phone number for customer service. This is a really nice touch as it adds credibility to your business. There’s nothing worse than a website without a contact page with detailed name, address, email and phone number information. Make sure the Contact link is included in the navigation area and at the bottom of each page.
If you are offering free stuff from your site, make sure that delivery of the free items is immediate. There’s nothing worse than a free offer that is unfulfilled. Nothing free about that.
Your navigation must be clear to the user. Orphan pages (pages with a way in, but no way back but the user’s browser back button) are unacceptable. Make it easy for the user to get around your site and know where they are at all times. The out of the box FrontPage style navigation doesn’t always meet this need. You may also want to consider a sitemap page that will allow users to see the total layout of your website and easily navigate to anyplace on your site. If you incorporate a sitemap, make sure the link is not only included in the navigation area, but also at the bottom of each page.
Even if you do everything above right, you can still have a pretty crummy looking webpage. Misplace graphics, scrunched together text, or any other mix and combination of page objects can make the most relevant text uninteresting. Consider the layout of every page carefully. Look at how other sites are incorporating graphics relative to their text. Many webmasters use tables with hidden borders to control placement of graphics and text. Find the best approach that makes your page attractive and pleasing to your site visitor. Then get someone else’s opinion.
You site must be multi-browser compatible. You may think that everyone out there is using Internet Explorer, but there are thousands that are using Netscape or 3rd party browsers. If your site works well with IE or Netscape, you can be pretty confident that you have achieved cross browser compatibility.