Join the forum discussion on this post - (1) Posts

We have just started a new customer support page that has video tutorials to help you with the common tasks and questions for your websites

To veiw the tutorials please click here

Website PlanningBefore creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will be developed are extremely important.

Purpose

It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed. Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place. Also, goal-setting practices and measurable objectives should be identified to track the progress of the site and determine success.

Audience

Defining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website - the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do/feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need/use the content, a list of characteristics common to the users such as:

• Audience Characteristics
• Information Preferences
• Computer Specifications
• Web Experience

Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.

Content

Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience’s needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step is to organize the basic information structure by categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site’s content ensures that the wants/needs of the target audience and the purpose of the site will be fulfilled.

Compatibility and restrictions

Because of the market share of modern browsers (depending on your target market), the compatibility of your website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be limited to the use of valid XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024×768 display resolution. This is because Internet Explorer is not fully W3C standards compliant with the modularity of XHTML 1.1 and the majority of CSS beyond 1. A target market of more alternative browser (e.g. Firefox and Opera) users allow for more W3C compliance and thus a greater range of options for a web designer.

Another restriction on webpage design is the use of different Image file formats. The majority of users can support GIF, JPEG, and PNG (with restrictions). Again Internet Explorer is the major restriction here, not fully supporting PNG’s advanced transparency features, resulting in the GIF format still being the most widely used graphic file format for transparent images.

Many website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain a website will work on a particular platform is to test it on that platform.

Planning documentation

Documentation is used to visually plan the site while taking into account the purpose, audience and content, to design the site structure, content and interactions that are most suitable for the website. Documentation may be considered a prototype for the website - a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website.

First, the content is categorized and the information structure is formulated. The information structure is used to develop a document or visual diagram called a site map. This creates a visual of how the web pages will be interconnected, which helps in deciding what content will be placed on what pages. There are three main ways of diagramming the website structure:

• Linear Website Diagrams will allow the users to move in a predetermined sequence;
• Hierarchical structures (of Tree Design Website Diagrams) provide more than one path for users to take to their destination;
• Branch Design Website Diagrams allow for many interconnections between web pages such as hyperlinks within sentences.

In addition to planning the structure, the layout and interface of individual pages may be planned using a storyboard. In the process of storyboarding, a record is made of the description, purpose and title of each page in the site, and they are linked together according to the most effective and logical diagram type. Depending on the number of pages required for the website, documentation methods may include using pieces of paper and drawing lines to connect them, or creating the storyboard using computer software.

Some or all of the individual pages may be designed in greater detail as a website wireframe, a mock up model or comprehensive layout of what the page will actually look like. This is often done in a graphic program, or layout design program. The wireframe has no working functionality, only planning.

Accessible Web design

To be accessible, web pages and sites must conform to certain accessibility principles. These can be grouped into the following main areas:

• use semantic markup that provides a meaningful structure to the document (i.e. web page)
• Semantic markup also refers to semantically organizing the web page structure and publishing web services description accordingly so that they can be recognized by other web services on different web pages. Standards for semantic web are set by IEEE
• use a valid markup language that conforms to a published DTD or Schema
• provide text equivalents for any non-text components (e.g. images, multimedia)
• use hyperlinks that make sense when read out of context. (e.g. avoid “Click Here.”)
• don’t use frames
• use CSS rather than HTML Tables for layout.
• author the page so that when the source code is read line-by-line by user agents (such as a screen readers) it remains intelligible. (Using tables for design will often result in information that is not.)

However, W3C permits an exception where tables for layout either make sense when linearized or an alternate version (perhaps linearized) is made available.

How it Looks vs. How it Works Some web developers have a graphic arts background and may pay more attention to how a page looks than considering other issues such as how visitors are going to find the page via a search engine. Some might rely more on advertising than search engines to attract visitors to the site. On the other side of the issue, search engine optimization consultants (SEOs) are concerned with how well a web site works technically and textually: how much traffic it generates via search engines, and how many sales it makes, assuming looks don’t contribute to the sales. As a result, the designers and SEOs often end up in disputes where the designer wants more ‘pretty’ graphics, and the SEO wants lots of ‘ugly’ keyword-rich text, bullet lists, and text links. One could argue that this is a false dichotomy due to the possibility that a web design may integrate the two disciplines for a collaborative and synergistic solution. Because some graphics serve communication purposes in addition to aesthetics, how well a site works may depend on the graphic designer’s visual communication ideas as well as the SEO considerations.

Another problem when using lots of graphics on a page is that download times can be greatly lengthened, often irritating the user. This has become less of a problem as the internet has evolved with high-speed internet and the use of vector graphics. This is an engineering challenge to increase bandwidth in addition to an artistic challenge to minimize graphics and graphic file sizes. This is an on-going challenge as increased bandwidth invites increased amounts of content.

orks

On the web the designer has no control over several factors, including the size of the browser window, the web browser used, the input devices used (mouse, touch screen, voice command, text, cell phone number pad, etc.) and the size and characteristics of available fonts.

