Company
Products
Prices
Ordering
FAQs
Register
Contact
Links

Miles Research Web Design Protocol

Website Design Considerations
by Jon Miles

ASP vs. JSP, PHP, CGI, etc.

The commonly available website tools and operating environment are all best-suited using Active Server Pages with Visual InterDev. VBScript is the optimal language for server-side script. For optimal performance and design modularity, use of custom COM objects for the business and data access layers is best. CGI is a much older technology that is inefficient and does not scale out very well. ASP calls are multi-threaded and run inside the IIS process, conserving memory and processor time.

Frames or Non-Frames

Non-Frames is generally best. Frames are not often suitable for a public website. The admin pages (used by only a few staff members) and control panels can use frames, but it is an overly complex structure for most public applications. Using frames can result in bookmarking difficulties and also limits the website content visibility to search engines. Frames are useful for more complex applications including intranet web pages, lengthy reference documents, limited access pages, and multiple document interfaces.

Browser Version support

Public web pages need to support a wide variety of platforms and client software (brands and versions of browser program accessing the web pages). For Dynamic HTML, JavaScript is the de facto standard for client side scripting. Compatibility with non-JavaScript1.2-enabled browsers (8%) is necessary. Admin pages or intranet pages known to use the recent browsers from Microsoft or have a VBScript plug-in in place for Netscape (or other brand) can use VBScript on the client side as well, which can be more aesthetically pleasing from the code view point. Using client-side VBScript may be preferable for intranets in some cases. 93% of web visitors use browsers version 4 or higher; 71% are using MSIE 4 or 5, 21% are using NN 4, and about 5% are using down-level browsers (versions 3 and earlier). 90% are using Windows (9x, NT, or 2k).

Fixed vs. Variable layout size

This is a subtle design issue that will depend on the application. In general the fixed layout is simpler to design and gives a more predictable appearance, but there are times when a variable full-width layout is better (such as this longer page) to allow for the option of more width and less scrolling (PageDown/PageUp). A fixed layout is often easier to read and use because all content and controls are in a predictable location. There is rarely a need for page layouts beyond 800 pixels wide, and this is usually when larger images are to be displayed. Fixed-width web pages are typically laid out at around 630 pixels, including a 110 pixel left margin and a 520 pixel content area. This enables compatibility with the lower resolution (640x480) client screen, but is also about as wide as most content needs to be. Column width is about 500 for best readability. Improved readability is why newspapers have narrow columns, such as 1/4 or 1/5 the page width; the narrow column is much easier to read quickly. Long lines can be difficult to follow when scanning from the right end of a line to the left end of the next line, so a website may impose a line length limit to ensure adequate readability. This is helpful for when the page is visited right after a large image is viewed in the browser window. Advanced web surfers may have 5 or 10 browser windows open at once, and in the larger screen area it is best to arrange these windows on the 1024 or 1280 wide desktop area as a set of smaller 800x600 windows.

Left vs. Center Justification

This is also a subtle design issue that depends on the application, and it may vary even within the same website, but should be mostly the same for all the main pages. Left justified pages are slightly more predictable, but most users prefer centered pages.

Screen size support

About 9% of web visitors are still using 640x480 at 256 color screen resolution, and the website needs to look okay in this mode. It can be optimized for 800x600 (used by about 35% of visitors) but is best not requiring any higher resolution than this. Special websites or pages may be designed for 1024x768 (used by about 40% of web visitors).

Margins

Having a 1/6 margin on the left make the page less tiring on the eyes. Text in tables is more readable with a cellpadding of 3 or 4 or more, but many table layouts require a zero padding. The amount of margin to use is an aesthetic decision made after weighing the tradeoffs between efficient use of client screen area and readability. The page margin (the gap between the webpage and the browser client area) may be set to zero for a more integrated appearance, and should be zero where frames are used. The page margin is best at zero with the left justified layout, and is optional with a center justified layout.

Font Size and Face

Most web page text is best at Verdana 10point, but longer articles are better in Times Roman 10 or 12 point (size =-1 or size=2). Section headings are typically 2 points larger (size=+1 or size=3) and/or in bold, and page headings are bold and 2 points larger than that (size =+2 or size=4).

Graphics Format

