Introduction

The blog entry presents my study of the grid based web designing technique, the designs of the web sites have been changing in the life of World Wide Web and html. The html has been complimented with CSS to cater the design requirements and the consistency issues with the web sites. With the start of web 2.0 the CSS has been playing an important role in the web design. The blog entry will discuss a new trend in web designing that is intended to cater the semantic web requirements and provide a flexible yet consistent design framework. Below we will be discussing the interface and interaction considerations of the grid based design, the users experience and the layouts that are used for different design frameworks. The discussion will see how grids present the content and create the balance in the web design, the resolution considerations and usability factors. The frameworks for the grid based web designing and the examples of the implementations.

 

Web design

Web design is all about planning and creating the web templates and web pages from which user can get information. Planning and creating a website from which user can get information is also called as web design. Usually web designers used to use images, text, digital media and interactive elements to display the information to different users with the help of web browser.

For this purpose web designers uses different kind of languages in order to perfectly describe the information that they want to display in the web browser. Usually mark-up languages are being used to design the web pages. Html and CSS are used markup languages that are being used by the web designers to display the information and the hierarchy of information elements. Besides this designers use java script to add different kind of interactive functions.

The whole process of web designing includes different processes which include research, advertising, planning and conceptualization etc. The whole web design is divided into different web pages. Different hyperlinks are being used for the purpose of navigation between the pages and within the pages as well. The color of hyperlinks is usually blue and underlined. Designers can use images as well in order to replace the hyperlinks.

From a technical point of view, the art of web designing is difficult. It is so because it is very much different as compared to the traditional print media. Web design usually has to be displayed at a no of web browsers. So the html that is being written to design the web page reflects different view in other browsers. So it is difficult for the designer to write the html for all the web browsers that render the html to show the view or information. Designers usually use the html standards made by the W3 consortium so that they can display the information same as on all the browsers.

In spite all of these web designers also check and balance the different monitor sizes on which web pages and information is being displayed. For this purpose they use different kind of techniques that vary from browser to browser. So they need to check the web pages for all the sources and media.  The discussion that the design of web pages can have many elements of architecture is a interesting fact and web pages are designed to cater different needs of a design. The design consists of many architectural elements that represent the structure of the design and the content as well. A well knows and famous approach is grid based design. This technique is popular for its purposefulness and discrete nature. There are many critics of this technique as well. The argument goes on as we discuss the details of the grid based design technique and its related concepts.

 

Grid based design

The grid based web design techno is relatively new technique the prior methods are used to use the control structure that is easy to manage. This property is still available in the grid based designs and the new standards and protocols are being developed to cater the new needs of semantic web. The nature of the web designs changed due to the overwhelming requirements of the semantic web and the growth is rapid due to the increased interest and involvement of the open source community in the web design frameworks.

To make a mark in the history of web development and design the designers and the framework specialists are working on the new grid based design principles. The gird seems to cater the current needs of the design and make up with the design and technological trends. This includes from the traffic ratings systems to the screen resolution available in operating systems now days. The grid system is developed to maintain a balance between the layouts of the website. This way the grid system is able to provide the consistency in the layout and also is flexible in working among different browsers and frameworks which provide the design utilities.

In the early years of web development the computers tend to support the classic resolution of 800×600 and in the last decade it was standardized to be 1024 x 786. The resolutions of the new systems and machines are growing very fast and the support for higher resolution is not ending soon, so the web designs and the frameworks should be built to support such trends. Technically speaking a web page is structure of horizontal and vertical pixels. So the designers are to be aware of the fact, the designs that we make have to be set to a standard height and width. This causes a dramatic effect on the artistic abilities of a designer.

The designers use graphic suites like adobe Photoshop to make graphic elements like logos and banners, and design the whole web sites; the designing parameters in these graphics suites are different from the html and CSS. So this difference makes the web designers to think like if they are building a grid based framework for the html elements. Grids are included in the html from very beginning so to include the design elements in the web pages in a structural manner.

Grid Structure basics

The grids are structure invisible mostly and contain the elements that are to be shows in a webpage. The structure consists of columns of the elements; it has to be as wide as the size of the elements added. The container should be subdivided into a collection of containers. These containers in turn contain the web elements. For example if we have to put two columns in a grid, the grid will have to be divided into two subdivisions. The subdivisions will be aligned to the left and right to the grid container. The grid out container will have a clear fix class to provide this property.

