National Cyber Security Awareness Week 6–11 June 2010

‘Stay Smart Online’ is The Australian Government’s website which aims to help raise awareness and help people better protect themselves and stay safe online.

This site provides a lot of useful resources which combine cyber security from various government agencies.

You can find 6 important (quick) tips that everyone using a computer or the internet should be well aware of. We really urge you to take the time to at least view these 6 steps, and help protect yourself online.

Visit the Stay Smart Online website.

We still come across many sites that simply don’t work unless you type in www. Before the domain name. This potentially means you are losing website visitors who type your domain name in without the www, and as a result, see an error page advising the web page does not exist.

This is actually a really simple thing to setup with your domain DNS settings, and yet many fail to do so. Quite often this is due to a companies IT Department or support team not having much knowledge of the web, and so do not realise the need to do so. Speak to your IT Support or your domain registrar if your domain is currently not setup properly. It is simply a case of entering two ‘A Records’ to your domain servers, one for the non www record, and one for the www. Record.

Online fraud is something many people worry about when purchasing products or services over the internet, and so they should. While many shopping sites have measures to protect you as much as possible, there are also a few things you can do to help protect yourself:

• When purchasing through a site that takes credit card payments, check it has an SSL certificate (the little padlock in the address bar on your browser, or at the base of your browser)
• If the site is using a 3rd party payment processor that it redirects you to, make sure it is a well known payment site such as Paypal or 2CO. The advantage of using PayPal is that they offer buyer protection, and a great dispute resolution system, so you can feel much safer shopping using PayPal.
• Make sure any passwords you use compromise of upper and lower case letters and numbers. Also avoid using dictionary words.
• Avoid using a password you use for your internet banking, on an unknown shopping site.
• You are using an updated browser. We recommend FireFox. If you use Internet Explorer, make sure you are using Version 7. (best not to try V8 at this stage)
• If you receive an e-mail from your bank, PayPal, or any other financial institution asking you to ‘click here’ to update your details, or for any other request, do not click on the link in the e-mail. Institutions like this will not send you this kind of message. If you are unsure, simply type the name of the site that appears on the e-mail directly into your browser.
• Always check your bank statements carefully, just to be sure no transactions appear that you have not authorised.

Making use of some of the measures above will ensure you are decreasing the changes of fraud, and making it safer for you to shop online.

Each day at StepForth Placement we view dozens of websites that request a SEO Review and a vast majority of these sites have fundamental usability problems. Often times neglecting this important element of a website can lead online visitors to become lost, frustrated and/or confused. All it takes for a visitor to decide to stay, explore or leave a site is 0.4 of a second. Attracting visitors to your website is a formidable challenge; it is yet another to build a fast connection with them and keep them there. With this in mind, here are some simple measures that can be taken to remedy these mistakes and help promote your online conversions.Having great search engine placements is one thing but to create a usable website environment is just as important. What good can come from “being found” if users quickly exit your site? A solid search engine friendly and usable website should be your answer to both of these major components for your online success.

There are a variety of standards still in place when it comes to designing a usable website. This is not to say that the uniqueness and creativity of your website has to suffer, rather by following some simple guidelines visitors know where to go to find the information they need.

The process of developing a usable interface can be a balancing act. Some core elements need to be assessed prior to any actual design work being done. Attention to content creation, search engine friendly design tactics, and the face you put on your design each have to be blended into this usable environment.

This is a timely subject for us at StepForth as we are in the early stages of revamping our own websites based on customer / client feedback, recent trends in the design world, and our ever increasing need to develop a scalable website solution. Needless to say we will be following the same guidelines outlined below to ensure we have a website that “works”.

I would highly recommend referring to the related links located at the bottom of this article for more details on this subject.

Here is a snap shot of the most common design mistakes we see with websites.

Content

Formatting Linking Text

Frequently we see designers underline body text or even text in images that is not directing users to another part of the website. Underlining on non-linking text is a huge problem especially if you have other links on the site that use the underline to illustrate a clickable path to follow.

A current trend is to have links displayed in body text without the underline text decoration (as defined in the website’s CSS ) yet this may still cause unnecessary confusion with users. Try using other methods to highlight a message you want to stand out from the rest of the page content when it is not intended to be a hyperlink.

