Welcome to the Web Development Knowledge Base.
Web development, or the process of developing web sites is a broad field. First off, there are web sites and then there are web applications.
Web sites are the typical sites, such as google.com, ford.com or amazon.com, that you visit to look up information or purchase a product. What skills are required to build a web site depends entirely on how simple or complex the site will be. A very simple and small web site that will only present static information may be easy to creating only requiring basic HTML, CSS and graphics design. A complex site with thousands of pages, millions of visitors, and a large e-commerce database back-end would require far more skills, which often include PHP and SQL,
Web applications are different from web sites. While they are run/viewed through a web browser and may involve HTML and CSS, they are typically developed for use by employees within a company for an internal business purpose rather than for the public/customers to use. For example, a business decide it would like to build or convert a payroll or inventory control software application to a web-based application. Java and .NET are popular web application development languages/environments.
Below is a categorization and list of skills and knowledge areas that fall under web site design and development, as well as web application development. The vast majority of web designers and web developers do not have all these skills. In fact, they may only have 4 or 5 of them. The IT and web fields are very specialization, much like physicians where there are specialists in oncology, pediatrics, urology, etc. Certainly, however, the more skills (breadth and depth) one has, the more marketable and well-paid they will be.
Web Presentation Languages
Web Programming and Scripting Languages
Other Languages used with Web Sites
Graphic Design Software
Graphic Design Knowledge Areas
Other IT and Web Knowledge Areas
Back-end Server and Web Server Skills
There are a variety of ways to build a web site or web page. Below is a list and description of the advantages and disadvantages of the most common ways.
1. Hand-code web page in HTML/CSS – CSS -based Layout or Table -based Layout
Advantages: (a) developer has high degree of control over pages (formatting, layout, etc.) because of access to code, (b) code can be kept very clean and easy to read and edit, (c) for a good coder, web pages can be very quick and easy to update, (d) inexpensive, (e) quickly and easily portable from one server/domain name to another.
Disadvantages: (a) developer must be skilled in X/HTML, CSS, Photoshop, etc., (b) can be time consuming to design, code and test web site, (c) adding dynamic aspects to web site (e.g. database, shopping cart, etc.) requires even more skill, (d) making global changes to web site will require special techniques, e.g. use of SSI includes to create templates.
2. Create the web page in GUI authoring software such as Adobe Dreamweaver – CSS or Tables
Disadvantages: (a) some GUI authoring software can be expensive, (b) may have moderate learning curve, (c) some GUI authoring software may add extra code creating poorly coded pages.
3. Downloadable Web Site Template
There are web sites that offer free, or inexpensive, web templates for download. The download is often a Zip file that contains all the source code file (e.g. Photoshop file, images, etc.) and competed web page (HTML and CSS). This template can be customized, modified and used throughout a new web site to provide the look-and-feel, formatting, menus, images, and layout.
Advantages: (a) many are free, others can be purchased for a reasonable amount of money, (b) some of the web templates look very professional, follow standards, and include the source Photoshop file, images, HTML, and CSS etc. files, (c) allows a web site to be developed and launched potentially very quickly, (d) may reduce the need to learn details of coding, (e) many types of templates available, e.g. HTML/CSS, Flash-based web sites, PHP Nuke web sites, Flash intros, logos, e-commerce, any type of business, , (f) easily portable to a different server.
Disadvantages: (a) unless you pay more money you may be using a template that is not unique to your company, (b) downloadable web templates do not often include back-end functionality for database-backed web sites, shopping carts, etc.
4. Hosting company site builder (hosted)
Many of the companies that provide web site hosting include a site builder tool online that you can use to build a web site.
Advantages: (a) no knowledge of HTML and other code needed/low learning curve, (b) free (included in web hosting cost).
Disadvantages: (a) very little or no ability to customize web p ages beyond capabilities of site builder, (b) the abilities of the site builder are often not enough to make web pages/site attractive, professional, optimized for search engines, or functionally sophisticated (back-end databases, etc.).
5. Free Online Web Site Builders (hosted)
This method is similar to the hosting method above in that both include a site builder and host the web site for you, but they are different enough to distinguish into a separate way to build a web site. With an ISP hosting company you are often getting a lot of hosting specific services such as unlimited e-mail accounts, web -based e-mail access, unlimited MySQL databases, access to PHP on the server, free online shopping cart software, sub-domains, cron job access, FTP, ability to password protect areas of the web site, log file analysis/web analytics software, access to content management software (Joomla, Drupal, WordPress, etc.), parked domains, dedicated IP address, streaming audio/video, etc. Specialized free online web site builders are intended to make it very easy and quick to build, host and launch a web site and may not include all the features of the hosting company option.
Advantages: (a) web sites can often be built and hosted for free (some for a trial period only; if you subscribe and pay monthly fee premium services available, e.g. unique domain name, more storage space, (b) little to no knowledge of HTML needed/low learning curve, (c) web site can be build and launched quickly.
Disadvantages: (a) you may not get your own domain name, (b) some, but not all, may place advertising on your web pages, (c) web site owner will not have direct access to server if more sophisticated back-end needs wanted, e.g. databases, third-party software installations, etc.
Examples: http://www.yola.com/ http://sites.google.com/
6. Content Management System
Web sites can also be developed and maintained in software known as Content Management Systems (CMS). CMS software is a broad category that is comprised of different types of CMS software. Their general purpose is to manage workflow, documents, and information in a collaborative environment. Different types of CMS software include: Web Content Management, Digital Asset Management, Digital Records Management, Electronic Content Management, Mobile Content Management, and Media Content Management, among others.
Web Content Management Systems (WCMS) can be used to create, manage, and publish web pages. WCMS software is also sometimes referred to as Web Application Frameworks.
Advantages: (a) no knowledge of HTML and other code needed/low learning curve, (b) some WCMS software is free and included in web hosting service), (c) WCMS software can create very professional looking web sites, (d) WCMS software creates easily changeable, dynamic database-backed web sites, (e) most WCMS’s have many templates to choose from, (f) most WCMS’s have many plug-ins (modules) available to expand their features/uses, e.g. wiki’s, blogs, forums, calendars, voting/rating/polling systems, Digg This, easy image uploaders, video streaming, MP3 player, photo galleries, e-commerce, coupons, payment systems, AJAX support, etc. (g) content on WCMS sites can be edited by multiple people and each editor can be given various levels of access and access to different areas of the web site, (h) multi-lingual support, (i) many WCMS’s are W3C standards-compliant.
Disadvantages: (a) high learning curve to learn how to install and maintain the back-end WCMS software on the server, (b) without access and skill in maintaining the back-end of the WCMS there will be some, but not complete ability to customize web pages beyond capabilities of site builder, (c) not as easily portable to a different server as other methods.
Examples: Drupal http://drupal.org/ (used by Whitehouse.gov)
PHP Nuke http://phpnuke.org/
Web/Graphic Designer vs. Web Developer.
A common question asked by those first learning about the field is “What is the difference between a web designer, graphic designer, and web developer?” A web designer, as the name implies, “designs” a web site. This person typically is strong in visual and graphical skills with a creative and artistic background. Good graphic design and photo editing skills are typically the foundation to web design. A web designer is responsible for the overall look-and-feel of a web site, the choice of colors, graphics, font type, and layout of the web site.
A web developer typically has a stronger background in programming and, thus, is usually the one responsible for developing (building) dynamic web sites that interact with a database or other data source such as XML. In terms of college certificates and degrees, the curriculum of an Art, Media, or Visual Communication department is likely the best preparation for a career in Web Design, whereas a career in Web Development is likely best found in a Computer Information Systems or Computer Science department.
Figure 1: Skills of a Web Designer versus a Web Developer (click to enlarge)
[inline:venn1.jpg=Web Designer versus Web Developer]
What is a Webmaster?
Webmaster is an elusive job title that has both evolved and been described in several different ways. Like many job types, some of the variance in this position’s job responsibilities sometimes lies in whether one works in a large or a small organization. In large organizations, there are typically more IT employees, and jobs can become more specialized than in a small organization where someone may be required to perform more than one job type. Another reason for why webmaster job responsibilities sometimes vary is that different companies define them differently.
The fact is no perfect definition of a webmaster exists. Many companies include the responsibilities of a web designer and web developer within the scope of a webmaster. The following, however, are possible responsibilities for a webmaster that do not typically fall within the scope of a web designer or developer.
Do I need to know HTML?
Another commonly asked question in terms of skills is “Do I need to know HTML?” The reason this is typically asked is that graphical web authoring software such as Dreamweaver automatically generates the HTML for you when you are creating the web site. Nevertheless, the answer to this question is still “yes,” for you should know HTML and XHTML (they are close to the same thing). Why? Below are the reasons.
HTML was the origin of web pages. Almost all web pages are built in HTML. HTML is not a programming language, but “tags” that are typed into an ASCII text editor to create web pages. For example, there is a tag to create paragraphs, a tag to display an image on a web page, and a tag to create a hyperlink, to name a few. HTML is relatively easy to learn.
HTML has been revised many times since 1990 and is now at version HTML 4.01. Each successive version added new features and deprecated (replaced and recommended discontinuation of) old features. HTML was invented by Tim Berners-Lee in 1989 who then released the first web browser in 1990 he called NeXT. The first popular web browser, Mosaic, was released in 1993. The first international WWW (web) conference was held in 1994. HTML 2 was released that same year. The font face and bgcolor attributes were released in 1995 as was a draft of HTML 3 which first introduced tables. 1995 also saw the first proposal for HTML frames and what would become CSS styles.
XHTML is the hybrid of HTML and XML and an even newer way to code web pages. Either HTML 4.01 or XHTML 1.0 are acceptable versions to code web pages in and there are only slightly differences between the two. XHTML is designed to be stricter (cleaner code = faster load time and more consistent look on different browsers, devices, etc.) and extensible (can be added to with other XML languages).
HTML and XHTML are 99% the same. The only major coding differences are:
Strict vs. Transitional vs. Frameset
There are three types (standards) of both HTML and XHTML: strict, transitional and frameset.
Frameset HTML or XHTML is not really used anymore. It was used to allow HTML frames, but frames are technique that is no longer recommended for web pages.
Transitional HTML or XHTML allows the developer to use deprecated tags. It allows the web page to be backwards-compatible so to speak. It provides a way for developer to transition their web pages from an older standard to a newer standard. Transitional HTML or XHTML code is often used when the page has a lot of legacy (old) code that will take some time to convert to the new method/standard/code. HTML 4.01 Transitional is currently the most commonly used web coding standard.
Strict HTML or XHTML requires that all coding following the strictest rules of that version. This typically means that no deprecated tags are allowed (such as b for bold - strong is used now, many many other example) and that any formatting in the web page must be taken out of the HTML and placed into a separate CSS file.
Why Standards Strict?
There has been a push now for years that HTML and/or XHTML become stricter? Is there a reason for this? There certainly is. And it's a very important one. You see, HTML has a long tradition of being very forgiving. Depending on the web browser, a web developer can forget to close tags, leave out attributes, not nest tags properly and make all kinds of other simple coding mistakes in their web page and the web browser would still display the web page. The displayed web page might even look good/as intended. So, what's the problem.
The problem is that the web page "might" look as intended and it might not. This is also known as Tag-soup handling, or trying to correct errors in documents. Essentially, every browser does it a little differently. Web developers have long struggled with the frustrating realization that the web page they so thought looked perfect looks different and not what they intended in a different web browser, web browser version or operating system. This is because coding "standards" were not followed, the web browser did not know which version the developer had used to code the web, and subsequently tried its best to render (display) the web as best it could determine. And often times, this display was not what the developer intended. This is the reason why there used to be those statements at the bottom of web pages "Page best viewed in Internet Explorer" or "Netscape".
The goal of developing "standards" was so that the web developer could tell the web browser that renders the web page what version they are using so it knows how to render the web page. Each version of HTML or XHTML, bit it HTML 4.01 Transitional or XHTML 1.0 Strict, have certain rules and coding syntax. As long as the web developer tells the web browser what version (i.e. standard) they are using and they follow the rules, the web browser - no matter which one it is, Internet Explorer, Firefox, etc. - will have a much better change of displaying it as the developer intended it to look. And that's one big goal of developers - to have their web page look consistent no matter who views in on whatever web browser or compute they are using.
The version or standard the page is coded in is indicated by the developer at the top of the web page in what is known as the DTD tag. The DTD tag is not required, but without it, the web browser will not know what version of HTML or XHTML the page was written in and therefore may not display is correctly all the time. Included the DTD tag is said to run the web page by the web browser in Standards Mode version and Quirks Mode when the DTD is not included.
As mentioned before, the strict version is simply stricter than transitional. Stricter pages have the goal of not only displaying more consistently in different web browsers, but also the following:
World-Wide-Web Consortium (W3C)
So, does someone own the WWW or HTML? Is there an organization who oversees and creates these various standards and versions of HTML and XHTML? The answer to the second question is 'yes' and that organization is the World-Wide-Web Consortium, also known simply as the W3C. No one person, organization, government or company owns or runs the Web. With no single entity running the Web, the W3C was founded in 1994 by Tim Berners-Lee (now "Sir" Tim Berners-Lee) at MIT. The purpose of the W3C is to promote the development of the World-Wide-Web and HTML. This is done largely by developing and promoting standards in web coding. If individual companies start to develop their own standards for web pages that are not compatible with the standards of other companies then certain web browsers may not display web pages written int he other standards and the Web becomes fractionated and less usable. Having web standards (i.e. the same set of rules/code for building web page) ensure everyone, no matter what web browser they use, what types of device they are using (e.g. PC, hand-held device, etc.), or what physical disability they may have will be able to view/run the web page. Put another way, web standards promote web accessibility.
The W3C is a working group of members who take input, ideas and suggestions from individuals, organizations and companies and create "working drafts" of a new version of HTML or XHTML (as we as many other languages/standards/specifications). Input and revisions are made to the working draft as it moves through various stages (last working draft, candidate recommendation, and proposed recommendation) before it is finally approved as a "W3C Recommendation", or standard. HTML 4.01, for example, was first published as a W3C Recommendation in December 1999. HTML 5 (an update to XHTML 1.x) was published as a Working Draft by the W3C.
HTML and XHTML Validation
So, you now know there are may reasons why it's best to code web pages using proper syntax even through the web browser "might" display the page relatively close to as intended. But is there a way to check and make sure you coded the web page properly? Of course there is. You can test your web page to make sure you coded it correctly using an online tool at the W3C web site known as an HTML validator (or XHTML validator. This process is also referred to as HTML validation. You can either upload your web page to have it validated (i.e. checked) or you can tell it your web page URL/address or copy and paste your code into a text box at the W3C web site. If there are any errors, the web site will tell you the errors which you can then fix and then re-submit your web page again until all the errors are gone and you have perfectly validated code. The W3C web site to this at is: http://validator.w3.org/
Example 1. Example of XHTML 1.0 Strict Web page
As you can see in Example 1 above, the DOCTYPE tag at the top tells the web browser this web page was written in XHTML 1.0 Stict so the web browser will render (display) that web page according to those rules. The next sample code shows the various DTD tags (version available).
Example 2. Examples of DTD Tags
CSS is a set of tags used to format and layout web pages. Formatting (e.g. bold, colors, etc.) and layout (e.g. where left menu, top heading, and footer are located) used to be done entirely in HTML because CSS did not exist until 1996. One does not have to use CSS, but it must be used for a web page to validate under the strictest validations and has many other advantages. As a result, CSS is used in most web sites. CSS is used primarily for formatting. A lot of web sites still use HTML tables for layout, but CSS is being used for an increasing number of web sites. Tables are still a fine option to organize data within a web page, such as a 4x6 table of product information.
Advantages of CSS
HTML5 and XHTML 2
XHTML was intended to be a replacement for HTML. HTML 4.01 was made a recommendation in 1999. XHTML 1.0 became a recommendation in 2000 and was later revised as HTML 1.1 in 2001. Thus, both of the standards are, as of 2010 when this knowledge base article was written, eight-year-old technology and a lot has changed with the web since then.
Enter HTML5 -or- XHTML 2. Both are being developed as the "next generation" web standard to replace both HTML 4.01 and XHTML 1.1, whichever one was using up to now. The W3C conceived of and developed the XHTML2 specification and planned for it to include many improvements over XHTML 1.1. HTML5 (also sometimes referred to as Web Applications 1.0) is a technology developed by the WHATWG (Web Hypertext Application Technology Working Group), an open community started by three of the four major browser vendors: Mozilla, Opera, and Apple.
Among the new features both HTML 5 and XHTML 2 both sought to add and improve are:
However, only one of these languages can end up becoming the standard or the web field goes backwards in not having a standard for search engines to understand, web developers to code in, authoring software such as Dreamweaver and Content Management Systems such as Drupal to produce, web browser to display pages consistently with, and so on. As mentioned before, standards are important and having a standard web page is how that happens. So, either HTML 5 or XHTML 2, but not both, must win out as the standard. So, which one will it be?
At this point in early 2010 it appears HTML 5 will win out as the next web standard for the following reasons:
HTML 5 will add man new exciting features to the Web's standard language. Among these are:
Many of these features will continue to advance the Internet-Rich Web and Web 2.0 Applications such as Google GMail, as well as mobile phone applications. It will reduce the need for Flash, Air and Silverlight (for simple uses and needs), but not eliminate them (for more complex needs).
HTML 5 is being developed by WHATWG (Web Hypertext Application Technology Working Group) and is a work in progress. Development began in 2004. In 2006, the W3C indicated an interest to participate in the development of HTML5 after all, and in 2007 formed a working group chartered to work with the WHATWG on the development of the HTML5 specification. As of February 2010, the specification is in the "Last Call" state at the WHATWG. Some web browsers are already supporting features of HTML 5. A final version might not be complete until 2022
Those new to the field of web design or web development may not realize that the process of designing and building professional web sites is very systemic and sophisticated, particularly for large web sites. Just like when building a house or a car, planning is required before the actual construction begins. And, often time, more is spent on planning than construction. Think about it. A car can be built on an assembly line in less than 24 hours, but months or years may have been spent designing and planning the car.
Web sites are just another type of computer software and in the software industry there has been a process known as the System Development Life Cycle (and variations of it, e.g. rapid prototyping, rapid application development, joint application development, extreme programming, etc.) in place since the 1960s that describes the methodology (step-by-step, waterfall, iterative, spiral, etc.) for building software. These same methodologies can be applied to web development. One could call this the Web Development Process or Life Cycle.
Their primary goal is to ensure that the software, or web site, meets the needs of the company and end-users. Web sites can be very complex and sophisticated and may involve hundreds or thousands of individual web page, large back-end databases, large financial transactions, important privacy and security considerations, dozens of employees, millions of end-users, millions of dollars and significantly impact the company's public image. For these reasons, it is critical that process of developing the web site be sophisticated and not by haphazard, unplanned, or by the seat of one's pants.
Below is list of classic steps involved in the web development process.
1. Analysis and Planning
2. Design (the Blueprint)
Will you use stock photos (which may need to be purchased) or will take create
or take original digital photographs?
5. Launch Web Site
6. Evaluation and Maintenance
7. Site Marketing
What makes a web site a "good" web site?
Of course, one needs technical skills to code a web site in HTML or XHTML, CSS and perhaps the use of a dynamic scripting language such as PHP. And proficiency in graphic and web design software such as PhotoShop and Dreamweaver, as well as an understanding of typography and color theory are all needed to create a professional and visually appealing web site.
But are these skills enough to make a "good" web site. They are needed. But they are not enough. The final measure of a "good" web site is that it is "usable". Ensuring a web site usable is a practice and skill in and of itself known as "web site usability."
The primary purpose of web site usability is to ensure the web site is intuitive and easy to use. Visitors should be able to find the information they are seeking from the web site or accomplish that task they are trying to perform, such as finding and purchasing a product as quickly and easily as possible. Web site usability ensures visitors do not get frustrated at the web site because they find the site difficult to use. You can have fantastic information on your web site or offer high quality products for sale at excellent prices, but it the site is difficult to read and the navigation links/menu are unorganized and confusing the web site could be disaster. Web site usability makes the different between a popular, heavily visited, useful and successful web site and an unpopular, unprofessional web site that visitors click back to get of in seconds and avoid in the future.
A tremendous amount of research has been conducted and best practices developed on web site usability. Web sites visitors have been interviewed, focus groups conducted, live users observed, web site walk-throughs performed, and web site log files analyzed to develop the web site usability guidelines that now exist. Experienced web designers now know these guidelines thoroughly and ensure the web sites they build adhere to them.
Below are examples of common web site usability guidelines.
• Web site navigation should be easy to use. Follow 3-clicks rule, i.e. user should always be able to get where they want go in the web site within 3 mouse clicks.
• Provide user with alternative navigation methods, i.e. (a) drop-down menus, (b) search box, (c) site map, (d) quick links box or pull-down, (e) breadcrumb trial, (f) embedded links (those within text/narrative of pages).
• You might want to integrate a “search-as-you-type” or “intelli-search” feature into your search boxes. Google does this. It pulls up what you may want to be searching for before you have typed in everything, for example, after typing 5 or 6 characters you get completed search criteria suggestions/options.
• Make sure hyperlinks works, i.e. no broken links.
• Show the URL in text for external links. In other words, if the user is being take to a web page on another web site, let them know this in advance. You might also want to tell them – “You are about to leave this web site.”
• Open up a new browser window when you link to an external (other) web site so when they are done on that web site, it is easy for them to return to your web site.
• Differentiate unvisited from visited link colors (occurs by default with hyperlink colors; ensure you keep this differentiation even if you change colors/style of links)
• Include a way to get back to home page on every page. Most often, the company’s logo in the top banner/header of the page is a link to the home page.
• Do not underline words/text that are not hyperlinks. This would confuse the visitor.
• Use Ajax when re-ordering content on page so users do not have to wait for the entire page to be reloaded to view new data. This is faster and can make the page more flexible and thus more usability. Example: shopping sites where you are re-ordering by price, manufacturer, etc. via pull-down menu.
• Make sure link text is descriptive. In other words, link text should not be “go here” or “click here”. It should tell the user where they are going or what they will view. This also improves search engine rankings.
• Make sure layout and design of web sites is consistent. Navigation should be placed in consistent location and location on every page and where users expect navigation to be, i.e. top and left.
• Only use high-quality images.
• Images and graphics should be used judiciously.
• Most information on web sites is conveyed in text. Images are often supplementary and should be used when they serve a purpose. They are needed to make a web site look professional, but again, use judiciously.
• The images should also be optimized for file size (i.e. web site images do not need to be of as high of quality/resolution and images for print) when saved so as not to make the web page load too slow. It is also said that at least one million users browser the web on browsers that do not display images/graphics.
• Include some white space, but not too much. Whitespace makes web page more pleasant, less crowded/busy, and easier to read/view.
• Ensure there is sufficient color contrast between background and text, i.e. black text on light background. Insufficient contrast between background and text makes web site unreadable.
• Use at least 10 point font, preferably 11 or 12 point.
• Be consistent with font type. Sans-serif recommended for web pages. Serif for print, except headings/titles.
• Links are a visible color (no underlining for non-link text)
• Ensure web site adheres to corporate branding standards
• Home page typically requires less scrolling than sub/informational-pages. Home pages are usually intended to introduce you to the company and provide navigation to get the user where the more detailed information is.
• Make sure if your site is fixed width (ice design), it fits into the average to slightly smaller than average monitor resolution (such as 1024 or 100 pixels in 2009) without horizontal scroll bars. There should be no horizontal scrolling on any web page/site. If fluid design, make sure locations of items and layout of web pages does not change to drastically (this can be aided by using fixed width tables within fluid design.
• Do not use HTML frames (iFrames may be ok in some cases).
• Do not use scrolling (marquee) text or blinking text. Do not overuse color for text on pages.
• Using short paragraphs, bulleted lists, headings and subheadings on web pages. They can make a page much easier to read than a presentation of the material in a large block of text.
• In pull-down menus, place most commonly selected items at top of list.
• Ensure information is up-to-date and timely.
• Ensure information is accurate.
• Ensure information is free of spelling mistakes.
• Cite sources (e.g. references/bibliography) where appropriate to improve legitimacy of web site.
• Ensure reading level appropriate to audience and that text is chunked for readability. 6-8th grade reading level is a common denominator. (Know your audience!).
• Include a method to contact the author (and make it easy to find). This assists in legitimizing the web site.
• Ensure there is a privacy/cookie statement on the web site.
• Be cautious with line length for text. Some studies show long lines of text are harder to read. (can use em for table/text width – has max width, but can be shrunk).
• Additional line spacing via CSS may improve readability by adding whitespace.
• Ensure web site downloads/loads into browser quickly (compress images, no Java, etc.)
• Allow for printer-friendly versions of web pages.
• Avoid pop-up boxes/windows, except in a few rare/special circumstances. User may have pop-up blocker installed and if so, they cannot view that content. There is usually a more usable solution (alternative) to a pop-up window.
• Simpler is often better. Special effects may be “neat” the first several times you see them, but they soon become annoying. Most users come to a web site for information or to do something and your web site should focus on how to help them with this, not how to “wow” them with special effects.
• Do not use Flash splash pages.
• Include customized error pages (i.e. a 404.html file) that keeps to the corporate theme/template and provides menus, text boxes, etc. that help the user find the correct information/web page.
• Inform the user if they a file they are about to click is non-HTML, e.g. PDF, etc.
• Test for cross browser compatibility, handheld devices, Mac/OS, readability, etc.
• Validate the HTML or XHTML on your web site to improve the consistently at which the page is displayed on different browsers and devices.
• Do not place meta tag refresh code in web page that causes the browser back button not to work.
• Use Ajax for input text boxes to provide immediate information if input is not entered correctly. With Ajax, the user will not have to submit the web page form before they know whether they did not enter the information correctly. Also, if you do take the user back to the form to enter the information correctly, make sure you do not clear the form textboxes and force the user to re-enter the good information they already typed into some of the input fields.
• Web site is accessible to people with disabilities, i.e. sight, hearing, etc. This includes alt tags for images, etc.
• Good web site address/URL (domain name), e.g. short and descriptive preferably a .com with no dashes. To be professional, have your own domain name. Your domain should not have yahoo or geocities in it, i.e. http://mycompany.yahoo.com/.
Incredible web site usability web sites!
Question to ask yourself
When considering whether to do something on a web site, you may want to ask yourself this question - Do any of the major web sites do that, e.g. Microsoft.com, Ford.com, GM.com, Umich.edu, BestBuy.com, whitehouse.gov, etc.? These organizations often spend hundreds of thousands of dollars or more developing their web sites. They have many expert IT, graphic design, marketing and usability staff employed designing and building their web site and have been refining it for years so they know what works and what does not, what is professional and what is not professional, what keeps visitors on the site and what does not, what helps sell products and what does not. If none of them are doing it, make sure it is appropriate.
Favorite rules of thumb
- Know the user, and YOU are not the user.
- Consistency, consistency, consistency.
- Keep it simple.
- Things that look the same should act the same.
Summary of web site usability data collection and testing techniques
Careers, Jobs and College Degrees in Web Site Usability
Web site usability has emerged as such as distinct, valuable, and vital aspect of software and web site design that many career opportunities and college degrees are now available in this discipline
When searching for these careers and degrees it should be known that web site usability is also sometimes referred to as Software Ergonomics or Human-Computer Interaction.
Sample Job Posting
College Degrees (a sample)
Other resources and articles