Absolute Positioning? Absolutely Not!

Absolute Positioning? Absolutely not! This reaction to the process of absolutely positioning elements on a web page is understandable but not justified.  Why ever not?  Absolute positioning provides the designer with certain advantages and a quite a few disadvantages too. However, before we actually set out the long list of advantages and disadvantages, let us look at the concept of absolute positioning.

Defining Concepts

Absolute positioning defines the x and y coordinates of an element with reference to the top left corner of the browser page or the containing block and the position attribute is set to absolute.  The code will read as under:

<STYLE TYPE= “text/css”>
<! –
P{position: absolute; left 50 pt; top:30pt}
</STYLE>

Note that the right and bottom coordinates have not been defined. So the text moves to the right and the bottom of the page.  Specifying all four coordinates will give you greater control over the element. 

Absolute positioning removes the element from the normal flow of the document and it does not impact the other elements on the page when the page is loaded.  This means that the element is placed in an arbitrary position somewhere in the viewport and its properties are set by the top, bottom, left and right attributes.

A point that needs to be noted here is that if the absolutely positioned element is a child element of another element which has not been placed static, then the absolutely placed element will not be placed relative to the viewport, but relative to the parent box.  In the following code three boxes have been specified.  When the code is executed, box one will be placed relative to the view port.  Box two will be placed absolutely and box three as the child of box two will be placed relative to box two.

#one {
 position: absolute;
 top: 1em;
 left: 1em;
}
#two {
 position: absolute;
 top: 3em;
 left: 2em;
}
#three {
 position: absolute;
 top: 0.5em;
 left: 0.5em;
}
<P ID="one">This is box one.</P>
<DIV ID="two">
 <P>This is box two.</P>
 <P ID="three">This is box three, which is also inside box two.</P>
</DIV>

One common use of absolute positioning is for creating columnar layouts for the web pages. You would probably create two Div ID to represent the columns and define a block of text within each <Div>. This can also be achieved by defining the following style sheet.

 #columns {
 position: relative;
 top: 0;
 right: 0;
 padding-right: 10em;
}
#right {
 position: absolute;
 top: 0;
 right: 0;
 width: 9em;
} 
In this code we have set the position of the container to relative and the position of the boxes absolute with reference to the container. A right padding of 10em is included to make the necessary room for the box.  Margins are not set.  The width of the element is inside its margin and contains the padding.  If the margin is set it will to the right of the text and the positioned box!

The user agent or the application that processes the web page such as the browser selects the initial containing block. It also could be related to the veiwport. 

It is ok to assign negative values to the absolutely positioned elements.  However, this may result in non-display of the element.

Layers can be used to absolutely position elements on a page.  Layers are created using the div tag as in the following code:

It is possible to position the layer and also define its dimensions. However, the latter is optional. Absolute positioning can use absolute (px) and relative (%) units of measurement.

The advantage of using layers with div tags is that they load faster.  All the style information is contained in the attributes added. The overlapping layers can be created using the z-index command.  The values assigned to the z index will determine its order in the stack.  The higher the index the closer the div will appear to the front of the page.  The layer that holds the page’s content should be given the z index of one so that users can read the content and click on the navigation elements.

Absolute positioning gives complete control over the elements of a web page to you.  Once the element is pulled out of the flow it can be placed anywhere in the page and this will allow you the freedom to display your content before your navigation structures become visible. This enables you to provide the user with optimum accessibility and to optimize your content for search engines.

However, absolute positioning can cause problems of overlapping if adequate care is not exercised.  Layouts that use absolute positioning for columns can have problems with footer display if the column length is not correctly estimated.

Comparing Concepts

Most users are confused between absolute and relative positioning concepts in CSS.  This is because of the coordinate system within which the block is placed.  The block then depends on the positioning context and there is no universal set of coordinates to guide the designer.  Whenever a new block is placed on the page it creates a positioning contexts for its descendents with reference to the upper left hand corner of the page. It another element is placed within the first element, its position will be calculated with reference to the top left corner of the containing block and not the page.  The code fragment below will place an absolutely positioned element with reference to the top left corner of the page.

If a second div is placed within the first one as in the code under, the positioning context will indent the second line 25px from the first as the positioning context determines the position of the second element within the first one.

The font size will also be larger as the second line is treated as the child of the first element and its font size is calculated relative to the first element.

If a third element is added using the relative positioning, it will be contained within the second element. Relative positioning will render the text slightly to the right of the second element within the span.  This is because it calculates the position with reference to the original position on the page.

:<div class="firstDiv"
     style="position:absolute; left:125px; top:75px;">
  This text is being absolutely positioned with reference to the page.
  <div class="firstDiv"
       style="position:absolute; left:25px; top:30px;">
    This is<span style="position:relative; left:10px;
top:30px;">relative positions example</span> is contained within the second line.
  </div>
</div>

In short the absolutely positioned elements are placed relative to the positioning context in which they are located while relatively positioned elements create their own positioning context based on their original location.

Combining Concepts

Absolute positioning is relative!   In reality an absolutely positioned element is relative to the containing block.  The containing block is the nearest positioned ancestor or the document’s initial containing block.  It is a structurally superior element whose property is absolute or fixed or relative.  The following example shows how an absolutely positioned element can be relative to the containing block. The H3  positioned as relative allows the span to be positioned relative to the containing header.

h3 {
  position: relative; / So that elements INSIDE this header can be positioned relative to the header /
}

h3 span {
  position: absolute;
  display: block; / So we can give the element a width /
  top: 3px;
  right: 3px;
  width: 10px;
}

<h3>Some header <span>!!!</span></h3>

