Web's Worst Practices 1 - "Click Here!"

Shadow Development — 2010-02-16T15:39:40+05:00

We've just released a mini-series of articles called "Web's Worst Practices," covering the best and worst of web standards when designing and developing websites. Our first one deals with an overwhelming problem: saying "Click Here" for links. You can view it online in PDF or HTML format through the Shadow Dev site.

Now offering Freelancing!

Shadow Development — 2010-01-11T16:52:52+05:00

We are proud to announce that Shadow Development is now offering Freelancing programming! Providing customers with custom programming in (X)HTML, PHP, and CSS at $35/hour or on a fat rate, this will allow customers to receive our outstanding programming at a fraction of the cost of a full-blown website! Contact Us Today to receive a quote for your freelance projects!

3 Top Tips for Good Web Site Design

Shadow Development — 2009-11-05T13:11:57+05:00

By Kyle "KP" Perkins, Western Carolina University (NC)

Have you thought about your Web site lately?

Maybe it's time you should.

Most of us think that people who visit our Web sites can easily find what they need because all of the information is there. Maybe it is, maybe it isn't.

You actually have complete control over your Web site, so wouldn't it be nice to make it more appealing? How about increasing its traffic by 5%, or maybe even 30%? It is possible - you just have to know the in's and out's of a good Web site - and why your Web site exists in the first place.

What Makes a Web Site Good?

As the average person surfs the Web, they encounter hundreds and hundreds of different Web sites - different domains, different designs, different structures, and the list goes on. Most "surfers" (people who are browsing the Web) just go to Google and type in keywords to figure out what they want. As surfers cruise the Internet, they create their own impression of any given Web site within the first 10 seconds (or less). Some sites are good and some are not. But what exactly makes a Web site "good?" I could write a book on every single little detail about what makes a Web site good, but I'll give you my exclusive, "quick and dirty" version.

If you ever read Don't Make Me Think by Steve Krug, for example, you will understand the importance of a good structure and a good design. However, if you are not a person who operates in Web technologies (I'm speaking of more than just Facebook and Google), then you most likely don't really know what a good Web site contains. However, there is a good guide to follow to make sure you get the most of your Web presence, and to make sure your surfers get the most out of their experience. It's kind of like a local event. First, you advertise it and attract attention to it, set it up, charge admission, pay vendors and clean up. The process is fairly similar when it comes to your Web presence. Follow this simple guide to understand what surfers want.

Tip #1: Having a Clean Design

DO: Have a clean and concise design on your home page. First and foremost, surfers look at design. Within the first 10 seconds (or three, depending on the connection speed and person doing the browsing), the surfer gets an impression of your site. It's much like the first impression at an interview - same concept, different location. If your site is clean with associated colors (colors that go well with each other, not the rainbow), then it is easy on the eyes. Have your logo on every page, an easy-to-locate navigation bar, and a nice welcome message. This allows for "ease-of-use."

Most Web designers use a visual editor for their sites (FrontPage, DreamWeaver, or even Word) in which they just drag and drop their information and designs. Personally, I do not like these programs nor do I use them. In my opinion, those who use these programs do Web work on the side, or in their basement. Of course, this isn't the case with all designers. Personally, I am a Web developer who works with the hard-core code of a Web site to mold it to work for me. To be honest, I don't care what you or your Web designer use, as long as your Web site works well. The tips I offer here can be used by people who use designer programs or those who actually code.

DON'T: Be too flashy, unsized or too crowded. Many inexperienced Web designers like to be flashy. They may add a mouse trail, a flashy intro, or try to make their sites stand out with bright colors or animations.

Tech Tip: Most animations work only in Internet Explorer. Not everyone in the world uses Internet Explorer. As of June 2008, W3Schools.com reports that only 54% of the world uses Internet Explorer, with Firefox/Mozilla use coming in at 41.5%, Safari at 2.6%, and Opera at 1.7%2. The other .2% use something other than the top four browseres. So, if the animations on your site are IE-specific, what about the 41% who use Firefox? They won't see the flashy animations.

