If you're new here, you may want to subscribe to our RSS feed. Thanks for visiting!

There are many reasons to redesign your website, but the two major ones are when the original design becomes outdated and when the site becomes less user-friendly than it once was (or it’s not up to the current standards for site usability).  Usually these two reasons go hand in hand.

We recommend a business site redesign every 2-3 years.  This may not seem like a very long time, but here in the web world things move very quickly.  Design trends and usability standards can sometimes change from month to month. 

Let’s take a look at one of Blizzard’s recent redesigns and see how an overhaul of both the site form and site function benefited the client. 

We took on The Rusty Parrot Lodge & Spa of Jackson, Wyoming as a client in 2004.  They purchased marketing, maintenance and hosting plans with us.  Another company had recently built their site and so it was relatively fresh and fucntional.

During the course of the next 4 years the site grew considerably.  Problems with it surfaced as we added new pages, content and images.  A blog was also added, which had a different set of navigation and code to maintain than the main site.

When the Rusty Parrot management decided it was time for a redesign in late 2007, Blizzard was excited to take on the project.  Together with the client we developed a long list of things that needed to be changed. 

The Rusty Parrot is one of the most luxurious and unique properties in Jackson.  They’ve won countless awards for their high level of service and are known for their friendly staff.  However, the look and feel of the old site did not convey the quality of the property.

Additionally, the old website did not properly showcase the natural beauty of Jackson, Wyoming.  Nestled at the base of the Teton Mountains, anyone who has ever visited this part of the country knows that it is stunning. 

From a usability standpoint, the navigation was somewhat tricky to use.  Several levels of fly-outs on the main menu proved to be overwhelming and sometimes difficult to click on.  Users could easily become confused when looking for specific information.

Technically, the site was cumbersome to maintain.  Originally built in Microsoft FrontPage, there were hundreds of lines of excess code per page, making design and content changes more time-intensive than they should have been.  Also, there was no content management system implemented to allow the Rusty Parrot staff to do some of the updates themselves. 

Changes to the aesthetics of the site include an updated layout that is restricted to 800 pixels wide, fitting the vast majority of monitors, unlike the old site.  The new design also floats in the middle of the screen instead of being left aligned. 

On the old homepage, several small photos were laid out randomly all over the screen. On the new one large, professional photos rotate one at a time in a slide show.  The darker green background conveys a mountain feel better than the former lime green background.  The page footer was condensed to include only the most relevant contact information, unlike the old footer which was almost 600 pixels wide and contained a lot of unnecessary text.  
 

 The resulting look and feel of the new design is much more unified and clean.  The new photos “wow” the user in a way that the old site never did.  The buttons are classier and more subtle.  The finished product is much more elegant and contemporary than the old website. 

Usability-wise, the navigation was completely reworked.  Abandoning the old fly-out style of menu, the new site incorporates a multi-tier system of navigation that only shows the buttons that are relevant to the area of the site that the user is currently on.  When you click one of the main buttons at the top left of the page, it takes you to a new page that displays a submenu to the left of the content.  For instance, when you click on “Lodging”, a submenu appears that includes only the buttons “Rooms”, “Rates” and “Around the Lodge”.  Studies have shown that this style of navigation is easier for the visitor to use and understand than the old fly-out method.

Finally, the new site was designed using Wordpress, which is an open-source blogging software product that can also be used for content management.  The main site and the blog (”Local Reviews”) now share one set of code and navigation, which is less time consuming to maintain.  Additionally, the Rusty Parrot’s staff can now make changes to the content and photos of the site without contacting Blizzard all the time, which will in save them money in the long run. 

The website went live in April 2008 and the management has been extremely pleased with the results thus far.  Jim Promo, the general manager, commented on what he likes best about the redesign.  “I think the site is much more representative of the property than the old one.  The new look is also more contemporary in feel, which will impart a fresh look for out repeat visitors.” 

A site redesign is one of the top ways to convert site visitors to customers.  The Rusty Parrot is already seeing the results as their reservations increase

A call-to-action is often the most important thing on a website. You want the visitor to do something and many times that something is to email you. Back in the day, web designers could just publish an email address on the site.

However, this led to problems with spam filtering and limited the visitors that used web-based email services. Most often, when a visitor did send an email, it contained very little detail. These problems can now be resolved by implementing a contact form, instead.

Contact forms allow the website visitor to fill in as much information as you require of them. Then, the user simply hits the Submit button and the form data is sent directly to your email address. Currrently, forms are a website must-have to get a response from site visitors. Many web designers, however, overlook critical issues and make common, yet costly mistakes.

The Thank You Page

There have been countless times where I have submitted a form and was taken back to either the homepage or an ugly page that showed only the form output. Be sure to create a response page that matches your website template. A Thank You page should also tell the user that the form was submitted successfully and when to expect a reply. Keeping the user informed should be a top priority.