Parent child relationships affect absolute positioning.  The position of the child element is determined in relation to the parent element.  The contained element’s absolute position will be referenced in relation to the upper left corner of the <div> element.

A relative element can be nested in an absolute element.  The relative element will be treated as a child of the absolute element and its position on the page will be determined in the context of the parent’s position on the page.  The relative element is moved to its original position in the flow within the parent element. The code for this will read as under:

.relpos { position: relative;
            left: 150px
           }

The markup of the second page will read as under:

<div class="relpos">
<img src="horse1.jpg" alt="Horsie" />
</div>

An absolute element can also be nested within a relative element.  The relatively positioned element is the parent and the absolutely positioned element is the child.  It positioned will be determined with reference to the coordinates within the relatively positioned element. The absolutely positioned element will move if the relatively positioned element is moved.   The css code will read as under:

.relposx { position: relative;
              top: 270px;
              left: 0px;
              border: teal thick groove
             }

The code for the absolutely positioned element will read as under:

.abposx { position: absolute;
              top: 0px;
              left: 150px;
              z-index: 0
             }

z Index Property and Positioning—Absolute/Relative

CSS allows overlay of elements to create a 3D effect.  The elements can be absolutely positioned in such a way that they are positioned in overlapping layers. A stacking happens and the z index order value is used to position the layer in the stack and consequently the image or text.  The code below is illustrative of this technique. It positions one image slightly above the other.

As indicated in the opening sentence, many programmers feel that Absolute positioning should not be encouraged for web page design.  Their contention is that absolutely positioned elements on a web page make for rigidity in design and can cause display problems when they are executed in different browsers and computers with different resolutions.  One solution could be that we create different style sheets for different resolutions and take advantage of the strengths of using absolute positioning of elements in a web page.  As I said earlier, the design of the web page is only limited by the imagination of the designer and the tools he brings into play in the creation of his art.  Scripting languages and object oriented programming techniques are coming up with a number of useful methods of designing and controlling the elements of the web page.  Why not take advantage of them?  Why complain about the problems of absolutely positioning elements?  I would say yes to absolute positioning provided it is used skillfully and effectively by the designer!

Layers and Positioning of Elements

A layer is a type of container.  It can hold text, images, tables and other layers. While layers are extremely difficult to hardcode and a number of browsers do not support layers, they can be used to an advantage for obtaining text and image effects and for the creation of web sites that are creative.  The web designer can also have immense versatility in the positioning of elements on a page.  A number of software, like Dreamweaver have provided designers with tools for creation of layers with ease. 

Using Layers to Position Elements.

Coordinates and positioning are two important attributes of the layer that have to be considered the moment the web designer works on his composition.   The coordinate system x/y begins with the top right corner of the page.  Layers can be stacked or overlapped in the order supplied by the third coordinate called the z-index, which is used by the web browser to determine the topmost layer of the stack.  Positioning of elements on a layer is similar to positioning of elements on the web page—static, relative and absolute. Static positions, as we have already stated, treat the image or text like a block in the normal flow.  Relative positioning places the element with reference to the top left corner of the document.  Absolute positioning takes the layer and the elements on it away from the normal flow and places them in coordinates of their own.  They are not affected by the contents of the page.

Attributes and Positions

An HTML attribute or a style property is called a parameter in web design parlance.  For instance, the ID parameter means either an ID attribute that can used with the <LAYER> tag or the ID Style property.  However, property means Style property. 

The <LAYER> tag takes on pixels as the unit of measurement for attributes that specify the distance.  Style properties are generally numerical values.

The Position property only applies to layers that have been defined as styles and its value can be absolute or relative.

ID is an identity for the layer and must begin with an alphabet.  The ID can be used to refer to the layer in the code.  This is an optional attribute.

The Left and Top parameters are used to specify the horizontal and vertical positions of the top-left corner of the containing layer or page.  The value has to be an integer.

PageX and PageY properties are sometimes used to specify the horizontal and vertical positions in pixels of the top left corner of the layer relative to the enclosing document if there is no equivalent style property specified with the <layer> tag. 

The SRC and Source –include style attribute are used to specify the HTML document that needs to be displayed in a specific layer.  This source file can include JavaScript code and all layers in the source file will be treated as child layers.  This technique is useful if the content has to be dynamically changed constantly.

The chef doesn't have to rewrite the entire page just to update the information about the special of the day.

The Width parameter is used when the layer’s contents have to warp to fit within the layer. An integer value is normally used but percentages can also be ascribed. However if the layer contain images which cannot be warped the layer will ignore the width property and expand automatically to accommodate the width of the image.  By default it will warp at the right boundary of the containing layer.

The height parameter defines the initial height of the clipping region of the layer.  This is expressed as an integer value or a percentage of the height of the containing layer. Like the width property, the height will also expand to accommodate elements which cannot be warped. By default the height is the minimum height for all the contents of the layer.

The Clip property defines the clipping rectangle—that is the visible boundaries of the layer. It takes the top, left, right and bottom values as pixels.  The left and right values are pixels with reference to the left edge of the rectangle and the top and bottom are defined with reference to the top edge of the layer itself.  If the right and bottom values are specified the other two values will default to zero. If no value is specified, the values of the width and height will be determined by the contents of the layer.

Z-Index, above and below are three attributes used by the <LAYER> tag for defining the stacking order of the layers.  Values specified in these attributes will override default values.  The topmost layer will have the highest z-index value. The Above attribute refers to the layer above the referenced layer and the below attribute refers to the layer immediately below the referenced layer.  All nested layers are stacked above the parent layer. 

The visibility attribute will determine the visibility or invisibility of the layer. Pop up menus are examples of setting visibility attributes to layers.  All submenus are created as invisible layers and they pop up on mouse-over events. HIDE hides the layer and INHERIT causes the layer to have the same visibility as the parent layer. This is also the default value. A layer with a visibility set to show may not be visible if there are other layers with the visibility set to show above it. 