Also, from personal reviews and consumer reports, I've learned that having a "splash page" (the first page you see when you go to a Web site that has an "Enter Site" or "Skip" button) is a real annoyance. It's only an additional click to enter the site, and it seems most people do not like to perform that click. If they are on an information-search, they will either be in a hurry or will Google the content and skip the intro completely.

The "unsized" I mention in this tip applies to most "size-set" Web sites. What is this? Have you ever gone to a Web site where the content doesn't stretch across your browser/monitor? What about if you have to scroll left and right to read the information? Some designers, for reasons I don't understand, set the width of a Web site so it does not resize (such as 760 pixels or about 7.9 inches), which results in a lot of blank space on the right (and/or left) side of your browser. I believe this is very unprofessional. This might be good for a monitor that has an 800-pixel width (like back in the 1990s), but nowadays, most people either have 1024-pixel width or larger screens. A good site flexes and stretches to the width of the surfer's monitor without displaying too much white space.

As for content, it is understandable that the home page (the first page you see) is the most important on your entire site. However, it is not advisable to make every little speck of information available on this page - it will become too crowded. The surfer will not be able to find the information they want, become frustrated, leave your site and most likely not come back.

Also, make sure you don't cram too much content on other pages - such as having one extremely long page containing lots of information. The surfer will see the information at the top of the page, but will rarely see the information at the bottom unless they scroll down. This is called "Fishing the Page" (from Steve Krug). You see the "fish" at the top, but rarely see the ones at the bottom, unless you look hard or have a good fishing rod (Google).

Tip #2: Automating Your Information

DO: Download a dynamic scripting language and hire an experienced programmer. This may sound a little technical, but it will save you a lot of work in the long run. By a dynamic scripting language, I mean something along the lines of ASP.NET or PHP (my favorite). Talk to your IT person about installing this feature if you don't have it (and if they say it will cost money to download, tell them both are free [http://www.asp.net and php.net, respectively]).

As a person who has been programming with PHP for almost 10 years, I can easily say this has shaved almost 90% of my updating time for most sites. By having your Web site be dynamic, you (or your Web person) won't have to spend countless hours doing mindless updates.

One big feature I put on most of my client sites is an auto-update calendar. This allows the Web site to automatically update daily information (such as event title, time, information, pictures, etc) without having to sit down and manually input the information. Surfers hate it when a Web site is out-of-date. For example, the surfer sees an event they want to attend on Tuesday. However, it is Thursday and the surfer realizes the event has already occurred. By having up-to-date information (with an auto-updater), you have an easy way to stay current and not have to worry about out-of-date information.

DON'T: Use Static HTML or hire a "newbie" programmer. Unless your information won't change within the next year, I would stay away from using static HTML Web sites or companies. This just means that you (or your Web person) will have to go in manually and make all of necessary changes by hand. This is extremely time-consuming, especially if you have a programmer who just began programming. It may take them 10 times the amount of time an experienced programmer will need.

This is especially important with design issues. If a newbie programmer makes a design feature, they will most likely make it on every single page. If the design feature changes, the newbie must go into every page and make the change (which can be extremely costly if your programmer is paid by the hour). However, an experienced programmer will use CSS (Cascading Style Sheets) to make design features. If a design feature changes, all the programmer has to do is make a small modification to one file, and they are finished. All pages are affected.

So, next time you hire a Web programmer (or designer, whichever case is appropriate for your organization), make sure you hire one with the right experience.

Tip #3: Making Sure Your Site Is Easy to Use