Form Validation

It is terribly annoying when I submit a form and am presented with an error page that tells me to hit Back and fill out fields that I left blank. Be sure to use JavaScript or AJAX to provide validation when the form is submitted on the original form page. This way the user isn’t directed to a page telling them to hit the Back button. Alternatively, you can perform server-side validation that will take the user back to the form page and explain what areas need to be corrected so that the information can be successfully submitted.

CAPTCHAs

Spam control is important when it comes to contact forms. There are numerous types of auto submission software that will post random bits of information on contact forms. Many are setup to post comments on blogs to advertise their products or to gain backlinks for search engine ranking purposes. This is where a CAPTCHA comes in handy. A CAPTCHA is a puzzle that will check to see if there is an actual human being on the other end submitting the form. These “puzzles” can range from words to simple math equations.

Hijacking Prevention

A majority of online contact forms can be hacked and used for evil purposes. Hackers can change the recipient, who the email is from and the message of the email. The spam sent using a hacked form can be traced back to you, which could result in your web host kicking you off their servers or even lead to a legal dispute. Make certain that your form processing has filters that will detect, prevent and notify you when a form hijacking has occurred.

Testing Out The Forms

Testing is one of the most overlooked things when it comes to contact forms. I have seen web sites with absolutely fantastic designs, but contact forms that do not work. It’s not unusual for a designer to check a form in only one web browser. More often than not, the form code may be poorly written and interpreted differently in other web browsers. Test, test, test.

Print Only Forms

Some inexperienced web designers have no clue how to make a contact form work or how to prevent hijacking and spam attacks. So, they create a form just for printing. Do you think that any online visitor will visit a site, fill out a form, print it out and send through regular mail?

Missing “Submit” Buttons

Have you ever filled out a long contact form only to find out that there are no “Send” or “Submit” buttons for it? This frustrates visitors and doesn’t give them a good reason to return. It’s shocking to know that one of the most important parts of a form can be one of the most overlooked. Prevent this by thorough testing.

In the web world, contact forms are a necessity. but common mistakes that web designers make when it comes to forms happen every day. So let’s review: make sure your forms have “Submit” buttons, don’t make your form print-only, thoroughly test forms in different browsers, make sure that your form processing has hijacking prevention, use CAPTCHAs to kill spam, provide on-page form validation and always supply the user with a “Thank You” or confirmation page.

By correcting these ever so common mistakes, you can ensure a better web site performance for you and a better experience for your visitors.

CSS stands for Cascading Style Sheet. It’s a mark up language used in all of today’s website designs which allows you to alter the way a website is formatted through a cascade of elements specified on a style sheet or ‘rule sheet’. A cascading style sheet is an external or internal ‘rule sheet’.

This rule sheet tells one or several pages of a website how to display information. With CSS, the way to style a website is endless. CSS also makes creating a multifunctional, user friendly and consistent website easy, even for a beginner.

Recognizing the basic form and function of CSS is key to adding style to the included elements. For every element in your website, you have a tag which separates each bit of information on a web page. For instance, you may want to add a paragraph. To begin this paragraph you must have a tag to mark the beginning of the element to be styled and a closing tag to close the element. I have included an example below so you can see what the tags look like when added to HTML code.

The <p>tag in HTML stands for ‘paragraph’:

Example: <p>This is the first paragraph<p>

I’ll walk you through how CSS enables you to style one element as a simple example of how it works. Let’s say you want the text of your website to be red, with bold purple in some areas. In your style sheet, you must create a rule that will make the text red. First, come up with the name of the style. Since we are styling the text of a paragraph, we could call the style ‘ptext’. In CSS, a style is written with a period before the name, so on our style sheet it would read:

.ptext

As with the tag element, you will need something that marks the beginning and the end of a style or rule on your style sheet. We use what are called curly brackets to mark the beginning and end of a rule in CSS. Anything included within the curly brackets will be a command for the particular element of the website to which this style is connected.

This is how you would write the rule on your style sheet:

.ptext { }

There are a couple of ways you can include your command within the style sheet - inline style which means it’s on the same line and external style. With an inline style, your rules are included within the tag of your HTML document, instead of in an external style sheet.

For this example I will also add the style of font we would like to use - verdana. We are making the text red, so we need to be sure we include all the rules we want to make for the text. We also need to make certain that we spell everything correctly and include all the necessary elements of the rule. Even the smallest mistake will make the style malfunction.

This is how the style rule would look within an inline style. Remember the rules go within the tag of what you want to style:

<p class=”font-family: verdana; color: red;”>

When creating a style, you must also include a colon (:) and a semi colon (;). These determine the beginning and end of a rule within a style. Without these two punctuations added to the style, it won’t work.