By default layers are transparent. The BG-Color and Background-color can be specified to define the color of the layer.   The Background color will be applied to the rectangular region occupied by the layer. If a border is defined in the Style the region will be enclosed with a border in the color specified for the border.  

The Background and Background-image style properties assign a tiled image across the background of the layer. The value specified is the URL of the image.  

OnMouseOver and OnMouseOut, OnFocus, OnLoad, event handlers are functions or inline JavaScript code that can be invoked to make visible or invisible layers. 

Finally the NoLayer tag displays the content as if was not positioned at all.  If layers functionality is required, it will generate JavaScript errors. 

Layers can contain applets and plugins which are special windowed elements that float on top of all layers—even when the containing layer is not visible.  If these elements are moved to the edge of the containing layer they will disappear completely or partially(as in the case of form elements). 

Examples of Layer Positions

Relative Positioning and Layers:

Relatively positioned layers form part of the normal flow of the web page.  These are also known as Inflow layers.  These layers occupy space in the document flow and share line space with other elements of the web page.   The left and top attributes or properties can be set to specify the offset of the layer’s top-left corner from the current position of the document. The <ILAYER></ILAYER> tag is used while specifying an inflow layer.

<ILAYER ID=layer2>
 <P>Sample content for relatively positioned layer</P>
</ILAYER>
<STYLE type="text/css">
<!--
#layer2 {position:relative; }
-->
</STYLE>

In the following code relative position has been used to determine the positioning of layers:
<html>
<body>

Sample ON TOP:

<div style="position:relative; font-size:50px; z-index:2;">Sample</div>

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:1">Sampleagain</div>
Sampleagain ON TOP:<div style="position:relative; font-size:50px; z-index:3;">Sample </div>

<div style="position:relative; top:-50; left:5; color:red; font-size:80px; z-index:4">Sampleagain</div>

</body>

</html>

The web page will look as under:

Absolute Positioning and Layers: 

Absolutely positioned layers can be defined with reference to its coordinates within its containing layer. The top, left corner of the layer can be set using the left and top attributes or properties. However, if these attributes are not set they will default to the top and left of the containing layer automatically.

The absolutely positioned layer will not occupy space in the normal flow and will have no impact on the other elements on the page within the normal flow.  The other elements on the page too will not make space for the absolutely positioned element in the normal flow.

An absolutely positioned layer is created using the <LAYER> </LAYER> tag. If the layer has been defined as a style the layer will have to be created as under:

<LAYER ID=layer1 TOP=200 LEFT=260>
 <P>Sample layer content</P>
</LAYER>
<STYLE type="text/css">
<!--
#layer1 {position:absolute; top:200px; left:260px;}
-->
</STYLE>

If the position is defined as Absolute in the example given for relative positioning, the web page will appear as under:

Note that the top layer has been defined using the z-index attribute in both instances cited above.
 
Layers can be positioned relatively absolute or absolutely relative. In other words the position of the layer can be calculated with reference to the upper left corner (the absolute) or from the position of the layer within which the layer has been placed(relative). 

Negative and positive values are acceptable while positioning layers. The positions can also be changed dynamically using JavaScript.  This opens up immense possibilities.  Whole games can be designed using layers with coordinates and positions defined. Or layers of pages can be created in a stack and clicking on a link can move the specified layer to the top.  

Layer problems

The most irritating problem about absolutely positioned layers is overlapping text. The moment a user resizes his text, all the beautiful layering done by the web designer takes a toss!  The text begins to overlap. While Gecko browsers will allow the text to overflow, IE will expand the layers and overlap the borders of the layers too! The second layer will not move down to accommodate the first one as both are absolutely positioned and are not affected by the changes in the position of other elements! 

Another common problem with layers is that they will not stay put where the designer intended them to stay!  If the layer is designed to be 800 pixel wide and the user has a screen that is 1024 pixel wide the layer will appear to jump a little to the left. While the actual layer has not moved a single pixel, it appears to move because it is absolutely positioned!  In reality it is the table that has moved to the right to remain perfectly centered on the page. Since we do not have control over the user’s resolutions, it may be a good idea not to use absolute positioning? Maybe static positioning would server your ends better? Or maybe you could try setting margin and padding properties to resolve the issue?  

In a sense setting the Margin and padding would solve the problem.  Well ….Almost. The <div> containing the first layer will expand to accommodate the text if the font size is changed and the second layer will move to accommodate the changes in the first layer—rendering the layers correctly. The padding will take care of the space around the border and ensure that the text does not stick to the borders.  A wrapper <div> can be used to enable the text to retain its positions relative to each other and the wrapper can be centered while the text remains at a specified position from the left of the browser viewport. 

Once all the above has been taken care of the designer will still have to deal with Browser bugs.  Width is part of the content area. Any margin and padding added is included in the width in the determination of the area occupied by the element.  Old Browsers do not recognize the box model which describes the width.  Internet Explorer will calculate the width property and subtract the padding and borders before rendering the page. Well, you can imagine what will happen to all the positioning you have done when IE renders the page!

To accommodate this bug in IE it has been suggested that web designers should ensure that the browser renders the page in Standards mode rather than in the quirks mode by including a Doctype in the page.  The designer will also have to take care of the problems of IE 5x.  A number of CSS hacks exist that can filter styles. These can be used or you could use a specific type of code that is called conditional comment.  A code like the one under will be offered to IE 5x.

   <!--[if IE 5]>
   <style type="text/css">
   #smpl1, #smpl2{width: 200px;}
   </style>
   <![endif]-->