Some designers choose to control the appearance of the elements on the screen by using specific width designations. This control may be achieved through the use of a HTML table-based design or a more semantic div-based design through the use of CSS. Whenever the text, images, and layout of a design do not change as the browser changes, this is referred to as a fixed width design. Proponents of fixed width design prefer precise control over the layout of a site and the precision placement of objects on the page. Other designers choose a liquid design. A liquid design is one, like Wikipedia, where the design moves to flow content into the whole screen, or a portion of the screen, no matter what the size of the browser window. Proponents of liquid design prefer greater compatibility and using the screen space available. Liquid design can be achieved through the use of CSS, by avoiding styling the page altogether, or by using HTML tables (or more semantic divs) set to a percentage of the page. Both liquid and fixed design developers must make decisions about how the design should degrade on higher and lower screen resolutions. Sometimes the pragmatic choice is made to flow the design between a minimum and a maximum width. This allows the designer to avoid coding for the browser choices making up The Long Tail, while still using all available screen space. Depending on the purpose of the content, a web designer may decide to use either fixed or liquid layouts on a case-by-case basis.

Similar to liquid layout is the optional fit to window feature with Adobe Flash content. This is a fixed layout that optimally scales the content of the page without changing the arrangement or text wrapping when the browser is resized.

Cascading Style Sheets (CSS) Styles are very useful for maintaining a web site since its appearance (controlled by properties of HTML tags) can be updated from just one file. They are also used to enhance your site’s look. In this article you will learn how to make cool text effects using CSS Styles using Macromedia Dreamweaver.

1. Text Links Rollover

This effect is got by using the hover property for the <a> tag or any named css style used for links. For defining the default text link rollover throughout the site you can set the a:hover style. Open your site in Dreamweaver and do the following:

1. Open any page of your site and select window > CSS Styles and Click the New CSS Style button (+ icon), a pop-up window will show up.
   1. Setting a:hover - Select Advanced in the Selector Type. Now select a:hover from the Selector list box.
   2. Setting any other link style’s hover - if you have already created a css style called say “links”, to set the links:hover style - Select Advanced in the Selector Type. Now type links:hover in the Selector list box space. [To use this style just select and right click the <a> tag in the tag selector located at the bottom left of the Document window. For the Set Class attribute select links from the list.]
2. Define the style in an existing Style Sheet, a new Style sheet or embedded in your current Document, and click OK.
3. In the CSS Style Definition pop-up window that appears give the Text specifications in the Category: Type. Now try the following effects separately or together:
   1. Tick the checkbox none if you don’t want any underline to appear for the links on rollover.
   2. Tick underline if you want it to appear (this is usually used if the a:link or .links style is given the none property for no underline to appear for the links without rolling over them).
   3. Give the weight as bold.
   4. Change the link color property to something other than the a:link color.

2. Text Case Setting

In case you want a style that always displays in upper or lower case no matter how the text is typed you can set the Case property to capitalize, uppercase or lowercase in the Category:Type text specifications.

3. Text Spacing

To make the text appear neatly spaced on your site and for easy readability you can set the Line Height property in the Category:Type text specifications.
Tip: Set the line height to approximately 1.5 (one and a half) times the font size for it to look smart. The content in our site has a font size of 11 and line height of 16.

4. Line-through Effect

If you are selling products on your site you might want to give a discount and show the old and new prices (example: $100 $50). To give a strike through effect for the old price you can make a style with the Line-through property in the Category:Type text specifications ticked.

This tutorial teaches you how to design a website that utilizes the available browser space efficiently and looks good for all screen resolutions.

Why do we need to design for all resolutions?

1. Web site design scalability - As technology advances and the configuration of monitors keep increasing it is impossible to test your site in all screen sizes. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site. Check out our website in different screen resolutions, you will find that it will fit the screen width.
2. To fit available browser space for easy reading - Try out a fixed width site in all resolutions (especially higher than 1024×768) and see how empty and unprofessional it looks. Now take a look at this article page in all the resolutions and feel the difference. If it is necessary for you to keep a fixed width then we have given suggestions on how to do it more professionally (read below).
3. To keep your viewers on your site - A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn’t look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing.

Viewer Statistics

• There are more than 40 different screen resolutions.
• 1024×768 is the most popular resolution used (getting the lions share of around 60%) followed by 1280×1024 and above (around 25%) and 800×600 (around 14%). 98% of users have 800×600 and above resolution, thus, 800×600 can be taken as the minimum resolution the site should fit (other lower resolution are seldom used).

Design Basics

• There are two ways to design your website - Table design and Table-less design (using div tags).
• For a beginner using tables is the best as there isn’t much that can go wrong with the use of tables. For advanced users and design professionals designing using CSS styles and div tags is a must for optimal results of load time and to follow W3C standards.
• For stretch layouts we need to give the width of the table(s) or div(s) in percentage.
• To fit the whole screen for any resolution - the outer most table(s) or div(s) are given 100% width. If the design can be made to have just one outer table then it can be given a height of 100% to expand and fill the browser space vertically.
• To make only the content area to expand do the following. After the outer most table or div is given the width in percentage all inside cells or div tags should be given fixed widths in pixels except the content cell or div.
• If you like the fixed width concept or are forced to have a fixed width (especially when using curved graphics) you can give a contrasting background color and/or a shadow effect/border to the table to make it stand out. These effects can also be used along with the stretch layout concept by giving the table or div width as 90 or 95 percent.
• Some of the templates don’t fit the screen vertically due to design limitations and netscape compatibility issues. Instead of using 100% as the height, here the extra space can be cleverly hidden by using a background color or fill