The Grids have all the elements separated by a space so the padding is included in all the elements; the gutter is also included for this purpose. These elements make the grid structure and are flexible to work with fixed layout designs and also for the dynamic layout designs.

To define a grid based web page the following can be a fine approach for starting the designing. The first thing to decide is the width of the page we are going to design, the for the 800 resolution the 760 pixel is to be designed, and for a 1024 resolution the 960 pixel is to be designed.  The next thing is to decide which kind of grid we have to implement, the number of columns that we have to implement and the sizes of these columns has to be determined. Then we have to do the math for the content, the page is divided into the columns we have to be implement. After this the implementation of the grid layout is designed, where the columns are to be merged and where to be the vertical spaces needed. The rhythms for the design are defined. The next step is to define the gutters and margins. This will complete the design requirements for your design and now you are able to implement the design.

 

Page Rhythms

The Rhythm of the page is the essentials part of any web designing framework, the rhythm defines the spacing and typographic styles in a web page and web site. The grid based frameworks provide the pages with the vertical rhythm of pages. The factors that has to be considered in defining the rhythm of the design use the vertical spacing between the lines and the line height, the definition of the scale of the characters of text in the content. The line height is defined by pixels or sometimes in ems, the solution is to apply the style to all the elements such as headings, subheadings, images and anchors. So as to define a consistent rhythm. This also allows us to cater different environments and different resolutions. Just be switching the styles of the elements.

 

Tools for implementing the Grid system

There are many tools available to implement the grid system for your website. Some of these are discussed as follows.

Modular Grid Pattern: this is an extension for Adobe Photoshop and provides a way for creating the modular grid system.

Frak: it is a framework for fluid grid and provides the functionality of designing nested grids.

phiRatio Proportion Calculator:  this a calculator for calculating the proportions for the elements of the grid. It helps us calculate many proportions for the sizes of out grid elements.

iPhone Grid System: this is a modular grid system with 480 x 380 for iPhone applications, the grid system has 40 pixel units and 5 pixel gutter.

Griddy: this is also a tool that provides the overlay creation facility on any element in the grid.

 

Examples of grid based E-commerce implementations

For the study of the grid based design solutions we have to consider some examples of the web sites that follow some grid based design framework, below is the discussion on the websites that implement the grid based web designs.

The first example of the grid based design is the BBC UK site. The www.bbc.co.uk implements the grid based design so to present the elements of the content in a visually balanced approach. This design has a visual clarity between the elements in vertical position and implemented the vertical page rhythm in the design so that the vertical positioning of all the elements is distinguished in a way to make the most in the accessibility of the content.

 

The design provides a consistent look and credibility in the layout of the design, the pages als implemented the typography design solutions using grid based design.

The grid is distributed into six subdivisions and provides six columns for the sub elements for the individual html elements. The grid provides the flexibility to make

The second example is the grid Tesco website that provides the grid structure for the presentation of the content. The screen shows the distribution of the page into six columns and the horizontal and vertical separation of the elements in the page.

 

The structure of the web design is more closely match the 960 grid framework and presents the distribution of elements from top of the page to the bottom of the page.

Grid based design frameworks:

Then popular frameworks are 960gs grid framework and 978 Grid system, both provides the considerable development usage in the field and they have been used by a lot of websites.

The web designer’s community has been developing frameworks for the designing and these framework provide the standards for the designing professionals. One such system is the 960gs, although this is not the best system but it is in some cases, the usage of system depends on where the system is to be used.

Therefore all the systems do not cater all the required features. The 960 is easy to implement and is applicable to almost all kinds of websites. Another factor in the success is that it is rendered in most of the browsers.

960gs

The basis of the framework defines that the page is to be divided into 12 grid columns, each column has 60 pixels width, and 20 pixels in margins (10 on both sides). This way the gutter between the columns is 20 pixels. To cater the design needs of our page we will merge the columns into a grid structure that will contain our content. In the content we can include the images and other interactive content.