This code can be placed in <head> of the document after other styles or link to an external style sheet.  While IE 5x will act on it, other Browsers will ignore it.

Stacking layers

Using Layout Managers

The Concept

Layout managers were created to simplify interface design and free the designer from the drudgery of calculating the coordinates for each element on the page and worrying about properties, attributes and display problems relating to any specific elements.  While the concept is laudable and helpful, it was not the ultimate panacea for the web designer’s problems.  While it was possible to use different layout managers for different containers on a page and these layout managers gave sizes and positions to the components in the window and are helpful for windows whose size changed or were displayed on multiple operating systems, they did not provide the ultimate sought after solution. Complex layouts with nested containers, invisible components all come packaged with their own peculiar problems and layout managers can be as frustrating to the designer as manual arrangement of elements on a web page!

A basic requirement of web design is portability. Standard UI design techniques do not guarantee portability.  What looks beautiful on the design platform may be distorted beyond recognition in other platforms. 

The first portable layout managers were designed in Java with a guarantee of being deployable on multiple platforms.   These layout managers specified rules and constraints for the layout of the user interface.  The advantages of these layout managers were that they correctly positioned components that were independent of fonts, screen resolutions and platform differences.  They provided intelligent component placement for containers when they are dynamically resized. They also provided for ease of translation to make allowances for increase in the length of the string on translation.

The Java UI container comes inbuilt with a special object called the layout manager.  This component controls the components in the container.  It automatically arranges the components in accordance with the rules, properties, constraints specified by the layout manager.  The preferredSize, minimumSize, maximumSize, alignmentX and alignmentY and the size of the container are specified.  The user can accept the default layout manager or override the settings and specify a custom layout manager.

All layout managers use absolute positioning.  Therefore, components do not adjust automatically when parent containers are resized.  The properties of different layout containers are as under:

BorderLayout has a hgap(horizontal gap) and vgap(vertical gap) to determine the distances between the components. Each component has a constraint value with possible values like North, south, east, west and center. 

FlowLayout and GridLayout properties can be used to align components with reference to the vertical and horizontal gaps.  GridLayout also has the option of specifying the number of rows and columns. 

GridBagLayout has no properties.  However, it has GridBagLayoutConstraints object associated with it which has properties of height and width of the component linked to it.  It also has information about where the component in anchored in its cell, how the component fills up the cell, or how much padding surrounds the component inside its cell.

Java uses different types of information to determine the position and size of components placed in the container.

Layout managers in C# were different from the Java layout managers.  While Java relegated layout managers to Graphical User Interfaces, in C# anything that implements Ilayoutable interface can be laid out.  Moreover, since the layoutable objects are abstract concepts, distinct areas of the parent component can be laid out.  This gives a lot of power to the web designer.

Layout managers in Visual Studio 2003 are analogous to the layout managers of Java in that it implements Flow layout and Grid Layout.  ASP.NET 2.0 introduced Master pages as a layout concept.  Master pages implement standard visual and functional capabilities throughout the web based application and work in conjunction with content pages.  Content will be populated into the placeholders for content provided in the master pages.  Personalization features, takes the concept a little further by allowing users to select and populate their pages with components.

Layout Examples

TLB pages

TLB stands for Translation look-aside buffer.  This is a table in the processor’s memory and contains information about the recently created pages in the memory.  The program’s virtual memory is cross-referenced with the corresponding absolute address in the physical memory.  This enables faster computing.  The TLB contains about 64-256 entries. The number of entries in the TLB is multiplied by the page size defined in the TLB reach.  This is critical to the performance of the application and the performance begins to degrade once the TLB reaches the critical point.

During the recent years the TLB is failing to keep pace with the increasingly large working sets of applications.  Modern processor cache is getting large and few microprocessors have a TLB reach larger than the secondary cache for conventional page sizes.  TLB misses become more common while accessing data from the cache and this increases the latency to memory.

Efforts are being made to increase the TLB using the memory controller TLB.  This will let the designer aggressively create super pages from non-contiguous, unaligned regions of the physical memory.  Shadow pages are supported by the MTLB and this greatly empowers the Operating System’s ability to swap shadow-backed super pages more efficiently.

Header and Footer Pages

Sites that are several pages long would like to introduce a header and footer that will look identical on all pages. This header or footer should be capable of being changed when the designer wants to change the look and feel of the site.  Header and footer pages are generally HTML pages that are part of the “includes” in PHP or master files in ASP.NET. Look at the following file created in PHP. 

<html>
<head>
<title>Welcome to this sample site!</title>
<style type="text/css">
a {
// lots of styles
}
</style>
</head>
<body background color="black">
<img src="header.png" />
<div style="postion: absolute; mycontent"><b>Sidebar!</b>
- Navigate
- Navigate
</div>
<div>Content!!!!! mycontent</div>
</body>
</html>

Concept of Templates

Much of the tasks in web page design are repetitive. The need to maintain a consistent look and feel throughout the site, the familiarity of users to the positioning of buttons and navigational elements and so on, makes it inevitable that some of the aspects of the design are repeated again and again.  This results in a lot of time being expended on doing the same tasks over and over again.  A template separates form from content and helps web designers layout elements on a generic page that can be called to provide the consistent look and feel of the website. Today, template designs provide a way of enforcing layouts, defining sets of privileges, style and content for multiple pages.  The template can be divided into regions and tabs and styles can be applied to specific regions and items such as portlets can be added.

At the other end of the spectrum, the user too, benefits from templating.  The web designer now has the option to define themes or skins for web pages which can be accessed by users who wish to give a special feel to his page while retaining the underlying template that defines the look and feel of the website. These themes and skins are nothing but elements of a web page that have been pre-positioned for immediacy of deployment.  With ASP.NET 2.0 the web designer can provide a repository of components to the web user for dragging and dropping into the web page.  The end user has the freedom to position the elements on the web page!

