CONCEPTS OF WEB DESIGN

Can be distilled down to the following activities:

Planning - the management of the website project and development
Designing - website structure and template WebPages
Graphics - create, color co-ordinate and optimize
Coding - WebPages in HTML (short for Hypertext Markup Language), CSS (short for Cascading Style Sheets), JavaScript, SSI
Publishing - upload files to the server and make them accessible
Proofing - check using a variety of hardware and software
Promoting - no use having a beautiful site that nobody visits!

There are many areas of overlap and interface, so it is important to the designer as well as the client to be aware of as many considerations as possible before launching into the initial phase (planning).

PLANNING A WEBSITE

Planning is an activity involving the client, customers, resources, timing, user use, and establishing good communications and techniques. If the project is to be well managed, then planning is central. Evaluation involves looking at the present marketing and deciding what is to be retained and what needs to be changed. These are important considerations:

• What are the overall aims of the business?
• How can a website improve things?
• What identity with (legacy) color schemes, logo etc MUST be incorporated?
• What is the aim of the website?
• How does this fit with business objectives?
• What should be the extent of the website? Could range from a few to a substantial number of pages promoting services and/or products, to a completely new way to sell goods on the Internet.

At lower level meetings the client should arrange to:

• Establish the objectives of the project, are there measurable objectives?
• Agree to deadline and milestone dates
• Feedback on development progress
• Who is to maintain the site?
• Will training be required? Costs? (A static website is unattractive, so a systematic dataflow must be established with regular updates, maintenance and checks.)
• Incorporate the website as part of there business practices; use the URL (website address) and e-mail on letterheads, business stationery etc.

Customers - Initially, certain assumptions are made, but patterns of usage by the customers will indicate where changes can be made. The aim must be to meet user needs and to enhance user experience.

• Website content is one of the first inputs. Development should concentrate on the most predicted areas to be visited.
• Navigation must be made as user-friendly as possible. Actual usage may point to improvements over time, as users rarely use the site in the way envisioned by the designer.
• Initially the customer profile must be defined, as it will affect the overall design. As the website develops then the user base can be analyzed, and this may dictate changes.

Hosting - An ISP (internet service provider) must be selected and hosting facilities set-up to include:

• The availability of suitable software - do you need SSIs? cgi-bin? Shopping cart?
• Space and bandwidth restrictions
• A number of e-mail accounts
• Archiving policies particularly in regard to system logs, and reporting software for feedback on usage
• Good server availability providing statistics
• Set-up costs of domain name?

DESIGNING A WEBSITE

Designing involves initially, the whole website. Once decisions have been made about overall design features, then templates can be drawn up for webpage layouts. The following comprises a list of considerations:

Global Acceptability

• Conform to legal requirements of copyright, privacy, data protection, no misrepresentation
• Conform to acceptability for children
• Avoids cultural stereotyping

Corporate or Company Acceptability

• Portrays the right image, using legacy logos, color schemes etc., fits in the right marketing niche
• Economical, makes a valid contribution to offering a unique selling or informing proposition

User Acceptability

• Direct access to content that is clear, well presented, and to the point
• An easy-to-use format particularly in regard to navigation
• Minimal delays involving links and interesting layouts compelling the user to stay on the site

Webpage Considerations
Once decisions have been made about the overall website, these can be applied to template WebPages. It is best to resolve conflicts between the overall website requirements and applying this to a particular page at the design stage. WebPages are the concern of:

Maintaining the site

• Maintainer should use tools to ease the maintenance load
• Avoid an overabundance of diverse coding languages
• Content checks for validation, spelling, and links

User

• Typical layout - visitor should be at ease using the site.
• Incorporate typical positions for Home link, navigation etc.
• Content carefully organized, in user's voice and style
• Accessible - navigation is intuitive, obvious, and unambiguous

Search Engines

• Acceptable to Search Engines - no splash pages, no redirection, no frames
• Meta-tags, headings, filenames etc aid the classification and ranking of the page
• Coding conforms to accepted standards

Browsers

• Coding conforms to accepted standards to give consistent rendering

GRAPHICS

The graphics for a website must be selected and created with care. They are a major factor in:

• Visual appeal appropriate and clear
• Speed of webpage download - minimal file size, re-use whenever possible
• Rendering - use Web Safe colors when possible
  

Main Graphics Software
There are many choices but the most popular include:

• Adobe Photoshop - industry standard, comprehensive, very expensive
• Jasc Paintshop Pro - nearly as good, at a fraction of the price
• Adobe Photoshop Elements - is a cut-down version, particularly aimed at dealing with digital photos.

File Formats

• jpg - for photographic style of images
• gif - for logos, transparent elements, using max of 256 colors
• png - up and coming standard, not yet recommended for graphics in web pages
• ico - for icons, special editor required

Minimize File Size

• Crop - to subject
• Overall size - consider user screen size (min = 800 x 600) and re-size accordingly
• Reduce colors count if possible and bitmap size
• jpeg - balance visual quality against file size by varying compression
• gif - use web safe colors for max contrast

CODING FOR A WEBSITE

The website can be created using a variety of program languages and software tools. Decisions about the most appropriate languages will depend mainly on whether they are deployed on the server; and on the configuration of the server.

Site Standards

• Naming convention for filenames, directory
• Platform and browser independence
• Addressing - implicit and explicit
• Fixed or fluid table page layout?

Programming Code

• HTML
• XHTML
• JavaScript
• CSS
• SSI

Authoring Tools

• HTML Editors
• A huge range of choices to suit all pockets.

Code Validation

• HTML Validators
• To get consistent rendering, HTML code must conform to set standards.

Link Checks
Errors can easily creep into the coding for links as a result of:

• Incorrect designation (wrong spelling or file extension)
• Author has changed renamed or removed external files
• Link page has been changed to different or inappropriate content

PROOFING THE WEBSITE

Spell Checks

• Check the spelling yourself (use a variety of spell checking aids)
• Get someone else to look over your pages.

Integrity Checks

• Check that the content is accurate and up-to-date
• Are the correct graphics loading for that page?
• Check manually for correct breadcrumb trail for each page
• Check manually for consistent color coding, if used
• Check JavaScript mouseovers and special effects

Link Checks Errors can occur because of misspelling, wrong designation, and revised content or file removal.

Local Development

• PC off-line checking
• Check manually to ensure that links take the user to the expected page

Published site checking

• Check manually for validity, also on alternative PC's and browsers

External Link Checks

Link rot occurs because another website removes, renames or even redirects your pages.

Check manually for redirections to existing or inappropriate content

Coding Checks Whatever code you use should be validated to ensure consistent rendition and platform independence.

• HTML
• JavaScript

Rendition Checks
The aim should always be to obtain good rendition across platforms. Use a variety of hardware and software, with as many variations as possible, to check the site. Examples of some problems that may be encountered are:

• The code may validate okay, but browser interpretations may differ
• One likely cause of rendition problems is the DOCTYPE declaration