DO: Run some usability tests before you launch your site. If you haven't read Krug's book (Don't Make Me Think), I highly recommend you do. It talks about lots of ways to keep your surfer from "thinking too much." One such example in the book pertains to searching for information. Searching for information on a Web site is sort of like searching for an item in a department store. Most people search via one or both of two methods: direct and self-finding (indirect).

For example: let's say you wanted to find garden hoses. The indirect searcher would walk into a department store, find the garden section, look for the general area where hoses would be, find the hose area, and narrow down their selection from the wide variety of garden hoses available.

However, the direct searcher (or the indirect searchers who get tired of looking themselves) walks into a department store, finds an employee and asks where the garden hoses are. The employee takes them directly there.

With Web sites, though, you don't have physical sections or employees, so you have to use the technical route. Indirect searchers find the menu bar, look for the right section, and narrow down the specifics from there (which may require many, many clicks). Direct searchers will look for a search section, type in what they are seeking, and go directly there. Sometimes people behave differently on different sites, so it's hard to determine what type of people will see your site. It is recommended that you include both methods on your site for ease of use.

In case you don't ever read Krug's book or need a starting place for usability tests, try these to get started:

1. The Fuzzy Test

Have someone load your site and make it full-screen (most of the time, press F11). Close your eyes and cross them (while your eyes are closed). Open only one of your eyes and take a look at your site. Can you determine, from looking at your site with a fuzzy view, where you start? Can you determine what the site does? Can you determine what your organization does from looking at your Web site? While most surfers won't see the site when it's fuzzy, this test allows you to take a look from a new "view" and helps you understand what people think and where they go when they first go to your site. After you perform this test, with respect to other sites, just ask yourself, "Where do I start?" If you don't know and can't figure out within three seconds, the site probably isn't worth your time.

2. The Specific Item Test

Ask some (who doesn't know your site) to find something specific (name it specifically, such as "Information about an event on Oct. 15," "the current films coordinator's favorite baseball team" or "the Chancellor's birthday" just to name a few). Have your site loaded on a test computer and sit down with them. Monitor what they do and where they go, but make sure you don't criticize them or push them too hard - just watch and take notes. This will most likely determine what your audience ("surfers") will do and where they will go for information. If the person can't find the test information, restructure your site's organization or design to make it easier to find it. Do this as many times as necessary.

DON'T: Expect what you know is what your audience will know. One of the biggest mistakes you can make is assuming you know your audience. Sure, you may know that your audience (or target market, whichever term you prefer) is between 18 and 27, both male and female, 56% Caucasian and 41% African-American, has an average income of $405,600, and lives within a 50-mile radius of your location3, but do you actually know how your audience thinks?

Don't always think, "If I have X, my audience will click on it." Most of the time, your audience will not click on it or they won't even see it. It's hard to understand exactly what your audience will think, so the best you can do is perform usability tests with samples from your audience and take notes on where they go and what they see.

No Second Chance for a First Impression

In time, there will be more methods and better ways to improve today's Web technology. Please keep in mind that the tips I share here are only a few of the many I've gained from my years as a professional Web developer. There are many other books and resources available to teach the proper methods of designing and coding Web sites. How you proceed is up to you. However, when you or your Web person designs your next site, please keep these tips in mind. They will save you a lot of hassle, as well as much time and money.

You never get a second chance to make a first impression. Make it a good one.

###

About the Author

Kyle "KP" Perkins is Web developer for Last Minute Productions at Western Carolina University (NC), where he is pursuing a master's degree in entrepreneurship. He also holds a bachelor's degree in entrepreneurship from the school. He is the founder, CEO/president and lead Web developer of Shadow Development Technologies, a professional Web development company specializing in customized and automated Web development. In NACA, he has presented educational sessions on the regional level. In the fall of 2007, the Association of College Unions International honored him for Web site design. He also recently was named Young Entrepreneur of the Year by the Department of Entrepreneurship at Western Carolina University.

New Design

Shadow Development — 2009-07-06T19:11:00+05:00

We just got finished updating the Shadow Dev site with a new design. This design in itself is simplier, easier to load, and we think offers a new "edgy" side of Shadow Dev. This has gone through many revisions and tests, and the new design on our site is the result of many months of work. Although it will never be 100% finished, we hope you enjoy it now and our constant improvements. Some of you may remember some of the older designs we had (the white-background-with-round-corners one, the dark-design-and-exposed-code one, and even the all-white-and-simple initial design), but this one is planned to stay for a while.

With some minor improvements here and there, we will keep continuing to make improvements to the site, but it's all for your benefit. If you have any questions, issues, ideas, threats, etc, just email us on the Contact form

Shadow Development News