View Source: How to check for a really bad web page

Here are two lines of a very poorly coded web page:


<tr>
   <td><input style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; WIDTH: 80px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 18px" /></td>
   <td><input style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; WIDTH: 80px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 18px" />&nbsp;<img height="14" alt="" width="7" border="0" src="/ccData/CommonFiles/Image/arrow_button.gif" /></td>

The problem is evident in the style tags. These tags allow you to describe how that piece of the page should look. First - this is hard to read. Even if it wasn’t in a blog - the long lines are difficult to decode. The BORDER descriptions are identical and they are in there four times (RIGHT, TOP, LEFT, BOTTOM). The dimensions are hard-coded (18px). One of these table elements is blank - it isn’t doing anything. The alt tag is blank. This would make it more difficult for a visually impaired person to understand the page.

Better code:


	<div class="element">
		<label for="sUsername">Username</label>
		<input type="text" name="sUsername" id="sUsername" 
			dojoType="dijit.form.ValidationTextBox"
			required="true"
			trim="true" 
			promptMessage="Enter Username"
		/>
	</div>

This code is easier to understand. The design is handled with CSS, in fact it is transparent. On this page, the HTML would not have to change in order to change the appearance, only the CSS would change.

Granted, this is a comparison of two different types of HTML - one is two cells of a table, the other is a prompt for a username using dojo validation. However, the underlying truth is that if you do a view source and see long, unintelligible lines of code, with lots of style=, you are probably viewing code written by someone with limited technical skill.

Other dead giveaways:

class="one two three four five six seven eight nine ten” - means the author has either made the design too complex or really doesn’t know what they are doing.

<br /> - this is nice XHMTL code. If every
tag has the space and trailing slash, the line breaks were done right.

font="arial” - Author does not understand CSS well.

More help:
http://validator.w3.org/ - Checks a page
http://websiteoptimization.com/ - An excellent resource

Business Plan: Web Site

Every business plan should address the web, but not every business should have a web site.

Examples:
You have a small local service business with a well-established customer base. You are very profitable. Maybe you’re an orthodontist, and you have a steady stream of clients from the local dentists. You really stand to gain very little from a website, or even an ad in the phone book. Simply focus on the services that have made you successful.

You sell stuff. Some good stuff, some not so good stuff. Sometimes, you have good months and you make alot of money, other times, you don’t. The web probably won’t help you stabilize the sales, but you may want to consider eBay or Amazon as a sales channel. Visit those sites and read the materials - they are excellent.

You have a strong mail order business, but your web sales are very poor. This is probably an indication that you should update the web
sales channel.

You’re passionate about something and want to share that passion with people, as well as let them participate. Create a social network - consider services like http://ning.com, or a Yahoo group, or other sites that allow you to create a community without any help.

You want to inform people about a particular topic, more as a resource than an opportunity for interaction. Try a blog - like https://www.blogger.com/ or any of the other free blogging services.

How to Build a Web Site

Web sites have three primary components: design/layout, content, and logic. Design is the visual appearance - what it looks like, how the screen is organized. Content is the information conveyed - and it may be text, audio, video or a combination thereof. Logic is the engineering that makes it work - it can be a commercial open-source application, or it can be custom code, or a mixture.

Design usually begins with wireframes, simple text representations of what will be on the page and where it will be. The text may describe images as well. Once that is established, comps (image of the screen) can be made. Often, a comp is made for the home page, and another is made for internal pages.

Content is an extremely important part of the site. There are two types of content - structured and unstructured. Structured content contains common data elements - like an address book. For an address book, each address would be considered structured content, and the site should manage the data in as such. Unstructured content is blocks of text or images that do not share common data elements - the blog posts in this blog are a good example of unstructured content. Discriminating between the two content types should be done by the person responsible for the logic (usually an engineer).

Logic is what brings the functionality to life. If you are trying to sell something, logic will be a cart - and you should definitely use a commercial cart instead of trying to build one. If you are trying to inform your visitors, you should consider a content management system, or a blog. Again - don’t reinvent the wheel, buy or use an existing system. Custom code has its place, but it is very expensive and risky.

Design and content definition should happen before logic. In a nutshell, what will it look like and what does it have to do. Content definition often dictates the logic. Engineering should be part of these stages, but, the engineering tasks can and should be defered until the bulk of the design and content have been defined. If there are clear, established, requirements for functionality, engineering can be done concurrently, with integration performed later.

The most important part of the process is to focus on the objective of the site. What is this site supposed to do? Who are the target visitors?

Web Development/Engineering

Great resources:

Mozilla/Firefox - plugins Firebug, CSSmate/CSSedit, YSlow
XAMPP - http://www.apachefriends.org/en/xampp.html

LAMP Engineer

LAMP = Linux/Apache/MySQL/PHP(or Perl,Python)

A good LAMP engineer can use the whole stack to build graceful, cost-effective solutions. It is the synergy of the stack, with a good knowledge of each layer, that makes this skill set valuable.

Examples:

* Use a link to allow different paths to the same file. That way - a file that is used to deliver more than one page can be maintained from a single point.

* Use Apache rewrite rules, with a PHP/MySQL application to make a small amount of code deliver what appears to be a very large site.

* Choose the best solution, either using PHP system/exec calls or bash scripts to use operating system commands. No sense reinventing the wheel.

* Use PHP5 exception handling, combined with the Apache error log to track errors, or display them on pages gracefully.

* Enjoy the vast collection of excellent open source software available to push the limits