6 Key Elements to a Good Website

Editor's Notes

• #6: Okay, let’s dive right in with Element 1: Good Visual Design.Design is an all encompassing word for all the visuals elements of your website – logo, font(s), white space, theme/template, layout and colors.If you do a Google search for website design you’ll see that one of the biggest trends is “designing to the grid”.This system of design pretty much ensuresa good looking site, since it takes into account things like white space and readability.The grid also helps to keeps your layout consistent throughout your site making navigation easier.So lets start with the header, it’s this area at the top of this page.Think of it as your marquee and it should include your logo, but if you don’t have one, you should display your organization or site’s name here.For Webs templates and themes, our designers have done a lot of the design work for you; you just need to just pick out the appropriate theme, and then customize it with your colors and imagery.One thing to remember about color usage is that colors can have different emotions and states of feeling associated with them, and because of that some are much more effective then others.For example, think about that last time you visited a fast food establishment – you probably saw a lot of red, white and yellow.Those are the colors of condiments and are used because they are associated with food and hunger.Let’s move on and see how we can improve website design…
• #8: Themes/templates do a lot of the work for you. They make your site focused, understandable and apparent.Think of a theme as not only “controlling the colors and choices” but also the placement of your content.A theme ultimately has blocks of buckets that need to be filled with your content, images and text.You can see that the site on the left, our bad example, has no real theme.And because of that the site looks unprofessional and amateurish.There is a lot of color, but using all of that color really has no meaning,.There are also a lot of different fonts, and the side-by-side pictures/graphics aren’t sized the same,making the page look like it’s not properly loading.The site on the right though, is appropriately themed to match the subject matter. The theme makes it easy to just put your content in the pages, organize and present your site to customers and potential customers.The theme even pre-defines the use of colors, fonts and sizes to give a polished look.Remember to pick a theme that works with your content, for example, you probably wouldn’t feel to comfortable using a plumber who has chosen this as their template.
• #9: Fonts should be easy to read and appropriate for the intended targeted audience and by that we mean if you’re building a site aimed at Seniors you may want to use a larger font.These examples emphasize fonts and their readability.Keep in mind that reading on monitor causes more eye-stain than reading a printed document. To help reduce eye strain, typographers developed bunch of “web fonts” when the web took root.They are designed and used to increase readability – they are general “Arial, Verdana, Helvetica”.These are also readily available on most computers – which means that your font will render pretty much the same on any user’s computer.Our example on the left contains a lot of fonts. 5 or more… When you view the website, you can read most of them, but below the bright pink box is a light blue cursive font. It is really hard to read this against the grey brick background. Additionally, it’s worth mentioning that since this isn’t a standard “web font” the font doesn’t display the same on every computer.The site on the right is much better.It uses fonts that render across computers because they’re defined by the theme. The theme keeps the rules of font-usage consistent and which makes the site easy on the eyes.All of the headings are red, the text is black and the main area’s font is all the same regardless of usage.The content on the right which is a different font, signals a difference in importance. But I am sure some of you are probably saying “but that site also has the ‘handmade in USA’ text”. Well that text is actually a graphic, as are the ROC and Facebook logos.Their usage and coloring make them stand out but not as part of the textual content of the page.Because logos usually carry a “branded font” they are most often displayed as graphicsto ensure that the logo always looks correct and within brand guidelines.
• #10: Which brings us to logo usage.Logos are your brand’s badge they should be memorable and portray what you stand for.It’s what makes you identifiable.Believe it or not, the website on the left is for a pizza place, and their logo is the icon on the far left.But the treatment of the logo on this site makes it get lost with all the other imagery.You’re logo should be predominately displayed.It shouldn’t ever get lost with a bunch of other icons and logos like Joe’s does.If you have branding guidelines, or are developing them, one thing you should include in them is the amount of spacing required around the logo. The site on the right is a better example because the logo for Bella Spa is front and center of the header.Their logo is the text and butterfly above the graphic of the green lady.It’s displayed right in the middle of the header area, and even though this section is a little cluttered with the flowers, their bending in towards the logo actually helps to highlight it.Remember this, there is enough competition on the web already for your customer’s and potential customer’s attention, why would you want to lose your logo on your OWN SITE?
• #11: The next way we can improve a website is through the use of color.Color usage should have some goal – are you using it to highlight text, importance of text and so on. It should also match the theme and not distract from site messaging.The site on the left uses a heavy color palette. Which makes it hard to read.These may be the brands colors, but it’s really hard to understand how the use of color emphasizes ideas, concepts or information.The navigation bar, which is what is used to move your visitor through your site, is all but missing because the text is red on a red button.The middle section of this site, below the graphic of the welder, is confusing because the use of color and font sizing makes it look as though it’s the most important part of the site.The site on the right, which we have seen before, uses color to increase readability, and to emphasize importance.The headings are all the same. The calls to action are consistent as is the body text .Using the same color scheme consistently helps to guide your reader and allows you to emphasize what is important.Webs templates are well defined when you start, but you can customize them for color and font usage.One thing we recommend is using your brand colors, and you can by altering the template.If you have brand colors, great just use them, but if you are starting out and trying to determine what color combinations work well togetherAdobe has a great site called Kuler, K – U – L – E – R (http://kuler.adobe.com).Just Google kuler, and you’ll find it, but what it does is help you build a color schemefrom a single color and it will provide you with what’s called the hexidecimal number for that color.This the six digit number that you can put into the color chooser of the Web’s sitebuilder.This number is different from Pantone, RGB or CMYK numbers. If you have those there are lots of sites that will convert those to Hexidecimal for you, just google “hexidecimal converter”. Now we’ll move onto Element 2 – Providing Relevant Content
• #13: Your site should provide relevant content for your readers. It should answer the question “what’s in it for me?”Good content is clear and to the point. A reader came to your site for information and if you can't provide it quickly they will move on to the next search result.Remember that a lot of people when they are searching on a desktop actually open up different tabs or different web browser windows,gone are the days of hitting the back button, they only need to close the tab or window to leave your site now.Avoid big blocks of text. The spaces of the “grid” are that size for a reason.Arrange your content based on the size of the block, the bigger and more predominate the bock is on the page, is a good indicator of importance.Make your content “sticky”, meaning that it’s compelling enough to keeps visitors on your site and coming back for more.If you’re exploring the world of SEO and SEM, you’ll also want your content to have your search terms in it.Think about what people are searching for, and use those phrases within your content.If you include videos and images, make sure that they are consistent with your site’s purpose.If you have a site about day-care, like the example, you shouldn’t include videos of kittens playing the doorbell.One other thing to consider on as relevant content is your address – not your url but your address.For example, I find your dog-walking site through a Google search, and I like what I see, but when I contact you, we determine you are seven states away from me.Nothing is more frustrating than that.If you have a business, include the address in your footer or somewhere on your site where you’re located.So lets look at two sites and see how applying this information can make those sites better…
• #15: How can you improve your content?So we’ll start with the site on the left.This site is a jumble of graphics and clutter. There is no grid structure for this site. It’s a visual assault.The images are small, the text is small, and a lot of it looks like one big huge run on hyperlink.It’s just really bad.But when you organize your content, like the site on the right, you’ll see that the visual path iseasier – meaning there is a clearly defined hierarchy that you want the reader’s eyes to follow.This site is easy on the eyes, and the content is organized.Even the header image, which uses different sized fonts is easy to read, and understand because this is format that we have all seen on a lot of blogs – it’s a way that blogs arrange their keywords in a block or space format that shows importance, how popular it is, and number of times used based on it’s size and color. The text on your site should be relevant, spaced well and employ the use of white space.This goes a long way to make your site one that people will want to come back to time and time again.The same can be said for how you use images and video .
• #16: Imagery can either make or break a site.Just like your text, it should not only connect with the reader but should also connect with the subject and purpose of your site.Also make sure the pictures are current, especially if they are related to your field or business purpose.The example on the left has a background that competes with the text.The text with the yellow shadow against that background is hard to read.And if people can’t read your text, they aren’t going to stick around.The site itself looks blurry. The pictures are first and foremost out dated, yes that computer does have two 5.25 floppy drives.And why is there a flower coming out of the monitor, how does that say “web design”?The example on the right is light years ahead of the “bad example”. It uses imagery that conveys emotion and connects to the reader.They even use imagery that is theme appropriate to the monochromatic color scheme – black, grey and white – of the site.So once again, color isn’t only important in the use of fonts and text, but also to your graphical elements, and as you can see it really pulls the site together.One more word about images, when you design your site, always use the “alt image” tag for images. It is a great way to add SEO information,but also is key to allowing disabled individuals access the information on your site. Think of alt images as a “caption” for your pictures. It provides a description of the image.Lets move on to element three – Navigation.
• #18: Navigation is the “GPS” of your website.Navigation or Nav Bars are the buttons that get your visitors where they need to go to get information or do certain things.Usually this bar is along the top, as we in this one, or along the left side of the site.Additionally, a lot of website sites, especially if they are “tall”, meaning that you have to scroll up and down to get all of the content will put anavigation area in the footer of each page, this is usually just text links that mirror the navigation buttons at the top of the page.Some things to keep in mind about your navigation is to make sure that you include a home button, this makes it easy for readers to get back to your main page.It’s also a good idea to include a “contact us” button, this way if a reader can’t readily find the information that they are looking for, they have a way to reach you and “directly” ask a question.And finally keep your navigation consistent. It shouldn’t change from page to page. If the line up on the main page is “home, about us, find a location, blog, and contact us”, that’s the way it should appear on every page.So what can we do to improve navigation?
• #20: The example on the left is one that just out of control.It’s an extreme example of how your navigation can get out of hand.This website owner just kept adding additional pages to their site and made each one part of the navigation.It’s very busy and confusing, and for all intents and purposes, there were good intentions, but it just gets out of hand very quickly.As a visitor to the site, you would not know where to go. This user could easily fix this by picking out 5 to 6 main topic areas and then “nest” other pages underneath that main topic area.The example on the right is much better. It uses a clean and neat navigation bar.The person who built this site, clearly understands the importance of “high-level navigation” and uses “standard navigation terms” - Home, About Us, Photo Gallery, Contact Us, Web Store, and Terms of Service. Immediately upon coming to this site, you know where to go to get the information you need.Let’s look at some other navigation tips that will help you.
• #21: Navigation BarKeep it simple and consistent. We recommend that it should be 5-7 “topics” at most.Internal LinksInternal links are another way to increase navigation throughout your site. An example of this is if you have a blog and you want to link to another blog entry or even a product you may sell on your site.Site MapsA lot of corporate sites will have this, usually in the footer information of their pages, a link. Basically it’s a table of contents for your site. But using a sitemap can also help with search results, especially when they are well designed and built using those keywords we spoke about.
• #22: Here’s an extreme example on the left of navigation gone wild. This website owner just kept adding additional pages to their site and made each one part of the navigation. Look how busy and confusing this looks. As a visitor to the site, you would not know where to go. This user could easily fix this by picking out 5 to 6 main topic areas and then “nest” other pages underneath that main topic area.Let’s contrast that with the page on the right. Look how clean and neat the navigation bar looks. This user clearly knows what topic areas are the most important to highlight for their site visitors – Home, About Us, Photo Gallery, Contact Us, Web Store and their Terms of Service. If I visited this site, I would know where to go to shop or learn more about them. Well done!Let’s look at some other navigation tips that will help you.
• #24: You visitors came to your site for a reason, and while they are there you want them to do something.You want your visitor to take some action - it could be as simple as signup for your newsletter, or something like make a purchase.The point is to get the reader to do something other than just visit your home page and leave. The CTA should somehow be linked to your site’s purpose.You can see in the examples, the Webs call to action is “get started”, Photobucket uses “try it now” and Dropbox uses “download dropbox”.The Call to Action is a set of words that urge your reader to take an immediate action. So with that in mind, how can we improve a call to action?
• #26: Use the right size for your call to action.It should be big enough to make it clearly visible. I still haven’t found one for the site on the left.Make it obvious – make it look like a button, make the text large enough to register that it’s a button and not just text on the page.Make sure your CTA is recognizable. Make it look like a button, don’t hide it as hyperlink text or something like that.Make sure it’s recognizable – use the arrow icon, use “actionable words” download, start, learn more….
• #27: Color, our old friend color.We already know that color plays a huge role in the way you make a person feel about your site and how they connect to it.But for your CTA, you should use colors that stand out from your scheme for CTA.If you have a blue color scheme, use a high contrast color like bright magenta for a button because it stands out.In this example, there are a few buttons, “Get Skype for Windows” “Get Skype for Business” and they are in high contrast areas – blue on white, and then bright blue against a gradient, but the most important one is the one at the top, in the bright magenta color that says “special offers”.Also think about the implied meaning of color – red stop/ green go…If you Google “color theory and calls to action” you’ll find tons of information about which color is best and where to place it, but one of the best things to do is test!Test which colors and phrasing works best with your audience.
• #28: Finally, placement. Where should you place the Call to Action on your site?Well one thing to remember is the importance of it and what it does. Secondly, it’s placement should include enough empty or white space around it to “make it pop” and make an impact.Meaning you don’t want it to get lost.And lastly, it shouldn’t be below “the fold”. The fold, is actually an old newspaper term, meaning the information “above the fold” of the paper was the most important.So you don’t want your CTA to be on a portion of the screen that you have to scroll too.How do you know if someone will have to scroll to get to your CTA?Google labs has a great little app called “Browser Size” (http://browsersize.googlelabs.com) you can go to that site and have it overlay the different browser sizes on yoursite and you’ll see what percentage of the web-reading public will see your call to action. And it’s free!
• #29: So let’s see… we talked about size, placement and color…But probably the most important part of the your call to action is the text.The biggest piece of advice for this is make it actionable! Use words that dictate an action “click here”, “download now”, “click to call”….Calls to action should be clear and straight to the point – often times you only have a 1 or 2 inch wide button to get your readers to do something – therefore it needs to be clear, concise and straight to the point.You should also be truthful about what your reader is getting into. If the CTA is for sign up for our newsletter, then sign them up for the newsletter, don’t send them to a page to download something.There is no tried or true formula for what makes a CTA work on one site and not another so the best method is to test….Test size, color, placement, text…until you find what works best for your audience.
• #31: The 5th Element is Creditability.1. Verified LinksMake it clear you aren't a scamming site.Post verified link if you do credit card processing and don’t alter those images to “fit your brand”. They are trusted markers for a reason, and should stay that way.2. State your Identity3. Clearly displayed contact informationClearly state your address and contact info, best to provide both email AND phone.If you have a brick and mortar store, display your hours. 4. Good Grammar Most of all, pay attention to detail. Most scamming sites are full of errors and misspellings, make sure that your site is very professional and error free. 5. Social Proof:Adding social proof – Twitter, Facebook, Google+ icons, in addition to a twitter feed - can also increase your website credibility –putting these icons on your page also gives the reader another method to contact you in case their email doesn’t work, they can post on your Wall, they can tweet you…and will if they see you are more responsive to social media than email or phone calls.
• #32: These are just some examples of social proof.Project Foot includes a facebookplugin for the people who like their facebook page. If you visit a site that has this, and you visit it often, make a mental note to see if changes,it should change and if you’re logged into facebook and have a cookie on your computer, it should show some of your friends at some point.The site on the right also uses a facebookplugin which updates with their facebook status.And finally, we’ll look at Mobility.
• #34: More and more people are looking at your site from a mobile phone or web enabled device. It seems like anything with a screen and a microchip in it is capable of getting on the internet these days.So What do you need to do to prepare?Your webs website is automatically converted into a mobile friendly site when you build it.If you’re a Premium user, that site is ad-free – which increases your credibility and makes you look more professional and trustworthy…so if you haven’t already you might want to think about upgrading your current package.Also, since our “smart phones” are becoming more than just phones and ways to communicate, more and more people are carrying them everywhere and using them to “check-in” to locationsusing apps like FourSquare and Facebook, so make sure that your address is easy to find, updated with Google Places for not only search but also for maps.And since mobile browsers are really looking for the “here and now information” make sure that your mobile site isn’t image heavy, because those take time and bandwidth to load.Some one may be a few blocks away from your physical location and because they can’t find your contact information or the site takes too long to load, they’ll leave.
• #35: Well that’s it for the 6 key Elements of a Website:1. Good Visual Design – use a theme to keep you on track, use white space and think about color usage and meaning2. Content – make sure the content is what your readers want, provide good relevant content3. Navigation – should be simple to use, and group like pages under the same topic to streamline navigation4. Call to Action – test the placement, size and color of these…make sure you use actionable words5. Credibility – use verified links, state your identity and display contact info, and use good grammar and employ social proof.6. Mobile site – make sure your site is viewable on a mobile internet enabled device.Now we have told you what to do to get the best looking site, here are the 5 mistakes that can spell disaster for your site:
• #36: So here is the What you shouldn’t do portion of the presentation…5 rules to live by that we all forget sometimes.1. Stale Content: don’t let your site go dormant. Visitors and potential visitors will skip over your site when content is old and out of date – not to mention the effects this has on your search results.2. Too much content: this is worse than not enough content. The more people have to read through narratives and long drawn out chunks of information,the quicker they are going to leave your site. Leave the long-windedness to your blog entries.3. No Photos: using no imagery makes your site boring and dull. Today’s web readers expect some amount of content mixed with pictures or logos and icons. If they don’t see that they are going to think that the site is broken, that the pictures aren’t loading properly and they’ll bounce even quicker.4. Looking illegitimate – Customers, especially when visiting new sites, will come in with their guard up – especially if they have been the victim of internet fraud before.The lens of the tainted viewer is always going to err on the side of “shady site”, and even more so if the site looks like one.Organizing your content, using consistent colors, employing a theme that stays the same from page to page, along with landing pages that match email campaigns(if you’re doing email marketing) are key to making a site look legit.5. Being Bland - You started your business because of some sort of drive, and a story there. You spent all this time putting together a business plan and starting your company – let your site convey your personality. If you have a business where you great everyone by name, smile and are generally happy, pick a theme and convey that.Avoid color schemes and writing that is “boring”. You have to keep your visitors attention and a bland site will get some one to leave very quickly.
• #37: How do I know if I have a good website? One thing you can do is ask someone. Have them quickly look through your website and if they can’t tell you what it’s about or what your product is, it’s probably time to change it.How often should you update your website? Every two week is a good rule of thumb for a site, but you shouldn’t update all of the content because what you are basically doing is resetting the search engine spiders and they have to “learn all of your content all over again”, and this will have an impact on your search results. If you maintain a blog, try to update that more frequently and like we said if you’re experimenting with SEO and SEM, use your search terms in your blog posts too, this will drive traffic and search results.Does design play a roll in search engine results? Yes and no, the over all physical design of your site doesn’t have a say in it, but you need to remember that the content does.