Some guidelines for Website Design

You have a great product. You also have a great company image and marketing model. Now it is time to implement all your plans and bring together a website. You know very little about websites. Finding websites that have failed is easier than shooting fish in a barrel. Many people come into the internet business with the notion that if they are on the web, they are guaranteed to make money. Not so. The internet market is flooded these days, and in order to get noticed, there is a way to do things.

So, your first idea for a website is one with lots of things that move, flash, talk, or whatever. Most people think this is the best way to draw attention to their website. It draws attention, but if no one knows what your company is, they won’t find the website this way. It also can be a little annoying to visitors. Websites must be picked up by the search engines in order for people to start finding them. However, search engines do not like all those elements because in the search engines view it is the equivalent of a novel, when all they are looking for is a one page report. Granted, once you are a large established business like a television network or a shopping corporation, people will come to your site no matter what, and search engines lessen the penalty for using lots of heavy files.

Now you think you want the easy way out and want to go with a template website. Templates are a cheap and quick way to get a website live on the internet. There are different types of templates, but the ones you want to stay away from are those which are nothing but images. These websites are created in a photo editor so that all the components of the site like buttons, information, and descriptions are all just pictures of text, and not actual text. Search engines use programs that review your website to read what it’s all about. If all they see are image files, it doesn’t really tell them anything about the website. You also run into the same problem of presenting a book rather than a piece of paper. Images are large files, while pure text is not. It is in fact quite small in comparison.

So you realize you are going to have to put some work into the site to have it look how you want, and also be functional for search engines looking at it. Text is very important. All your buttons should be text. All your descriptions and company information should be text. Choose a layout that is easy to navigate with menus to locate all pages within the site. Also important is a site map. A site map will help you keep your site organized and it will help the search engines when they come to visit your site.

Choose a search engine optimization company that will help review your site. They can pick out things you may not notice. For example, design editors can help clean up html code and find any spelling errors. They can also help you choose the best web site design elements that will make your site look how you want, and also make it search engine friendly.

Good Links: 7 guidelines how to improve usability

How you write and design your links is crucial to your visitors clicking them or not. Write them badly and they leave, write them well and they stay. Who knows, they might even do exactly that what you created your site for. Following are 7 guidelines how links should be written to improve the usability of your site.


Do it consistently
Visitors learn for example how a website marks the links or where the "related-content box" can be found. Consistently adhering to these established "codes" will make it easy to navigate and read the site.

Breaking these conventions will interrupt the flow. Such distractions might be enough for the user to leave. When creating a site it is important to define all the conventions and rules that are used. Consistently following them is essential for giving the user an easy time when visiting.


Don't mislead the visitor
Although links can look however the screen-designer decides, certain standards have developed and find widespread use. Underlining a text for example is a common indicator.

It is good practice not to underline text, marking it blue or putting an arrow in front, if is not a link. Visitors might construe them to be clickable.

The same applies to images. Many users will try to click on a graphic or any other image. Very rarely, they will find an active link - a tiny, but nevertheless negative experience. Captions have proven to be effective to add that little bit of content that users need in order not to click on an image. And if a link is present, it can be placed in the caption itself.


Show used links
Marking which links have been visited is very valuable. It helps to quickly "tick off" when going through a site or helps in finding this piece of information from a previous visit. Unfortunately, a great many sites do not use this very basic feature.

If the "visited" feature should also extend to the navigation is debatable. On very deep sites it might be useful. On the other hand it might confuse the visitor. The navigation should be a constant and change only minimally.


Match the destination with the link
Clicking on a link can be compared to following road signs in a city never visited before - you are very happy if you get confirmation that the choice you just made was the one intended.

Same thing applies to links - if a link reads "find out more about our services" the page that it relates to should show the words "Our Services" somewhere prominently in the title. It confirms the action taken.

Well written titles indicate clearly what the main topic is on the page. This is very useful, especially considering that a lot of traffic directly dives deep into the page.