An inline style can get confusing, especially when you start adding pages or get into more complex styles. Therefore, get into the habit of using an external style sheet, instead, and writing it like this:

.ptext {
font-family: verdana;
color: red;
}

As you can see from the above example, putting each rule of the style on a different line not only helps organize it, but also makes it easy to add and remove rules without spending too much time searching for the beginning and end.

Let’s go back to our HTML again:

<p class=”ptext”>This is the first paragraph</p>

As you can see by adding the style tag element to the p tag and labeling it ptext, the sentence takes on the commands outlined in the rule of the style sheet for .ptext.

Let’s try another example. This time we will keep the .ptext style rule but we also add another style rule for a second paragraph. Since we are adding paragraph #2 we will call the style rule for this paragraph .ptext2We will say we want the text in the 2nd paragraph to use the same font (verdana), but that the text will be purple, bolded, and larger than in the 1st paragraph.This is how the style rule will look on your style sheet for paragraph 2:

.ptext2 {
font-family: verdana;
color: purple;
font-weight: bold;
font-size: 18px;
}

Now, we add this element to the tag for the second paragraph. I’ll include the first paragraph and the second paragraph so you can see the differences;

The rule elements of the style have commanded the text of the second paragraph to follow the rules of the .ptext2 style.

Your CSS document should look nice and clean, like this:

Creating a style sheet can be quite easy if you use just a few basic elements and know how each style should be set up. The CSS rules I have included in this beginning explanation were just for text in paragraphs and will not necessarily apply to an entire webpage.

When using a style sheet, you can also create rules for multiple pages. Commanding the text on all pages to appear alike is an ideal way to create a cohesive look throughout the entire website.

Stay tuned for my next article, in which I’ll continue to explain the basic elements of CSS styling and touch on other important elements of a web page, such as how to set up an HTML webpage, which elements to include in your CSS and how to include the style sheet on the page so that the rules created in your style sheet cascade throughout your entire website.

So you’ve decided to hire a designer for your new website. Hopefully, he or she is a professional. Your friend’s, sister’s teenage son doesn’t count as a professional. Instead, you need someone with the skills to create an interesting and visually pleasing site that loads quickly, is easy for your visitors to understand and use, and is Search Engine friendly. This requires much more expertise than you may imagine.

Consult with your professional about what you want your website to do for you and your business. Then, they will work with you to create it. There are bad things that good designers are asked to do time and time again that are simply harmful for a website. It’s our job to advise you. Please take the advice for which you are paying.

Please don’t ask your web designer to:

Place light colored text on a dark background
This technique should be used sparingly. It is very hard to read. In addition, some printers will print the background color of a page, which wastes a considerable amount of ink.

Create dark text on a black background.
It cannot be read. Need I say more?

Tile a background image.
Tiled background images add to a page’s download time. They are usually too busy and take away from the focus of the site.

Center everything on the page.
This is a website design not a print design. Unless you want to post something that looks like a wedding invitation, don’t use this technique. It’s boring.

Bold and italicize this, this and this.
Your readers will quickly get confused trying to tell what is most important. Only use one headline and italicize only in small amounts. However, when used properly, as in this article, bolding can help to make a web page more scannable, so that readers can quickly find what they are interested in.

Create banners that move text across the screen.
Moving banners may have been the latest and greatest thing in 1990, but today it’s best not to use this outdated and amateurish technique. In my opinion, they make me dizzy. This is not Kmart and you’re not advertising a blue light special.

Place off-site links on your home page.
You work hard to get visitors to your site. Don’t send them off into the wild blue yonder as soon as they arrive-they may never come back.

Put huge images on your pages.
Please take the time to format your images, or we will format them for you at cost. Images should be jpg, gif or png, RGB, 72 dpi and no larger than 600 pixels wide.

Copy a photo from another site.
Copying or borrowing photos from another site is not okay. Take your own photos or hire a professional photographer. You may also buy stock photos from www.istock.com or a similar site. Refer to Julia Baldwin’s newsletter article “Selecting Appropriate Photography for Your Website” for more information.

Create a huge flash slide show.
Sure, they look great when used in moderation. However, large slide shows can really slow down page load times. One slide show with four or five quality images is plenty. Maybe I’m sensitive but, too many moving things on a website still makes me dizzy.

Make music play when someone lands on a page.
Not to mention copyright issues, music or any kind of audio is distracting and annoying. If you insist on audio, please give the viewer the choice to quickly turn it off. There’s nothing worse than getting caught looking at a vacation site while at work.

Stretch or shrink your content.
If you want a five page web design, don’t give the designer 20 pages of text to squish into 5 pages. On the other hand, don’t give the designer one small paragraph, either. Be prepared to write your own copy. We are designers not writers, as you can probably tell by this article’s author.