Evolution of the Concept of Templates

The web designer needs to feel that he is in control of the way in which his web page displays the elements he has so carefully positioned. The end user wants to feel that he should have the ability to personalize the page to suit his tastes.  There is a constant conflict of interest and the concept of templates has evolved from this fundamental need of both the designer and the user. 

Paper templates for entering structured information have always been around. The first web pages were designed as if were extensions of the paper format.  Task based forms on the Internet, even today; share many of the features of the paper format.  The word document is a template of the paper and Microsoft Word provides a large number of templates for jobs such as letter writing or resume writing. It enables users keep structure and content independent from each other and makes designer experimentation with templates wholly possible.

The initial web pages were static pages and the initial efforts were directed towards experimenting with variations of the static page. 

The Cascading Style Sheets were the first efforts to distinguish between form and content.  The possibility of creating “Styles” to which web content could be linked suggested undreamed of possibilities.  A number of designers began to experiment with form.  In fact it became such an obsession that flashy, buttons, colors and designs began to dominate the web.  Form seemed to take precedence over content and communication. The moderate members of the profession vociferously expressed their discomfort with the state of things and a balance has gradually been achieved. 

Server side coding for templates emerged in the 1990’s.  The Common Gateway Interface was first typically used in Unix Web servers for AWK report generator or M4 templates.  The Server side ‘include’ helped in defining a more direct way of creating server side scripts on web servers.   Web portals, then, catalyzed the whole and web designers began to experiment with “template languages” and talk about the need for a “template standard language”. 

A template system now consists of a template engine that processes web templates and content information to produce web documents.  The template engine can also be used as part of a preprocessor, filter or template processor.  Programming languages such as PERL, Ruby, C or Java all support template processing natively or using add-on libraries and modules.   Java Server pages, Active Server pages, PHP are template engines in their own right. XSLT and Xquery designed by W3C have emerged with promises of future convergence of template languages!

Templates can be simple “substitute templates” or masks where place variables are substituted with the web designer’s content or can be complex templates using XSLT schemas.   Masks or substitute templates are the first server side includes that created uniform headers and footers on the web page. Complex templates provide for standardized layouts using a single base layout over which other layouts are superimposed.

A template can be defined as a piece of code that uses preset variables to expose data on a web page. The template can be further categorized into data templates and theme templates. Data templates are base templates on which theme templates are superimposed to give a customized look and feel to the web page.  

Templating?

A template is a kind of wire frame for the web page. The elements that must appear in every page on the website can be laid out in the frame to form a basic layout for the whole. The “All page template” is a general layout background for the website with a fixed header and footer with an “all content” variable.  The block template is a segment or component region of the page with a specified layout block.  The menu block that usually appears on the left hand side column of the page is an example of a template layout box in a dynamic web site.

Strongly template oriented websites have databases that receive only pure content while the form is determined by the template and are not impacted by the content that is displayed on the page.  Weakly template oriented websites allow the template design to be affected by the content and the template rules are changed every time the content changes.  While the former can make for rigidity of design the latter can make for non standardized web pages.  Providing for themes and skins probably emerged from a desire to mitigate the rigidity of strongly oriented web templates and to overcome the weakness of the weakly oriented ones.

The template file is a single file that may reference other resources for logical dependencies or layout dependencies.  The file is formatted with specific markup and reflects the template system strategies of the website. It uses scripts to provide instructions to the template engine and can be an embedded template language or an event driven template language. Embedded template language embeds the template script into a host language(old processor languages), while in an event driven template language (such as XSLT and filter languages) the template script treats each block as a separate event definition. 

A template language formalizes the variables, blocks, substitution rules or logic in a web template and the standards that can be fixed into engine dependent or independent contexts in accordance with the type of language selected. 

Simple substitution templates have only syntax rules and no logic and iteration. Iteration templates are similar to simple substitution templates but have inbuilt iterations that can repeat a substitution in the scope of a single block or several blocks.  Programmable templates call functions that execute and impact the state or value of other variables. Complex templates have unrestricted logic and specify sequential algorithms and permit parameterization.

Templates also fit in with the concept of object oriented programming. It encapsulates the concept and functionality so that it can be modified minimally without impacting the other parts of the application.

If there are a large number of templates in a web site, template management demands the use of the Layout manager.  The layout manager enables the management of layout in addition to the management of content in a web site.  We shall be dealing with layout managers in greater detail in a later chapter.  So we shall not say much more than this here.

This chapter however, would be incomplete if we do not mention personalization, even though the details would be beyond the scope of this book..  Personalization of a site is the process of creating templates that filter and target the information displayed on the web site on the basis of the user’s identity and predefined needs.  The pages are tailored to the user needs and are a common form of enhancing customer service or e-commerce sales and marketing.  Personalization software includes software like Broadvision, ResponseLogic and Autonomy. ASP.Net personalization features take the whole technology one notch higher by allowing the user customized even the components that will be placed on the web page.  It introduces an generic storage system object called “profile’ which makes it easy to track and apply user preferences on web pages.

Web design is maturing.  It is becoming modular, object oriented and more scientific.  It is concerned about usability issues and is focusing on creating websites that are user friendly and cross browser compatible.  Positioning elements on a template and then deploying them across the website is a challenge by itself.  Absolute positioning of elements in a template based web site is an absolute challenge.  We shall be exploring this in a later chapter.

Pages, Page Sizes and Positioning of Elements

