| What do you hate most about websites? If you | | | | website. In case you don't already know, Flash intros |
| browse websites as much as we do, then there is a | | | | are those annoying animations that play when you |
| lot to hate. Because there are so many terribly | | | | first arrive at some websites. If the content of your |
| designed, user non-friendly websites on the Internet | | | | website is engaging and useful, then there is no real |
| today, we have put together this short but detailed | | | | reason to have a Flash intro. Adding to the fact that |
| list of things to hate about web design. In addition to | | | | most people are impatient when surfing the web, |
| compiling this list, we've also provided a solution for | | | | many of them do not have the time or patience to |
| each of the problems. | | | | watch a lengthy Flash intro. |
| When creating a web design, there are a number of | | | | If you're going to have a Flash intro, then at least |
| things that a web designer should take into | | | | include a "Skip Intro" button that is clearly visible to |
| consideration if their goal is to produce a high quality, | | | | the user. Even better, instead of making the Flash |
| user friendly website. | | | | intro something that is automatically shown to all |
| 1. Vomit Inducing Color Schemes | | | | visitors, place a descriptive link somewhere inside of |
| There is nothing worse than visiting a website and | | | | your website that, when clicked, allows the user to |
| seeing a borderline-gruesome, mismatched, out of | | | | view your promotional animation (usually what Flash |
| control color scheme. As basic as it is, some people | | | | intros are). |
| have a terrible time choosing successful color | | | | Finally, be careful with the inclusion of sound in your |
| schemes. Though there are millions of colors to | | | | Flash intro. If someone has their speakers turned up |
| choose from, it doesn't have to be a difficult process. | | | | to a high volume, then you could be responsible for |
| Whether you want to pay for a piece of software | | | | scaring the living daylights out of them (and scaring |
| that will significantly simplify the color scheme | | | | them away from your website as well). |
| selection process or use one of the free color | | | | 3. Information Overload |
| scheme tools available on the Internet, you will be | | | | Having too little information on pages of your |
| implementing attractive and successful color schemes | | | | website can make them seem bare and boring; |
| in no time. | | | | however, having too much information can |
| To Pay | | | | overwhelm the user (which isn't something you |
| If you want to pay for a color scheme application | | | | particularly want to do). Ads, images, text, more ads, |
| that will do all of the work for you, then your best | | | | navigation, secondary navigation, content, more ads... |
| solution is the Color Schemer Studio. Located at and | | | | they all start to add up. |
| available in both Mac OS X and Windows flavors, this | | | | Although there is no rule as to how much information |
| tool not only builds you an entire color scheme based | | | | per web page is enough, you should try and limit |
| on a single color, but it also generates | | | | your web pages to the following: |
| monochromatic, complement, split complement, triad, | | | | - Header/logo: All websites need a header/logo to |
| tetrad, and analogous harmonies based off of that | | | | identify who they are. For usability purposes, try and |
| same single color that you choose. It is absolutely | | | | keep the height of your header at a moderate size. |
| remarkable. There are a lot of other neat and | | | | Most of our headers are no more than 200 - 300 |
| extremely useful features built into this application, | | | | pixels tall. Anything taller than 300 pixels and you take |
| too. | | | | the risk of forcing the user to have to scroll down |
| Not to Pay | | | | just to see the navigation and content of your |
| If you would rather not pay the $49.99 for the Color | | | | website. Yes, we want the user to look at the |
| Schemer Studio (even though it is worth every | | | | navigation and content of your website; however, |
| penny), then there are free alternatives available. | | | | less scrolling makes for an easier and more enjoyable |
| Navigate to and you will find a Flash based color | | | | visit for the user. |
| scheme tool called the Color Wizard. Although not | | | | - Navigation: All websites must have a functional |
| quite as user friendly as the Color Schemer Studio, | | | | navigational system in order for users to be able to |
| the Color Wizard has a lot of features built into it. | | | | find their way around the website. Using vertical or |
| You can either enter a hex color code or move the | | | | horizontal menus are a matter of personal |
| sliders back and forth to find the color that you're | | | | preference. Although one menu is necessary, try not |
| looking for. The Color Wizard also gives you multiple | | | | to have more than one. Multiple navigational menus |
| harmonies based off of the single color that you | | | | can easily confuse the user. If you have a lot of |
| choose. The Color Wizard is a solid (and free) color | | | | sections on your website, then try using a CSS drop |
| schemer product. The only downside to the Color | | | | down menu which will allow you to include a great |
| Wizard is that it is available only to be used on the | | | | deal of navigational items while taking up a minimal |
| Internet. In comparison, the Color Schemer Studio | | | | amount of space. |
| does not require an Internet connection since it | | | | - Ads: Many websites provide a service to their |
| located on your computer's hard drive. | | | | visitors for free. It is because of advertisements that |
| Less is More | | | | most of these services are available for free. When |
| When choosing your color scheme, don't use too | | | | using advertisements, don't abuse their usage. Google |
| many colors. The statement "less is more" should | | | | AdSense allows a maximum of 3 ads per web page |
| always be applied during the color scheme selection | | | | for a reason - too many ads can make your web |
| process. How many colors should one use? That's a | | | | site look like spam in no time. Placement of |
| difficult question to answer. Although there is no set | | | | advertisements is also important. Don't try to trick |
| number, it is generally best to work around three | | | | your visitors by placing your ads in areas where they |
| colors if possible: | | | | look like actual content on your web site. People do |
| - Primary color: The main color that occupies the | | | | not like to be tricked. If they want to visit your |
| majority of the page. The primary color sets the | | | | advertising sponsor, then they will click on the ad. |
| overall tone. | | | | - Content: Each web page should have an area for |
| - Secondary color: The second color that has a | | | | content. This main section should be the focal point |
| purpose of backing up and reinforcing the primary | | | | for each web page. Having a lot of information about |
| color. The secondary color is usually a color that is | | | | the topic for each web page is absolutely fine. Make |
| similar to the primary color. | | | | sure not to include too many different topics on one |
| - Highlight color: This is a color that is used to | | | | web page. Instead, split the topics up and allow for |
| emphasize certain areas of the page. It is usually a | | | | each to have its own page. |
| color which contrasts more with the primary and | | | | - Images: Use images moderately and only when |
| secondary colors, and as such, it should be used with | | | | necessary in your content area. Images take longer |
| moderation. If you're using color schemer software | | | | to download than text. Make sure that your images |
| like the ones mentioned above, it is common to use | | | | are properly compressed so that the download time |
| a complimentary or split-complimentary color for this. | | | | for your web pages are not compromised due to |
| There are a lot of resources available on the Internet | | | | large images. Nothing says "amateur web designer" |
| that explain color schemes in greater detail. However, | | | | more than having large, uncompressed images that |
| if you use any of the color schemer solutions | | | | take minutes to load. |
| mentioned above and follow the basic tips which we | | | | - Footer: The information contained in footers vary |
| have mentioned, then you shouldn't have a problem | | | | from website to website. Try not to stuff too much |
| creating a beautiful color scheme for your website. | | | | information in the footer - especially important |
| 2. Flash-al Abuse | | | | information. Not all users scroll down to the bottom |
| When used excessively or in inappropriate places, | | | | of web pages to see the footer - some stop at the |
| Flash is terrible for your website - terrible for Search | | | | end of the content. If you have important |
| Engine Optimization and perhaps more importantly, | | | | information that must be placed inside of the footer, |
| terrible for your visitors. Don't get us wrong - Flash is | | | | then begin the footer soon after the content area |
| a remarkable program that allows creative multimedia | | | | ends. Placing the main links for your website in the |
| geniuses to produce some fascinating work. | | | | footer is a practice commonly used by designers. |
| However, the following implementations of Flash | | | | There may be additional things that a website |
| should be excluded from your website: | | | | requires depending on the topic and the industry; |
| Navigation | | | | however, all websites should contain these 6 |
| Probably the most abused and misused method of | | | | elements. Developing a navigation and layout strategy |
| using Flash, Flash navigation is usually bad or | | | | before building a website is essential in guaranteeing |
| extremely bad. Why is it bad you ask? Well, there | | | | that your website doesn't suffer from information |
| are a number of reasons: | | | | overload. |
| - Search Engine Optimization: If you're familiar with | | | | 4. Image Text: A Big No No |
| SEO, then you know the importance of having text | | | | Like a car inside of an airplane hanger, text does not |
| on your website. Text is what makes indexing your | | | | belong inside of an image. The only exception to this |
| website in the search engines possible. The problem | | | | should be using text inside of a logo. Yes, it can be |
| with Flash is that the search engines do not go inside | | | | boring using the same text that everyone else uses |
| of the Flash files to collect the text information. | | | | for their websites. However, you can still make rich |
| What this basically means is that when the search | | | | and compelling designs without sticking fancy text |
| engine spiders crawl through your website and come | | | | inside of your images. |
| across your Flash navigation file, they crawl right over | | | | There are a few reasons why using text inside of |
| the top of it. If you have keywords in your Flash | | | | images is a no-no: |
| navigation that are relevant to the content of your | | | | - Larger image file sizes: Each piece of information |
| website, then they won't be indexed or even noticed | | | | inside of an image adds size to the file. As we |
| by the search engine spiders. | | | | mentioned earlier, the larger the file size means a |
| - Page load time: Using Flash for your navigation will | | | | longer download time means the more your already |
| slow down the load time for your web page. Yes, | | | | impatient visitors have to wait. |
| using anything on your website will add to the load | | | | - Not SEO friendly: Just like Flash files, search engine |
| time; however, some things (such as Flash navigation) | | | | spiders cannot detect the textual information inside |
| are avoidable. Some Flash file sizes are larger than | | | | of image files. If you have an image that requires |
| others - the larger the file size means a longer | | | | text, then try an alternative method using CSS |
| download time means the more your already | | | | layers. Not only is this method easy to implement, |
| impatient visitors have to wait. | | | | but it will help keep the image file size smaller. It is |
| - User non-friendly: The purpose of website | | | | also SEO friendly. |
| navigation is to provide for your visitors a means of, | | | | 5. Attack of the Columns |
| well, navigating throughout your website. Flash | | | | No, this isn't a spin off of the Star Wars movie. |
| navigation crosses over from bad to extremely bad | | | | Attack of the Columns is a phrase we use when a |
| when the visitor must wait for an animation to | | | | web designer uses more than a few columns in their |
| complete each time their mouse cursor rolls over an | | | | layout. Some designers believe that by using more |
| item in the menu. In case you didn't already know, | | | | than a few columns they can better organize and |
| people hate waiting. There is nothing worse than | | | | display the information on their web page. The |
| having to wait even just a few seconds in order to | | | | problem is, just like information overload, using too |
| activate a particular navigational item after rolling over | | | | many columns will overwhelm the user. |
| it. Not only can the animations be annoying, but | | | | When more than 2 or 3 columns are used, a focal |
| sometimes the menus are just downright confusing | | | | point is usually eliminated from the web page. |
| (i.e. Picture elements are used instead of words for | | | | Without a focal point, the user has no idea where to |
| each item). | | | | look. Instead, the user's eyes wander aimlessly |
| - What about people who don't have Flash?: Not | | | | throughout the web page. This will cause the user to |
| everyone is using Flash these days. Although it is | | | | feel confused and overwhelmed and might make |
| usually rare that someone doesn't have Flash | | | | them go to a similar website with a cleaner, less-busy |
| activated on their computer, it still occurs. These | | | | layout. |
| Flash-disabled users will have no way of finding their | | | | Even if there is a focal point, there is probably going |
| way around your website. And since one of the key | | | | to be too much information on a 4+ column layout. If |
| ingredients to a successful website is navigation, not | | | | huge sites with massive amounts of content (i.e. |
| having navigation to those with Flash disabled will | | | | Amazon.com) are able to work with a 3 column |
| make your website look quite terrible (and more | | | | layout, then there is no reason that any other |
| importantly, non-interactive and useless). The best | | | | website can't do the same. Plan your layout before |
| way to build a SEO friendly, fast loading, user | | | | you start building your website and you will find that |
| friendly, ultra compatible navigational menu is by using | | | | even if you have a lot information and content, a 3 |
| CSS (cascading style sheets). CSS solves all of these | | | | column layout is more than enough. |
| problems that you will encounter when using Flash | | | | Happier Visitors |
| navigation. There a number of free CSS navigational | | | | These 5 Things to Hate About Web Design are very |
| menu resources available on the Internet. Dynamic | | | | important - perhaps the most important things a web |
| Drive CSS based navigational menus located at are | | | | designer should take into consideration when building |
| extremely popular and widely used by web designers | | | | a website. All 5 of these items have one thing in |
| and web developers, including us. | | | | common: when followed, the user will have an easy, |
| Flash Intros | | | | fast loading, straight forward experience when they |
| Without a doubt the worst way to use (or should | | | | visit your website. What more could they ask for? |
| we say misuse) Flash is to have a Flash intro on your | | | | Well, maybe less advertising. |