Do “just one quick change”.
This one isn’t necessarily bad for your website, but it can erode your relationship with your designer. Let’s face it, if it was that easy you could probably do it yourself. Let a professional decide how much time is needed for a change to your site. If it is a text change to your navigation, for example, it will take longer than changing a price or word in the body text. Be prepared to pay for all work completed to your satisfaction, no matter how much or how little time it takes.

Your website will be a better place to visit and more productive for your business, as well, if you take advantage of everything a professional designer knows about creating good web sites.

Photo from OxOx

Don’t underestimate the use of color as a marketing tool. The color of your website can be used to entice your viewers to linger and make a connection. Make sure you set the mood that is right for your target market. Remember that your visitors will form an impression within the fist few seconds. Part of that impression comes from visual cues like color. So choose your colors carefully.

Colors can be categorized as warm, cool and neutral.

Warm Colors

Red
Creates a mood of: Passion, love, violence, aggression, energy, excitement, warmth, sensuality
Uses: Motivate a viewer to take action, show caution or stop
Red can: Make the viewer hungry and project objects as closer and larger

When using red in website design be very careful. The way it looks on your monitor may be very different on another monitor. Bright red can also be very irritating to viewer’s eyes.

Pink
Creates a mood of: Romance, calm, affection, gentleness
Uses: When you want to evoke caring and romantic feelings
Pink can: Appeal to a feminine or romantic side of the viewer

Orange
Creates a mood of: vibrant warmth, a bit less passionate than red, tropical, youthfulness, fire, activity
Uses: Could be used for food or nature websites
Orange can: Convey warmth, make the viewer hungry and stimulate the mind. The eye focuses on it.

Use of the color orange is best used in moderation.

Yellow
Creates a mood of: Sunshine, caution, happiness, hope, light, energy, weakness, purity, understanding
Uses: Makes your website seem lighter and brighter, more spring like
Yellow can: Uplift the viewer to a state of calmness

Yellow can be irritating to the viewer’s eye. Use a pale shade of yellow to create light energy

Cool Colors

Green
Creates a mood of: Renewal, spring, growth, fertility, wealth, calm, envy
Uses: Websites where nature is part of your product. Project a feeling of money
Green can: Relax your viewer and create a feeling of freshness. Make objects seem farther away.

Blue
Creates a mood of: Open sky, vast oceans, intelligence, travel, freedom, trust, sadness
Uses: Mirror the tranquility of sitting under a beach umbrella. Ahhh
Blue can: Make a website more formal

Purple
Creates a mood of: Creativity, spirituality, mystery, dignity
Uses: Subdue your viewers with a pale lavender
Purple can: Be associated with royalty and wealth

Neutral Colors

Black
Creates a mood of: Power, elegance, death, evil, anger, night, mystery
Uses: Borders or barriers can be created visually. Use black sparingly.
Black can: Make the text on your website very readable when a background color is pale or white.

White
Creates a mood of: Purity, cleanliness, peace, perfection
Uses: Create a feeling of airiness or lightness with open white space
White can: Make other colors seem more vivid or pop

Grey
Creates a mood of: Gloom, sadness, conservativeness, security
Uses: Create a feeling of emptiness or void
Grey can: Make the viewer uninterested

Brown
Creates a mood of: Earthiness, stability, hearth and home, tradition
Uses: Give the viewer a safe place to relate other colors
Brown can: Ground the viewer

These websites set the intended mood with color.

	Hello KittyPink is the dominant color. This site is all about girls. Other colors used are pastels, cool and calming. This site is playful and kid targeted.
Massachusetts Hospital Association The blues and greens featured in this site set a mood of calm, renewal, intelligence and trust. This site is serious but also friendly. Target viewer may be an adult looking for information.
	Cedar Point Theme ParkLots of color creates movement. Blues give it a cool watery feel. Red flags grab your attention. This site creates the mood of family, action and excitement.
	St. Louis Art MuseumBlue, gray and neutral colors make this site very subdued. Tradition and stability can be felt. Quiet.
These websites don’t set the intended mood with color.
	Fiber Optic ProductsNeon text on a black background is very hard to read and annoying to look at. Black creates a feeling of doom or void. This site could have used dark blues and purples to give it a more regal feel.
	Gamequarium.comI’m not sure what this site is offering. The yellow text is so overwhelming that I want to leave as soon as I arrive. It screams caution.
	I think this is an artist’s website but there’s nothing here.Wahhhh! What is it? This site has nothing to offer me. No color. Just blah.

Computers are capable of displaying millions of colors. Website design it limited to 216 colors. Mac and PC’s both use different color pallets. Only 216 colors are common to both. These 216 colors are “web safe”. Different web browsers will display colors differently also.Is there is a website you have viewed that set a mood with color?
This tool will grab colors used in websites already on the web.
Collect colors rearrange and combine to make your own mood/color scheme for your own site.