Subject: What constitutes a good design or a bad design when it comes to the web?

Intended Audience: Communications Managers, public relations officers, marketing personnel, graphic designers, web designers, creative directors and business owners.

 One of the most difficult concepts for most people to grasp when delving into web design is the number of constraints that one has to consider. This article will attempt to explain some of these constraints and hopefully guide the reader along the path to better web design practices.

 Key Differences between Graphic Design and Web Design

In both graphic design and web design the designer’s task is to create a visual representation of the marketing objectives of the company.

With graphic design the resulting visuals normally target fixed size usage scenarios like magazines and billboards, but when it comes to web design there are a number of differences that the designer will need to incorporate into their thinking.

Current Browser and HTML/XHTML Capabilities

It would be easy to assume that you as the designer need not be concerned about what browsers can or cannot do since that is the domain of the developer, but in fact it plays a pivotal role. Knowing what the limitations are of this medium will help guide you in such a way as to not attempt to create visuals that are beyond the capability of current technologies, resulting in near impossible HTML implementations and lengthy and often delayed implementation times.

A very good example of this is the use of PNG image formats for alpha transparency. Consider the following logo:

 The branding guidelines are for a black border, transparent background and the company name written in Arial Rounded with a size of 33pt. This may work in all circumstances where the logo is used on a white background, but what happens when this logo is used against a gradient background in Internet Explorer 6.x?

In the following image the logo on the left has been exported as a GIF with alpha transparency and the logo on the right as a PNG with transparency. Notice the jagged edges around the left logo text:

So why not just use PNG instead since it works so well? The problem is that Internet Explorer 6.0 doesn’t support the PNG format yet. Later versions of Internet Explorer certainly do, but when you’re targeting a version that is still used by a percentage of users that is big enough to not be ignored, this becomes a serious consideration.

Limited Horizontal Space

 Another major consideration is width limitation presented by users using different size monitors and screen resolutions. Resolutions that are familiar to most people are the older 640x480, 800x600, 1024x768 and so on. Even when 1024x768 started to become a popular resolution on most screens one still had to design for the smaller 800x600 option since it was still the most common resolution.

Add to that the fact that different browsers snatch various widths from the screen real-estate for objects such as scroll bars and browser borders and you end up with less than 800 pixels in width. 

One type of layout that is not commonly used, but is a potential solution to the above mentioned challenge is what is referred to as a liquid layout. This means that the width of the design will grow and shrink depending on the width of the browser. Careful consideration should be given here to establishing whether or not this is the desired results for the company. Liquid layouts can be difficult and time consuming to implement since the entire structure of the HTML document needs to be considered including menu bars, side promotional bars, content areas, footer sections and so forth.

 Dynamic Vertical Space

Whilst most designs for websites use a fixed width approach the vertical size is almost always dynamic and can change from one page of content to the next. It is vitally important to consider this in your design so as to avoid making common mistakes such as designing bounding boxes that must line up at all times without careful consideration for the impact of that decision. Consider the following design:

Looking at this design you can see a top content section, bottom content section and a right panel, which seems very straight forward. But if you were to design the right panel to have a fixed height the design would end up looking jagged and badly finished when content in the bottom content section stretched the its height beyond that of the right panel’s bottom edge. As long as you keep in mind that the right panel is always going to grow to a height that matches its bottom edge with that of the bottom content section’s bottom edge, then you’re on the right track.

Tips for Good Web Design

 There are many considerations to bear in mind when designing for the web, but the following list details some of the most important concepts of web design:

• Maintain a good balance between the needs of the company, the user and the technology requirements such as browsers, search engines and so on.
  • Company – Corporate branding standards or guidelines.
  • User – Well structured content layout and easy navigation.
  • Technology – Browser compatibility, search engine friendly content and navigation. Remember search engines can only read, they can’t see.
• Keep the overall layout and design simple. Bring uniqueness and style in with the smaller additions to the design; much like an interior decorator would advise the use of neutral colors for most aspects of a room and bringing vibrant colors in with decorative accessories.
• Always remember the dynamic structural nature of websites. Most websites are implemented using some form of HTML which means what you see as a design with a fixed width and height is seen by the developer as an image that is to be cut up into many pieces and implemented using HTML elements such as DIV, SPAN, UL and so on to cater for the dynamic height and possibly width of the website.