Saturday, March 31, 2007
A Web Standards Checklist, How to make a proper website
The term web standards can mean different things to different people. For some, it is 'table-free sites', for others it is 'using valid code'. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).
In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly.
About the checklist
This is not an uber-checklist. There are probably many items that could be added. More importantly, it should not be seen as a list of items that must be addressed on every site that you develop. It is simply a guide that can be used:
* to show the breadth of web standards* as a handy tool for developers during the production phase of websites* as an aid for developers who are interested in moving towards web standards
The checklist
1.Quality of code1. Does the site use a correct Doctype?2. Does the site use a Character set?3. Does the site use Valid (X)HTML?4. Does the site use Valid CSS?5. Does the site use any CSS hacks?6. Does the site use unnecessary classes or ids?7. Is the code well structured?8. Does the site have any broken links?9. How does the site perform in terms of speed/page size?10. Does the site have JavaScript errors?
2. Degree of separation between content and presentation1. Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?2. Are all decorative images in the CSS, or do they appear in the (X)HTML?
3. Accessibility for users1. Are "alt" attributes used for all descriptive images?2. Does the site use relative units rather than absolute units for text size?3. Do any aspects of the layout break if font size is increased?4. Does the site use visible skip menus?5. Does the site use accessible forms?6. Does the site use accessible tables?7. Is there sufficient colour brightness/contrasts?8. Is colour alone used for critical information?9. Is there delayed responsiveness for dropdown menus (for users with reduced motor skills)?10. Are all links descriptive (for blind users)?
4. Accessibility for devices1. Does the site work acceptably across modern and older browsers?2. Is the content accessible with CSS switched off or not supported?3. Is the content accessible with images switched off or not supported?4. Does the site work in text browsers such as Lynx?5. Does the site work well when printed?6. Does the site work well in Hand Held devices?7. Does the site include detailed metadata?8. Does the site work well in a range of browser window sizes?
5. Basic Usability1. Is there a clear visual hierarchy?2. Are heading levels easy to distinguish?3. Does the site have easy to understand navigation?4. Does the site use consistent navigation?5. Are links underlined?6. Does the site use consistent and appropriate language?7. Do you have a sitemap page and contact page? Are they easy to find?8. For large sites, is there a search tool?9. Is there a link to the home page on every page in the site?10. Are visited links clearly defined with a unique colour?
6. Site management1. Does the site have a meaningful and helpful 404 error page that works from any depth in the site?2. Does the site use friendly URLs?3. Do your URLs work without "www"?4. Does the site have a favicon?
1. Quality of code
1.1 Does the site use a correct Doctype?A doctype (short for 'document type declaration') informs the validator which version of (X)HTML you're using, and must appear at the very top of every web page. Doctypes are a key component of compliant web pages: your markup and CSS won't validate without them.CODEhttp://www.alistapart.com/articles/doctype/
More:CODEhttp://www.w3.org/QA/2002/04/valid-dtd-list.html
CODEhttp://css.maxdesign.com.au/listamatic/about-boxmodel.htm
CODEhttp://gutfeldt.ch/matthias/articles/doctypeswitch.html
1.2 Does the site use a Character set?If a user agent (eg. a browser) is unable to detect the character encoding used in a Web document, the user may be presented with unreadable text. This information is particularly important for those maintaining and extending a multilingual site, but declaring the character encoding of the document is important for anyone producing XHTML/HTML or CSS.CODEhttp://www.w3.org/International/tutorials/tutorial-char-enc/
More:CODEhttp://www.w3.org/International/O-charset.html
1.3 Does the site use Valid (X)HTML?Valid code will render faster than code with errors. Valid code will render better than invalid code. Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant
HTML.CODEhttp://www.maxdesign.com.au/presentation/sit2003/06.htm
More:CODEhttp://validator.w3.org/
1.4 Does the site use Valid CSS?You need to make sure that there aren't any errors in either your HTML or your CSS, since mistakes in either place can result in botched document appearance.CODEhttp://www.meyerweb.com/eric/articles/webrev/199904.html
More:CODEhttp://jigsaw.w3.org/css-validator/
1.5 Does the site use any CSS hacks?Basically, hacks come down to personal choice, the amount of knowledge you have of workarounds, the specific design you are trying to
achieve.CODEhttp://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html
More:CODEhttp://css-discuss.incutio.com/?page=CssHack
CODEhttp://css-discuss.incutio.com/?page=ToHackOrNotToHack
CODEhttp://centricle.com/ref/css/filters/
1.6 Does the site use unnecessary classes or ids?I've noticed that developers learning new skills often end up with good CSS but poor XHTML. Specifically, the HTML code tends to be full of unnecessary divs and ids. This results in fairly meaningless HTML and bloated style sheets.CODEhttp://www.clagnut.com/blog/228/
1.7 Is the code well structured?Semantically correct markup uses html elements for their given purpose. Well structured HTML has semantic meaning for a wide range of user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
CODEhttp://www.maxdesign.com.au/presentation/benefits/index04.htm
More:CODEhttp://www.w3.org/2003/12/semantic-extractor.html
1.8 Does the site have any broken links?Broken links can frustrate users and potentially drive customers away. Broken links can also keep search engines from properly indexing your site.
More:CODEhttp://validator.w3.org/checklink
1.9 How does the site perform in terms of speed/page size?Don't make me wait... That's the message users give us in survey after survey. Even broadband users can suffer the slow-loading blues.CODEhttp://www.websiteoptimization.com/speed/
1.10 Does the site have JavaScript errors?Internet Explore for Windows allows you to turn on a debugger that will pop up a new window and let you know there are javascript errors on your site. This is available under 'Internet Options' on the Advanced tab. Uncheck 'Disable script debugging'.
2. Degree of separation between content and presentation
2.1 Does the site use CSS for all presentation aspects (fonts, colour, padding, borders etc)?Use style sheets to control layout and presentation.CODEhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets
2.2 Are all decorative images in the CSS, or do they appear in the (X)HTML?The aim for web developers is to remove all presentation from the html code, leaving it clean and semantically correct.CODEhttp://www.maxdesign.com.au/presentation/benefits/index07.htm
3. Accessibility for users
3.1 Are "alt" attributes used for all descriptive images?Provide a text equivalent for every non-text elementCODEhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent
3.2 Does the site use relative units rather than absolute units for text size?Use relative rather than absolute units in markup language attribute values and style sheet property values'.CODEhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
More:CODEhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units
CODEhttp://www.clagnut.com/blog/348/
3.3 Do any aspects of the layout break if font size is increased?Try this simple test. Look at your website in a browser that supports easy incrementation of font size. Now increase your browser's font size. And again. And again... Look at your site. Does the page layout still hold together? It is dangerous for developers to assume that everyone browses using default font sizes.3.4 Does the site use visible skip menus?
A method shall be provided that permits users to skip repetitive navigation links.CODEhttp://www.section508.gov/index.cfm?FuseAction=Content&ID=12
Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.CODEhttp://www.w3.org/TR/WCAG10-TECHS/#tech-group-links
...blind visitors are not the only ones inconvenienced by too many links in a navigation area. Recall that a mobility-impaired person with poor adaptive technology might be stuck tabbing through that morass.CODEhttp://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020
More:CODEhttp://www.niehs.nih.gov/websmith/508/o.htm
3.5 Does the site use accessible forms?Forms aren't the easiest of things to use for people with disabilities. Navigating around a page with written content is one thing, hopping between form fields and inputting information is
another.CODEhttp://www.htmldog.com/guides/htmladvanced/forms/
More:CODEhttp://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html
CODEhttp://www.accessify.com/tools-and-wizards/accessible-form-builder.asp
CODEhttp://accessify.com/tutorials/better-accessible-forms.asp
3.6 Does the site use accessible tables?For data tables, identify row and column headers... For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.CODEhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers
More:CODEhttp://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp
CODEhttp://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp
CODEhttp://www.webaim.org/techniques/tables/
3.7 Is there sufficient colour brightness/contrasts?Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits.CODEhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast
More:CODEhttp://www.juicystudio.com/services/colourcontrast.asp
3.8 Is colour alone used for critical information?Ensure that all information conveyed with colour is also available without colour, for example from context or
markup.CODEhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey
There are basically three types of colour deficiency; Deuteranope (a form of red/green colour deficit), Protanope (another form of red/green colour deficit) and Tritanope (a blue/yellow deficit- very rare).
More:CODEhttp://colourfilter.wickline.org/
CODEhttp://www.toledo-bend.com/colourblind/Ishihara.html
CODEhttp://www.vischeck.com/vischeck/vischeckURL.php
3.9 Is there delayed responsiveness for dropdown menus?Users with reduced motor skills may find dropdown menus hard to use if responsiveness is set too fast.
3.10 Are all links descriptive?Link text should be meaningful enough to make sense when read out of context - either on its own or as part of a sequence of links. Link text should also be terse.CODEhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links
4. Accessibility for devices.
4.1 Does the site work acceptably across modern and older browsers?
Before starting to build a CSS-based layout, you should decide which browsers to support and to what level you intend to support them.CODEhttp://www.maxdesign.com.au/presentation/process/index_step01.cfm
4.2 Is the content accessible with CSS switched off or not supported?Some people may visit your site with either a browser that does not support CSS or a browser with CSS switched off. In content is structured well, this will not be an issue.
4.3 Is the content accessible with images switched off or not supported?Some people browse websites with images switched off - especially people on very slow connections. Content should still be accessible for these people.
4.4 Does the site work in text browsers such as Lynx?This is like a combination of images and CSS switched off. A text-based browser will rely on well structured content to provide meaning.
More:CODEhttp://www.delorie.com/web/lynxview
4.5 Does the site work well when printed?You can take any (X)HTML document and simply style it for print, without having to touch the markup.CODEhttp://www.alistapart.com/articles/goingtoprint/
More:CODEhttp://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print
4.6 Does the site work well in Hand Held devices?This is a hard one to deal with until hand held devices consistently support their correct media type. However, some layouts work better in current hand-held devices. The importance of supporting hand held devices will depend on target audiences.
4.7 Does the site include detailed metadata?Metadata is machine understandable information for the webCODEhttp://www.w3.org/Metadata/
Metadata is structured information that is created specifically to describe another resource. In other words, metadata is 'data about data'.
4.8 Does the site work well in a range of browser window sizes?It is a common assumption amongst developers that average screen sizes are increasing. Some developers assume that the average screen size is now 1024px wide. But what about users with smaller screens and users with hand held devices? Are they part of your target audience and are they being disadvantaged?
5. Basic Usability5.1 Is there a clear visual hierarchy?Organise and prioritise the contents of a page by using size, prominence and content relationships.CODEhttp://www.great-web-design-tips.com/web-site-design/165.html
5.2 Are heading levels easy to distinguish?Use header elements to convey document structure and use them according to specification.CODEhttp://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings
5.3 Is the site's navigation easy to understand?Your navigation system should give your visitor a clue as to what page of the site they are currently on and where they can go next.CODEhttp://www.1stsitefree.com/design_nav.htm
5.4 Is the site's navigation consistent?If each page on your site has a consistent style of presentation, visitors will find it easier to navigate between pages and find informationCODEhttp://www.juicystudio.com/tutorial/accessibility/navigation.asp
5.5 Does the site use consistent and appropriate language?The use of clear and simple language promotes effective communication. Trying to come across as articulate can be as difficult to read as poorly written grammar, especially if the language used isn't the visitor's primary language.CODEhttp://www.juicystudio.com/tutorial/accessibility/clear.asp
5.6 Does the site have a sitemap page and contact page? Are they easy to find?Most site maps fail to convey multiple levels of the site's information architecture. In usability tests, users often overlook site maps or can't find them. Complexity is also a problem: a map should be a map, not a navigational challenge of its own.CODEhttp://www.useit.com/alertbox/20020106.html
5.7 For large sites, is there a search tool?While search tools are not needed on smaller sites, and some people will not ever use them, site-specific search tools allow users a choice of navigation options.
5.8 Is there a link to the home page on every page in the site?Some users like to go back to a site's home page after navigating to content within a site. The home page becomes a base camp for these users, allowing them to regroup before exploring new content.
5.9 Are links underlined?To maximise the perceived affordance of clickability, colour and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.CODEhttp://www.useit.com/alertbox/20040510.html
5.10 Are visited links clearly defined?Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.CODEhttp://www.useit.com/alertbox/20040503.html
6. Site management
6.1 Does the site have a meaningful and helpful 404 error page that works from any depth in the site?You've requested a page - either by typing a URL directly into the address bar or clicking on an out-of-date link and you've found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser's built-in ability to explain what the problem is.CODEhttp://www.alistapart.com/articles/perfect404/
6.2 Does the site use friendly URLs?Most search engines (with a few exceptions - namely Google) will not index any pages that have a question mark or other character (like an ampersand or equals sign) in the URL... what good is a site if no one can find it?CODEhttp://www.sitepoint.com/article/search-engine-friendly-urls
One of the worst elements of the web from a user interface standpoint is the URL. However, if they're short, logical, and self-correcting, URLs can be acceptably usableCODEhttp://www.merges.net/theory/20010305.html
More:CODEhttp://www.sitepoint.com/article/search-engine-friendly-urls
CODEhttp://www.websitegoodies.com/article/32
CODEhttp://www.merges.net/theory/20010305.html
6.3 Does the site's URL work without "www"?While this is not critical, and in some cases is not even possible, it is always good to give people the choice of both options. If a user types your domain name without the www and gets no site, this could disadvantage both the user and you.
6.4 Does the site have a favicon?
A Favicon is a multi-resolution image included on nearly all professionally developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser.CODEhttp://www.favicon.com/
Favicons are definitely not critical. However, if they are not present, they can cause 404 errors in your logs (site statistics). Browsers like IE will request them from the server when a site is bookmarked. If a favicon isn't available, a 404 error may be generated. Therefore, having a favicon could cut down on favicon specific 404 errors. The same is true of a 'robots.txt' file.
Tuesday, March 20, 2007
Website Usability - How to Make Your Website User-Friendly
a. Do visitors know which page they are viewing?
The best way to ensure your visitors don't get lost on your website is if you title your pages. Make sure this title is the title in your navigation area too. On your home page, or the one that is your "index.html" or "index.htm", you don't have to title the page "HOME PAGE". It could be titled "About Us" or a page you want your visitors to see as soon as they open your website. If your "index.html" page is your "About Us" page, then put the header/title "About Us" at the top of the page. In other words, every page should have a heading so that your visitors will know what page they are currently viewing.
b. Can your visitor easily get to other pages using your navigational area?
Make sure that if you have 5 main pages in your website, there are 5 links in your navigation area with the exact titles as the titles on your pages. With this in mind, don't make your titles too long. If you have articles on your website, make one link titled "Articles" in your navigation area. On the "Articles" page, list your article titles in the body of that particular page because the article titles will be longer.
c. Does my background color and text color make a good combination?
You will need to take this into serious consideration. If your color scheme is unappealing, visitors will leave no matter how good your subject matter may be. If the combination causes eye strain or headache, your visitors will leave your website and may not return. Examples: blue background with red text, lime green background with yellow text, red background with yellow text, etc. One other background I would like to mention: patterned/tiled backgrounds. These can be overwhelming to the eye. No text will be readable on these types of backgrounds - at least not without difficulty. If you must have a patterned/tiled background, make it look like a watermark - full color patterned/tiled backgrounds will send your visitors away quicker than ice cream melts on a hot stove.
d. Are my photos too big or do I have too many on a page?
If it takes longer than a few seconds for your webpage to load, then your images are too big or you have too many on a page. It is not necessary for a photo to take up the space of an entire browser window. Too many photos, without a doubt, will slow your website down to a crawl, even on a high-speed connection. Most people will leave your website before the images finish downloading. You can make the images small enough for a slideshow or create thumbnails so that your visitors can select which images they want to see. Once your visitors click on the image to see a larger view, make even that image small enough to see all the details, but not big enough to slow down your website. There are quite a few image editors out there to use - some are even free. I use Macromedia's Fireworks to optimize my images. They have a tool where I can make my images smaller without losing clarity.
e. How do I test my pages for errors and user-friendliness?
Have a few other people look at your website. If you don’t think that friends and family will want to hurt your feelings, find a site with your color scheme; tell them that this website is not your website, but you would like their opinion on the color scheme and if it is difficult to read. You can also post your URL to various forums to ask them for a critique of your website. If this is your first time testing, you can ask for feedback so that you can get a variety of comments. Keep a copy of the answers you get so that in the future you can refer back to what people have said about certain features. Later on, you can put together a checklist to go by for every website you design. I wouldn't use just one checklist to check all websites, but a checklist would be a good start. Whether you are a beginner or expert website designer, you will always need to test multiple times. You have a great deal of choices to check for errors on your site. I like to use W3C's validators to check for errors and to bring my websites up to standard.
Making your website user-friendly is one of the best things you can accomplish for yourself and your visitors. Taking the time to ensure usability is nothing compared to how many visitors you will lose if you have a not-so-friendly website. Ensuring readability, fast downloading, and performing multiple tests will get you started in the right direction of designing user-friendly websites. Good Luck! Send me a link if you want me to critique your website.
BlueFish Web Hosting offers a competitive payout and currently enjoys some of the highest conversion rates in the web hosting industry. Since it's creation nearly two years ago BlueFish has focused on the millions of small business owners across the world and provides users with all of the tools necessary to take business to the web.
BlueFish Web Hosting offers one simple hosting plan to make the process of building an online business more easy. BlueFish web hosting accounts include a FREE domain name, 6 GB of storage space, Unlimited POP and webmail accounts, 100 Gigs of monthly data transfer, detailed website statistics with raw logs available, PayPal shopping cart integration, dozens of professional website templates, FREE search engine submission, and much more all for one low price of $6.95 per month.
BlueFish Web Hosting has focused on customer support since the very beginning and continues to outshine the competitors by offering over-the-top TOLL FREE telephone support. No outsourcing here, you can expect to speak with an english speaking, professional customer service agent. Don't be surprised if you get a call from BlueFish just to see how your online business is going. BlueFish is a name you can trust with your online business.
Formed in February of 2001, AN Hosting, Inc. has set the standard for high-quality Web hosting and design services ever since. We are dedicated to providing the best products in the industry. AN Hosting, Inc. is proud to offer this lucrative affiliate program. Not only are you promoting a web hosting company, but you are promoting a hosting company with exceptional service, and exceptional value. All this, with the best conversions in the industry. We currently offer three hosting packages. Our site is designed to be a simple, one-stop-shop for visitors. Because of this, and our exceptional support we've been ranked one of the best and fastest converting hosting providers in the industry.Thanks! Happy Converting!
Saturday, March 10, 2007
Elements of Great Websites
Visible Elements
How eyes see the site
The first item that's seen on the website is the upper-left corner. From there, the eye moves to the upper-right corner, and then it moves in a zigzag fashion from elements that grab its attention. Knowing this fact, you'll notice that most great websites have their company's logo and key messages positioned in these most coveted eye catchers!
Layout
Layout of the site is extremely important. Great websites have a consistent layout and repeat certain elements of it throughout the site.
Alignment
Elements on the website have consistent alignment. Choose either left or right justification and stay away from centered alignment.
Colors
Use 2-3 colors throughout the site, keeping text to the easiest to read combination of white background and black text. Overdoing the color makes eyes wander the page trying to figure out logical connections.
Graphics
Graphics are an important element of any website; however, it is easy to overuse them. Great websites use graphics sparingly and consistently. For example, if site has illustration graphics on its pages, their design and fashion should follow the same style.
Easy Navigation
Great websites have one common feature--easy navigation. Whether it is menu based, link-based or graphic based, navigation should be consistent throughout the website. It is also a good idea to have a "you are here" link on the sub-pages to allow quick jumps between parent-child menu items.
Short and Organized Copy
Websites are designed to grab user's attention. Main page of the site should not overload the user with heavy text. Break up the text in small paragraphs. Clearly label topics in bold or italics. Try to minimize the scrolling on the first page. Create jump links from the main page "read more." Remember that most users stay on the website for less than a minute.
Invisible Elements
Keywords
The key element of the great website is presence of keys in its Meta section. Keys are what search engines see when they crawl the site. It is imperative to have a targeted set of 10-20 keywords that are 2-3 words. Remember that most people online use 2-3 words for their search string.
Title
Every webpage should have a short and descriptive title. Titles should not be a repetition of keywords; however, keywords should be used in the sentence. Titles should be kept to about 36 characters.
Description
Description is displayed when the page is presented in the results of the search query. It is imperative that websites have a detailed description that's short and to the point, without marketing twists. The length of description is generally kept to less than 256 characters; and many search engines display only 128.
Links
In order for a website to score high with the search engines, it should have links pointed to it. Larry Page's (one of the founders of Google) famous PageRank measures a website's popularity by the links that point back to it. Great websites usually exchange links with other sites and affiliates.
Creating a state-of-the-art website takes knowledge and patience. Remember, people often visit the website before the personal meeting to learn about the company. Therefore, take the time to study the website design and make sure to ask yourself the following questions:
Do the prime spots on the page display a strong message?
Does the website look attractive?
Is the copy clean and concise?
Does the website provide easy navigation for visitors?
Have the invisible elements of the website been properly setup?
Remember to keep the points listed above in mind when creating or reviewing the website design. Consider firm's brand and keep elements of the website consistent.
Evaluate Your Own Website
What is the title of each page.
The title of your page can be seen in the top left hand side of your browser. The title of each page should relate to the information on the page and be unique for each page. The title is a very important part of the web page and must be treated accordingly.
Descriptive Meta Tags
The Description meta tag is normally used to describe your listing in the search engines. It is important that this description entices people to click on your link. It would not be beneficial to have the same listing description for each page. Make each page description unique.
Content
Unique content is king. The more relevant content you have on your website the better. Always bare in mind the topic of that page and ensure that the page title, paragraph headings and text relate to that topic. The content should be well written and semantically correct. Headings actually have an order within the code, so ensure that this rule is used. It is the content that will be catalogued by the search engines and this is how they will understand what each individual page is about.
Do you have a sitemap?
It is important that the search engines can see all your pages. A good way of doing this is to add a sitemap which is accessible from the homepage. This sitemap will list all your pages by the topic of that page allowing a search engine to find every single page on your website. Are you sure that all of your pages are listed in the search engines?
Navigation links
Ensure that your menu links contain the text of the topic or page they are linking to. Do not forget the links that are within your content. Try and use relevant text with your content to link to other pages within your website.
Dynamic page names
Search engines have difficulty reading sessions (sessions are codes appended to the web address to identify users on the website). If you have session variables on your site, search engines may not index your pages. Are naming conventions used for your folders and files on your website. E.g. www.mydomain.co.uk/keyword.html? If you have keyword phrases are the individual words separated with hyphens? Also, does Google see your site twice (this is bad!) ?? Does http://web-studio.co.uk automatically goto http://www.web-studio.co.uk ?
Fast loading pages
Are your pages quick to load. If they are not the search engine may not hang around to index them. The average age size should be less than 110Kb. If it is not then it is important to identify what is increasing the size of the page and correct it.
Web Standards
Have you updated your website to the latest web standards. The Internet is a forever changing media and standards have been suggested by the World wide web consortium (www.w3c.org) . By rebuilding a website using the latest standards we have the ability to separate the content of the website from the presentation (design). Benefits of this include being able to supply search engines with clean text, not blurred by coding. Also the ability to change design more regularly becomes affordable.
Disability and Discrimination Act
Does your website comply to the DDA. Are blind people able to "hear" your website if they have the correct "reader". What about the partially sighted? Ensure that all of your images have labels correctly added to them (known as alt tags). Can people easily change the text using the browser text size facility?
Summary
These are on site areas to look at and will allow the search engines to determine what your site is all about. Never forget the need to look at off site promotion!
Domains Names and Web Design
If you are going to be working as an affiliate or are considering doing freelancing or data entry then you may be able to get away without one but for everything else you will need to build a website. But, it's ok, I am here to tell you that that doesn't have to be as frightening a prospect as it may at first seem.
There are many people who will build your website for you and not all of them will cost an arm and a leg although the price does vary depending on what you want.
The other option of course, is to build the site yourself and although this is not something that you will be able to do over night there is a lot of technology and software out there that will help you do just that. Again the prices can vary dramatically depending on what you want to do but there are also a lot of free resources if you look.
But before you get to building your site you need to have a name for it. I once received some very good advice about deciding on a name for your site and it was this "Just get on with it"
Many people find themselves suffering from what's known as 'Analysis Paralysis'. We so desperately want to come up with a success sounding name that we spend days deciding what to call ourselves only to find when we go to register it that it has already been taken.
How to choose your domain name:
Consider this:
1. What does your business do?
2. Who does it do it for?
3. What is you unique selling position - in other words what have you got that the others haven't that will make people want to come to you?
4. What is your name?
The last one may seem a bit odd but I'll get back to that in just a minute. After considering the first 3 points come up with a list of several names that you could use and then take them to a domain registrar and see which ones are available for you to use.
Prices don't vary too wildly but it is worth a look around.
.com names are among the most expensive and with good reason, as it is the first extension that people will type if they are unsure of your full address and also the most professional sounding. Stay away from cheaper more obscure extensions they may not cost as much but you need to consider what kind of image you want to portray to your customers.
Almost all domain registration services will offer free extras such as domain and email forwarding, if the company you are using doesn't offer these basic add ons then say thank you and move on to one that does.
4. What is your name?
There is one domain name you should definitely register and that is yourname.com.
Why? Because branding yourself in your market is a brilliant way of letting people know not only who you are and what you do but also that you are very serious about it and take pride in your position. Think about it, would you want your name branded on something that wasn't up to par, and that's exactly how your customers are going to see it too "Oh, Denise has put her name to this so she must think it is a quality product/service"
And as long as it is a high quality item your name will become synonymous with quality in your field.
Warning: some domain registrars, upon closing your account due to spam complaints, missed payments or any other reason will retain the name that you purchased and assume ownership of it. Meaning that you will not be able to re-register it anywhere else and so will loose all the traffic that you may have spent months directing to that address. As with all things be sure to read the small print - it's small for a reason.
Ok so now that you have your name it's time to choose your web host.
Quite often this can be one I the same provider and so if you are going to use your registered name as the address for your site then be sure to register it with them as it saves you having to transfer things over at a later date.
So what do you need from your web host?
It is essential to know that whatever goes wrong with your site there will be someone that you can contact, preferably by phone 24 hours a day 7 days a week. There is nothing worse than sending a helpdesk ticket for support and not receiving a response for 3 days, and the best way to find out how good the support system is, is to ask their customers. Visit forums and ask questions or search articles and read reviews also ask your friends and colleagues who they use and if they would recommend them.
Building Your Site
As I mentioned before there are many people out there that will build your site for you. All you need to do is give them the details and the premise and they will take on all the technical work for you. To have your website professionally designed and built from scratch can cost you anywhere from a few hundred to a few thousand dollars. And there are many places where you can find companies to do it for you.
However if you like a challenge and have basic computer capabilities it is perfectly feasible that you can build your own site depending on just what you want it to be.
If you decide to take the challenge on yourself then my first suggestion would be to find some help, support and guidance. If you are quite new to web design there will be many things that can throw you and if you don't have someone to ask it can become frustrating. Again joining a forum is one of the best ways to find help from like minded people or you can just use the power of the web to find a place where you feel comfortable enough to ask.
There are some things that you will need:
A domain name - Clear, concise and easy to remember. Also be careful with names that people can easily misspell.
A web host - Good customer support is essential. Also check uptime and bandwidth.
Web page templates - Depending on your products/services your site should have a certain consistent feel to it all the way through.
Html editor software - Html is a very complicated language, if you don't know it or don't want to learn then you will need software that can do it for you. There are lots of free programmes.
Ftp software - This is how you get your site from your desktop to your server. All FTP software is basically the same but if you are new then stick with the more basic versions until you figure out what you'll need the rest for.
Header, footer and other graphics - All websites need graphics of some kind. There are packages that you can buy online and edit to your liking or you can spend around $60 - $100 and get the basics done for you.
Those are the very bare basics that you need to be able to start building your site, you will also need to consider e-commerce, download protection, and a few other factors depending on what your site will do.
Thursday, March 8, 2007
Browser Compatibility
At the last count it is said that there are 64 million firefox users on the internet. Growing in massive numbers by the day.
So, the issue with browser compatibility is at its highest importance. The way browsers are constructed, they can show a webpage slightly differently.
For instance, the IFRAME tag shows perfectly in Internet Explorer but does not show in Firefox. This is only one of many instances of none browser compatibility.
Therefore, webmasters should be making sure their web page is viewable in both internet explorer and firefox equally. If it doesnt, then they risk loosing a large percentage of web users. There is nothing worse than surfing a web site and not being able to see it properly in a particular browser.
The solution for webmasters is to make all their pages XHTML transitional. Web sites that validate to this, have a higher chance of being viewed correctly in all major browsers.
XHTML is the next generation web language, and is said to replace HTML eventually. XHTML was released in January 2000.
XHTML is not a difficult language to learn, it is basically identical to HTML but the main difference is that tags in XHTML always have an end tag.
For example, a IMG SRC tag in HTML has no end tag. In XHTML the IMG SRC tag has the end tag of />
More information on learning XHTML can be found at http://www.w3schools.com/xhtml/xhtml_intro.asp
Once you have constructed your XHTML web page then you can validate it at W3schools.comxhtml - xhtml validate
Further, to ensure near complete browser compatibility you can validate any stylesheet here : Jigsaw.w3.org - CSS-Validator.
The Next Generation Website Model
The next generation of websites will have a vastly different way of communicating information to their visitors. Websites will evolve into true communication platforms that will take advantage of the Web's multimedia capabilities and the Internet's broadband penetration.
The new website model will have the look, feel, and sound of your very own narrow-cast communication channel complete with audio and video programming and on-site personalities that will present and guide audiences through the maze of content. But unlike television, this humanized Web-experience will allow site visitors to make their own programming choices; audiences will be able to experience the content they want, when they want and in the format of their choice: audio and video, or text and graphics.
Why Websites Will Become Multimedia Communication Channels
1. There are millions of websites on the Internet representing millions of small and medium size companies with an enormous aggregate investment, and the vast majority of these websites are underperforming in large part because they have not taken advantage of the Web's multimedia communication capability and the penetration of broadband transmission.
2. Business owners want to see better results but they are being stymied in part by their own lack of vision and unrealistic expectations, but more importantly by a conventional wisdom promoted by particular Industry interests that handicap website owners' ability to capitalize on the Web's multimedia communication capability and its democratizing economic character.
3. Up until recently, major search engine have stifled Web-based marketing communication by failing to develop appropriate measures with which to properly index Web-based multimedia presentations. With the popularity of Goggle Video, YouTube, and the advent of Goggle Video Ads, the search engines will develop the technological means to better index multimedia content.
4. Progress can only be halted in the short term. Multimedia communication technology and the Web's ability to accommodate it have outpaced the Web's gatekeepers. The limitations imposed by SEO strategists on delivering content cannot stop the demand for a more humanized Web-communication experience that provides material that is informative, meaningful, and memorable.
5. As successful as some companies maybe with their PPC (pay per click) programs, the vast majority of small and medium size businesses are not. It is impossible for every business that is prepared to pay for placement or for SEO-expertise to be number one or even on the first page in any particular search category. There are just too many companies in similar businesses, with similar objectives to all rank on the first page of search results. As a consequence businesses will begin to focus on delivering more effective content to truly interested Web-visitors who take the time to find you on the Web or who respond to your direct marketing efforts. More emphasis will be placed on how long visitors stay on a site, and what visitors learn and retain from that site rather than spending money on attracting just more random traffic.
6. With articles and books being written about the Web's natural ability to access niche markets ('The Long Tail' by Chris Anderson), businesses will soon realize that delivering meaningful content to interested audiences takes precedence over attracting volumes of uninterested traffic. High volumes of traffic may be the goal of sites that make their money by delivering traffic to advertisers, but if you have your own product or service to sell, it's about the quality of traffic not the volume.
7. Human beings are hardwired to listen, learn and retain information based on how the brain receives information. People just don't like reading information on computer screens. The linear narrative (storytelling) delivered by the sound of a human voice, enhanced by the moving image of a real person is how information is most effectively transmitted. It's about communicating the message and how best to deliver the content.
8. The broadcast advertising model is not relevant to the narrowcast nature of the Web. Even websites that attract thousands of simultaneous visitors, still speak to one visitor at a time, and each of these visitors can experience your content in the order and at the time they choose. The Web audience for your offering wants content, and your Web marketing and communication techniques need to be adjusted to deliver your message as content and not merely as advertising.
9. The Web's hyperlinked nature is a two-edged sword. As quickly as people can be directed to your site by high search engine ranking or reciprocal links, they can also leave at hyper-speed when they are frustrated by reams of text, outbound links, and distracting advertisements. People want content delivered in familiar, easily understandable, and digestible formats - audio and video.
10. Advertising as we know it is dead. Two thirds of television audiences completely ignore or disengage from television ads, and website audiences learn quickly where the ads are on a website and then avoid them. If you what to make your point, get your message across, and attract interest in what you do, you have to provide quality content that is entertaining, compiling, and above all memorable.
The Narrowcast Communication-On-Demand Website
The narrowcast communication-on-demand website model will deliver information formatted in audio and video programs. Text and static pictures will be provided for those who need to print hardcopy information for reference purposes.
This model offers businesses the ability to take advantage of the Web's full communication capabilities and the hardwired nature of people to respond to human-based presentations that enhance attraction, comprehension, and retention of information.
If you want to improve your bottom line using the Web, you have to start thinking differently. The same old marketing and sales models of the past are not going to work on the new multimedia Web. Web-audiences will demand more than a sales pitch or product specification sheet.
How to Convert a Static Website into a Multimedia Website
Traditionally websites are divided into sections that provide information on the company, the products and/or services, clients, help resources, company news and PR initiatives, and contact information.
These traditional website elements have to be reformatted into more effect program-style presentations using video interviews, expert opinion, and how to sessions, as while as audio FAQs, knowledge bases, and product or service descriptions. Testimonials, success stories and corporate histories can be turned into entertaining and compelling video documentaries that establish brand personality and build confidence.
The Web has evolved from its early days into a fully functioning multimedia communication environment. If you've followed all the rules and listened to all the conventional wisdom, and you're still not getting what you want out of your website, maybe it's time you tried a different approach.
Put your Web Developer to the Test
Have you ever wondered if the company or freelancer you hired to build up your website from scrap did a great job, or you paid for a worthless product?! If yes, do not panic. It does not matter that you do not know anything related to web development: user experience, accessibility, usability, layout, and other things that make the differences between a Da Vinci masterpiece and a 5 year-old painting. This article will guide you through the entire process of your website's development, so that you know what to ask, what to say, when to say to your web developer. The result, the best website you could ever have.
First of all, you should find a web development company, a freelancer, or perhaps a friend that has a vast portfolio and experience in this domain. Of course, searching for "web design" on Google or other search engines won't do any good. Perhaps the best way is this one. You pick up a couple of websites that you like, and open them in your browser. Than, look at the footer of each of these websites, and visit its designer's website. You will probably find a link like "designed by", "concept by" plus "Company name". You now have about 5 such companies. Hopefully, not all the websites you know are developed by the same company.
Next step is finding other similar web development companies.
You may do that by using Google toolbar.