The same rules apply with the actual colour scheme you choose for your text. Avoid the use of the standard link colour blue (RGB colour #0000FF) for non-linking text as well. This will stop users from becoming frustrated when they attempt to clíck on text that will take them nowhere.

High Contrast Body Text

Another poor design trend we are seeing more of is the presentation of grey body text on a white background. This has no value what so ever as it immediately excludes a vast majority of users that cannot even read what is displayed. This is definitely one case where usability outweighs the need for attractive page aesthetics.

If clarity is your goal for your website, then advocate high contrast body text. This rule also applies to text on images; it is best to avoid fonts and styles that are hard to read.

Page Scanning

The old saying “first impressions are important” holds true when it comes to a visit to a website. There is a fine balance when it comes to how much text to include on any give page or subject. Remember time is precious before a user determines if they are in the right location on your website or not. Keep your initial message brief and informative and offer related pathways if the user wants to learn more. Most users have the habit of quickly scanning a couple of paragraphs before they either decide to learn more or look elsewhere.

Site Structure and Page Organization

Promoting a site structure that builds a level of user confidence is critical to a website’s success. Will visitors find the information they are looking for or can they clearly understand your message? Solidifying a clear and organized site structure from the top down will help with this.

Logical Site Structure

Depending on the scale of the website this task can be fairly easily implemented. Unfortunately a common mistake is to try to cram as much information on a page as possible. Each topic should have its own page and any additional related material to that content should be the only linked content present (other than the main site wide navigation). To help clarify this, here is an example:

Perhaps you are selling musical instruments online and the page in question is a guitar you are trying to promote. Included on this page should be the standard image(s) of the product, and the description of the product in detail. If users wish to learn more about the product such as technical specifications or an online downloadable manual they should be (logically) linked on the page as well, along with any other relevant material directly related to that product.

It is very easy (and common) to want to point to other unrelated content that you think a user might want to know about. Do not offer opportunities for them to be led astray by cluttering the page with other products. Chances are potential customers arrived to that particular page because they wanted to. Cluttering a page with additional information about the latest flute in stöck is not going to help conversions.

Perhaps the reason that web designers fall into this trap is most likely because they try to employ tactics used in print advertising. With print advertising you are given a certain amount of ad space to illustrate your product. Sometimes the designers forget that websites are dynamic and can grow beyond that page.

Splash Page

Visitors are coming to your website to find the information they are looking for and often the first thing they see is a splash page. The majority of the time these intro pages offer nothing useful to the user and fall outside any consistent look and feel of the rest of the website. Generally speaking, the sole purpose of a splash page is to add a “cool” factor to the entryway to the site. Each and every page on your site including the homepage should be informative and consistent in look and feel.

AN SEO NOTE: If the above is not enough to scare you off of using splash screens, consider that SEOs believe the index page (aka the home page) is perhaps the most crucial element to successful search engine placements. If you have very little relevant content on your index page it throws up an unnecessary barrier to the search engines. What good can come from making your website usable if nobody can even find it to begin with? Learn more about the dangers of Splash Screens >>

Navigation

The placement and organization of the navigation on your website is critical to keeping those potential customers on your website. Customer satisfaction statistics state that up to 95% of visitor frustration comes from inadequate navigation methods.

Maintain Site-wide Standards

Exactly where is the best place on a page to insert your navigation? Numerous studies have been done on this. Should the main navigation be on the top of the page? Should it be on the left hand side of the page? However you choose to present your navigation keep it consistently placed throughout the website. Users should always know how to get back to information they have already seen and as well, they should be confident they can find the information they have yet to read. The homepage button should be in the same place on the page regardless of where you are on the site.

What am I Clicking?

Users should always be made aware ahead of time by what is stated in the anchor text or button where they will go if they clíck that particular link. If the clíck leads to a downloadable piece of software or to a PDF file, inform them upfront. A vast majority of web surfers are discouraged by unexpected results by navigating through websites and being forced into something they do not want to do.

The following is a good example on how to inform a user that the link they are about to clíck is a PDF file (warning: the following examples are not linked):

“Product” User Manual in PDF format (16MB)

Or

“Product” User Manual (16MB – PDF format)

NOTE: It is also a common courtesy to inform users of the physical size of file to be downloaded, as shown above.

Just like there are rules of the road when driving a car there are guidelines to follow when developing a website. It is important to note that if tackled in the right manner incorporating basic usability components should not hamper creativity with the vision you have with your website.

If you have any questíons about search engine friendly (and usable) designs please contact me.

Related Links

SEO Friendly Redesign – By Mark Johnstone

Is Your Website Search Engine Friendly? Your Personal Checklist – By Ross Dunn

The Ten Minute Optimization REDUX – By Ross Dunn Includes pointers “Is your Page Marketable” (Section 2.B)

Website Usability Leads to Conversions – By Jim Hedger

About The Author
Article by Mark Johnstone, Senior Web Developer, Pure Ignition, a division of StepForth Placement.

When I help people with web pages, I encourage them to edit the HTML directly and not rely on programs like Microsoft FrontPage or Adobe GoLive to layout their pages. One of the things that most people have a hard time grasping is what HTML Color Codes mean and how they work.HTML Color Codes are 6 characters wide and look like “#80FF12″. This is really made up of 3 2-digit hex numbers that represent Red, Green, and Blue. I probably just lost a good portion of the readers, didn’t I? Let me back up and explain some things about hex values and color.

How to describe a color using numbers? There are a lot of ways to specify a particular color, but one of the ways that’s used with computers is to specify the values of Red, Green, and Blue to mix together to achieve the desired color. As we vary the amounts of Red, Green, and Blue we can create most any color you desire.

Why does this relate to computers? Computer displays, TVs, LCDs, and other “projected light” display devices use pixels to display what you see on the screen. The color value for those pixels is specified in a RGB (Red, Green, and Blue) value. For example, if your PC monitor is set to 1024 x 768 resolution, then there are 768 lines (going across your screen from top to bottom) on your screen, each line has 1024 pixels or little dots in it. Each of those pixels or little dots is actually made up of three smaller dots or light sources: a red one, a green one, and a blue one.

Ink is different. Printers that you use with your computer generally specify color as a four (or more) color “reflective” ink value made up of Yellow, Magenta, Cyan, and Black which is abbreviated as YMCK. Your computer uses formulas to convert the RGB values to CMYK values so that you can print what you see on your screen accurately.

How does the computer represent a RGB color value? As 3 separate values (one for Red, one for Green, and one for Blue) and each one ranges between 0 and 255. If you count the 0 as a value, that’s a total of 256 possible values. When you put the Red, Green, and Blue values together to represent a color, you get a possibility of 16.7 million colors (256 x 256 x 256). That’s a lot of colors and most people consider this to be “true” color because it can represent most photographs and images.

OK then, what is a Hex value? I’m glad you asked! Your computer stores information as single ones and zeros. Each of these tiny single values is called a “bit”. We then combine 8 of these “bits” to make a “byte”. So a byte is 8 bits. If you recall from high school math, you can count in various “bases”. We normally use base 10 or “decimal”, which uses 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 to represent a number. Likewise, if we use the ones and zeros I just mentioned, we’re talking about just two possible values for each digit, 0 or 1, and this is called base 2 or “binary”. However, in computers, we also use base 16, or hexadecimal (hex for short) because it packs more values into a single space. Hex uses the following digits to represent a number: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. To represent the number 128 in decimal or base 10 takes 3 digits (128), in binary it takes 8 digits (10000000), and in hex or base 16 it takes just 2 digits (80). So by using hex values we save storage space and gain efficiency.

OK, my head hurts now, how does this relate to HTML color codes? HTML colors codes are made up of 3 sets of hex numbers, one for Red, one for Green, and one for Blue.

For example:
000000 is black (0′s for all three colors)
FFFFFF is white (255′s for all three colors)
FF0000 is all RED (255 for Red, 0 green, 0 blue)
00FF00 is all GREEN (0 Red, 255 green, 0 blue)
0000FF is all Blue (0 red, 0 green, 255 blue)
FFFF00 is Yellow (255 red, 255 green, and 0 blue)
808080 is a gray (128 red, 128 green, and 125 blue)

Generally in HTML, you also put a “#” in front of the color code, but this is not necessary when you specify all 6 digits. If you make profiles for mySpace.com, leave off the “#” too because they filter them and it won’t display the color correctly if you use the “#”.

You can use the calculator that comes with Microsoft Windows to convert between Decimal and Hex values. Open the calculator and select View and then Scientific. Once you do this, you’ll see more buttons and controls on the calculator. Clíck “Dec” and the key in a number. Now clíck “Hex” and it’ll convert the number to hex. To convert from Hex to Dec, clíck on “Hex”, key in the number, and then clíck “Dec”. Sometimes you’ll get a color specification in Decimal, for example (128, 30, 80) and you can use this method to convert it to hex (80, 1E, 50) which would look like this for your HTML color #801E50.

I hope you understand more about HTML Color Codes and how colors are stored and specified in computers.

About The Author
Visit Fred Black’s web site www.InternetMakeMoneyOnline.com. Discover how to Make Money Online with internet marketing techniques and skills that are easy to master – 100% Guarantëed.