Ultimately, what the user sees is a page.  The layout of the page will impact on how the user rates the website. Flashy buttons, animations that distract and positioning of key elements including content, will all make the difference between the success and the failure of the page. This chapter intends to introduce you to the broad concepts that govern page layouts and how it impacts the overall impression that the web page creates on the user. 

Proximity of elements is the distance between the locations of elements on the web page.  Proximity determines how elements relate to one another whether they are text, navigation or graphics.  Elements that are placed close together appear to have a stronger relationship than elements that are farther apart. 

Generally speaking, elements that are close together appear to have a stronger relationship than elements that farther apart.  For instance a caption for a picture must be placed directly below the picture and not a few inches below if it must establish a relationship.  A subtitle must be directly below the title if it must make sense.  A layout that positions elements in an unrelated manner is likely to be termed as weak.  Therefore, positioning of elements on the web page will impact of the page on the user. 

Alignmentis one of the most critical principles of site layout that must be taken into consideration while designing the pages and positioning the elements of the page.  It not only disturbs the readability of the page, but can also detract from the appearance. On most pages the alignment is from left to right.  It provides a good starting point for the eye movement and the eye of the user is accustomed to this style unless he belongs to a culture that reads from right to left customarily.            

Repetition is the art of saying the same thing over and over again without boring the reader with the intention of getting a point across. While web pages do not have to be the same across pages, users welcome repetition of some of the elements with slight variations for consistency.  . For instance, placement of the logo on the upper left corner, the menu bar at the top of the page and so on adds to the look and feel of the site and provides a strong sense of familiarity to the user.   

Contrast is used to make things stand out significantly.  For instance the white of text against a dark background or the use of dark colored text on a white background.  It makes reading easy and helps highlight it.  Contrast can also be used to attract the attention of the user to a particular object on the page—such as a freebie or a competition announcement by making the text larger than the surrounding text or printing it in a significant color or positioning it in the middle of the page.           

Navigation is another element that is carefully positioned on pages to hold the attention of the reader. It is a very important element on the page as it helps the reader get around the site with ease.  Research has revealed that positioning of navigation elements is one of the main reasons that determine how long a visitor stays on the site. 

A number of navigation styles have consequently developed. The most common one is to position the navigation buttons at the top of the page so that they are visible to the user as soon as he enters the site.   Sometimes Navigation is provided for on the left of the page and sometimes on the right.  A few sites prefer to have the navigation buttons at the bottom of the page.  Some place it horizontally and some vertically.  The type of site and the style of the site will determine the kind of navigation style that is used.   

While top and left navigations are common and familiar to users, bottom navigation is advantageous when the pages are long and the user has to scroll through the page back to the top if the navigation is placed at the top. Sometimes the navigation links are duplicated at the top and the bottom of the page for ease of operation.  

Text is the primary means of communication on a web page and hence has to be positioned in a central place on the page.  Text is also displayed on different browsers in different ways because it relies on fonts installed on the user’s computer.  So positioning of text and use of fonts that display well across browsers becomes an important aspect of page layouts. Almost all PC users have Arial and Times New Roman installed and Macintosh users have Helvetica and Times New Roman.  So it would be safe to stick to these fonts while positioning text on the page. 

It must also be remembered that users read as a group of words. The size of the text then becomes the key element that determines how easy or difficult the text is to read.  Large text is difficult to read if they have to read two words at a time and small text is difficult to read if groups of words are too closely packed. Consequently, it may be advisable to define the font size so that browser settings do not override the text and distort the page. 

High contrast between the text and background also makes the text easier to read.  Red and blue texts create perception problems and should be avoided.            

Page Size and Layout is extremely important factors in positioning of elements on a web page.  This is one of the biggest challenges faced by web designers.  Variability of screen sizes is incumbent upon the settings adopted by the user.  Most computer monitors are set for 800 X 600 pixels.  However, some monitors go in for lower or higher pixel settings.  This can play havoc with the page and the positioning of elements on the page. Therefore, the web designer must create a web page that caters to all the different monitor settings and yet display well!  

As pointed out earlier, knowing your audience is crucial to the kind of web page you design and how you place your elements on the page.  If the audience is using older computers, then the screen resolution should be set for 640 pixel wide screen.  If the audience is fairly tech savvy, you are likely to have an audience who has the screen set to 800 pixels and if you have a specialty audience then they are likely to be using an extremely wide monitor of 1024 pixels.   

However, if your audience is extremely varied, then it would be best to design your screen for 640 pixels, center the page and allow the browser to display your web page smaller than the screen width.  In this way you will not be sacrificing the positioning of elements at the altar of the screen width. However, there will a lot of “dead space” around the page, which cannot be used by the designer. 

Tables have been around for a long time as a method of laying out the pages.  These are used to control the width of material presented on the web page.  The table width is specified as a percent or pixels. Percent will cause the table size to change depending on what the viewer’s screen width is.  The display is fairly uniform across browsers and screen sizes.  It follows that the screen will be narrow in one monitor and wide in another if pixels are used to define the tables.  

Use of frames in more elaborate websites throws up its own problems of positioning elements. It is also a moot point that a number of browsers do not support frames.  Frames work by splitting up the browser window into two or three regions and displaying a separate page in each region.  The problem of page layout is commensurate with the number of pages and frames on the screen at any given point of time.  Each is an independent page and the positioning of elements in one page has nothing to do with the positioning of elements in another frame.  One method of getting around the problem of frames and yet taking advantage of its capabilities is the use of a single large frame on a web page.  It helps control with precision the placement of images and other items on the page.  While a large number of browsers don’t support frames, they are more widely supported than layers or stylesheets and they open up the site to a wider potential audience. By adding the <NOFRAMES> tag and simply making a few minor adjustments to the framed area alone, anyone would have access to the information without having to build different versions of the same site. 

