Web Page Ethiopia

Fixed-width solutions require a thorough examination of your users and their possible systems. There are several options and each requires a tradeoff: designing for the lowest common denominator, designing for the majority of users, designing for high-level machines and users, or designing for a known user base (e.g., an intranet).

Designing for the lowest common denominator is the one way to be sure that roughly 99 percent of all users can use your site.

This requires developing a screen layout that will print effectively without clipping and without requiring users to adjust their print settings (thus no more than 520 pixels wide); will work on low-resolution monitors (e.g., 640 x 480 pixels) with low color depth (e.g., 8 bit): and supports text-only browsing.

If this is your target audience, then there are several constraints you’ll want to follow (it’s not as simple as developing screens that fit within a 640 x 480 design space). The minimum adjusted requirements that need to be made when using a fixed-width solution geared toward machines at specified resolutions.

You’ll note that the recommended sizes are significantly smaller than the actual screen size. This is due to the browser requiring a certain amount of the page width within which the actual web site is displayed.

This percentage varies from browser to browser and across platforms. This means that when choosing 640 x 480 resolution as your target width, you’ll need to make sure your page is sufficiently smaller than 640 x 480 pixels.

Thus, 520 x 295 pixels is a requirement that we often use (the following paragraph elaborates on the rationale between these numbers).

While 640 x 480 screens are most likely a small percentage of new monitor sales, a considerable number of people still use them. Additionally, some people with high-resolution monitors set them to lower-resolution settings to ease reading and legibility in their day-to-day work.

Making Fixed Width Work
A common complaint when developing fixed-width layouts for the lowest common denominator comes from users with high-end machines who look at the page and complain that there is too much additional space surrounding the page.

First, center the site. This won’t work if you need to depend on alignment of foreground and background images. However, it guarantees that the page will be presented in the center of the browser window and tends to resolve the complaint of only using a small amount of screen space on the left-hand side of the screen. Second, use a background image as a decorative solution on the right.

This may present bandwidth problems, so if you use a large background image to do this, you’ll want to be sure that it has a minimal palette and is graphically simple. One way to do this is to use low resolution graphical elements in the right-hand margin.

There are some things to remember when using a fixed-width solution. The lowest common denominator fixed-width size to use is 520 pixels wide. This will work for printing and on 640 x 480 monitors.

Some combinations of printers, printer settings, browsers, and operating systems will not work with pages beyond 520 pixels in width. Anything above this may be cut off.

Thus, if it is important that your pages are printable for all your customers, you may want to consider 520 pixels as a maximum width or provide an alternate means for them to get printed information from your web site.

If printing isn’t a concern, then the next width you need to worry about is that required by users who are running machines with a resolution of 640 x 480 pixels. To leave plenty of horizontal space for margins, windows, scroll bars, and window borders, we use a maximum width of 595 pixels.

New browsers seem to be using more and more of the available horizontal space. You never can tell when a new browser will use those 10 pixels you are relying on. If you plan on having your web site available for a long period of time and want to do minimum maintenance, you may want to plan a little extra buffer zone for future browser modifications.

If you know your user base very well (e.g., as you would on an intranet), or are willing to dismiss a certain percentage of users (e.g., an interactive art exhibition may choose to reduce potential viewers to gain additional screen real estate), the same logic as above can be applied.

You may be able to rely on a wider design, but you should still determine the exact width will work for your target platforms. Discover your user base, understand the limitations of their systems, and thoroughly test any implementation on a variety of browsers and operating systems.

Another solution is to use both fixed-width and variable-width page layouts. By using a combination of the two, you can set a minimum width for particular areas of the page (e.g., the major text body) and allow the page to increase in size as the user sees fit. This allows a minimum width for a text area (e.g., 200 pixels) while making use of the flexibility available by the use of a variable-width setting.

Page Layout in Web Site Design … Here’s what You Can Do
So how do you get around all of these constraints? Once you are aware of the constraints, you can do several things to address them.

Place Critical Information at the Top of the Page
Pages load top-down. There is no way around it, short of developing your own bottom-up browser. So be sure to include the most relevant information at the top of the pages. Let users know right away whether or not they are on the right page.

