Clearly define the purpose, the mission, and the goals of the site.
• Promote an organization,
• Product or service information,
• Consumer support information,
• Provide detailed information of organization,
• Good presentation of the organization,
• Quick and efficient access to the organization,
• Office location maps and details,
• Public relations,
• Event schedules,
• Consumer/user input,
• Process orders, requests and other user information,
• Public interest information,
• User polls and surveys,
• On-line catalog,
• Other functions.
In fact, a web site will serve any purpose that is served by the media of print, radio and television. Furthermore, an interactive site can serve as an automated sales and support office. Any purpose that involves consumers and the general public can be served by a web site. The real limit to the uses of a web site are not the technical design and development issues, but the imagination.
Whether the purpose is to reach local consumers or the entire world, a properly designed web site will serve any organization well. By determining the purpose, the content and layout of the site can be properly developed. If needed, additions and changes to the site can be done to incorporated additional purposes. However, the initial content and layout needs an initial purpose(s), with intended missions and goals, to be properly developed.
The expected users should be considered when designing the site. Will most users be looking for specific products or service information? Or will many be visiting the site for general information and be more interested in facts and details of a non-specific nature? Will users expect detailed technical information, or will they prefer general descriptions?
It is the site’s purpose to serve a local client base. Adding links and facts of a local interest (even trivial facts) will help attract users and potential clients/customers to the site. The same applies to a more global site for users sharing a common interest, links and facts pertaining to that interest will attract those users. For example, a site for a radio station can use links and information such as other sites, concerts, bands, events, and music news to attract frequent visits to the site.
The site should contain both general and detailed information, both specific and non-specific data. The proportions of these different types, and the extend of how detailed and specific the information is, will depend on the nature of the expected audience. Knowing what the typical user will expect and want, is needed in order to develop the appropriate content and layout of the site.
Another consideration is the speed of connection the expected users will have. Typically many users will be accessing the Internet and the site through a dial-in connection with either a 28.8 or 33 kbps modem. These users can not be expected to have to wait for large graphical files to download. In fact some users may grow impatient while waiting for large files and leave the site to go elsewhere, but occasionally the expected audience may consist of businesses and institutions having high speed Internet Access. With this audience it can be safe, and possibly even desirable, to incorporate large graphic and multimedia files into the site.
By determining who the expected user of the site will be, the content and layout of the site can be developed. Knowing the expectations and abilities of the audience will help ensure that the site is successful and useful.
To serve the intended purpose, the site must contain complete and relevant information. Excessive amounts of irrelevant information can obscure the specific data that the user seeks, and also cause user frustration. Incomplete data can frustrate site users looking for specific information, causing them to become impatient and leave the site without the information they sought. Ensuring appropriate content will satisfy users and prevent losing potential business.
It is far better to have excessive content (even irrelevant information), than to have too little content, provided that the site’s layout is properly done. Site content can be broken into general and detailed categories.
The general content provides a brief overview of the site, organization, products and services, and other items. Brief descriptive information aids users in determining that what they seek is available, directs them to the appropriate specific data, peaks their interests, informs them of other available items at the site, and gives them a feel for the content and layout of the site.
The detailed content provides users with the specific detailed information on the site, organization, products and services, and other items. The layout of the site must ensure easy access to the detailed information, and specific information they seek. Just providing a brief overview with general content can upset users looking for specific information.
Though it is permissible and recommended that phrases be used (such as ‘for more information call….’), but these phrases should not be used in lieu of detailed information. Many users will visit the site in search of specific information, and may be frustrated if the information is not available. The ‘Web’ is a valuable resource with great potential, but if under used it will serve no better purpose than a high tech business card.
Inclusion of irrelevant content is not advisable. However, information that is not related to the purpose of the site, but maybe of interest to users can be provided. It is important that this information does not obscure the other information at the site, nor hamper access to the other information. Examples of useful but irrelevant information are: links to other sites, public service notices, or information on Web and Internet items that may interest many expected site visitors.
Ensuring that appropriate information (both general and detailed) is available and easily accessible ensures that site can serve its intended purpose. A web site is a valuable tool for businesses and other organizations when composed of the right material (content). As with other tools, the web site can perform an outstanding job.
The Welcome Page provides visitors to the site a greeting and a short description of the site. Links to the major sections of the site and/or a site menu (Table of Contents) will direct the user to the desired content in the site. The welcome page is often called the home page (Note: There is technically a difference between a home page and a welcome page. The welcome page greets visitors to the site, and home page is the major page used by most users of the site. However, the two are now commonly treated and referred as one page.)
The welcome page should be short with graphic or animated designs. Much like a front door to a business, the welcome must be presentable and should give an idea of what is contained within the site. Since it is likely that the welcome page is the first page to be visited in the site, it should be somewhat fast loading. It is important not to turn off new visitors by having them wait for a large file download before they even enter the site (first impression are important).
As modem speeds increase, it is possible to add more and larger graphics, and even applets and multimedia objects to the welcome page. However, do try to limit the page download times to under 30 seconds for the portion of the site’s visitors who have slower modems, since most visitors can reasonably be expected to have at least a 28.8 kps modem (this will change as time goes on). Try to limit the combined size of all the files (html, java, multimedia, images, etc.) that make up the welcome page to under 80 kilobytes.
Since the welcome page is the main entrance to the site, it should not be obscured by large and/or numerous moving images or loud sounds. Though some flash might be effective, overdoing it could turn off first time visitors. Consider the site’s expected audience and the purpose of the site before deciding to add a lot of flash to the welcome page (and other pages as well). It is probably best to lean towards a conservative approach in designing the welcome page, oppose to being overly liberal with the design.
On a final note to this page, the site’s visitors will likely have people who are using speech synthesizers, Braille pads, slow connectors, or are using one of the less popular browsers (unlike the latest from Microsoft or Netscape). When developing the welcome page, and the rest of the site, ensure that the design allows reasonable presentation for all visitors. This includes using alternative text for images (the ALT attribute), and alternative content for Java applets (if the applet is critical for the presentation). More discussion on Java, multimedia, and other features is covered later.
Page size concerns the physical length of the page, the combined file size of the page, and the images contained in the page. Too long of a page or too great of a file size can turn off users, but a very short page can not contain very much information obviously, nor allow for graphics that create a nice presentation.
There is no defined page size, since users have varying size monitors, use different font sizes and operate a variety of browsers. A page that fills a screen for one user, may require another user to scroll through two screen lengths in order to view the entire page.
A reason to limit the length of the page is so that the user does not have to do an inordinate amount of scrolling to read the page. Keep the page content limited to one topic, and create additional pages for related subjects and sub-topics. Try not to split up a topic onto several pages, otherwise the user will have to keep hopping on links to follow the content. This will help to maintain page size and keep the users interest. The most important point is to determine what will work best for the users.
Occasionally there may be a need for a rather long page. A large directory or lengthy instructions might work best on a single long page rather than separate shorter pages. If a longer page is needed, links to the top and various other points in the page should be provided at several positions on the page to facilitate and speed navigation through the page.
The combined sizes of all the text, graphics, and applet files affects the download time of a page. No one wishes to wait a great amount of time to view a page. Basically a user has three options when downloading a lengthy file, they can wait for the page to download, load only the text and ignore the graphics, or not download the page at all. Many users will not select the first option (unless they are intentionally downloading a particular graphic or program they want). While the second option is preferable to the third, the users will miss a good part of the site’s presentation and may miss some important content that is in the graphics.
A good rule of thumb is to try to keep the combined file size to 80 kilobytes or smaller (of course as modem speeds increase, file sizes can increase). Occasionally a larger size will be needed, but too many large files or files over 120 KB will tend to frustrate many users. If the expected users of the site have high speed Internet access, then larger file sizes can be tolerated.
The exception to the preceding paragraphs is discussed in the Audience section.
The visual appeal of a site is important. Having colorful graphics and a well laid out structure invites users to explore the site further. Even if a user visits for a specific bit of information, an attractive and well constructed site is likely to have the user stay longer, look at more of the content, and return to the site more often than a less appealing site.
Many design purists may argue that the best site is substance over form (or content over presentation). They are right, an attractive site devoid of content may lure some users, but these users will not stay or return if there is no substance to the site. On the other hand even if there is substantial content, a bland or sloppy looking site is not as appealing to users as a site having equal content and an excellent presentation.
Care must be exercised so that the presentation is not overdone. It would be very counter-productive to bury a site’s content under a large amount of irrelevant presentation material. Although extensive use of graphics, multimedia, Java applets, etc. may enhance the site’s presentation, it will adversely affect the download time (refer to previous section on page size).
A typical well presented site may contain one or more graphics that are sized and placed to add to the appearance of a page, but improperly sized and haphazardly positioned graphics clutter a page which gives a sloppy appearance.
The position of the text, headers, and tables should follow a logical pattern. It is important to remember the site’s purpose is to provide information and the page presentation should aid rather than hinder that. Using paragraphs, different headers and tables provide the user a clear and easy means to read and comprehend the page content.
The presentation of the site is similar to the presentation of a television ad. The ad’s real purpose is to convey the sponsor’s information about a product or service, but it is the presentation of the ad that attracts and peaks the interest of the viewer.
Not all browsers will show a page the same way, so be cautious. Eighty to ninety percent of users have browsers that tend to give better presentations of sites, but the other 10 to 20 percent can not be ignored. There are users with text-only browsers, sightless users with Braille pads or speech synthesizers, and users with browsers that do not support newer features (such as centering and tables).
The proper design of a site must ensure that the presentation received by any and all browsers is the best possible one. The Advanced Features section provides some tips on how to use the newer features and still provide a good presentation to users with older browsers.
Having graphics (images) is almost essential today, especially on the welcome and home pages where a colorful design or logo is expected. Secondary pages don’t always need graphics, though smaller pictures and images do add to the visual appeal of the page.
Graphic files tend to be rather large, even with the advanced compression techniques used today. The Page Size section provides caution and guidance for limiting the total combined sizes of page text and graphic files.
If a large graphic needs to be incorporated into the site, it is best to place a scaled down version (a thumbnail picture) on the page. Then a link can be provided to access the full size version, and the file size should be indicated so the user can decide whether or not to wait for the image to download.
The way a page and its graphics are downloaded, is the file containing the text content of the page and the code for the layout of the page, is sent to the browser. After the text file is downloaded, the browser makes calls to the server (web site host computer) to retrieve the graphic files. Previously, the browser waited until the image file was received before it displayed the page on the monitor. The reason for delaying the display was because the browser had to receive information concerning the physical size of the images to correctly display the page.
Most users today now have browsers that are capable of interpreting the codes in the text file concerning the physical sizes of images. The graphic size code (the image tag’s width and height attributes) allows browsers the start laying out and drawing the page before any image files are receive. Proper site design must ensure that this code is included for images.
The image tag’s ALT attribute is something many designers forget to add. This attribute provides alternative text for the user who is not or cannot view the images. Even when the image is purely decorative the ALT attribute should be used to suppress the display of an image marker on text only browsers. In these cases a blank is used for the attribute’s value (ALT=” “).
Image formats most commonly recognized by graphical web browsers are GIF and JPEG. Newer formats, such as PNG are not widely supported as of yet. Formats commonly used on computers, such as TIF, BMP, PICT, and PCX tend to have fairly large file sizes (compared to GIFs and JPEGs) and would require significant download times if used. The GIF and JPEG formats (usually an extension of jpg) are compressed files. The GIF format works best for line drawing and images having solid colors without blending. The JPEG format works best for photographs.
Netscape introduced frames in their version 2.0 browser, and later versions of the Microsoft browser can handle frames. Frames allow the users to simultaneously view separate files on their browsers. The site designer specifies the pages and images the user receives, and the size of each as displayed on the user’s monitor.
Not every web site should use frames. Frames offer several advantages, such as being able to constantly display a menu for easy navigation through the site. However, one of several disadvantages is that pages are displayed in a smaller area of the screen.
As with most other design considerations, the pros and cons of using frames for a particular site must be weighted to ensure that the best choice is made. If frames are used, a non-frame alternative should be provided not just for visitors whose browsers do not support frames, but also for those users who do not wish to have frames. For example the page titled Site Design Considerations provides both a frame and non-frame option for viewing.
Java Applets have become quite popular on web sites now. An applet is a small application (program) embedded in the web page. Some of the ways applets are commonly used are: Animations, scrolling messages, clickable maps, input and output forms. Since an applet is an embedded program, any purpose served by other types of programs can be served by an applet, but an applet is not able to read from or write to a user’s hard drive (a security measure).
Applets can be quite useful to a web page, however the page must provide alternatives if needed for a user whose browser does not support Java (or has Java turned off). An applet that is only used for decoration does not need alternative content, but where the applet is referenced or used for presenting content, then the alternative content needs to be incorporated. Incorporating alternative content is simply a matter of adding text and HTML markup (code) within the markup for the applet.
ActiveX controls are commonly thought of as Microsoft’s answer to Java applets. This is not really the case. The ActiveX controls have been used in other Microsoft applications, and are now supported by Microsoft’s Internet Explorer. Most of the uses of ActiveX controls can be handled by Java applets. Since the applets are more widely supported by web browsers, a function that can be handled by either the applet or the control, would probably be better supported by using a Java applet.
Client-side scripting is the inclusion of lines of code in the web page that provide additional functionality and presentation to the page. One of the best uses of client-side script is verification of user input to a form. Instead of having to send the input to the server to have the input checked and then have any error messages sent back to the user, the client-side script can check the input before it is sent, thus reducing on network and server load.
The client-side scripting can serve a variety of functions from verifying user input to controlling the display of a page, even to allow for entirely different presentations of the same page. User controlled slide shows, control of frames, calculations on the page, are some other functions for which scripting can be used.
Though many pages can benefit from the use of client-side scripting it is important that the pages do not solely rely on the scripts. Not all users have browser capable of interpreting the scripts, and other users may have scripting support turned off on their browsers. Users without client-side script support should be backed up by a server-side script for form verifications, calculations, and other processing type applications.
There are a number of other new features available. The examples above show that caution needs to be exercised with many of the new features. With some of the features care needs to be exercised to ensure all users receive a clear and presentable version of the page. Others must be avoided, at least for now.
A skilled designer will be able to design the pages for the best presentation using many advanced feature, while maintaining the presentation for all users regardless of which browser they use.
Allowing a user to input information, perform searches, place orders and interact with the site in a variety of ways, increases the appeal and usefulness of the site.
An interactive page that offers a search program for the user will help locate desired information, and will make the site more useful. Users will more readily use a site where they can efficiently search and find information. The information about the site sponsor’s products and services has to be readily available to users, or they may look elsewhere.
Order forms are a big plus. The site is on-line to promote a business or organization, so it makes sense to take orders on-line. The site is always available, so any time users need to place an order, they can. Users will appreciate the quick and easy methods to acquire the goods and services they need.
Surveys, opinion polls, and other data collecting processes can be carried out by the site. It is quick and easy to fill out a form and submit it, on a set up site. This will be convenient for many users. The site can also be set up to process, tally and store the results in a database file, so that minimal human intervention is required.
Message or bulletin boards are another interaction method for attracting users. Though not always suitable for every site, boards lend themselves to regional and subject specific sites. Having a board attracts users interested in the site’s subject matter and provides a reason for them to frequently visit the site.
There are many interactive processes a site can utilized. By using one or more of these processes the site becomes more interesting and useful to the users and the site’s sponsor. The site’s main objective is to promote the sponsor’s products and/or services, and being interactive will definitely enhance the achievement of that objective.
“Build it and they will come” does not apply to web sites. The site needs to be announced and promoted. There are several ways to promote a site both on-line and off-line.
The first thing to do once the site is on-line is to have the site listed in the major Web databases. These databases are used by practically all users, to locate web sites containing sought after items and information. Being listed in these databases enables users to locate the site when needed.
The www.announce newsgroup provides a one time listing of new sites. A listing here can help spur initial interest in the site.
Listing the site’s address with phone and fax numbers on business correspondences and business cards informs the recipient of the site. Customers/clients, and potential ones, are likely to check out the site and use it once they know it exists.
Including the site address in advertisements and printed literature informs the public of the site. With information of the site’s existence and address, people will likely visit the site and use it.
Web Site design considerations
Web Site design considerations when developing or upgrading your Web Site.
Website design does play a very important role if you intend to maximize your Internet success. You will need to develop a clear Internet strategy as an integral part of your overall business plan before you spend money on your web site. And to help you do this here are a few questions you should consider:
• Where are you now (in terms of the Internet) and where do you want to be? Your web site should be an integral part of your business plan. If it is not then it is much more likely to fail or at least not achieve it’s potential. So before rushing off to have Position Masters develop a pretty web site, think about answering these questions. You will want to get your strategy right before you spend any money on development, it will save countless dollars and perhaps more important, time. It should be remembered that development costs should be about 50% of the total budget. Maintenance is often 20% of your web costs, and promotion of your site should be 30% of budget. (rule of thumb only) Many people find that a planned phased approach allows you to identify where you want to go and develop checkpoints to assess your progress along the way. You may not be able to afford to put your ideal web site up at the beginning. But you do need a plan as to what you want to do, when you should add pages or update to a new version of your site, and how you are going to monitor your progress along the Internet path.
• What are the goals of the web site? Firstly you need to determine what you want your web site to do. Is the purpose of your site to inform, educate, entertain or sell? Is it supposed to enhance brand equity, lower costs or improve customer intimacy? What transactions are appropriate or necessary, and when should they be part of your web site? How important is it to provide a personalized experience? What is the user’s expected benefit or response?
• Who is the target audience? Now that you have decided what you want your site to do, you need to determine who will be the users of your site. (Sometimes identifying the goals and target audience needs to be done at the same time). And there can be more than one target audience. This is also a vital part of good search engine placement. Remember, there are a multitude of variations on your chosen keywords, picking the most commonly used is the trick and one of the keys to success. What categorizes your target audience, what are their needs, and can you develop scenarios for them? If you can accurately put this in writing life on the net will be much easier.
• What is happening in the marketplace? You should not create your Internet strategy in a vacuum. What are your competitors doing? What are the relevant industry and technological trends?
• What is the content and how should it be organized? Now you can consider what types of content you want on the site and what level of detail will be presented. What functions should people be able to perform on your site? How should the information be structured and what global and local navigation aids are you going to have? Position Masters will help you with structure and navigation but you must have a big input, as you will know your business and your customers better than we do.
• How are you going to maintain human relationships in the digital world? The Internet can appear to be a very impersonal medium for conducting business. So you need to make sure you consider how you are going to create, maintain and enhance customer relationships on-line. Therefore, think about how e-mail, chat rooms, discussion groups, on-line communities and even information can be used. Do you have an e-mail response policy to ensure appropriate responses to all e-mail?
• What do you want your site to look like? Now, and only now, should you consider what your site should look like. Users should know where they are on the site, where they have been, and how to get to where they want to be. Therefore, consider issues such as color, branding, design and links. Using your input we will create a design that is easy to navigate, and consistent throughout.
• Where is the site to be hosted? Are you going to host it yourself or host it on an ISP? Do you have the resources (especially ongoing resources) to host it yourself? What services do you want your ISP to be able to provide? And remember that your ISP does not have to be local. There is little difference in uploading files to an ISP in your city or one in another country. Position Masters offers first rate hosting. If you like, we can handle all the details for you.
• How is the site to be updated? Remember that approximately 20% of your site costs may be incurred by site maintenance. How often should content be changed? Who is going to approve the changes?
• How are you going to drive traffic to your site? It is no good having the best site in the world if no one knows about it. Successful sites spend 30% or more of their budget promoting their site. Options are many and include considering keyword optimization, banner ads, PR, links, offline promotion, search engine registration, articles in e-zines, and event or content sponsorship. Most importantly, you need good placement in the search engines! Position Masters offers a very effective Promotion Package, and expert advice on how to promote web sites to the search engines.
• What are the success criteria for your site? Too many people simply put up their site and sometime down the track wonder if their site is working or not. If you have not determined how you are going to measure the success of your site in advance then it can be difficult to be objective. Many people these days do not believe that you can rely on hits alone as your only success measure. So it is best to decide prior to the site going live how you will know if your site is achieving your goals. It should include measurable business criteria that are critical to your business objectives. For example, number of new customers, improved customer retention, quicker new product development, better coordination between business partners, and enhanced customer intimacy. So to maximize your Internet success, develop a clear Internet strategy as an integral part of your overall business plan before you spend money on your web site. Time and money spent on developing your strategy will be well and truly rewarded!
Your business is represented to the world online through your website. It’s a brochure that any potential customer, anywhere and at any time can view and decide whether your company is the right one for them. Therefore it is of the upmost importance that your web site practices good web design techniques which will enable your company’s site to get the maximum amount of traffic, therefore making the maximum amount of profit.
The most important thing to consider on the World Wide Web is that your website reaches certain web standards. These are set out at www.w3.org, here you can check your web site with just a few mouse clicks and it will direct you on whether these standards are being met and, if not, how to change your web site to do so. Another thing to consider is cross-browser compatibility. You’re website may look fantastic in Internet Explorer but if it breaks up in Firefox or Safari you WILL lose visitors. As I write this around 55% of people worldwide use Internet Explorer so that’s 45 people out of every one hundred that visit your site using a different browser so cross-browser support MUST be considered.
Ensure your navigation is as easy as possible, make sure it is clear and concise and that at any point of a visitors browsing they know where they are and how to get back to where they came from. If a visitor experiences any confusion in any way they WILL leave.
Text paragraphs should always be kept at reasonable lengths. If a block of text appears to be too big it can deter some a lot of visitors from reading your content. If you have got a lot of content to go on a page you should always try and split them into small text blocks, this way visitors will be able to pick out what they need to know a lot easier and they will not feel as though they are reading an essay.
If you are using any images, make sure they are optimized to the smallest possible size and try and reduce the number per page. Images will slow the loading of a website down and the majority of the time they aren’t really necessary.
Stay away from using any sort of scripting languages throughout your website for visual images/effects. Scripting can slow down the loading time of a page on your website and even cause the browsers, in some cases, to crash. If you really have to use them, export the code to a different page and reference it when needed. Some browsers aren’t compatible with some scripts so I would advise not using them at all unless it is to handle and manipulate data.
Lastly, style all your pages with CSS, this reduces the amount of code on your web pages enabling them to load quicker and it also saves you a lot of time when re-styling or adjusting the web site in the future.
What this is about: This checklist covers multiple elements concerning the visual aspects of the website development. Some of the information here can be dismissed, depending on the type of site, but overall these are good points to consider during the design process.
Why this is important: The site design is essentially the first impression that someone gets when they land on your site. You may have all your usability and SEO elements in place, but if the design is lacking then your visitor’s impression of you will be lacking as well. A visually appealing site can not only bolster trust and credibility, but it can make you stand out among other less-appealing sites in your industry.
What to look for:
• Instant site identification: As soon as landing on any page the visitor must be able to tell what website they are on.
• Crisp, clean image quality: Don’t use old or blurry images. Keep them neat, clean and sharp.
• Clean, clutter-less design: Avoid trying to do too much at once. Keep navigation and content areas clear of unnecessary clutter.
• Consistent colors and type: Use the same colors and font styles from page to page.
• Whitespace usage: Don’t pack too much in, allow some breathing room so important areas stick out.
• Minimal distractions: Be careful of images, animation and even links that pull the visitor into unwanted directions.
• Targets intended audience: Make certain that your design targets your audience with appropriate colors, layout and wording.
• Meets industry best practices: Design to be the best site in your industry. If there are industry-specific guidelines to be followed, be sure to do that.
• Easy to navigate: Make it is easy for your visitor to find the links they need to take them to their desired pages.
• Descriptive links: All links should accurately describe the destination page.
• Good on-page organization: Put page information together in a logical way and keep information where it is expected to be found.
• Easy to find phone number: Phone number should be easy to find regardless of page the visitor is on. The header is a great place for the phone number.
• Don’t link screen captures: It’s not a good idea to link screen captures to other pages. Use text links or buttons.
• Skip option for flash: If you use flash animations, have an option to skip it or turn it off all together.
• Consistent page formatting: Use a consistent layout from page to page so the site feels like one cohesive unit.
• No/minimal on-page styling: Use external CSS for all on-page styling. Only keep on the page what is specific for that page only.
• Avoid text in images: Don’t place quality keyword rich text in images.
• Font size is adequate: Don’t use excessively small fonts. Larger fonts increase readability of content.
• Font type is friendly: Use fonts meant for the web, rather than fonts designed for print.
• Paragraphs not too wide: Don’t allow paragraphs to get too wide. Use absolute widths if necessary.
• Visual cues to important elements: Be sure important links and action items stand out visually from the rest of the content.
• Good overall contrast: Make sure text can be read (black on white) and colors don’t bleed into each other.
• Low usage of animated graphics: Avoid animated graphics unless absolutely essential to the user experience.
• Uses obvious action objects: Calls to actions, links and subscribe buttons should be obvious at a glance.
• Avoid requiring plugins: Don’t use plugins that visitors have to download before getting the full site experience.
• Minimize the use of graphics: Don’t make your site graphic heavy to the point where the visitor is overwhelmed with visual eye-candy.
• Understandable graphic file names: Name your images and other files in a way that makes sense if read. No: /images/BDJ2330.jpg Yes: /images/boys-denali-jacket.jpg
• No horizontal scrolling: Make sure the design is not so wide that horizontal scrolling is required.
• Non-busy background: Keep site background unobtrusive to the main content areas of the site.
• Recognizable look and feel: Your site design should be distinctive to you alone. Avoid templates that are mass reproduced.
• Proper image / text padding: Give enough room between images and text so they don’t bump up against each other.
• Uses trust symbols: Better Business Bureau, site security and other trust symbols should be in obvious (and applicable) locations.
• Works on variety of resolutions: Test site to be sure it works on a variety of different screen resolutions.
• Works on variety of screen widths: Test site to be sure it functions correctly on different width screens and browser windows.
Best practice in web design
Technical website design considerations
There are several technical issues to consider when designing your website.
You will have to design webpages that can be displayed by many different browsers. Common browsers include Microsoft Internet Explorer, Mozilla Firefox, Apple Safari and Google Chrome.
You should test your webpages in as many browsers and different operating systems as possible during the development process to ensure that they will display properly. You should also ensure that your webpages work in previous versions of the browsers, as some of your audience may not have updated their software.
If you are enhancing an existing site you can use web analytics to see what browsers your customers are currently using to access your website. See the page on website monitoring in our guide on maintaining your web content and technology.
The most common resolutions, expressed in pixels, is 1024 x 768, although there is a growing trend towards higher resolutions. If you opt to design your website for a higher resolution, then you need to be aware that some screens with lower resolutions may not display all of the content.
Many users are now also accessing the internet from mobile devices such as smart phones, net books and tablet computers. It is also worth considering how your site will appear when it is accessed from such devices. For more information, see the page in this guide on designing for the mobile web.
Not all internet users have high speed access, so connection speed should also influence your webpage design.
Too many images or rich media – such as animations or video – will slow down the speed at which the webpage loads. Generally, pages should load within eight seconds or less. If your pages download slowly, your users will probably move on to another site. Slow download speeds may also impact negatively on your search engine ranking. For more information see our guide on search engine optimisation.
Try and keep file and image sizes to a minimum – generally the total size of a webpage should be no more than 40 to 60 kilobytes.
Some web technology can prevent users from viewing your site or affect indexing of your website by search engines. These technologies include:
• HTML frames
If using any of these technologies you need to consider what the potential risks may be to the usability and accessibility of your website.
The Equality Act 2010 makes it illegal for a website provider to discriminate against a disabled person. In practice this means you must design your website so that disabled people can access it using technology – eg screen readers.
The World Wide Web Consortium (W3C) has produced a number of accepted guidelines, which are divided into three priorities:
• priority 1 – websites must comply otherwise some users will find it impossible to access the site
• priority 2 – websites should comply, otherwise some users will find it difficult to access the site
• priority 3 – websites may comply, otherwise some users will find it somewhat difficult to access the site
The Equality Act 2010 requires that, where a business puts a disabled person at a substantial disadvantage compared to people who are not disabled, the business must make ‘reasonable adjustments’. Therefore, the website owner must:
• change a practice, policy or procedure that makes it impossible or unreasonably difficult for disabled people to use the service – eg using very small text that puts vision-impaired people at a disadvantage
• provide an auxiliary aid or service if it would enable (or make it easier) for disabled people to use the service – eg offering an alternative point and click interface for visitors that can’t use a keyboard
Making websites accessible
There are many adjustments you can make to your website to make it easier for disabled people to use. For example, your web designer can attach a text description to every image and link on the site. This means that vision-impaired users, who rely on a browser that reads out the contents of the webpage, can hear a description of what an image is and where a link will take them. You can read about accessible design on the W3C website
– Opens in a new window
Checking if your site is accessible
There are a number of tools and services that can help you check that your site is accessible. You can read about and search for accessibility tools on the W3C website
– Opens in a new window
Designing the site
When designing your website, there are a number of key things you should take into account. For example:
• how your business’ branding will be displayed
• the style and theme that your website will use across all its pages
• what navigation system you will use to guide visitors around your website
• which colours, graphics, text and video could communicate information about your business’ goods or services
Visitors to your website should be able to move from page-to-page easily and always know where they are. If you confuse your visitors or frustrate them with overly complex page design and navigation, they will probably leave your site.
You should try to use templates to create a common page layout across your site, create smooth transitions from one page to another by having consistent elements on each page. For example:
• placing navigational elements in the same position on each page
• using the same fonts and colours throughout the site
• having a clear, visual hierarchy to the elements on your page
• ensuring your business logo appears on each page and when clicked, links back to the homepage of your site
• including a search box on each page and always ensuring this is in the same location on the webpage
All of this will help to reinforce the identity of the site. You could also think about the placement of any marketing messages and ‘calls to action’, such as signing up for newsletters, time sensitive special offers or discounted products or services. These should be prominently placed so that there is no ambiguity – improving customer response rates.
Fonts and typography
Designing for a website restricts your font choices. If you specify a font that a user does not have on their computer or mobile device, their browser will substitute a default font, changing the look of the page. The webpage will look clearer if you choose fewer fonts and type sizes.
It is best practice to choose standard fonts for pages and specify a font family – this will help reduce the possibility of the page being displayed using system fonts.
Remember to use commonly available fonts and test your webpages on multiple platforms to see what effect these have on the overall appearance. You can find a list of common fonts for all operating systems on the Ampsoft website
– Opens in a new window
If you already have a recognisable brand or image that you can capitalise on, incorporate it into your design. The brand and image of your business should be reinforced by your website. Consistent use of your company logo throughout the site will help in this. Your website should be part of your wider marketing strategy – integrating online and offline communications to reach your target audience.
Designing for the user
The key to designing a successful website is understanding the needs of your audience and reflecting these in your design. For a more in-depth look at designing for your users and the benefits of doing so, see our guide on user-centred design.
When planning your website, think about who your users are and what they will want to do when they come to your site. Consider how the user will want to interact with your website – perhaps by selecting the products or services that you offer or through searching your website using keywords.
How can you use links to help the user navigate around your site? Use linked text and short descriptions, and organise links into related topics. When using internal links, ensure that the user always knows where they are and what they need to do to return to the higher levels of the site.
Hierarchy of information
Don’t make users navigate through too many layers of the site to find the information they want.
Provide prominent navigation aids so the user can quickly find the information they need. A standard navigation bar that is in the same place on every page enables the user to move quickly through the site. Try to stick to accepted web conventions for navigation, as this will help make your website more intuitive for the user.
Amount and placement of content
Consider how much content should be contained on a webpage. Avoid putting too much information on a page, as this may make it more difficult for the user to locate the information they need. Use links as a method of dividing content between pages. Users tend to scan a page first picking out headings and subheadings before reading the page in more detail.
Also think about where you place elements on the page, for example marketing messages or ‘calls to action’ may be more effective if placed ‘above the fold’. This refers to the area of the page that is immediately visible once the page has loaded and before the user has scrolled down the page in the browser window.
User-centred design – a basic approach
When designing for your users, you should consider a number of factors. For example:
• What are the business objectives that are driving your online proposition?
• If you already have a website, how is it currently performing? Benchmarking what you currently do is a good way of identifying improvements and measuring success in the future.
• What do your customers want from you and how will your ‘online offer’ meet those needs?
• What are your competitors doing and are there opportunities to do something different?
Only once you have a good grasp of what you want to achieve with your website you can think about the solution.
User-centred website development should include the following steps:
• Understanding your business objectives and how this will affect your website – eg are there certain requirements that will have an impact on the usability of your website?
• Modelling different user journeys based on your customer insight and segmentation – you can use this to help define your site map and information architecture.
• Building ‘wireframe’ models of the website and other mock-ups that can be used to test the ‘look and feel’ of the website prior to full development.
• Thinking about ‘persuasive design’ and how your website will support the customer to achieve certain goals on your website – eg a purchase or online registration.
• Designing, building and testing – this should be an iterative process that moves towards more functional prototypes and the final ‘live’ website. At this stage, you should aim to use expert evaluation alongside further user testing to ensure your understanding of the user all the way up to launch.
After launch, you should continue to collect user feedback as an on-going process, which you can use to benchmark performance and refer to when making future changes to the site. You can also assess the launched site’s effectiveness using web analytics tools to show how users are navigating the site.
If resources are limited, it’s worth considering using a well-designed template website rather than developing from scratch.
Ensuring a website is accessible to people with disabilities is good design practice and a vital consideration in user-centred design. Read guidelines for website accessibility on the Worldwide Web Consortium (W3C) website
– Opens in a new window
Once your site is live, you should continue to optimise it using a combination of benchmarking, performance measuring and continued user testing. User testing should take place both formally and informally once the website has gone live to make sure it meets requirements.
See our diagram illustrating the four elements of user-centred design
– Opens in a new window
For a more in-depth look at designing for your users and the benefits of doing so, see our guide on user-centred design.
Designing for the mobile web
When you design websites, you need to consider how they will look and work on mobile devices. More and more users are upgrading to new smartphones and tablet computers, which you can use to browse and search the internet. Search engines will ‘qualify’ content based on how well it will render on mobile devices.
Although your website will be viewable on mobile devices a more effective mobile presence may require a separate mobile website. When designing a mobile website basic web design principles still apply. The main objective should be to keep the website as simple as possible.
Specific issues to consider include:
• Using CSS layouts (cascading style sheets) to support cross platform compatibility.
• Page layout and information hierarchy given the limited screen space. Think about dividing content up into smaller segments across pages – this will ensure that they are quick to download and easier to read. Minimise vertical scrolling and avoid horizontal scrolling.
• The types of content that you use, eg the use of rich media (including animations and video) will increase download times and may not be supported across all devices. Avoid using too many images on your pages.
• The placement of any navigation and its ease of use on mobile devices. Think about whether visual cues can be used to highlight buttons once they have been clicked on – this will provide a better user experience. Use spacing between buttons to extend the clickable area.
• Instead of entering free text (which can be difficult on a keypad), consider allowing users to choose from drop-down lists or radio buttons to input information.
• Optimising e-commerce functionality for mobile, eg the shopping cart. Reducing the number of steps for customers to complete a purchase will help improve conversion rates.
• Always give users the option to visit your main website and visa versa.
See our guide on the essentials of mobile marketing and m-commerce.
Develop a simple and consistent navigation scheme. Links should be presented clearly and the words or images that the user clicks on must be clear, concise and relevant to the information they are leading to.
Always ensure that the navigation buttons are placed in the same place on all of the pages on the site. The user of your site should be able to navigate efficiently from page-to-page, and also know where on your site they are located.
You should remember that every graphic you add to your website for navigational purposes increases the download time for the user. So keep your navigation buttons simple and reuse the same ones throughout your site.
It is now commonplace to have the company logo as a link back to the home page.
The key to the success of your website will be largely based upon how easy it is for users to find the information that they require. You should consider including a site map and a search facility to help in the location of information. Together with clear and consistent navigation, users will be able to find what they are looking for on your site through a combination of browsing and search.
As part of a user-centred approach to the design of your website, how your content is organised needs to be considered in the planning phase. Content organisation – or information architecture should be planned and tested with users in mind.
In addition to your site navigation think about how you can use links within your site to related ideas or content. Try to anticipate what information users are likely to want next, but at the same time leave them free to make their own navigational choices.
If it’s a large website consider the use of a breadcrumb trail to show users where they are within the website. This can also improve your visibility in the search engines. For more information see our guide on search engine optimisation.
The ‘three click rule’
Bear in mind the ‘three click rule’ which means that users starting at your home page should be able to get to the information they require in three mouse clicks. While this is not always achievable, by taking it into account at the site design stage you are more likely to retain the visitors on your site, as they can quickly find the information they need.
Here’s how a well-designed website has boosted my sales
Maidstone-based company How2Become was set up in 2005 to provide career guidance through CD-Roms, DVDs, books and training courses. The firm’s managing director, Richard McMunn, designed the business’ first website, but that has now been replaced by a professionally-designed site that has helped double his sales. Richard explains what was done.
What I did
“I started How2Become because I work for the fire service and people used to come and ask questions about how to join so I wrote a CD giving insider tips. It started with that and snowballed from there.
“I knew I needed a website straight away to sell the product. My first attempt was appalling, but I was learning as I went. It was basically a picture of a CD and a picture of a firefighter. It took about three months to sell anything and a lot of that was because of my website. I’ve got it right now but I invested heavily – financially and time-wise – to achieve that.”
Bring in the professionals
“The site I designed was turning over about £300,000 a year, but I knew it could be better. I wanted to create a brand to get people coming back and recommending the site to others, so I found a great design agency to help.”
Keep it simple
“The business is now on track for about £600,000 a year, which is mainly down to the website and also the products. I love the site now because it looks fantastic and is very simple, which is key. Everything is accessible from the home page and there is not much text. It says ‘Do you want to join the police?’, for example, and it says it with images, too, because we all like images better than text.”
Ensure the technical side is fit for purpose
“At first I wasn’t aware of the technical side of things and I got caught out with that. Things like the server size are important – my website kept crashing because there were too many people on it. Now it’s not extremely fast, but it’s fast enough.”
Make your site user friendly
“When someone goes onto a website you have eight seconds on average to catch their attention. If everything takes too long to find – or too long to load – they will go elsewhere.
“I put a lot of time, effort and money in to get it right but, at the end of the day, my website is my shop. If I had a shop on the high street, then I would want it to look just as good.”
What I’d do differently
Leave more white space
“The site is very colourful and busy, and with hindsight I might have had more white space. One of the most, if not the most, used websites in the world is Google and it is just one picture and a search box.”
Subjects covered in this guide
• Planning your site
• Technical website design considerations
• Accessibility issues
• Designing the site
• Designing for the user
• User-centred design – a basic approach
• Designing for the mobile web
• Site navigation
• Here’s how a well-designed website has boosted my sales
Print options – What are my print options
– Opens in a new window
Print guide now – Opens in a new window
Email options – What are my email options
– Opens in a new window
Tell a friend about this page
Send me an email alert when this guide changes
website design considerations
Do you need a domain or web hosting?
If you do not have one already, the first step is to secure a domain name. The process is simple, go to one of the many registrars on-line, such as NetworkSolutions.com. They have an area on the home page where you can see if a domain name is available or not. Sullivan + Wolf Design can help you through the process and in deciding what names may be better than others. It’s important that you save all the info they send you. Also important is that you are an Administrative contact. Many web firms try to make life easier for you by registering the domain name for you. Yet, if you ever need to switch design teams, this can create an issue. Always be in control.
Once you have a domain, you will need a “web host”. A web host will provide you with computer space for your web site. They will also provide you with e-mail. Again, we’re here to help you and can recommend a web host based on your needs. Sullivan + Wolf Design does not provide hosting ourselves. It is a specialized field and it is important to not host with the design team. Say, if they go out of business or stop answering your calls? We see this happen every year.
What pages will there be?
Before we can estimate your project, we will need a site map from you. We can hired to work with you to develop a site map and functionality list. But to go about it yourself, you will want to first think about the different types of viewers that your website will service. Potential new customers, existing customers, vendors, job seekers, investors, etc. Make a list for each one indicating what they need. Role playing is important. Put yourself in their seat and think about it. Review competitors and see what they have. Are there any special tools like calculators needed. Once you have your lists, review them and look for common items. Then place them into groups where possible. Common groups, or areas are About the company, products, services, support, contact, articles, and solutions. We recommend using MS Word in outline to construct your website’s sitemap. It may look like this;
- About Us
- History Management Team Testimonials
- Product 1 Product 2
- Service 1 Service 2
- FAQs Knowledge Base Contact Support
The main purpose behind a site map is to identify what pages need to be built. Not what content will be on the page. If you wish to put comments on what needs to be on the page, identify it somehow like making it regular italic type, maybe in gray.
If a page is to have a special functionality, such as password protected, a form, calculator, etc. we DO need to know that up-front.
What about forms
Will it be an ordering form? If it is an ordering form, will you be using PayPal to process the transaction, or will you be processing the credit card information yourself? Processing the card yourself will require a Certificate of Security from Verisign for about $389 a year, plus often a $50 set up charge from your web host. You will also need a Merchant account from your bank. Using PayPal may be a better solution for smaller companies just starting out with a few products.
Will the form be emailed to you or will you want this in a database or both? We’ll need to know this. Placing a form’s information into a database allows many report options and analytical tools. We will need to know what reports or capabilities you will need. If more than one user or group will be accessing the information, we’ll need to know this to set this up properly.
Will there be any ordering?
As above, we will need to know whether you will be selling items over the website. If so, will there be a need for a shopping cart or will an order form do? What’s the difference? Primarily, a Shopping cart allows you to put something in the cart and go back shopping. An order form just allows you to proceed with Checkout.
If you are looking at less than 25 items, and you feel that the majority of people will just order and buy and not go back to look for other items, an order form may be what you need. It is a lot cheaper than a shopping cart. It will add up the purchase, including shipping, get the billing and shipping information, and of course payment, whether a credit card purchase or through PayPal.
How will the website be maintained
This is a big buzzword in the industry. A lot of website designers push what they call a CMS (Content Management System) onto clients. They often add thousands to a project and may not be needed. It is important that you consider, in real terms, what will need to be changed and how often. In our experience, most websites do not change that much, that often. Keep in mind that we, like many other web site designers can do the maintenance for you. Just e-mail us what you need done, and it is often done in a day or two. We bill to the minute and invoice you monthly. Many smaller companies only require an hour or two PER YEAR of website maintenance. Important to note is whether the website design company you pick has built in X amount of maintenance hours. Will you use them all? What happens if you don’t? Chances are you lose the money.
OK, say your web site requires more maintenance than that. Well, if you are talking about just changing text and or photos on a site, a simple and inexpensive options is to purchase Macromedia’s Contribute software. Very simple to use and at about $150, it is affordable to do most of your own maintenance. More complicated changes can be still done by us. You can also pick up Macromedia’s Dreamweaver application which we use. The ultimate CMS. While many things are fairly easy to do, it may require more training than Contribute, but will allow you to do anything, if you know how to. We can train you for this. What is the difference between Contribute or Dreamweaver and a full CMS? Besides cost, a CMS system allows you to log on securely through your web browser and affect change. This is important if you are on the road a lot or have multiple team members working on the same web site and not in the same office.
Maybe you just need to update a particular thing on a web site frequently, such as rate, or availability. A specialized CMS for this can usually be set up relatively cheaply.
If you are selling products, will the price or photos change frequently? If so, a CMS for that would be a good idea. If it is just once a year, or not often, then a database CMS may not be needed.
How will people find the site
Now that your site is published, all sorts of people will immediately come to the site. Wrong. It takes month to get into the Search Engine databases and more months to start even showing up at all. Depending on how much competition you have, this may be a difficult task to do well on search engine returns. For instance, if your site is about document management, or website design, you have a lot of competition putting a lot of effort into doing well. If you are selling antique door knobs, you may find little competition and it would be far easier to do well. We recommend that new sites invest into a Pay-Per-Click program like Google’s Adwords. Your monthly budget can be as low as $50 a month to maybe hundreds per month. We can help you set up your program and to managing it.
Yet, you should have a SEO (Search Engine Optimization) plan into place. At least twice a year, we should check to see your rankings and to provide recommendations and/or provide adjustments to your site.
Also think about whether your customers are local, regional, national, or worldwide. The smaller the geographical area, the better one can do. AN example would be if you are a financial consultant and only do business in New Hampshire. It is easier to get good results on “financial consultant NH” than just “financial consultant” which would return results from around the country and the World.
How much should I spend?
The big question. First, let’s understand the basic areas that add to the cost of a website.
• Overall design
• Typesetting and content treatment
• Back-end requirements
• Overall code
This is the look and feel of the site, the interface, the navigation schemes. They can be basic to a ground breaking award winning design. It should be homogenous to your Corporate Standards and Marketing and Advertising. If you do not have these items firmly in place, we may need to spend more time to develop one. Many bigger companies are opting for simpler interfaces, putting more time and energy on the content. Content is King.
But, if your site does not have a lot of great content and tools, you may want to opt for a fancier interface. This is especially true if you are a new company and want to create a more memorable look and start to establish Corporate identity and branding.
Typesetting and content treatment
Again, content is King. Good writing, graphs and tables, photos, interactive items may add to the viewers experience and to build confidence. Remember, they are here for the content so put you effort into this. We can do everything form what we call a basic copy and paste, bold this and that to, really spending time reading the content, using font styles to highlight certain things, building graphs, better looking tables, etc. Generally, for most pages, the difference is about a half hour per page on the basic end to about 2 hours per page on the high end.
This often is what makes a website smart. For you and the viewer. Smart forms, searches, password protected areas, interactive display of information all make a website a better visit. Yet, they are usually not cheap, running from hundreds of dollars per item to thousands of dollars per item.
Does the site work? Any bad links or images not found. Is the site set up logically and utilize current accepted coding practices? Has the website been optimized for speed and ease of maintenance? Is it scalable. A lot of website designers may be good artists, but do they have what it takes to build a good working web site? We often cringe when we view other web designer’s work. Sloppy, shortcuts and bad practices often lead to problems down the road. We’re here to help you if you are one of these website owners. We do it all the time.
With the above factors in mind, you should then look at your competition. How good are their sites? You will want yours to be as good or better. That’s simple enough. You should also consider the potential rewards. Increase sales, less cost on printed materials be produced and mailed, and also valuable info on customers wants and habits. For some companies, just one sale makes the cost mute. We are often amazed how that a company’s website budget is less than the cost of the President of the company’s desk!
OK, some rules of thumb;
If your business has only a few employees and does less than 250,000/year, you should be around $800-$3,000. (Number of pages, back-end requirements, etc can affect these estimates)
If your business has less than 50 people, and does less than 10 million a year in sales, around $3,000 – $8,000.
If your business has more than 50 people, more than 10 million a year, and/or has stiff competition, consider around $12,000 to $30,000.
Again, there are many factors involved here and there is no one price that we can give. It is good that we truly understand your budget. It is not so much to “pad the bill” but to offer you what you should have that you can afford. Consider the purchase of a car, say a Jeep Grand Cherokee. They offer many models, with different capabilities ranging in price from about $28,000 to $48,000. Knowing that you want to spend around $30,000 allows us the knowledge so we do not try to sell you the model with the 6.1 Hemi engine going for about $47,000.
How long does it take?
Generally speaking, most website design projects usually take about 3 months. We have done them faster, but it requires that all your copy be ready at job start and for you to really stay on top of things. In reality most people can handle the pace. 95% of all sites we have built, that wanted a fast turnaround time did not launch on time due to the customer not getting us content and responding quickly to reviews. Consider too that we a re talking about custom work. Moving it to quickly doesn’t allow us, or you, to live with the site and design long enough to really get a long term understanding. Unfortunately, we do not have a special button that inserts brilliance. It takes time, not just brute hours onto the job, but calendar time to think and reflect about decisions.
What differences are there between web site developers?
Website designers fall into a two basic groups, front-end or back-end. Front-end designers are more interested in look and feel, corporate identity, branding, messaging, while back-end designers are more interested in the back-end applications such as ordering systems, and password protected areas as well as items like code ethics.
In reality, you need both! But, if you are looking for a stronger front-end, what people see, a front-end designer will be better. If you are looking for complicated back-end systems, then go with a back-end orientated company.
Freelancers versus Studios.
Freelancers can often give a better price than a studio. Their overhead is low. But, how long have they been doing and most importantly, how long will they be doing it. Having been in the website design business for awhile may have provided them with the business experience required to do a job properly. Things like estimation, documentation, etc. may be affected by a “newby” It is also an indication if they will be around to finish the job as well as maintain your website.
The traditional studio can be expensive. That fancy building, the model behind reception, and the fancy work stations are all being paid for by you. They also need to keep on staff more people than needed to handle immediate requests from demanding clients. They also tend to add to the bill by having a lot of meetings with a lot of staff. Hey, making a font 20% bigger on page 26 doesn’t require 4 people at $150 hour. They may also try to add on things like maintenance or copyediting that you don’t need. For back-end design companies, they may require for you to have their expensive web hosting.
Reed & Associates is somewhat a combination of a Freelancer and full blown studio. We are a virtual company and can add talent as needs arise. This keeps our costs low. We try to avoid expensive meetings and know when to spend money and when not to. We’ve been around since 1989 and plan to be here for a long time. We have worked hard on listening to your demands and real needs and have formed a Studio that is the best of both Worlds. We hope you take the time to see the difference and why we have serviced so many companies