The 960gs is popular also because many screens support 960 and this will give us a space for the content which will display without scrolling to left or right side.

The 12 column design is used to distribute the content into the page, it’s not for strictly following and the columns can be changed to fit the content into. The grid only provides the basic layout and provides interactivity among the elements and guides in the placement of the html elements into the page.

The maximum sized element in a grid is 940 pixels in width, the 20 goes to the gutter. Most of the times a minimum two columns are included in the design. It is very rare that an element is so large to be contained in a single column. The gutter between the elements and the sides of the page keeps the elements separate from each other, with the increase in the columns the gutter spaces are increased and the total space occupied by the content is decreased. The kind of columns that can be defined in the 960gs are shown in the figure below, these are just some possibilities and are not limited to this.

The grid can be designed to flow between the large and small columns; this means that the grid can have some sections with the larger width columns and some sections with the smaller width columns. The segregation is shown in the above picture. The page when designed is broken down into the pieces that fit in some kind of arrangement as above, the division of the content is done on the basis of accessibility and usability factors.

There is a concern among the critics of the grid system that the grid is a hindering force in the creativity of the designer. The grids can have any number of columns that the content can have and they can have any elements, the only thing that the grid caters is that the basic structure should be followed. So the designer can design creatively that also fits in the grid system.

The other grid systems that are popular in the web designing community are YAML, 1040 grid system, 1KB Grid, baseline CSS, and blueprint CSS Grid. These all are discussed briefly below.

The 1KB grid system is a grid framework that is defined using CSS and provides a fast layout CSS implementation, the layout of your design is placed in a CSS that is in the local system so providing the faster download time. The grid system allows us to define any number of columns and any number of pixels in the margins so that we can design the page creatively. This is a simple framework and can be used to learn the grid systems.

The second in the list is the Baseline CSS grid system, this is merely a CSS template that can be used for the designing of the web pages. The system has implementation of grids and the CSS styles for the typography and block elements. This framework has been written to support the CSS3 version and the upcoming HTML 5. Thus this is a best example of the adoptability of the grids in the form of upcoming frameworks for web design.

Another Grid system is 1040 CSS grid system as name suggests the grid is designed for 1140 pixels, the grid provides the same 12 columns for the content placement. The grid is system is getting popular among the designers of mobile websites and for hand held devices.

Another example of the grid system is YAML grid system, this system provides the framework for developing layouts that can be used for fixed layouts and also for fluid layouts. It is the good solution for the large scale websites.

The last system we are discussing is the blueprint CSS system that can be used for your projects, the system can be extended with new classes, the system already provides the typography styles for many resolutions, and many devices.

 

Layout Types

The layout is the placement of elements in the structure. It defines how the element locations are defined and how the addressing of the elements and blocks are done in the system. There are fluid layouts and grid layouts mostly in practice now days. These will be discusses in the following discussion.

 

The fluid type of layout is not mostly used in the grids, the fluid layouts are difficult to understand and implement as they have to be in percentages and ems, the measurement in the pixels is easier to understand and manipulate. For implementing the percentages in the CSS we have to take care of the some CSS and Html layout properties.

One of the popular implementation is the Fluid 960 system, this system can work on may screen resolutions and many browsers and devices. Other fluid frameworks that are in usage are YAML grid layout, YAML stands for Yet Another Multicolumn Layout. This framework is used to make consistent html and CSS layout. The main features of this framework are the XHTML compliances, the most flexible implementation and versatility of the framework. There are many examples of code that are provided in the documentation, the framework supports the minimum of 800 x 600 screen resolution and onwards.

 

Conclusion

The grid system is in the basis of every web design that is implemented in the html and, the default webpage rendering is done through the width and height which is divided into the blocks of pixels. This gives us the basis of the grid layout, in a designer’s perspective the creativity that some say is hindered due to the grid system implementation can be restored and even better implemented with the grid system in mind. Many of the websites implement the grid based system for their designs. The main benefits of the grid based system are the flexibility, consistency and the easiness in the implementation. The frameworks that are available and implemented widely are 960 grid system and YAML layouts system. These systems provide a flexible and concrete basis for the designing of websites. Although the designer does not need to design in a predefined framework, but as a need of the future technologies it will be a good practice to do so.