Embedded links used to their full advantage
Links are visually different than the surrounding text. Color, a markup or other cues denote a link. Something maybe even happens before you click - mouse-over effects or an overlay, displaying the title.

Everything is designed to draw your eyes away from the surrounding text. If you embed links within a sentence, readers will very likely notice the link first and only later read your content. On first thought that is unfortunate, but it can be turned into an advantage.

Since reading online involves lots of scanning, the eye is always looking for visual cues. They can be provided by using subtitles or in this case descriptive links. By creating a meaningful link, finding the relevant information on a page is made easier. "Click here" is less effective then "View a list of articles about usability".


How to link to files
When linking to a file it is likely that another application is opened and that the visitor is drawn away from the site. Not something that should be done lightly.

A great many times websites link to related documents, very often PDF files. What exactly can be found in the file, the visitor needs to figure out from the link itself. The first step in creating a good link to a document is to summarize the content. That gives the visitor information how he wants to proceed.

The second step is more basic by asking why the document cannot be created as a webpage. If it is worth to be put onto the site, it surely is worth the effort to make if searchable, fully integrated and less work for the visitor. Using for instance PDF-files can make sense. Very often however, it is simply easier for the developer to put it onto the site - but not easier for the visitor to use it.


Mark the external links
An internal link refers to a page or file within the current domain, an external link usually points to a site, housed on a remote domain.
Although technically there is no difference in how the code for the links is written, it is common usage, even a w3.org recommendation, to inform the user if an external site is accessed by a link.

The rationale behind this is not to confuse the visitor who is getting used to the layout, navigation and architecture of a particular site. An external link can either be declared by stating it in the text, by a specific icon (like for instance Wikipedia does) or even by using the "title" tag of a link.

Whether the new site is opened in a new browser-window or replaces the current content could depend on the kind of information the visitor will find. It could be argued that sites with related content or sites who delve further into a topic might best be opened in a new window. The visitor can more easily relate back to the original site. In that case not only the external link, but maybe also the fact of a new window opening should be placed with the link.


Creating good links is vital for creating a good site. A link for instance is the only possibility an e-shop has to have users put products into the shopping basket. If that link should be badly written or confusingly placed, many users would give up before buying. That would be like not accepting money from a client standing right in front of you.

Intelligent Design - Basic Design Guidelines

Intelligent Design - Basic Design Guidelines

Word Count:

1004

Summary:

When talking about intelligent design, we are not talking about the creation of man. Nope, this is more important! The creation of your media and site products.

Keywords:

site design, web design, intelligent design

Article Body:

When talking about intelligent design, we are not talking about the creation of man. Nope, this is more important! The creation of your media and site products.

There are some very basic things about design that one can learn that can vastly improve one's ability to make appealing and intelligent creations. Some of those things are:

1. Lining Things Up

2. Using Variation

3. Giving Breathing Room

4. Using the Grid

5. The Golden Section

6. Lining Things Up

Things that line up look nice. Things that are all over the place don't look nice. Of course, one must know rules to know which ones to break, so these rules are only guidelines. In general though, straight or smooth lines are appealing. Jagged and inconsistent lines are less likely to be appealing. A design with many elements lining up and a few elements that don't can create nice contrast, yet starting with things that line up is a nice easy rule for beginners.