Using this space to display a large graphic is usually not going to facilitate information-finding. Similarly, an enormous, intricate title does little more than reinforce to the user what the general topic of the page is.

Give the user some information. An opening paragraph that is highly descriptive of the page contents or a quick bulleted list of the major topics is much more useful than a company logo. Users should be able to determine whether or not the information they are looking for is on this page.

The quicker this is resolved, the more usable your site will be (not to mention the happier users will be, and the higher your user retention rates will be).

In web site design, the top of the age is the most critical area. This “sweet spot” is the most dominant area of the page. It loads first, is accessible to the highest proportion of users, and is virtually guaranteed to be seen. Use this space wisely. Put the most critical information here.

Introduce the contents of the page, provide the user with the novel and unique information of the page, and be sure it is quickly accessible. In other words, use this space sensibly and efficiently. It is the area of the page that packs the most punch, so spend the extra time to make sure it is well structured and designed.

Title: Common Page Layout Problems

Following are design flaws and constraints frequently encountered in page layout:

• Misalignment for foreground and background images
• Changing gutter sizes at the left edge of the browser
• Overlapping foreground images not allowed (although there are several tricks to get around this, such as using an image as a table cell background, using style sheets, or drawing them as a single image)
• Font size differences from system to system, machine to machine, and browser to browser
• Dynamic restructuring of pages not thoroughly tested

Dynamic Font Sizes and Line Spacing
Keep in mind that in the development of a web page, the fonts displayed on the screen are dynamic: they have the ability to increase and decrease in size.

This can affect your layout, the spacing in between items, and line-spacing on the page. What looks nice on Netscape and the MacOS may look completely different on Internet Explorer and Microsoft Windows.

What about Whit Space?
Is white space useful or not? There are a few key ideas to keep in mind when thinking about whether or not to use white space within your page.

While white space can be wasted space, it can also effectively support and organize the structure of the elements within the page. For example, setting a “New” section apart from the rest of the page makes use of white space to support the user.

However, you’ll want to keep in mind that if you use line-spacing within your text, you run the risk of font changes multiplying the white space. While vertical white space can be useful for differentiation between content sections, horizontal space is at a premium – gratuitous use of horizontal white space is a no-no.

Report This Post

Variable-width solutions take advantage of the flexibility and adaptability of screen size, browser size, font size, and cross-platform differences.

A purely variable-width solution would have the page structure completely dependent on percentages and relative sizes of the elements within the page.

In general, variable width is a tough solution to choose. There are several ways in which it can go wrong. A major problem occurs when the browser width is set too narrowly, and the user ends up seeing one or two word per line.

On the flip side, really wide monitors can have lines of text equally long. This can prohibit the user from easily finding the beginning of the next line. Additionally, you have very little control over the layout of page elements within the page.

If your design calls for having graphical elements aligned to more than just the body (i.e., there are strict relationships between graphical items), this will be a hard pill to swallow. On the positive side, this layout method makes the best use of the user’s browser dimensions and can maximize the use of space to display the most information possible.

There are a few things you want to watch for when designing variable width solutions. At a small width text areas may suffer.

When pages resize, they tend to maintain the width of your images, and the bulk of the resizing will occur in your text region. Be sure to check this to ensure that your text is still legible.

Develop flexible foreground graphics that don’t rely on positioning against the background or to one another (this is a design problem that is unique to the Web and is a fun challenge for any web designer).

Remember to thoroughly test your pages by adjusting the font sizes and browser height and width, “Pre-Launch and Post-Launch”; however, you should be implementing some of these tests early on).

Report This Post

The two major concerns for determining the proper page width are screen resolution and the printing requirements of your users.

You need to ask, Who are the major users of this site? What kinds of systems are they using? How important is printing for this population?

The answer to these questions will help to determine the requirements of your design. Without careful consideration of page-width constraints, you may unknowingly limit access to your web site.

Solving the Page-Width Problem
Currently, we recommend that sites be designed to work well on a 640 x 480 screen. The rationale behind this is based on an extensive investigation of the tradeoffs involved.

Rather than give you a directive – “If you don’t design pages of x width you’re wrong!” we have laid out a detailed account of the tradeoffs involved in choosing the appropriate page width for your web site.

