Company Miles Research Web Design Protocol

Products
Prices
Ordering Website Design Considerations
FAQs by Jon Miles
Register
Contact
ASP vs. JSP, PHP, CGI, etc.
Links

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