To support these statements, lets look at examples of man-made objects. Roads, desks, walls, buildings, orange juice containers. The forms of all these objects are straight or consistent and any deviation from this norm is considered mildly repulsive. On roads, the matter is quite important to health. There is a merge under construction from the 60 East (that's how we identify freeways here in California) to the 215 South, where the turn starts at one size circumstance then abruptly veers a few degrees tighter to another sized circumstance. This slight change in curvature results in a driver having to adjust for this change with a slight, and apparently unexpected, turn of the wheel. I say apparently because road barriers prevent a driver from seeing the whole turn going into it and
there are a bunch of tire marks etched up the construction barrier right at the point of the change in curvature.

Lets look at desks. Obviously straight and even desks are good for writing, fit against straight walls well and look nice, at least to me. Buildings, like desks are convenient shapes for space efficiency, map drawing, road creation, furniture and room modularity. Sure, curved buildings are beautiful too, yet the curves are often very even, and more often than not, the curve is accompanied by a straight line in another dimension.

OK, orange juice - very nice to ship little square boxes. Long rectangles make a nice canvas for marketing. If the straight lines are not straight, but crumpled or dented, chances are you won't buy that carton.

All of these are man-made objects that benefit in usability from straight or evenly curved lines. Lets take a look at nature. Trees are basically straight lines. The trunks of a redwood forest all go in one direction with remarkable consistency. (That direction is up, by the way, unless you are on the opposite side of the Earth, in which case it would be down.) Again, this is usability for the tree - a competition in height to get to the sun. Leaves - straight veins out to the tips - same idea, get some (light). Curvature of the earth - smoother than the curvature of an 8 ball. Something to do with gravity which, for existence as we know it, is quite useful.

OK, OK, but how does this apply to my intelligent ___________ (fill in the blank - web site, ad, package design, solar electric car, hair)?

For your designs, line up your stuff in straight lines. Line up images so that image edges are lined up with image edges and lines, text with text, and other elements inline with other elements. This is a fundamental design principle yet, some websites are all over the place with every image and section of text every which way.

Using Variation

Things that line up and have no variation are boring. For example, straight long roads with no turns are quite boring. The 58 zigzags across the arid Southern California desert, between mountains, with every few miles a turn. The 5 goes in one straight line for mile after mile after hour after hours. Which would you rather drive?

Likewise, with web sites, if everything lines up on the same line, the page is likely to look very boring. You can change it up with:

1. Bold Titles

2. Lists of items

3. Indented text

All these things break up the monotony of straight lines and can add rhythm to a design. Yet if there is too much breaking up of the lines, the design can become junky looking noise That is hard to read. Hey, no doubt - some people are into that.

Giving Design elements Room to Breathe

Even things that line up do not generally look good if they can't breathe. Putting text right against the edge of another element has a claustrophobic feel. Some sites pack in so much information on one page that there are no margins or breathing space between elements. The result is in uncomfortableness and unreadability. Give your images and text margins, frames or room to breathe.

Use the Grid, Luke

To help you line things up, use graph paper, the Adobe Photoshop grid or draw a measured grid yourself. In the final design this grid is usually removed, but used in layout to ensure things line up nicely. Experienced designers often intuitively use a grid without physically having a grid in the design.

The Golden Section

There is a thing called the golden section, the golden ratio or the divine proportion. If you're really into math, you can do a search to learn more. For those of us not so into math, the Golden Section is a little more than a third. If you take a picture, it just happens to look real nice if you show a little more than two thirds sky. The same applies to many forms of composition. This golden section has some relation to basic geometry that seems to resonate with a human's sense of beauty.

Conclusion

When designing things, remember: Line things up, but don't get boring. Use grids to line things up. The golden section looks nice. Peace.

Beyond guidelines: Advanced accessibility techniques

When creating accessible websites, most web developers and web managers tend to follow the W3C accessibility guidelines. And rightly so - they are the most comprehensive accessibility resource on the Internet after all.

The W3C accessibility guidelines, or Web Content Accessibility Guidelines as they're officially known, could go slightly further however. Fulfilling the guidelines will give you a very accessible website (remember though, they are just guidelines so shouldn't always be taken literally). For ultimate accessibility though, try implementing some of these techniques too:


Hidden text

Hidden text can be very useful for screen reader users. If there isn't sufficient text for these users to gain an understanding of a particular section, then you can simply create this extra information and hide it from sighted users.

The most common and useful page items to insert invisible text for screen reader users include:

- Headings - Every single section on each page should have a heading placed immediately before it. This way, screen reader users always know that the preceding section has finished and a new section has begun. So, before the main navigation begins, you should insert a heading labelled, 'Site navigation'. Although this heading is extremely useful for screen reader users, it may look rather unsightly visually, so you can just make the text invisible.