Understanding the tradeoffs involved and how they will affect the end user is the key to making a sound decision.

There are several approaches to solving the restrictions of resolution and page width. Three of the most common page layout solutions are variable width, fixed width, or a combination of the two

Report This Post

Repetition means to have some element or aspect of the design repeated throughout the design space. It is all about consistency. In fact, it is consistent repetition that brings about a unified design space.

Having consistently repeated elements throughout the design space reinforces the structure and identifies your site as a cohesive whole. It is a continuous effort that brings about the unity of the design.

Repetition is often found throughout a great design. Some of the important elements to repetition include headlines and titles that use the same typeface, weight, and size; shapes that are consistently used and vary on one dimension (e.g., size); and bullets that use a consistent design element (e.g., a circle) and are used in a consistent fashion throughout the site.

Repetition can enhance perceptual grouping and reduce visual search time for the user. At a more practical level, it directly contributes to usability by minimizing download times through caching.

Repetition reduces clutter by reducing the number of unique items in the display and lending a low-level graphical structure to the page, while at the same time presenting a visually stimulating layout.

Repetition of elements also has a very practical application. By using the same graphic in various positions on your page, you may reduce the download time by limiting the number of unique graphics on the page.

Often, when an element is used in several places on one page or on several pages, the image becomes cached on the user’s local machine. This means that the next time the use needs to get that image, it is retrieved from memory on the user’s local machine rather than having to be downloaded across the network.

Finally, repetition can be used to establish branding of your site. For example, repeated logos can help to establish a brand identity while at the same time reinforcing to users that they are at the proper site.

In summary, you’ll want to use repeated elements on your page for the following: to develop a hierarchical structure according to the location, size, and hue of the repeated elements; to reduce download time for unique graphics by having repeated elements that may be cached locally; and to facilitate branding.

Report This Post

Balance is used to establish a feeling of consistency and a harmonious layout. A page is balanced when the elements of the display come to a physical equilibrium and the page is equally weighted around a particular axis.

In other words, the “physical weights” of the design elements should equal out across the page. Balance is a particularly tricky issue when dealing with the dynamic nature of web pages.

Therefore, it is even more critical to establish a well-balanced framework for your page if you are to stand any chance of succeeding when dimensions start changing.
Symmetrical or asymmetrical layouts can be used to achieve a balanced page.

While symmetrical pages lend themselves naturally to a sense of balance, asymmetrical pages can be unique while still achieving a sense of balance. A well-balanced display will greatly enhance your ability to establish focus and guide the movement of the user’s eye across the page.

To develop a well-balanced page, begin by identifying a central axis along which the page will be balanced (this is often a vertical axis in web site design because the horizontal structure is more constrained than the vertical structure).

Arrange the information and data about the axis so there are equal weights on both sides of the axis. View the page from a distance or blur the image by squinting slightly to ensure that the visual weight is indeed even.

Report This Post

Once you’ve identified the basic page requirements, you can begin to brainstorm various layouts. You should always take a look at other page layouts before developing you own. Look at other sites on the Web, determine if their layout might be useful, print out the ones that are, and focus on the strengths and weaknesses of each style.
Review your list of elements required for your pages and see how they might fit into different layout. Reviewing different layouts will keep you from getting stuck in a rut and may reveal several layouts that you would not normally have considered.

Page layout techniques
Just where do you put al these elements? When you’ve decided on what to include in your page, and you have the required elements, how do you decide where to put things? This section investigates the development of a page layout. It begins with a quick look at page templates.

Creation of Page Templates
Development of a novel set of page templates can be used to guide the design and provide a flexible framework for future growth. The advantage to this method is that it achieves consistency and long-term time savings.

The disadvantage is the difficulty in achieving appropriately flexible templates for future additions and changes while retaining a unique and aesthetically interesting page.

What Do We Mean By Page Templates?
Using templates doesn’t mean using a preformatted “boilerplate” solution proposed by your favorite WYSIWYG package, but rather establishing a grid or page architecture unique to the site you’re designing.

Nor does this mean that you need to adhere strictly to the established framework. There are times when it makes sense to establish a unique page (e.g., a page illustrating a site map may require slightly different use of screen space than the rest of the site pages).

