The Labs.Com Web Lab WebDesign

The Labs - Design & Functionality For The Net

How To Build A Web-Site

This is a small HOWTO BUILD A WEB-SITE document based upon our own experience. It's only meant for your information and does not claim to be a complete reference manual, but a brief overview.

1. Analyzation
2. Design
3. Browsers Dependencies
4. Implementation

First of all analyze what the site should do:

1. Static pages (change more than once a week)
2. Dynamic pages
   • Handmade database using UNIX filesystem
     • Advantage: fast implementation, traceable
     • Disadvantage: not portable, dedicated search-engine required
   • SQL based Database
     • Advantage: portable, searching embedded (use PHP3)
     • Disadvantage: good planning required, traceing difficult
   • Special Features:
     • Themes: allowing users to customize the appearance of the site
       (We use ProgrammerHTML, InlinePerlPages and MyDBase)

       Automated Newspage: sorting updates according date, topic or author
3. Chat
   • Web-Chat (slow, less interactive, but better discussion level)
   • Java-Chat (faster, more interactive, not supported fully on all browsers)
4. Mailing-Lists
   • Subscription/Unsubscription
     • Email-address based (less than 1000 users)
     • Membership based (more than 1000 users)
5. Web-based Discussion Groups
   • Archiving
   • Searching
6. Multimedia
   • Java Applets
   • Shockwave
   • Realaudio/Realvideo
7. Extensibility: automated deletion or insertion of new pages (regarding automated update of navigation, database recommended then)
8. Maintance: we usually instruct companies webmasters to maintain their site we developed and share substantial web- & net-know-how to have it running by themselves and we operate then as web-consultors.

Matt's Script Archive Powerful CGIs	CGI Resources Hundreds of CGI prgs/scripts	Developer.com: CGI Online Books Online books to explore perl and CGIs
PHP Server-side script language

WebDesign 2. Design

Frames vs. Non-Frames

Frames Non-Frames One entry point Many entry points One bookmark Many bookmarks Printing one frame Printing full-page Depending which target you have, choose frame or non-frame implementation. I personally prefere non-frame approach as it allows the user to bookmark individual pages. But some customers may request this feature to be avoided, then you may look for frame version. Another approach would be programming server-side if the $ENV{HTTP_REFERER} (within a PERL-CGI) is unlike your domain-name, then you know the users came from another side, redirect the user with Redirect: http://myurl.com/ to your entry-page.

Colors

Choose max three colors, or two colors which you base your design upon. Avoid to work with more than three colors, otherwise designing gets very complicate. These are the default-colors of Netscape-browser, if you use GIF and you like to be sure it's not dithered then choose one of the colors. Hint: Download it and use it as palette, or use ppmquant (part of NETPBM) with -map option to force a picture to use these colors.

Logo & Icons

Resize all logos to icon-size (24x24) and look if the icon is still recognizable, otherwise simplify the logo.

Page Header

Each page should have a header from which all important links are available: front-page, 2nd level pages, search and feedback page. You likely may consider to add in each page a small search-engine form (like this site), unless you don't have the space for it. Keep email-addresses hidden if you do a site with a lot of people, you will regret it later. If you do a less traffic site don't hesitate to put email-addresses on each page, just be aware sooner or later you get spammed with commercial emails as web-robots extract your email-address from the pages. Good solution is to use a CGI-based feedback form.

Page Ending

Use an icon or logo to end a page, maybe include (c) notices and update time of the page. In general less important information as people usually won't scroll til the end of a page, but when they do that they realize they reached the end of a page.

Visit the Graphic Lab to check some resources for the design part of your site.

WebDesign 3. Browsers Dependencies

Well, this is the biggest hassle. Check the Dynamic HTML resource section and realize how cumbersome it gets when you start to really use all features of the browsers.

In general, use as general methods as possible. I recommend using <table> which gives pretty much control of position and works with many browsers.

WebDesign 4. Implementation

