Ethiopian Design

In any large project, it just isn’t possible to hand-code each page individually. For any large web site project, it’s necessary to begin by creating, testing, and debugging templates.

Even after mockup pages or other prototypes have been user tested, it’s still necessary to build solid templates to make sure they can actually work for the data they will contain or the function they will serve.

To start, identify how many different types of templates will be necessary, even if it is just as a sanity check for early design phases. For instance, mockups may have been created for a home page and subpages, but what about product pages?

If any set of pages will contain a vastly different type or set of data, a new template should be created and tested. Also test the boundary conditions with regard to page content.

That is, if you test how a template works for the pages with the most and least content, you can be reasonably sure will work for everything in between. Finally, make sure to get approval for any new templates that the client did not review during the mockup stage.

Html Coding Guidelines
These are some general principles to follow in the process of coding HTML.

Code for Speed
Test download times for the slowest reasonable connection that users will have. For the general public, assume no faster than a 28.8-baud modem connection. (For users connecting through a cellular phone, 14.4 baud is often the maximum achievable rate.)

Is the response time still reasonable at that speed? Maximum download time can be estimated by summing the file sizes for all components of your pages. Anything more than about 100K per page may create unreasonable delays for users with slower internet connections.

Code for Rendering
Reduce the number and complexity of any tables that are used, so that pages will display faster, large, nested tables are more difficult to parse and take longer for browsers to render.

Generally, the fewer the tables, the faster that users will able to use screen data. In addition, ensure that all size attributes are used for image and applet tags. Otherwise, browsers may adjust the rendered layout on the fly, making changes as new information is downloaded.

This creates an unstable and potentially confusing user experience, as screen elements jump around while the page is progressively updated.

Code for Accuracy
Use HTML syntax checkers to test the validity of your HTML code. Improperly formed syntax will display unpredictably in different browsers and with different user preferences selected. Also check for common mistakes that sample syntax checkers may not find, such as table data that is outside of <TD> tags.

Code for Maintenance
Document page code liberally with comments so that sections are easily found later. It is especially important to mark header, footer, navigation, and content sections. To the extent possible, also separate content and HTML tags onto different lines.

While this sometimes cannot be done because it will change the layout, it is easier to select an entire line or block of lines if the entire block is content. This minimizes the need to select text from within a line of HTML tags, reducing the possibility of introducing syntax errors while updating content.

Code for Search Engines
Add necessary metatags and text so users can find you pages. Search engines work on the basis of relevance: they find pages with keywords and descriptions similar to the terms you’re searching for.

Those pages with the most words or word meanings matching a query will be returned fist. It is therefore important to include keyword and description metatags with every page. They should include some general terms that describe your entire web site and some that refer to the specific page.

It is also prudent to include any common misspellings or variations in your keywords, as users don’t always know or take the time to figure out the correct spelling for what they want.

It is not, however, ethical or legal to include competitor’s trademarked or service-marked terms in your keywords. Some search engines also index the content of your pages (especially the first 200 characters of the page), so include as many relevant keywords in the text as is reasonably possible (without detracting from the message, of course).

Keep in Mind Evolving HTML Standards
In addition to following current HTML standards as closely as possible, pay attention to new standards, so that your code is likely to be compatible with future browser releases for as long as possible, and so porting the code to new versions will be a minimal strain. See the sidebar “Why XML Is Good for Usability” for details on one of the most important standards that is likely to influence future web development.

Report This Post