October 2000 || Volume 01, Issue 03

How to Build a "Professional" Web Site

You all know the old saying... "Build it... and they will come." Our question today is.... "But will they stay?"

It's quite possible that I'm going to ruffle a few feathers today... but before you get out your web-whacker let me explain how I came to these conclusions. Perhaps you may change your mind about things. I know I certainly did -- I must confess I did put up a good fight -- but logic (and hundreds of hours researching this topic) won in the end! (Who says you can't teach an old dog new tricks?) So please send me your feedback (use the feedback form or email me). I promise to be open-minded to your comments and suggestions... and let me assure you that I "bend"... I don't "break" -- so be brutally honest!

OK... let's get started!

My philosophy...

...for a successful web site is easy... Fit, Form, Function... and keep it simple!

Today, anyone can create and publish a web site. Online site builders and tools have made it possible for even the most technologically challenged people to have a presence on the web. Heck... a 10-year-old can even do it! And hey, if you've got FrontPage, PageMill or any one of a number of WYSIWYG* HTML editors - you're in business! As a professional web designer, you know this is sad but true as you lose yet another job to somebody's nephew who can do the job for less than half of what you quoted! So, we're here today to talk about what sets the professionals apart from the amateurs!

(*WYSIWYG: What You See Is What You Get -- if you're lucky!)

There are 2 types of web sites... personal and business. Here are my definitions (and qualifications) for each:

Personal:
These types of sites are frequently family-based and are a great way to share information, photo albums, stories and so on with family and friends no matter where they live. These sites generally do not have their own domain name and usually inhabit space on FREE sites like Angelfire, GeoCities, etc. Personal sites are easily recognizable by their psychedelic pattern backgrounds, big, slow-loading graphics, tons of canned clipart, sound clips and just about every bell and whistle they can get their hands on! And of course, for a personal site... this is OK. Family and friends will wait forever to see a photo of the new baby! And if their browser crashes, that's fine too! (must be the Internet having a bad day!). And if the navigation is a bit shaky, so what! Friends and family are going to love it anyway -- because you made it! So go crazy -- have fun -- try anything... you haven't anything to lose on a personal site.

Business:
A business web site is not much different than a business right here on the ground. Whether it's down here, or up there, it has a purpose: to sell a product, provide a service, inform, educate -- the possibilities are endless. Their goal is generally to make money -- and that's serious stuff! With your financial success hanging in the balance, it's very important not to lose visitors to issues which can be prevented such as browser and/or platform incompatibilities, improperly implemented javascripts crashing their browser, impossible navigation that sends visitors away from the site, illegible text.... and so on. Business sites must be quick, attractive, easy and efficient -- Fit, Form and Function! Just how do you accomplish that? Well now, I'm so glad you asked!

[Editor's Note: 50% of the business world really needs to read this column]

Web Site Construction 101 -- Now in Session!

Just because you have a computer and software doesn't mean you are a web designer. Some of us are born with talent and others train for years to develop the necessary skills. There is just so much more than making some pretty graphics, throwing in some text and creating a few links. It's about planning and the skillful execution of those plans. It may surprise you to know that you don't need any fancy tools to build a great site... a text editor and decent image editor can do the job (I use SimpleText and Photoshop). It's how you use those tools that makes a difference.

A professional web designer will place the focus on overall design and content rather than technology (although sometimes sites end up being "client driven" and nothing we can say will make them change their mind about having "BLINKING" text or some other silly [and problematic] thing. But we are confident in the knowledge that we warned them and that we eventually will get to say those magic words sooner or later -- "I told you so!").

Something very important to understand when developing sites is that while we are designers, viewers are not! They have come to your site for a reason -- not to be dazzled by your flash skills. Most viewers will not bother waiting for large files to complete loading -- they want information -- and they want it now. Let's help them on their journey for answers by creating sites that deliver.

(BTW - if you'd like more in-depth information on Designing Good Web Sites, please check out my latest Webmistress column at Applelust.com. Enjoy!)

Planning your web site

Architecture:

1. Site Purpose: what is the prime function of the site -- sell products, give information, provide a service, etc.?
2. Site Personality: obviously a site for an accounting firm should be "corporate" looking with subdued colors, while a site that is selling jelly beans would have a fun, colorful look.
3. Target Audience: is the target audience male, female, youth, seniors, middle class, etc.?
4. Research and Analyze Competitor Sites: this is a rich source of information.
5. Branding: your logo symbol or word mark should be prominent and repeated on every page -- preferably in the same location.
6. Content and Function Requirements: are on-line order forms required? who will write copy?
7. Site Map Plan: make a list of all the pages that are going to be required (don't forget those privacy statements and a site map or table of contents).
8. Layout: try to allow for about 25% white space -- avoid clutter, decide on construction method: tables are better than frames for many reasons (search engines for one) and be sure to use "dynamic" structure to allow flexibility for various size monitors.
9. Color Themes: choose appropriate colors - perhaps selecting colors from the company logo and choosing additional complimentary colors.
10. Fonts: keep to an absolute minimum and please stick to sans-serif fonts as they are easier to read on the web than serif fonts (remember... this is the web -- not print).
11. Graphics: keep graphics to a minimum and make sure you keep both the physical and file size as small as practical.
12. Navigation: keep it consistent, concise and easily accessible.
13. Other items: Forms, Animations, Sound files, Javascript (effects etc.) to be used wisely and sparingly.

Considerations:

• Fast loading
• Cross platform/browser compatibility (and don't make visitors have to download a plug in to view your site -- most won't bother)
• Easy navigation
• Easy readability
• Proofread for spelling and grammatical errors
• Fonts and colors (minimal fonts and complimentary colors that are easy to read)
• Layout compatible with various monitor sizes and resolutions (keep scrolling to a minimum)
• Search Engine friendly
• Minimal scrolling
• Consistency
• No broken links or 404s (and if you have links that take visitors off your site - consider opening a new window for them with the target tag -- that way they can just close the window and be right back at your site)
• NO "Under Constructions" signs... a nice little note stating the particular page is under development and a date of availability is nice. And you could add "Mind-it" page monitor to alert visitors when it's up and running. (great marketing tool and good opt-in names for your database!)

Test Your Site

And Test it Again!

Make sure you test your site thoroughly! (I can't stress the importance of this enough!) Check it on Macs, PCs and UNIX if possible. Check it with Netscape and Explorer (and iCab and Opera if possible). Check it on various size monitors (best to design for optimum fit on 15" monitors) And don't forget to test your loading times based on 28k modem connections. (Yes Virginia, some day we'll all have ADSL or cable connections)

Tips:

• Try to keep scrolling to a minimum (sure I've said this before... but it's important)
• Watch out for 3rd party services - counters, guestbooks, banner ads etc. When they're down, so are you!
• Utilize "text" navigation at either the bottom or top of the page as well as the left side and always have a site map, and home button
• Don't force visitors to download a plug-in to view your site

Other factors (beyond your control) that can affect loading times are:

• Internet Traffic
• Your web server traffic and performance
• Quality of visitor's connection to the Internet
• Type of computer your visitor uses

Handy Links

Special Characters:

What's Wrong with my Quotation Marks? Check out Webmonkey's Special Character Reference.

Browsers:

All browsers have their own little quirks. Make sure you test your site. Here's a great reference chart that shows you the features of the major browsers... Webmonkey's Browser Reference Chart.

Colours:

Stick to web-safe colors! Use the 216 Web-safe Colors Chart.

My final words... either get cracking and learn this stuff - or hire a professional. The stakes are just to high to risk being another dot.com failure!

Site Watch

Today's Peeve:

As usual, my biggest peeve is sites that are not Mac friendly... Upon visiting "The Living Letters," I got this very rude message...

"Sorry! You cannot view the main Living Letters experience. TheLivingLetters.com currently requires Windows 95 or 98. Please accept our apologies. The economics of the personal computer industry force us to first focus on the Windows platform. We do hope to support the Mac and other operating systems in the future.

Please feel free to look around the rest of the site and we hope you can visit us on a different computer in the near future."

(I guess these people don't realize that a great deal of their visitors will come from the education sector where Macs are the dominating platform.)

As for their comment about visiting on a different computer in the near future... well, it don't get any more DIFFERENT than a Mac! So there! And who in their right mind (and owning a Mac is certainly bona fide proof of sanity and intelligence) is going to run out and buy a PC to view their site?

Today's Perfect Site:

Whale Center of New England - An excellent example of a site that has done everything well. 5 Gold Stars to their webmaster! Congratulations Mark on a great job!

Today's Not-So-Perfect Site:

The Mac Lady - Yep... that's my site. Guilty on all counts. But I am in the process of splitting it up into 4 smaller, more manageable sites. And, of course, I'll be taking my own advice this time! And I know that you'll be checking up on me to make sure that I do! (and until recently, it was classified as a personal site...)

Today's Alert:

One more reason to avoid MS products....

MS TRACKING USERS ACROSS MSN SITES
Warning: PCHelp advisory says MS can track users across MS Web sites without their knowledge. Read the article - and be afraid!

Signing Off

Well, I'm running out of space so that's it for now. You've got one month to get your site into shape and ready for next month's column. What will I be talking about? Curing Arachnophobia! Getting Your Site Ready for the Spiders! Don't forget to check out my other column at Applelust.com - The Webmistress.

Questions? Suggestions? Complaints? Proposals? I'd love to hear from you, so please drop me a line at nancy@macosjournal.com or use the handy little feedback form. See you next month! And don't forget about hosting... it's gotta be on a Mac... it's gotta be ItsaMac.com - simply the best! Don't forget to tell them who sent you!

Quote of the Day

Never be afraid to try something new. Remember, the Ark was built by amateurs, the Titanic was built by professionals.
-unknown

Nancy Johnson - nancy@macosjournal.com
Nancy's Page - Feedback Form