The Basic Elements Of Site Design

Site design: mechanics

Books are a text medium and, in spite of its visual content,television is regarded as a verbal medium. Movies, on the other hand,are a visual medium. To test this, close your eyes while watching atelevision program and do the same while watching a movie at a theater.Compare the time intervals where there is no dialog. You'll find thatwith television, the dialog is nearly continous.

The point: web sites don't seem to lend themselves to suchwell crafted distinctions. Sites appear to amalgamate many medium.Drawing upon this observation, there are no hard and fast rules of sitedesign that are going to make or break the success of your e-commerceweb site. None-the-less, there are still some guidelines that canimprove the chances of having a successful site. In this issue wecontinue the series with a few of the technical basics.

Screen size
Unlike television, one size does not fit all screens. Your audiencecan be using a screen display size anywhere from 640 by 480 pixels upto 1280 by 1024 pixels. If a web page is 1000 pixels wide by design andit's being viewed on a 640 pixel screen, there will be a lot ofhorizontal scrolling required to take in the full page. This may ruinany carefully planned visual impact. On the other hand, if the page is640 pixels wide and is being viewed on a 1200 pixel wide screen, textmay be too small to read.

There are two ways of optimizing page size and one compromise approach.
1) Adjust the page size by using a JavaScript to detect thescreen size. Adjust the content size accordingly or supply sizespecific pages.
2) Make the page size flexible. Declare percentage widths for table and cell parameters.
3) Compromise a fixed width page size to fit the most frequently expected screen size.

Using scripting code to detect screen size and adjust contentcan be complex. Serving up separate pages to fit particular screensizes creates overhead problems with page updates. Making page sizesflexible can lead to unexpected results. Compromising page size is thesimplest, and not an unreasonable approach, to setting a page size forviewing by a visitor.

The road warrior group will mostly have an 800 by 600 pixelscreen size. The most common size for desktop users is 1024 by 768pixels. With these two sizes in mind, 90 plus % of visitors will becovered.

Check the rendering of a page in different browsers and screen size at:

Anybrowser.com

File footprint:
Footprint is the total byte size of a file including any imbeddedgraphics, audio, flash, or other special features. It is reflected bythe time it will take for the file to downloaded and render as a pagein the visitor's browser. High speed broadband and DSL Internetconnections are gaining in availability but, 70% to 80% of visitorswill still be using a 56K modem for their internet connection.Therefore it is advisable to design the opening or default page of aweb site so it can be fully downloaded and viewed within 8 to 12seconds. This is a generally accepted duration that the casual visitorwill wait for a page. After that time, the visitor is likely to goelsewhere.

The key here is "the casual" visitor. Return visitors withgreater interest in the site offerings will no doubt wait longer.However, first time visitors will probably be casual visitors and youwant to keep them at the site. This means that the opening page must bepresented quickly.

Estimate the download time by dividing the file footprintsize, comprising all imbedded files as well as the file itself, by theModem speed. Modem speeds are given in bits per second. File sizes areusually reported in bytes. The bit size of a file is about 8 times thebit size, making a 50KB page footprint equal to about 400 kilobits.Dividing 400 using a 50 kilobit modem, gives a download time of 8seconds. This time will increase nearly 50% under actual TCP protocolconditions of error checking, and packet reconstitution.

Images
Web site graphic images are good for getting attention and relatinga visitor to the intention of the web site. Images, however, can have alarge file size contributing to the page download time. The most commonimage file types in use on the Internet are "gif" (CompuServe bitmap)and "jpeg" (Joint Photographic Experts Group). "jpeg" is sometimesshortened to "jpg". Both of these file types use compression toeliminate redundancy, thereby significantly reducing the file size fromwhat it would be as a simple uncompressed bitmap file. Gif images havethe advantages of supporting transparent color and segments which canbe stitched together to form an animation. Jpeg images will have alarger file size for the same image but produce a better qualitydisplay.

As a rule, gif images are used for drawn objects having alimited amount of complexity and only a few colors. Such items asnavigation buttons and banner ads are usually gif's. Jpeg images aremore likely to be used where photographic quality is required.

The layout size of an image as presented in the visitor'sbrowser will be determined either by the image size itself or by thewidth and height setting used to specify the image in the HTML markupdefining the page. In almost all cases the width and height parametersin the markup should be the actual image size. If the parameters arespecified larger than the image, the image may become pixelated whenviewed in the browser. If the parameters are specified smaller, thepage download time will be greater than necessary because the actualimage size is larger than needed, increasing the file footprint. It ispreferable to resize copies of the images to fit the pagerequirements.

Basic Graphic Design
Whether you design your business brochures, flyers, web page, or ads there are some things that you need to know. There are some basic graphic design principles that those of us trained in the commercial art/graphic design field dont always share. Heres a short list of elements of graphic design.....
Designing for Clarity
Once you have your content, arranged it into a likely architecture, and worked out where it will sit on the page, youre ready to design the display layer. The goal is to arrange various elements on screen to maximise the users chance of using the site successfully...
Grouping Elements
Grouping similar elements helps the brain quickly decode a page layout. Proximity, Alignment, Containment, Rhythm and Styling are all tools that help indicate grouping...
Web Design-Key Terms
Web design, the art of developing for the web is something that goes beyond visual design. It is a blend of proper writing, designing and developing. During recent years professional web design has become imperative.
Examples of Bad Web Site Graphic Design
There are two major problems inherent in most graphic design for the Internet. One of is too much and the other is no connection.
Successful CSS Template Skins
The CSS mantra is the separation of content and style. The content should be in the HTML and the CSS should take care of how the HTML is displayed on the page. However, most web-designs dont properly separate content and style. The HTML and CSS are there separately, but if you changed the HTML, th....
What is White Space?
White space is always an active element in any good design; it?s also referred to negative space. White space is always occurring in a design from the moment you open up a blank document, the design has begun with white space.
People don't read
The #1 most important feature to appreciate about browsing behaviour is scanning. Web sites designed to be looked at are likely to fail. Web sites designed to be scanned are more likely to succeed...
XHTML vs. HTML
A quick introduction to XHTML
Aligning Elements
Alignment is another way of creating associations between visual elements, which help users quickly understand the relationships of objects on a page. Alignment works by visually associating a number of elements...