Building successful web sites
This article explains the considerations taken when building a professional website. It is designed as a guide for amateur designers who wish to start building professional web sites.
This is one of the most important aspects of creating a "safe" web site. Most users are familiar with Internet Explorer which makes up approximately 90% of browser usage. Explorer is however not the only browser used. Corporations frequently have agreements with browser distributors which make it more efficient for them to use alternative brands. Mac and Unix users are supplied with alternative browsers by default. Businesses frequently use out of date browsers due to the difficulties if upgrading a browser on a networked computer.
Web pages are written using a scripting language such as HTML, and each browser will interpret the HTML slightly differently. The World Wide Web Consortium (W3C) is responsible for defining the scripting languages used on the internet, however each manufacturer understands the definitions differently. The result is that pages will differ depending upon the browser the are viewed in. Differences are normally subtle, however in complex designs a small difference can cause the entire web page to collapse.
Testing the web site in several common browsers is normally considered sufficient in ensuring that your web site can be viewed by anyone. In the view of this author this is not sufficient for a business web site. Considering that most business sites will spend significant amounts of money on advertising, it is important that each referred visitor is able to view the website fully.
A significant problem arises with users of older browsers which often do not fully understand recently introduced HTML commands. This is particularly applicable to CSS and JavaScript, two languages commonly used to enhance basic HTML. It is not easily possible to install an older browser to test your web site, as most browsers will not allow you to downgrade. Testing the website from another computer is often the only viable solution.
CSS was introduced in 1994, but was very slow to catch on. At time of writing in 2004, it still causes compatibility issues across browsers. It is important to ensure that the web site can still be viewed without CSS by testing the site with the CSS removed. If CSS is used in the navigation menu ensure that a conventional menu is provided elsewhere on the web page, such as in the page footer.
JavaScript is a programming language used to enhance web pages and allow for basic programming functions. JavaScript is used to animate web pages, validate forms, create drop-down menus and to add dynamic features. JavaScript is considered a security issue by some experienced users, while others find it an annoyance when it is used in excess. As much as 10% of users (depending upon your audience) will disable JavaScript in their browsers. As such it is important to ensure that the page can be viewed by users who have disabled JavaScript. You should be able to disable JavaScript in your options menu. Disable it and test your site.
Browser statistics are freely available on the internet and are a good starting point when deciding which browsers to test your web site in. Remember that your audience will differ depending on what your web site is providing, and as such the browsers used to view them will differ. Business web sites will draw a different audience to a hobby orientated web site. Web sites providing services for IT persons show the most prominent difference in browser usage. Monitor your visitors to see what browsers they are using. Most web hosting services will provide such statistics, so use them to check that your web site is compatible with your audience's browsers.
How to address cross browser compatibility
- Test the web site in several browsers such as Explorer, Netscape, Opera, FireFox and Mozilla.
- Test the web site in older browsers, using a different PC if necessary.
- If JavaScript is used, ensure that the web site will function if a user has disabled it.
- If CSS is used, ensure that the web site will function without it.
- If dynamic menus or drop down menus are used, ensure that a conventional menu is also provided.
- Avoid unnecessary features such as moving images, fading pages, and scrolling text. Some features are necessary, but your viewers will not be impressed by the annoying ones.
- Ensure that your web pages use valid HTML. If the page was created with an editor such as Front page you can omit this. However if your web site was hand coded check it using the official W3C validator.
Ensuring resolution compatibility
Web sites will be viewed in different screen settings dependant upon the options selected by the user. By default Windows operates on a setting of 800 x 600 when installed. Many users will increase the setting to 1024 x 768 or above. Consider however, that many computer users do not poses the knowledge to change screen resolution from the default setting. As such there are still many users operating on low settings.
There are three common methods of addressing the issue, and each one will be discussed.
Web pages can be produced in a fixed width, normally to fit an 800 x 600 resolution. Users viewing the web page in a larger resolution will see a margin on either side of the web page. This is not aesthetically poor, as the margins can be filled with a background. The disadvantage is that the web page does not make full use of the screen when viewed in higher resolutions.
As standard, most fixed width web pages are designed to fit an 800 x 600 screen size. Remember that the vertical scroll bar and browser window will take up part of the width, so the web page should be fixed to a width of 750 pixels to be safe.
Pages can be designed to expand in order to fit the screen, known as a liquid design. This is the way the World Wide Web Consortium intended web pages to function. The text in the page simply wraps itself within the page. This method is not preferred by designers, as the page alters itself depending on the screen and window size. If the page has a picture banner or graphical menu bar, it will not easily be able to expand sideways and as such the page image cannot be controlled.
Dynamically driven pages allow web designers to produce different pages depending upon the readers settings. When the reader views a web page the server detects their screen setting and shows them a page designed accordingly. The disadvantage is obvious; the designer must design several pages for every one in the web site.
Creating fast downloading pages
The download speed of a web page depends upon the total size of the page code, all the images within it, and any objects such as Flash animations or applets. The size of a web page or image is known as its weight. The weight of the actual page HTML code is normally very small and can be ignored.
Regarding images, with a little perseverance it is possible to create artistic web pages with a minimal amount of images. Borders and lines can be made of an image section which repeats itself. Images can be avoided in titles and menu text by using the text effects available through CSS. Avoid using images to display text; as well as increasing the page loading times it will also affect you search engine rankings as search engines cannot read text in images.
JPG and GIF images can both be reduced in size. A GIF can have the colour depth reduced, and a JPG can be compressed. This can be done using the settings in most imaging software such as Paint Shop Pro or Photoshop. The quality reduces as compression increases, so a medium must be found. This will vary depending upon the image, so a little trial and error is required. Adobe Photoshop has an excellent feature which allows images to be viewed in two windows; one "before" compression, and one "after". By altering compression settings, users can instantly see the effect it has on the image. A quality/weight medium can quickly be found.
Using templates
To create an easily updatable and uniform site, web pages can be created using a template. A template is a file (or set of files) which contains the page header, menu footer, and general styling. The web site pages contain only the content of the page, which is automatically combined with the template to display the full page. The advantage is that the same page style is applied to all pages. Should part of the footer or menu require changing, it only needs to be changed in one file, rather than on every page. Should the style of the site need to be changed, again it will only require changing in one file.
Templates are created using a server-side language such as PHP or ASP and require this feature to be enabled on the web server. The easiest method is to create a sample web page in HTML, then remove the page header, footer, and menus.
Most website editors such as Dreamweaver or Contribute work very well with such templates. When a web page utilising a template is loaded in Dreamweaver, only the page content can be modified, hence there is no risk of the menu or rest of the page being damaged during updating. Should the menu or footer require updating, a separate file is opened allowing the changes to be made. I have found the system to be very popular with web design clients who wish to update their own sites. Most clients are worried about damaging the page layout when making modifications. By separating the layout from the content, this worry is eliminated.
Separating the design and coding process
Successful websites are created in a team. A project manager administers the project and ensures that it meets the client's specification and end needs. The manager should have a broad knowledge of all aspects of web development. After making the required preparations and numerous consultations, the graphical designer should produce a draft of the web site using image editing software. The draft is essentially a picture of a web site, which can later be coded into HTML. A draft allows the graphics and layout to be changed as much as required until both project manager and client are satisfied.
A programmer/coder, who specialises in coding web pages, takes the draft and converts it into a HTML web page. The coder should understand the technical aspects of producing web pages. The page weight should be optimised, and browser/resolution compatibility considered. If the web site is to be used to generate leads over the internet, it is important that the coder has some understanding of optimising web pages for search engines.
Hand coding or using a editor to create web pages
There is much to be said for hand coding web pages, although for many the procedure is too slow. However an experienced coder may find it faster to hand code web sites. With time a library of frequently used codes can be built up, which can subsequently be copied into web pages to save time. Hand coding web pages gives greater control over the page layout, and creates clean and uniform web pages. Advanced features will require hand coding regardless.
Using a combination of a HTML editor and hand coding is common practice. Most web page editors allow you to switch between design mode and hand coding mode, enabling designers to switch between the two at will.
Purists who insist on hand coding will often still use a web page editor and switch it to hand coding mode. The editors will allow you to view you page as you code it, and have features such as a file manager, predictive coding, spell check, and even a validator. The file manager is of most importance, normally consisting of a window showing the entire web site's pages, it allows pages to be opened quickly.
Finishing note
Being a good web designer involves time, passion, and experience. If you have the passion for what you do, you will naturally spend the time to develop that talent. As you discover new features your knowledge will grow. Good luck, and feel free to contact us for help.