JPEG (.jpg) is used for photographic images because of its ability to efficiently represent color and textural variations of real-world images (higher spacial frequency). GIF (.gif) is used for paletteable (cartoon-like) images because it is more efficient in representing larger constant solid areas of color (lower spacial frequency).

Color Scheme

An aesthetic color scheme is mandatory. Colors are like music and need to be combined with an understanding of harmony and melodic structure. The tones need to be relaxed and calming, not garish and noisy. There is plenty of screen clutter and over-busy pages on the Internet, and the website here is to be like a home or office which is comfortable, relaxing, and refreshing to dwell in, coming off the Internet highway with its high amplitude chromatic jumble of flashing neon signs exhorting one to click and spend, hollering for attention, and even auditory chaos. For a more quiet and peaceful setting, a few pastel tones are used. A split complementary scheme is a culture-safe model to follow.

Page Size

Most pages are best when they (including loaded images etc) are less than 50 kb in size, and up to about 100 is reasonable for some pages and the deeper pages can go to 200 kb or so. With a database-connected webpage, the loading time is more influenced by the data access connection. Pages with larger image content may require a size notice for the lower bandwidth internet connections.

Static and Dynamic HTML

Dynamic HTML is best for the 80% or so visitors who will support it. This refers to the 'active page' with 'active content' that is produced by both server side script (<%Language=VBScript%>) and client-side script (<script language=JavaScript></script>). DHTML (all flavors in general) is used for generating content and layout on the fly, usually involving database access, but also including the client side scripting of form behaviors such as formatting and totaling form fields and response to mouseovers such as dropdown and flyout menus. Since some browsers are still not processing client-side script, the page needs to gracefully downgrade its presentation for the down-level browsers.

Navigation

Navigation is one of the most important design considerations for any website. Typically there is a global navbar and a local navbar, and sometimes a member navbar that only shows up for logged in visitors. All pages should include a link to the home page (both an obvious text link and by clicking a logo), and the home page should include a bookmarkable link to itself (and an email contact link). From the homepage , it is best to have certain standard links available, such as Contact, FAQs, Links, Login, and in some cases, Products, Services, Support, News, etc. Dropdown or flyout menu trees are an advanced way to provide navigation for the more complex website. Text links that change on mouseover are usually preferable to JavaScript-swapped button images. Navbars can be horizontal or vertical depending on the application. In the active website (ASP), the page is viewed as a container object with controls

Access Points: Entry and Doorway Pages

The Main Entry page is what comes to a new visitor as the home page, and after that they are automatically directed to the member entry if they are recognized (via cookies) as a member. If they have enabled auto-login the member navbar is also visible on the first shown page. Other doorway pages may be made available as needed (e.g. for search engines, etc).

Login Procedure

Login is essentially the same as registration, but the term registration also refers to the initial process of adding a client record to the database. In the case of a members-only group, the option to login as a new client is not available on the public or member pages, but available among the Admin pages operated by staff who enable login by creating a new client record. Creating a new record triggers an event of sending the password by email in a notification message to the new member. For general login, the email address is used as the primary key, and a password is used for the basic level of authentication. An auto-login option should be available. Upon login , the client should see a second navbar with links to the protected (registered client only) areas.

Database Connectivity

The most useful websites are the ones that connect to a database. In the current environment, ADO is the best method and SQL 7 or 2000 is preferred, but if these are not available or the traffic is not too high (up to 10 or15 concurrent users), Access (Jet 4.0) is the next choice, since it works with the same ADO and SQL code, and when SQL 7 or 2000 is available, the web can be connected to the SQL database by changing the DSN setting, and minimal or no changes to the ADO VBScript .

Personalization

The modern website allows the client to personalize their view of the website content, in terms both of the layout and the content selection. The capability of storing multiple profiles (client settings), such as multiple optional start pages and view layouts, or lists of favorites, desiderata, content pages, etc., is also good in a more advanced design. Client settings include auto-login, start page, typical connection speed, and custom bookmark lists.

Cookies

Cookies are very useful and are used for personalization settings such as auto-login, custom start page, and personalized greetings. The modern website will always offer cookie use, and it will check and see if the visitor has one of its cookies, signifying a prior visit, and enabling automatic identification.

WAP Support

Compact layouts optimized for Wireless Application Protocol should be available, including text-only, for handheld wireless access.



Email: info@milesresearch.com
Website: http://www.milesresearch.com