KBase > Web Development

Welcome to the Web Development Knowledge Base.

KBase > Web Development > Introduction

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

  • HTML
  • XHTML
  • CSS

Web Programming and Scripting Languages

  • JavaScript
  • Java
  • C#
  • Active Server Pages (ASP.NET)
  • PHP
  • ColdFusion (.cfm)
  • Perl
  • Python
  • Flash ActionScript
  • DHTML
  • Ajax (combination of JavaScript, XML and a scripting language such as PHP

Other Languages used with Web Sites

  • XML - used to store data
  • XSLT, XSL - used with XML
  • SQL - used to interactive with data stored in a database such as SQL Server, MySQL or Oracle

Graphic Design Software

  • Adobe PhotoShop - used to create and edit images, graphic as well as design layout of web pages.
  • Adobe Dreamweaver
  • Adobe Fireworks
  • Adobe Flash

Graphic Design Knowledge Areas

  • Color theory
  • Typography
  • Web site usability
  • Page design and layout

Other IT and Web Knowledge Areas

  • Web site accessibility
  • Cross-browser compatibility and testing
  • X/HTML and CSS validation
  • Search engine optimization
  • IT security, network security, secure coding, etc.
  • Web site development process / web site development life cycle
  • Project management
  • Web site marketing / social media marketing
  • Log file analysis
  • SQL query optimization
  • Legal considerations, e.g. copyright law, domain name law, tax and tariff law for e-commerce sites, etc.

Back-end Server and Web Server Skills

  • Creating cron jobs and linux shell scripting
  • Web server (e.g. Apache, IIS, etc.) installation and configuation
  • Database server (e.g. Oracle, SQL Server, MySQL, etc.) installation and configuration
  • E-mail and network services and protocols, e.g. smtp, imap, pop3, ftp, telnet, etc.
  • Media steaming severs, e.g. Microsoft, RealNetworks, Quicktime, Flash, etc.
  • SErer clustering, server farms, etc.
  • Server and database backup and recovery

KBase > Web Development > 6 Ways to Build a Web Site

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

Advantages: (a) complete control over design of web page (especially with accessibility to code), (b) Dynamic Web Template (DWT) technology makes maintaining large web sites and global changes easy, (c) GUI authoring software includes other very useful features such check-in/check-out features, site-wide checks for broken links, built-in templates, built-in JavaScript behaviors, validate tools, etc. , (d) easily portable to a different server.

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.

Examples: http://www.steves-templates.com/
http://www.freewebtemplates.com/
http://www.metamorphozis.com/

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/
http://www.intuit.com/ http://www.hipero.com/
http://www.webs.com/ http://www.weebly.com/
http://snappages.com/ http://www.sauropol.com/
http://www.webnode.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)
Joomla http://www.joomla.org/
Mambo http://mambo-foundation.org/
PHP Nuke http://phpnuke.org/
AssetNow http://www.assetnow.com/
WordPress http://wordpress.org/
CakePHP http://cakephp.org/
NucleusCMS http://nucleuscms.org/
TypePad http://www.typepad.com/
Symfony http://www.symfony-project.org/
Typo3 http://www.typo3.com/

KBase > Web Development > What's the difference between a Web Developer, Designer and Master

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.

  • Respond to incoming e-mails to info@!1site.com, webmaster@!1site.com, feedback@!1site.com, or whatever catch-all e-mail address is being used.
  • Check for broken links and orphan pages (i.e. pages with links to them).
  • Monitor the error logs and report potential problems.
  • Monitor and tune web site performance and web server software (may include load balancing).
  • Monitor web site traffic (and produce reports) for marketing purposes (i.e. most visited pages, least visited pages, length of stay on web site, etc.).
  • Backup web site.
  • Maintain mirror of web site.
  • Manage web site search engine submissions and ranking.
  • Configure connectivity between the web pages and a database back-end.
  • Install server software necessary for web sites needs, such as content management software and Perl and other compiler/interpreter packages.
  • Maintain an organized file system on web server.
  • Monitor and maintain web site security.

KBase > Web Development > X/HTML and CSS

Do I need to know X/HTML?

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.

  • WYSIWYG is sometimes WYSIAWYG. WYSIWYG stands for “What You See Is What You Get” and refers to the fact that graphical editors, such as web authoring software, allow you to see what your web page will look like as you are editing and designing it. In contrast, when you hand code HTML, you cannot see what your web page will look like until you save it and view it in the web browser. WYSIWYG is almost synonymous with graphical or GUI (Graphical User Interface). However, occasionally with graphical web authoring software, what you see is only “almost” what you get, e.g. WYSIAWYG – “What You See Is Almost What You Get.” In such cases, it may be necessary to “tweak” (edit) the page using pure HTML. This is why most web authoring software, such as Dreamweaver, has a Design View (WYSIWYG), a Code view (HTML), or Split view (where you can see both the web page as you edit it and the code).
  • It’s expected. Most employers hiring web designers and web developers expect proficiency in HTML.
  • Create quick and simple web pages. Without a graphical web authoring software and by using just any text editor, a simple web page can be easily and quickly created in HTML. The need for this does come up, sometimes to make quick update or correction. Think of knowing HTML as being able to edit anytime and anywhere.
  • Tableless CSS-based sites. There is a new trend in web design and development to create tableless CSS-based web sites. Historically, tables have been used to lay out the contents of a web page. For example, a table is typically used in web page layout to separate the top heading content from the left navigation menu content and from the body text content. CSS and DIV tags are an alternative way to lay out a web page and are often hand-coded. Once done, this code is very easy to read and maintain. Such sites are also often very aesthetically pleasing with a particularly artistic style.
  • Web programming. Web developers who create dynamic web sites with web programming/scripting languages such ASP, PHP, or Perl must know HTML. The dynamic web sites that web programmers create generate the web page by interweaving many languages, including HTML, ASP, and SQL (for more information, see Chapter 6 which surveys these languages).
  • It’s easy. HTML is not a programming language. It is a relatively simple set of codes, called tags (see Chapter 3), which are used to tell the web browser how to display content on a web page, i.e. font types and sizes, colors, formatting (bold, italics), line spacing, justification (left, center), etc. Simple HTML is also used to create a hyperlink or insert an image. Complex tables used to organize data/information are one of the few cases when graphical authoring software is probably necessary.

What is HTML, XHTML, CSS?


HTML

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

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:

  • Tags must be properly nested.
  • Tags must be in all lowercase letters.
  • All tags must be closed, i.e. no empty tags.
  • Any attribute values must be enclosed in quotation marks.
  • Every element must have a value.
  • All formatting must be done in CSS, i.e. separate content from formatting.
  • Image tags must have alt tag.

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:

  • More accessible, i.e. will display on different types of devices (e.g. computers, hand held devices) and for those with disabilities.
  • More easily edited and maintained due to separation of content from style, cleaner code
  • Promotes a semantic markup methodology whee tags clearly denote the meaning of the content in them which aids search engine optimization and makes for easy to read and maintain web page.

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">

<head>
  <title>Sample XHTML Strict Web Page</title>
</head>

<body>

<p>Hello World.</p>

</body>
</html>

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

HTML 4.01 Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


CSS

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

  • Easy global changes. Many web pages (hundreds or more) can be attached to the same CSS file. Therefore, a simple change to the one CSS file, such as a change to the default text color, would immediately be reflected in all of the hundreds of web pages (i.e. the default text color is change d on all the hundreds of HTML/web pages), i.e. an immediate global change. CSS is said to “separate design from content”.
  • Layout. Using tables for layout can be difficult to maintain and changes may have to be done on all web pages (unless a template or SSI/include system is being used). CSS allows very slight changes (moving title text 10 pixels to the right) or substantial changes to be done easily and globally.
  • Size, Bandwidth, and Load Time. Since all of the formatting and layout code of a web page can be removed from every web page, HTML files become much smaller in file size and the network bandwidth and web page load time is reduced. Bandwidth is further reduced because the one CSS file being used is then “cached” by the web browser and/or server. CSS also allows the developer to create roll-over type navigation menus without the use of two images per menu item reducing the web page’s file size even further.
  • Accessibility. Separating style from content makes it easier to accommodate persons with disabilities, such as visual impairments. Web pages can be easily displayed as text only and different CSS files can be used depending upon the users browsing device.
  • Consistency. Using a single CSS files allows the formatting, layout and position of elements within the web pages of a site, such as navigation and text, to be consistently enforced across the site. You don’t have to worry about having some pages look different than others or violating the style guide of a company.
  • Search Engine Optimization. A search engine robot will normally consider the content at the beginning of your web page (HTML code) more important than the text towards the end of the code. For a table-based web page the navigation bar is normally at the top of the web page code. But with CSS, the navigation cab placed at the bottom of the web page allowing the search engine robot to see the true content o the web page immediately. In addition, since CSS removes the formatting HTML code from HTML file, there is less clutter for the robot to go though to find the content to index the web site by.
  • Clean code. A well-coded and documented HTML and CSS web page can be very clean, i.e. very easy to read and understand. Easy to read code makes maintaining and updating a web page much easier.


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:

  • Better support for rich Web-based applications
  • Improved support for the semantic web
  • Create more accessible web pages, e.g. different devices, user abilities, etc.
  • Produce better search engine results

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 has attracted far more web browser support than XHTML 2, i.e. Mozilla, Opera, and Apple, etc. IE did not support XHTML as XML just as text
  • XHTML 2 is a more radical redesign of the web standard than HTML 5 which is a more incremental step forward. This causes several potential problems:
    • XHTML 2 will be far more difficult for search engines, content-management software, and authoring tools to support than HTML 5.
    • Migrating web pages from HTML 4.01 to XHTML 2 would be far more difficult to converting HTML 4.01 pages to HTML 5.
    • XHTML 2 is not backwards-compatible to HTML 4.01.
  • HTML 5 will include most every feature XHTML 2 would have had such as support for the semantic web.

HTML 5 will add man new exciting features to the Web's standard language. Among these are:

  • The HTML syntax of HTML5 allows for MathML and SVG elements to be used inside a document
  • HTML 5 will support rich Internet applications (RIA), i.e. applications that provide Web 2.0 functionality and multimedia. HTML 5 will try to include features to compete with Adobe Flash, Microsoft Silverlight, Ajax, and JavaFX. Some say HTML 5 is truly a specification for dynamic HTML.
  • Will begin to move HTML from a simple markup language to a semantic markup language and semantic web (emphasis on meaning over presentation).
  • A very simple DocType: <!DOCTYPE html>
  • New structural elements such as nav, section, article header, and footer. These elements will work like div tags to layout a web page and reuse sections of the page.
  • The canvas tag will allow drawing dynamic graphics using JavaScript. It will allow creating games, photo composition, animation, and presentations with graphs. This tag is already supported by some browsers, such as Google Chrome, Safari and Firefox.
  • New inline elements such as time to represent time or dates in the content and a progress tag to represent the completion of a task, like in a progress bar.
  • Many new input form field types and functionality, e.g. instead of just text input fields there will be number input fields, fields for telephone numbers, credit card numbers, required field types, e-mail field type, URL field type, sliders, data pickers, and an autofocus field option to set the default field for the cursor when the user loads the web page (no more JavaScript needed to do this).
  • Many new APIs (Application Programming Interfaces
    • New offline capabilities (offline application caching/offline database) such as reading e-mail from your online e-mail provider and storing it in the web browser while offline. This will help bridge the gap between the desktop and the Web. The client will be used to store data more than previously. You will be able to maintain small databases on the client which will reduce the need for server-side sessions and improve web application performance.
    • Drop and Drag API (using JavaScript)
    • New, improved, and easier to use video and audio tags to embed video audio into web pages.
    • Geolocation API in to programmatically determine location information through a device’s user agent, such as a mobile device.
    • Document editing, such as Microsoft Word documents.
    • Browser history management that lets you analyze history for useful purposes such as URL typing.

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

Basic "Validated" HTML and XHTML Pages

Example 1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

<head>
   <title>XHTML 1.0 Transitional</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
  <p>Hello</p>
</body>

</html>

Example 2.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">

<head>
  <title>Sample XHTML Strict Web Page</title>
</head>

<body>

<p>Hello World.</p>

</body>
</html>

KBase > Web Development > The Web Development Process

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

  • Meet with client and determine project scope (how many pages, how technically
    sophisticated), time-line (project/work plan), budget
  • Determine purpose of site, i.e. marketing, information, e-commerce, etc.
  • Determine who your audience is, which in turn, impacts reading level of
    content, technology used, design of site, etc.
  • Assemble project team: designers, programmers, writers, etc.
  • Create protocols for updating live web content
    Who will have FTP access to server? Will you use a separate development server
    and production server or deployment/production folders with user permissions
    for each? Who will approve content changes? Will you be using an IDE with
    check-in/out feature?
  • How will you contact the client contact(s) for content and images?
  • Determine software and hardware needs, i.e. server(s), storage space, bandwidth,
    special software, (streaming server, database server, e-mail server, FTP server,
    scripting language support/interpreters, etc.)
  • Determine domain name (or sub-domain, directory, etc.)
  • Assess whether any content in web site will be sensitive and need to be
    secured via password protection, stored offline, placed on a different server
    behind a firewall, etc
  • What support will be needed to maintain the final site, i.e. time/resources
    to keep content up-to-date, check for dead links, orphan links, etc.

2. Design (the Blueprint)

  • What will be the structure of the web site?
  • How many levels deep and how wide will the site be? Consider creating a
    visual sitemap.
  • What other navigation methodologies will be used, i.e. menus, search box,
    site map, quick links pull-down, knowledge-base, etc?
  • Create a “wireframe” of the home page and for the second-level
    pages (a skeleton web page with all the navigation, function and content elements
    that will appear on the final web site, but with no graphic design elements)
  • Develop content (text) with client, writers, etc.
  • Identify and collect images, drawings, photography to be used in site.

    Will you use stock photos (which may need to be purchased) or will take create
    or take original digital photographs?

  • Design web page templates, i.e. the layout and design of the home page
    (1st level page), 2nd level pages, and 3rd level pages (most recommend web
    sites no more than 3 levels deep)
  • Determine what programming/scripting language will be needed and pseudo-code
    the scripts (dynamic aspects of site), i.e. JavaScript menus, ASP database
    queries, search box scripts, printer-friendly scripts, discussion board scripts,
    knowledge-base scripts, etc. Or, make acquisition of pre-existing scripts,
    if appropriate and available.
  • Develop and demonstrate prototypes to client for feedback, revise as needed,
    and repeat (will involve revisiting design steps above)

3. Production/Construction/Development

  • Create the web page templates, which may involve PhotoShop, HTML, CSS, Dreamweaver,
    etc.
  • Create and integrate any multimedia elements, i.e. Quicktime, Flash, etc.
  • Develop necessary scripts, i.e. JavaScript menus, ASP/PHP database queries,
    search box scripts, etc.
  • Add content to web page templates for each web page in web site
  • Implement secured areas of site, if necessary, i.e. password protection,
    database roles, LDAP, etc.

4. Testing

  • Proofread text
  • Ensure all links work
  • Use focus groups to test ease of navigation and ability to find information
  • Test any scripts or code, i.e. JavaScript menus, search button code, database
    code, etc.
  • Ensure site is accessible, i.e. meets accessibility standards (visual, hearing,
    etc.)
  • Test cross-browser compatibility, i.e. Microsoft Internet Explorer, Firefox,
    etc.
  • Test download time
  • Test web site appearance and usability in different monitor resolutions,
    i.e. 800x600, 1024x758, etc. and possibly devices (PDA, cell phone, etc.)
    if necessary
  • Perform web site stress/load test, i.e. how many concurrent users/visitors
    can be on the web server at one or can perform queries at once?

5. Launch Web Site

  • Transfer web site from Production Server to Live Server

6. Evaluation and Maintenance

  • Review web site usage logs (software such as WebTrends may be helpful) to
    find out how long visitors are staying on your site, what pages do they visit
    frequently, which pages do they visit infrequently, which pages do they stay
    on the longest, which pages do they not stay on very long, do visitors purchase
    products on an e-commerce site or just look, how many repeat visitors are
    you getting, etc.
  • Collect feedback from visitors via web master content email/form.
  • As web site is maintained and page are added, modified, and removed, verify
    orphan pages are archived offline, content on existing pages is kept up-to-date
    (e.g. no former employees list, products no longer available, current prices,
    etc.), etc.
  • Make revisions to site based on collected information from above (may have
    to revisit analysis, planning, design, development steps above)

7. Site Marketing

  • Identify and implement appropriate HTML meta tags and page titles
  • Add web site to search engines and directories (free)
  • Hire or become an expert in the field of “search engine optimization”
  • Track your web site ranking in search engines and directories and revise
    site as necessary to increase rankings (consider use of Web Position Gold
    software, etc.)
  • Find blogs and newsgroups to advertise your web site in
  • Consider enrolling in Google AdWords
  • Consider enrolling in Google AdSense
  • Consider investing in a social media marketing program, if applicable
  • Consider Banner Ad advertising
  • Implement an “Subscribe” feature (e-mail//RSS, etc.) on your
    web site so customers/visitors can sign up to receive newsletter, promotions,
    coupons

KBase > Web Development > Web Site Usability

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.

Navigation 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.
• If the web site is deep use might use JavaScript style menus that expand out to 3rd level from home page so the user can get there in 1 click instead of 3.
• Include text links in case JavaScript disabled or for persons with disabilities.
• 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.

Look-and-feel guidelines

• 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.

Information guidelines

• 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.

Functionality guidelines

• 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.
• Minimize special features requiring JavaScript, Flash, animation, sound/music, Java, etc, except when necessary or judicially used.
• You never want to disenfranchise any potential user/audience. Minimizing browser plug-ins and new technology can help this. Only use it Is absolutely necessary. Just HTML and CSS is the simplest way to build a web site and are often all that is necessary with, perhaps, some JavaScript. Flash is also installed on most computers, but don’t overuse it.
• 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!

http://www.usability.gov/
http://www.webstyleguide.com/wsg3/index.html
http://www.usabilityinstitute.com/resources/userInYourFace/userInYourFac...

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

  • Individual visitor observation
  • Group Focus groups
  • Thinking aload activity where user verbalizes their thoughts as they use the web site.
  • Analysis of web site log files
  • Review the web sites of competitors
  • Prototype design ideas on paper and test them with users
  • Have test participants engage in a card sorting exercise in which they organize the web site in a way that makes sense to them, e.g. categories, structure, etc.
  • Perform a task analysis that reveals the users goals for using/visiting the web site and how they work, i.e. what specific tasks users must do to meet their goals and what sub-steps they must take to accomplish those tasks.
  • Perform rapid prototyping which is useful in validating and refining the usability of a system during the early stages of development

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

Senior Usability Specialist. (Detroit, MI 3/4/2010)
Web site | PDF format

Usability Specialist (Detroit, MI 3/4/2010)
Web site | PDF format

Usability/User Experience Specialist Job Description from US News and World Report.
Web site | PDF format

   College Degrees (a sample)

Other resources and articles

http://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction
http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-awa...
http://en.wikipedia.org/wiki/Usability
http://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction
http://en.wikipedia.org/wiki/Web_usability
http://jthom.best.vwh.net/usability/
http://www.useit.com/
http://www.netmechanic.com/news/vol7/design_no4.htm
http://www.usereffect.com/topic/25-point-website-usability-checklist
http://www.usabilityfirst.com/websites/index.txl
http://usableweb.com/
http://websitetips.com/usability/