Assuming you are developing things using UNIX, you may check ProgrammerHTML where you can define your own new tags. As recommendation we suggest you define yourself new logical tags (and don't care how these styles are actually are looking finally).

• create a <page> tag, with name, desc, author arguments
• swallow all content with <page> tag
• create <header> tag, with string, desc etc arguments
• create <section> tag, with name, level arguments
• etc

Then see what other tags you require and start to setup some pages using your new tags, you likely will discover how easy it is, and how short those phtml-files are. Then go ahead and define the details of the design within phtmlrc where the tags are defined, we recommend to choose Perl as language to define the tags (read ProgrammerHTML first if you don't understand this part).

Consider to use PicArt to create instant graphical headers, ie. on each page with corporate design, or use Adobe Illustrator or another vector-based tool to create header-design and export the file as PostScript and rasterize it using GhostScript which gives good results, just render double size and scale it down to achieve alike anti-aliasing effect. This all gets very difficult when you place the header-graphics unto a webpage with a patterned background, with PicArt you won't have that problem anymore as it native handles alpha-channel.

To summarize, we use PicArt for 1st-level (low-level) graphics, ProgrammerHTML to optimize design (2nd graphic level), InlinePerlPages combined with mod_perl to add maximum flexibility using Perl within HTML-pages (no need to have .php3 or .asp extension), and with MyDBase as quick & simple database for storing data.

Frontpage

The frontpage of a site is the most important page, the first impression counts (mostly), you surely also need to have real content or services behind it, that's assumed anyway. We use GIMP to create sophisticated graphics in combination with PicArt and GIFMerge (for animations). Check state-of-the-art sites such as WebArt: Andy's Art, one of the best site. Functional & Design: Silicon Graphics Inc. Functional & Design: IBM DynamicHTML: PHP.Net Rather bad examples is CNN.com or Yahoo which are rather dry as they avoided graphics to reduce traffic. In general, calculate 3KB/s download speed for average user, and then try to have the page loaded within 10secs. If you choose to have large graphics make it worth to keep users waiting.

Mistakes

Avoid common "beginner"-mistakes: Don't use public-domain animated GIFs Don't use blinking bullets Don't use blinking text Don't use public-domain backgrounds, unless you recolor them anyway and create left-border or unique graphical element with it Don't use multi-colored text, unless it fits with the design-colors Don't use page-counters unless custom designed If you do a professional site (and get paid for it), don't produce cheap looking pages, and they can be recognized by these mistakes.

Navigation

This is always a challenge, as a web-site never really is a tree-like structure but has many cross-links, therefore the navigation should be considered carefully. Few ways to implement navigation utilities: Next, Previous, Up, Top, Home buttons Logical path: Homepage > Sales > Mailorder Pulldown menu: Homepage -- Sales -- -- Online -- -- Mailorder <- Pulldown menu can be implemented using JavaScript, but there likely you will have problems with Netscape-3.x browsers and even 4.x as they don't cache JavaScript and when you have a site with a lot of pages (>100) then this JavaScript is large and slows down your site. We recommend to implement the pulldown menu using HTML direct, static. This requires some perl-programming but it's worth, just see our own site (left side navigation). We also used the logical path to add on each page. The navigation buttons next, prev, up, top, etc buttons are somehow outdated, they are not really handy when once you see that via a pulldown-menu almost all pages can be reached within two clicks. With next, prev buttons you likely are much slower, for sake of "old-fashion" you may still use them, we also did it ;-) in our site.

File Not Found

Ask your ISP about to define your own 404-page (404 is the code of the HTTP 1.0-definition of file-not-found). That way a nice site shows up telling the user he followed an outdated link. Nothing is more unprofessional than having the ugly "404 - File Not Found" page within the browser.

ISP Selection

We recommend that you assign unique IP for your site. When you host it on an ISP, ask them if you have unqiue IP, and if not choose another one. Needless to say you require telnet/ftp access (frontpage is not a topic at all). Don't sign ISP giving unlimited traffic and/or unlimited disk-space, they won't survive a year in business. Choose one at ISPCHECK.COM. Note: Many web-hosting companies are resellers, do a traceroute to the machine and see how they are connected, then choose that IP just before it is the web-site you trace and see if they also are ISP and offer web-hosting. Often resellers even use the same web-design but prices differ ;-) Check if you have your own CGI-bin, and you can use Perl5, and compile your own CGIs. If you see they use NT, don't waste any minute to check anything further. Nowadays good sites give 100MB disk-space and 100MB/day traffic, don't pay more than $100/mo for that. Dedicated servers are available already for $500/mo, check carefully how much maitance is included and if incremental backups are included.

Site Setup

Use RCS or alike system to keep track of pages. If it's not mission critical thing you do leave that out. Use one live and one development tree, which looks the same. Assign different IP but run it on the same machine and use a simple file-copy (or piped tar) to update from the development-site to the live-site. Test everything beforehand on the development-site :-) otherwise this all makes no sense at all. Make backups, backups, backups, don't rely on anybody than yourself.

Site Promotion

Go to Yahoo.com Altavista Hotbot and submit your URL(s) there. For dedicated promotion we spend 2-3 days alone for promotion the site if this is requested. Note: Real good sites don't need much promotion, with the time they will become well known, unless you want to attrack thousands of people per day then promoting with ads is recommended.

                                                                                                                                   

Web Lab

MyDBase