Why, Then, Would One Want A Template?
A template is useful for maintaining consistency throughout the site. If the navigation is in the same place on the vast majority of pages, the user will expect it there.

Consistency across the pages will facilitate integration of the site structure into the users’ conception (or mental model) of the site. An accurate mental model reduces the cognitive effort required to search and find things within the display.

If each page is unique, the user will need to search for elements within the page, and the cognitive and perceptual strain will be much greater.

The use of a page template allows you to establish a consistent and simple page structure throughout the web site. By reducing clutter and eliminating excessive attention-grabbing elements, you can ensure the user is focused on the critical content areas.

The consistency afforded by a template is useful for both the designer and the programmer. Once a common page structure has been established is easier to implement new pages, and mistakes and inconsistencies are more easily detected.

The sidebar “Attention to Detail” describes another benefit of consistency within a web site.

While page templates have been discussed here, their actual creation often occurs after the mockup stage is completed. However, you’ll want to keep in mind that it is a goal to develop a page that will have consistency and a common layout throughout.

Simplification and Reduction
A major way to improve the usability of your site is to increase the user’s comprehension of the elements and structures contained within the page. This is achieved through simplification of the page structure, and reduction of the elements contained within the site.

Reducing the number of visual vertical lines within your page is one way to simplify the display. Demonstrates the vertical structure of a page and how inconsistencies and excessive arrangements can be simplified.

Limiting your page to four or fewer vertical alignments is a good way to maintain control over the structure, although this is by no means a rule. Remember: If you page seems cluttered and you can’t quite pin down the reasons, it is often due to an excessive number of vertical alignments within the page structure.

Any element that breaks the perceptual boundaries of a page has a strong influence on attention. Reduction of the number of attention-grabbing elements will help to simplify the page for the user while strengthening the focus on the important page elements.

This can be both good and bad. For example, if a fairly static page has new information added to it, you may want to make that information stand out. However, too much of this can contribute to a cluttered page that is difficult to parse.

You should strive to develop a page that has a hierarchy of focused elements throughout the page.

Report This Post

Contrast is critical to overall balance and structure, differentiating elements within a display, and controlling the users’ gaze. Contrast allows structure to emerge from the page.

A full page of text will be viewed as a solid mass with no clues as to how the user should proceed, while an overly graphic page containing too many highly contrasted elements will disrupt the ability of the user to find the relevant content.

Contrast can exist across several visual dimensions: shape, color, size, or position (to name but a few). It’s important to develop a feel for how these differences can affect the user’s perception of the page.

Highly contrasted elements grab the users’ attention, whereas more subdued contrasts require conscious effort to be noticed.

While the use of contrast will be discussed further in the design elements section, it’s important to keep in mind that too many highly contrasting elements will lead to an unbalanced and confusing display.

Too little contrast leads to a dull page with no hints as to the underlying structure and may look accidental rather than intentional. Contrast is only effective when the intent is obvious.

Use contrast to draw attention to particular elements of the display. Contrast also helps to develop a hierarchy of focal elements to rhythmically move the user’s eye across the page.
Contrast and consistency go hand in hand. Make similar things look similar. Make different things look different. Leave nothing to chance.

Report This Post

You can begin to think about page layout by making a list of the various page components you’ll need to incorporate into the design. This list should be a result of your requirements and task analyses.

Features such as navigation tools, body text, headers, and footers can all be included. Also, if there are specific pages you will be prototyping, be sure to include any unique data or information on the list.

Common page components include headers and page titles, body text, footers, logos, navigation and subnavigation, bulleted lists, images and diagrams, and interactive elements.

Once you’ve determined the basic elements to include on the page, you can begin developing the page structure. Understanding all the common elements will help when it comes time to begin prototyping.

Begin by examining each component individually and ask why it is needed. If you can’t answer the question, throw it out! Then ask how this component relates to other components.

Find the related components and be sure to reflect that relationship in the visual design and layout of the components. Reduce the page to its minimal components. If you are unsure of a component, discard it.

If discarding it ruins the layout or prohibits effective use of the page, then you will need to find a way to add it back in.

Remember, less is better! Having less on your page now will facilitate future growth and expansion of your site. If it’s stuffed to the gills right away, you’ll have no room for future expansion.

Report This Post