Category: "HTML / CSS"

Anyone can build a web site ...

… but to build a robust site in a timely manner which is cost-effective to maintain requires a fairly high level of skill, and careful management.

  • The best sites are built by teams.
  • The best sites usually have powerful applications behind them.
  • The best sites adhere to standards and coding practices.
  • The best sites have complex architectures that allow them to be managed efficiently.
  • The best sites meet the objectives of the customer and the results can be measured.
  • The best sites are delivered on time and under budget, successful for all parties.
  • The best sites mature and change, gracefully.
  • The best sites are monitored for reliability and security.

Use the Cache - Micro page overhead can be overcome with the browser cache

Although frames and iframes may require duplicate requests, most browsers will cache .js, .css, and .htm/.html files. This virtually eliminates the redundant request overhead, while still allowing a rich interface constructed from a page of micro pages.

This approach also avoids the complexity of AJAX/JSON. Done properly, it is completely transparent to the site visitor.

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

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

   <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" 
			promptMessage="Enter Username"

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: - Checks a page - An excellent resource

Web Development/Engineering

Great resources:

Mozilla/Firefox - plugins Firebug, CSSmate/CSSedit, YSlow

Frames and IFrames

Using frames and iframes to support web 3.0 pages is a great way to simplify the architecture, and avoid the complexity of AJAX. It also makes implementation of a CDN easier.

There are many ways to provide graceful search engine indexing of the pages - using Google’s site maps, Apache rewrite rules, and other creative approaches. Imagine the rich pages you could build, easily. Augment it with sophisticated browser caching and you can greatly speed the pages and reduce bandwidth requirements.

This also supports the idea of micro pages mentioned earlier.