It has an option so that you can easily see related websites to the one you are currently seeing. If not, open Google in your web browser, and type "related:http://www.domainname.com" where domainname.com is the domain name of a company you have just visited.
Pick up the first 5 websites related to the one you viewed in the past, and bookmark them all. Like this, you'll have by now about 30 different web development companies in your list.
Then, you must compare them all and eliminate all the ones that have really high prices, and portfolios under 10 websites. Perhaps you should consider eliminating some of the companies that have low prices for their services, as low prices mean most of the time low quality. You should also look into testimonials. Don't make the same mistakes other people did before you!
Now, if you have reduced your list to only one company, great job. You could skip the next paragraph and finally get to know what really matters when building a website. Because that is the most important thing of the entire process, and this article should be about that, not a quick guide to choosing a web development company for your project. So, half the battle is yours by now!
If your list is now like 5 different companies, or why not 10, what should you do now? Asking your wife about what she thinks may not be the best idea. There are multiple locations where you can find information about websites in general, about web companies, get your website reviewed by others and so on. Almost every big web design community has a "website critique", "website review" category in their forums. Some of them may have related content such as web developer review. If you cannot find information regarding a specific company, there is a better way to do it. I personally like the concept of Web International Awards. It is a site review tool and ranking system for web developers, freelancers worldwide. In order to see what the companies in your list are up to, you must look for them in the website's database. If they are not there, do not panic. Anyone can submit websites for review. Yes, you are one of the ones who can do it. Just register, and submit one or two projects from the portfolios of the companies you have in your list. They will be reviewed and it should then be clear which company is best for you. You should always consider looking in the website's database to find other companies that you haven't heard of before.
Oh, almost forgot. You can find Web International Awards at http://www.webia.info .Do not be scared if the website looks empty, small. It's capabilities are huge, and important to you!
Now you are all set. You have the company that you are about to hire. You like their prices, you like websites in their portfolio, past clients now worship them. So, here starts the second part of the battle.
What exactly must you look for when telling your web designer what you need?
You should look at code . But hey, you don't know anything about programming. Doesn't matter. If it looks nice, is well organized, and perhaps you see within some comments like "this function automatically checks if the entered email is valid", it means that the person you have hired, is indeed a professional.
Before your website is complete, you should make sure that the website looks, and especially works the same on as many browsers as it can. I suggest you check it using Internet Explorer, Mozilla Firefox and Opera browsers, which have by now a huge percentage regarding their expanding.
One of the most important things in a websites overall feeling is its design . You should really pay attention to its graphics. They must not hurt your eye, color tones should be nice, chosen in such a manner to point out what the website is telling to the visitors.
The website must have a good layout. Headers must be headers, footers must be footers, and content areas must have content, not copyright information. One of the most important things in a website's layout is probably its navigation menu. When visiting a website, you should always be able to answer these questions:
Where am I? (Present)
Where can I go? (Future)
Where have I been? (Past)
You must pay attention to the website's homepage layout too. A home page must always provide you with information to another set of guidelines:
What is this place?
Do not get in the repeat visitor's way.
Must show what's new.
Must provide a very good global navigation
Yes, the home page must tell you what the website is about, and quick too. This is probably the most important goal of a home page. Otherwise, new visitors to your website won't know what they can find in your website or what is has to offer. If they don't know that, they will feel dumb, leave, and they will never return. Would you hang out with someone who has just made you feel like a retarded idiot? I don't think so. This is all about making the best first impression, which matters the most.
The website must also provide new information for visitors that return to your website after a while, otherwise the website will now look boring. The layout of the website must not get in their way to finding new information, so that is why you need the easy access and precise global navigation.
All this for what? Oh yes! Content . Websites with no content suck right? Why see them if they don't tell anything else than "lorem ipsum Dolores …" or dummy text if you like, text that developers use when developing a template. You can have great coding in your website. It can have a marvelous design, but if the content is bad, you won't get Da Vinci's masterpiece. An important thing when it comes to content is your company's logo. The website must be constructed in such a manner so your logo stands out and is remembered by your visitors. Perhaps your slogan too. Pages that must provide crucial information about your company are the contact pages, and about pages. Make sure these two pages provide the information in a personal manner, that point out your company's qualities. You do not want a contact page that looks the same like other 1.000.000 contact pages. You choose which one of the bellow is best.
"TSK Media delivers world-class web products such as portals, web applications and small websites, advertising strategies and marketing plans."
"TSK Media is one of the biggest IT&C companies in the United Kingdom . It is composed of three different firms, their subsidiaries and affiliates. Each of these three firms specializes in one domain: web development, advertising, marketing. Each of these firms is a separate independent legal entity operating under the name of TSK Media, or other related names, such as TSK Web Development, TSK Advertising or TSK Marketing.
During its 10 years of activity, the company has gathered vast experience and has a huge portfolio of projects, developed in the past to satisfy our customers."
The content must keep the visitor busy, must not let him/her get bored. You must earn their respect so as to stay awhile on your website and read the information it provides. You should also count your important keywords. If the page you are now navigating is about horses for example, keywords like horse/horses, stable and other related words should appear a lot in the page, so that your SEO score is high. SEO or Search Engine Optimization is important. The better it is, the better you will rank in search engines results pages. It is important that your website is submitted to as many web directories with similar content to your website as possible once it is completed too.
So, you have also found out that an important thing in your website's success is its SEO .
Least but not last, an important key is user science . The website must be highly accessible. First of all, forms must allow visitors to type what they need. The forms must give them room to type. Of course, name, surname, email, phone inputs must not be huge, but comments, suggestions, text areas like that must provide enough space. If a user does something wrong when submitting such a form, they must see a nice error message, explaining what they did wrong, then the possibility to return to the previous page with all the information intact. You do not want to write a 3-page suggestion again just because you have mistyped your email address. They should always know what elements in your form are mandatory and which are not.
Conclusion
The website must always provide solutions that work for people, not the other way around. The user must be able to navigate easily, find the information they need. They must understand the website's structure, how it can be used most effectively without any headaches. They must feel great when navigating your website, in love, and never ever leave, or even if they do that, the website must make sure they come back.
Common Website Mistakes
Free Web Hosting and Domain Names
Avoid these at all costs. It doesn't cost much to have your own domain name and if you have your own hosting you have more control over your website and it's contents. A lot of free hosts will put advertising on your websites which will make them look tacky. Also you will want to have your own relevant domain name to help your Google ranking.
Dark Backgrounds and Light Text
Personally I would never buy of a website that has a black background. It just looks tacky. Also it is no good for printing out the page. You will notice how many of our websites we make at WebGrafix have a white background with black text. Keeping it simple usually produces the most professional image.
Red and Blue
Red and blue are at opposite ends of the spectrum. Try to avoid using these colours together. Red text on blue or vise versa is not good on the eyes and looks terrible. Also if your logo uses these colours try not to have them too close together or on top of each other.
100% Flash Website
Although flash websites can look great and be fun to use there is no hope of Google ever finding it. You could put millions of keywords in your text on your flash website and have the most fun and professional looking flash website ever but Google will just see it as a flash file and will ignore all your links, text and images. The result will be your website being no where to be seen in the search engine. We never create websites like this at WebGrafix and if we did they would usually take months to complete anyway.
Lack of Heading and Title Tags
The two most important tags you could possibly use on your website. The title tag is usually what Google will pick up on first so try to add some keywords there but don't over do it. The heading tags should also contain keywords as Google will rank these higher than text inside a P tag. Using the correct tags is the first and most simple step in good SEO usage and we offer this as a service for existing websites and also contain this SEO in all the websites we create for no extra charge.