- Form labels - Every form item must have a label immediately preceding it - otherwise, screen reader users won't know what the form item is about. Date of birth fields, with three separate fields for date, month and year, are common culprits of not providing form labels for each form field. So, place the date of birth label before the three form fields, and then insert an invisible label before each of the other two form fields, 'Month of birth' and 'Year of birth'.

- Skip links - A skip link is an invisible link that's placed at the very top of the HTML file. It's a relative link within the page, allowing users to jump straight to a section on the page, usually the main content. Skip links are really useful for both screen reader and keyboard-only users who can jump straight to the content, without having to work through the navigation.


Succinct, front-loaded and conventional link text

As a method of browsing through a page, screen reader users can call up a list of links on a page and jump to the link in which they're most interested. It's common knowledge that link text should make sense out of context, and this is indeed a W3C guideline. Link text such as 'Click here' would obviously make no sense in a list like this. It's also crucial that link text is:

- Succinct - so that it's quick and easy for screen reader users to work through this list
- Front-loaded - so that screen users can understand the meaning of the link straightaway and jump down to the next one if they're not interested
- Conventional - so screen reader users can alphabetise the list and jump to the link they're looking for (e.g. if the 'Contact us' link was labelled as 'Enquiries' it would be harder to find the website's phone number)

Link text is additionally important for users that finds it difficult to read online, such as screen magnifier users and those with learning difficulties and dyslexia. For these users when they scan through web pages, they'll often be unable to make out specific words - instead, they'll see shapes and colours. Anything that's in a high contrast colour is obviously a link, so they can stop and read it.

By making link text succinct and front-loaded, and using conventional link text, it's far easier for users that finds it difficult to read online to immediately comprehend links and what their destination is.


Visible font resizer

It's crucial that text is resizable for web users with poor or limited vision - or so the theory goes. In actual fact, user testing has shown time and time again that few web users actually know how to resize text, or that this functionality even exists.

By providing a visible font resizer all users are of course made aware that they can resize the text should they need to. To find out how to put a font resizer on to your website, read this article about stylesheet switching at http://www.alistapart.com/stories/alternate.

(Incidentally, if you don't know how to resize text simply select 'View > Text size' in either Internet Explorer or Firefox; alternatively, scroll with the wheel of your mouse whilst holding down the control key.)


Place instructions first

If you provide instructions for any kind of functionality on your site, make sure that the instructions are placed before the functionality. This of course sounds obvious, but it's amazing how many times this rule isn't adhered to.

Screen reader users listen to pages in the order that they're written in, so if any instructions come after what they're relating to then that's obviously going to be too late.

Placing instructions first is also crucial for screen magnifier users. Screen magnifier users can only see a small section of the screen at any one time, so if instructions are placed in an out-of-the-way place they'll likely be overlooked.

Web forms are perhaps the most common type of functionality to contain instructions. Do be sure that any instructions are placed above the form and not below it. Mis-placed instructions usually include explaining which fields are required and error messages.


Large headings

Headings are crucial for all users to find what they're looking for quickly and efficiently. They are however particularly useful for any user that finds it difficult to read online, such as screen magnifier users and those with learning difficulties and dyslexia.

When these users scan through web pages, they'll often be unable to pick up words and instead will see shapes and colours. By using a large font size for headings, these users will easily be able to spot these important headings.


Focus state for links

Keyboard-only web users can navigate through web pages by tabbing from link to link (and form item to form item). It can however sometimes be difficult to know exactly where you are on the page when relying on the tabbing method. By assigning a background colour to the focus state of each link, it becomes much easier for these users to orientate themselves on the page.


Large link target

Many web users with dexterity problems will use only the keyboard to browse through a website. Some will still continue to use a mouse but with rather limited control, so wherever possible do try increase the area of the link target. This is of course not possible for regular links, but for vertical based navigation lists it's easy to extend the clickable area to the full width of the column by assigning the style, display: block to each link.


Conclusion

The W3C accessibility guidelines are of course important, but if you want your website to be truly accessible then there's more that you can do. Following the advice in this article is of course a great start!