• Neat and Easy Navigation: Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, What do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them. Read our article on Web site Navigation Tips.
• Clean Layout Design: A clean layout that uses a lot of white space enhances a site’s looks. Try to keep the focus on your content, use a template for this. Use fonts that will be available on all computers to prevent your site looking messed up.
• Optimum Load Time: Make sure your load time is low. For this you must:
  Minimize Graphics, Flash and scripts: They hugely increase your file size.
  Optimize your HTML & script code: Make sure that your site doesn’t have any unwanted tags or unused scripts.
  Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster.
  Read our article Tips for a Fast Loading Site for more.
• Design for all Screen Resolutions: A site that is easy-to-use always encourages visitors to stay and read your content. For site with long pages of content this is very crucial as the amount of scrolling required is reduced. Suppose your site doesn’t look good for a particular resolution it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site.
  Read our article Designing for all Screen Resolutions for more.
• Ensure Web site scalability: Make sure your code and design is scalable. As technology advances and configuration of computers & their monitors keep increasing and varying it is impossible to test your site in all screen sizes and platforms.
• Cross Browser Compatible: Make sure you check your site for Internet Explorer 5+, Mozilla Firefox 1.0, Opera 7.0 and Netscape Navigator 6+ as they constitute 95% of the worlds browsers.

It is important to have a reasonably fast loading web site so that viewers are not made to wait for a long time and to accommodate users on slow internet connections. Search engine algorithms also do take into consideration your load time.

Follow these tips while designing and developing your site:

• Optimize your HTML code: Make sure that your site doesn’t have any unwanted tags and that it is optimized.
• Effective Table designing: Design using nested tables instead of using cell merges and splits. Use separate tables where ever possible. Not designing for 100% height is better as if you use just one outer table, the web page is displayed only after the table is loaded fully. If many outer tables are present [you can have different tables for the header, content, footer, etc.] the page displays the content of each table as soon as its elements are loaded.
• Maximize content area: This not only reduces load time, it enhances the readability of your site.
• Minimize use of graphics, Flash, scripts: These are the major contributors to the size of your web page, so try minimizing them. Try using background colors and fills instead of heavy images.
• Optimize all heavy files: As much as possible optimize heavy graphics, Flash files and scripts. In editors like fireworks and flash you can see the various options in the preview panel to reduce the sizes. See how popular web sites like google and yahoo have pages that are very small in size and thus load in seconds.
• Stick to simple designs: Most fast loading sites have very simple designs. Take the hint! Complicated designs will slow down your pages.
• Spread out your content: In case you find yourself having very long pages of content, break them down into separate sections and thus bring down the sizes of the individual pages.
• Use Text Links instead of graphic buttons: basically try to make use of HTML as much as possible. Use CSS Styles for text links to make them as attractive as buttons. Read our CSS Styles tutorial
• Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster.
• Using Layers instead of tables is a new concept for better load time. We will be bringing out an article on it soon.

Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, What do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them. Read On!

Give importance to Layout and Navigation

A clean layout and neat navigation and using a lot of white space for your site enhances its looks. Try to keep the focus on your content. That is why we recommend using dreamweaver templates for your site - all pages or a group of pages have one basic design and only the content varies - this way even if your site is a little distracting due to necessary effects, your design is noted once (hopefully with a appreciative eye and then the visitor focused on the content automatically. Read our important article on Web Design Tips before you start designing your site.

Here are a few important tips:

• Prepare your site navigation before designing to prevent cluttering up the site with forgotten links.
• A clean-cut and uniform navigation system is a must.
• If you have too many links then you should use drop-down menus or flyouts for your main topics. If you have Fireworks or Dreamweaver then macromedia drop-down menus are one of their most popular in-built “Behaviors”. Otherwise you can use our own copy-paste code for drop-down menus in the article SmartWebby Drop-down Menus (This article is part of our Simple DHTML Guide a collection of copy-paste DHTML snippets written especially for designers).
• Maintain a site map or section contents/home pages to help people find what they are looking for with ease.
• The navigation should be flexible enough to accommodate any amount of additional links in case you probably will be adding pages periodically. For this using drop-down menus or section home pages is a must.
• Keep your main links together as much as possible so that visitors can absorb them at one shot and know what your site conveys about your company. Check out how all our major links appear in our top navigation bar and all related section links are listed in the right hand side menu.
• There is no harm is showcasing important links (even repeated links) that you think might interest the visitor. Small boxes describing the link should look good.
• If you like a graphic intensive site and find there is not much space for accommodating all your links, you can have a separate home (splash) page and all other pages as content pages. Thus your home page can have visual appeal and your inner content pages can have elaborate navigation structures while focusing on the content.
• Use your navigation space efficiently. Use short, clear and precise words in your links so that your visitors know what the corresponding page will contain.