The concepts of frames has been taken a little further by the use of iframes which was popularized by Microsoft Internet Explorer 3.0 and is now supported by Netscape 6 and opera 5.  An iframe is an inline frame that is not bound to the side of the browser window. It floats free and can sit anywhere in the window.  It goes where it wants to go and displays whatever it needs to display. It obviously gives the web designer some undreamed of advantages. 

The next kind of page layout that is often used is the Style based layout. All style information is stored in a separate style sheet and <div> tags are used to place elements in right positions. By itself, the <div> tag is inert.  It becomes active when it is combined with a style sheet rule.  Most of these sheets use CSS positioning techniques to place their elements on the page—especially relative positioning.  However, special effects can be obtained by using Floating boxes or Absolute Positioning techniques.  

Layering is another method that is used during page layout to place elements on the page so that users have easy access to them.  This type of layout is done sometimes deliberately to create dramatic effects.  When overlapping layers are used the designer must inform the browser how the element goes into the z-index and which elements are high on the z index and which are lower. 

Well we have briefly explored the elements of the page, the size of the page the layout of the page and positioning of elements, generally, in the context.  The chapters preceding this one and including this one was intended to be introductory.  The idea was to ensure that you had all the concepts in place and that you truly appreciate the problems of the web designer who sets out to design his web page. Well we shall now begin drilling into each of the concepts in the context of absolute positioning of elements in the later chapters of this book.           

The user visiting a web site wants to find something.  You as the designer must make it easy for him to do so.  If the user leaves the site without finding the element he is looking for, you as a designer have failed to deliver.  The positioning of the navigation elements and other elements on the site directs the user to the element he wants to find. A number of site organization models have been developed to assist web designers create usable and navigable web sites. In this chapter we shall briefly look at some of the organization models that are in use today. 

Logical site organization models. 

An efficient ordering of information is what users are looking for.  Real content should be tucked away only a few clicks below the surface.   The information can be simply placed in a sequence or in hierarchies.  Web like organizational structures have several advantages, but tend to develop into dense links that explore information nuggets fully from multiple dimensions.   

Site diagrams are used to evolve the site and act as the core-planning document that is referenced every time a change is proposed.  Positioning of the different elements on the web pages and the location, accessibility of the pages is defined in this document. 

Clear, consistent icons, graphic identity schemes and graphics or text based overview and summary screens can give the user a bird’s eye view of what he is looking for. Users should not be confronted with complexity.  Interface metaphors should not be obscure or culturally insensitive. It is of paramount importance that users should always be able to return to the home page.  This is usually taken care of by providing users with a button bar at the top or bottom of every page. 

Site organizations are generally Linear, Hierarchical or Circular.   The type of navigation used defines the site organization that has been used. Linear layouts direct the user from page to page one after another.  This type of design is best suited for web sites that require the user to perform a task linearly such as registering for a seminar. Hierarchical layouts are used when information has to be presented hierarchically.  The user is provided with multiple paths for reaching the target page. Circular layouts are most suited for large sites where volumes of information are stored. Circular sites are designed with entry pages that allow users reach any page from anywhere. 

Every web site begins with an home page. It is the logical entry point of the web site. In hierarchical site organizations the home page is the apex from which all other pages flow. The top of the home page is the point that attracts the eye of the user when he arrives at the home page. So any element positioned at this point attracts the attention immediately.  If the site aims at efficient navigation, this space should be dense with links.  Menu home pages are the most common type of home pages.  These pages are dominated by text or graphic links.  News oriented home pages put live/hot news on the home page with links to details in other pages. Path based home pages are known for sheer breadth and depth of site content.  This type of home page helps split audience into interest groups and to offer them user specific information.   

Splash screens are controversial entry points.  This type of entry point to the web site is more attractive in an entertainment site rather than in an information site. 

Tabled?

Tables are one of the primary tools that are used by web designers to gain control over elements of a web page. They also offer visually interesting organization of text and graphics.  They help the designer designate specific parts or columns and rows for menus, navigation bars or for framing images or content.   However, browser support of tables is still a matter of concern and many designers resort to table-less layouts for browser compatibility and uniformity of display across all browsers.  

Text tables require the use of preformatted fonts for better display.  The use of <pre> gives the designer control over column alignment as the tag ensures that the same amount of space is used for every character, irrespective of the width of the font.  Several text-based browsers can only display text tables.  

Special tags are used to create graphical tables.  Borders, colors, shading, backgrounds, frames, spacing and padding are some of the attributes that are pressed into the service of the web designer. The table attributes of height, width, alignment, row and column spanning are taken advantage of.  Nested tables are a common feature.  However, tabled layouts can pose complex design problems that designers must familiarize themselves with before launching into tabled web designs.

Visual formatting of tables is specified as a rectangular grid of intersecting rows and columns organized into groups.  The borders defined around them may indicate Row and column groups. Data may be aligned horizontally or vertically within a cell or in all cells of a row column group. Positioning of cells as float or absolutely, may cause the cells to cease to be part of the table.  We shall deal with this in greater detail in a later chapter.

The optimal layout for tables is not defined in CSS.  However, the constraints that designers must appreciate while laying out the table are specified and the algorithm may be customized to the needs of the designers, except in the instance where “fixed layout algorithm” has been selected.

The advantage of using tables is that they are flexible.  They can spread out to cover the whole page or they can be forced to occupy specified regions of the page.  The disadvantage of using tables is that they create bloated volumes of code, increase the size of the file, impact the loading speed of the page on to the browser, are labor intensive, and mixes presentational data with content.

Table-less layouts in CSS are achieved using Structural markup language.  This just requires a different kind of thinking hat. We have to cease thinking about the format of the page and start thinking about the structure of the content and information. Content is released from the table cells and wrapped into <div> tags.  The div elements or id or class describes their content and function rather than their appearance. The advantage is that meaning can be conveyed to the user even if he cannot see the web page!

One of the simplest methods of creating a column-like layout, using CSS, is defining percentage-based positions for elements.  Other relative units of measurement can also be used unlike in tables. For instance the em attribute enables the calculation of the size of the element will be determined by the calculation of the size of the text in the element.

The limited support to tables in IE 5, Netscape 6 and Mozilla, the need for a different method of laying out the pages is welcome.  Float and clear properties can be used to make texts flow around images.  Objects can be positioned with reference to the bottom right or z index can be used to layer objects. 

While tables provide a relatively useful framework for emulating the printed page, they are not very useful in providing tools for designing new ways of presenting information.  CSS positioning is more dynamic and provides more scope for innovation.

Framed?

Web designers use frames when they wish to display multiple HTML documents on a single page at once.  The implementation of frames was introduced by Netscape Navigator 2.0 and was not backward compatible and is not supported by a large number of browsers.  Web designers who use frames have to double their labor by designing web pages that use frames and ones that do not use frames to cater to end users viewing the page through different types of browsers!

The first task is to set up the frameset document. This document differs from the normal HTML 3.2 document in that it does not have a BODY element. The frameset determines the number of rows and columns and their respective heights and widths.  Nested framesets are also factored into the page when the frameset is set up. 

Rows and columns are defined, by first describing the outermost set of rows and columns and then replacing the FRAME element in the row or column, to get the nested innermost FRAMESET element.

Frames have several drawbacks.  The image load is never off in Netscape Navigator. Combination of frames cannot be book marked and there are no URLs associated with framesets. Frames break up the integrity of the page and distract the attention of the user.  Navigation does not work with frames.  The unit of navigation is distinct from the unit of view. 

Frames also present a number of implementation problems to the web designer.  Users with browsers that do not support frames (they are a significant percentage) will not be able to view the pages in the way it is to be viewed. The BACK button does not work with framed sites.  Additionally framed sites present a number of print problems.  Search engines too have troubles with frames, as frames are not navigation units in their index.

Nevertheless frames are still popular design mode with many web designers who wish to implement specific features in their site.  The use of frames, while vehemently opposed, had its own set of loyal followers.  The future of this feature of web design will depend on the skill of the frame advocates in proving the usability of the technique.

We shall look at frames from the perspective of positioning elements on framed pages a little later in this book. 

Positioning of Elements and Audience
 

The Customer is the King!

Information alone is not the primary goal of website users.  They enter the website with the curiosity of a child entering a new room.  They expect the different items to be placed exactly where it should be and expect it to be in the shape that they are accustomed to.  Anything that does not conform to the norm is probed or discarded as unfamiliar territory depending on the kind of user he or she is. A web designer setting out to design a website that is experimental may be in for a shock.  The audience may not appreciate his efforts for the simple reason that the shapes, colors and dimensions of the web page are not relatable to anything that they have experienced! "Human needs should be the guide for our technologies." —Ben Shneiderman  

Therefore, a detailed understanding of the audience needs in creation and positioning of elements is an effective metric of good web design.  So if you know who your target audience is you can design for them meaningfully and efficiently.  Positioning of elements in your website is all about organizing your content into logical, user oriented sections and prioritizing content in order of importance to your target audience. A point to be considered in this context is that elements placed below the fold (point at which the user has to start scrolling), will receive less importance than the elements at the top of the page.   

Positioning of elements is all about being conscious of the culture of communication in the region and sensitively arranging the elements in accordance with the expectations.  For instance, most cultures read a document from left to right, but some cultures read it from right to left and expect the elements to be placed accordingly! 

Demographics will help you distinguish your audience on the basis of gender, income level, age, religion, geographic location and so on.  A study of the environment in which the section of audience lives will also help you determine what they will find appropriate.  If you look a little deeper you will perhaps explore their motivations and intentions and arrive at other expectations that are not immediately visible.  Finally, while studying your audience you need to factor in issues of hardware and software limitations and technology awareness levels.  It is also necessary to address browser issues that can distort the best-designed websites.  

Type of Websites

Each medium of communication has its won unique constraints and this can impact the principles and elements of the design.   The constraints may be based on a variety of factors which may include the customer expectations, the purpose of the web site, the technology used, the processes and standards of the industry and so on. The environment creates a unique set of constraints in the placement and positioning of elements in a web page.

Commercial websites are websites that sell products or services to its customers. A right combination of art, technology and communication skills are vital ingredients of a successful commercial website. The user should be able to understand at a glance what the website is selling and should be able to access the details with ease.  They should be able to select the product into the proverbial shopping cart, see their selections, confirm the selections and pay for them.  Shipping information, time that will be taken etc should be displayed prominently.  So the positioning of these elements on the website will be of primary importance.

Personal websites are information sites normally accessed by a closed group of people or people with similar interests.  The type of information being provided and the type of audience who will access the information will determine type and positioning of elements.  The intent of the website should be clear when the user enters the site so that his expectations are correctly oriented.

Organizational websites are created to advocate and individual opinion or a group’s point of view within the organization. Message boards, chat forums and discussion groups are usually the pages that are frequently accessed by these groups.  The websites should be designed to instantly give the user access to all the above elements. 

Educational websites are designed to provide information about educational institutions or to present study materials, tutorials and so on to the students. The user should be able to see the list of lessons and navigate to the required lesson with ease. He should be able to access, the applications, registration forms and other aspects of the website that are essential for him, with ease.

Entertainment websites are created with an intention to provide users with a variety of entertainment avenues.

Ne