Implementation Techniques of Website Layout Designing

I nternational J ournal of Computer Trends and Technology (I J CTT) volume 4 I ssue 6J une 2013
ISSN: 2231-2803 http://www.ijcttjournal.org Page 1573

Implementation Techniques of Website Layout
Designing

Himani Goel
1
, Praveen Kumar Srivastava
2
, Chinmay Garg
3
, Ajay Gupta
4

Software Design Group,
Center for Development of Advanced Computing(C-DAC), Noida, India

Abstract This paper basically focuses on the different
techniques and approaches accepted and used by
different website designers to make their website user as
well as browser friendly. The main aim of this paper is
to bring into consideration that there are mainly three
approaches, Fixed layout, Fluid layout and Hybrid
layout, that can be used for web page designing.
Moreover, this paper discusses about widely accepted
approaches for all the three layouts and will also deal
with Responsive layouts, designed for mobile
applications. The ultimate goal is to make user arrive at
the conclusion as to what technique and layout will be
appropriate according to his/her requirements with all
the pros and cons into view.
KeywordsWeb page layout, Fluid layout, Fixed
layout, Grid System, Responsive layout, Hybrid layout
I. INTRODUCTION
When you're starting a new design, no matter what your
design methodology is, you start with a blank page. There
is nothing on the Web page - so the first thing you'll do is
put something up on the page.
But do you think about the placement of those elements or
do you just throw them onto the page without deciding the
importance of placement and designing? Good designers
don't allow the position and placement of their designs to
occur randomly. They think about it:
what the element is
how the element relates to the page goals
where the element fits with the other elements on
the page

This research paper on web page size and layout breaks
down web design into simple concepts, and helps you
decide on a format for your website.
For many years, we have rotated between the benefits and
pitfalls of using fixed, elastic, and liquid measurements in a
quest to give optimal viewing experiences in highly varied
situations, while balancing our need to control things in our
web pages.
In this paper, we will examine web layout types old,
new, and the future. We will explore the subject in the
context that websites are being viewed in a diverse amount
of ways, such as through mobile phones, netbooks, and
touch screen personal devices like the iPad.
Web design encompasses many different skills and
disciplines in the production and maintenance of websites.
The term web design is normally used to describe the
design process relating to the front-end (client side) design
of a website including writing mark up. Web design
partially overlaps web engineering in the broader scope
of web development. Web designers are expected to have
an awareness of usability and if their role involves creating
mark up then they are also expected to be up to date
with web accessibility guidelines.[2] Therefore judgment of
best layout for web page designing is must for every
designer.

II. DIFFERENT LAYOUTS AND THEIR APPROACHES
The problem has boggled the minds of Web designers for
years: fixed, fluid, elastic or a hybrid layout design? Each
option has its benefits and disadvantages. But the final
decision depends so much on usability that it is not one to
be made lightly. So, with all the confusion, is there a right
decision? By considering a few factors and properly setting
up the final design, you can end up with a successful layout
design that reaps all the benefits.
This article discusses the pros and cons of each type of
layout. Either one can be used to make a successful website
layout, as long as you keep usability in mind. [1] Taking all
the layouts in detail, we will be discussing the layouts one
by one will all the new and widely accepted approaches.

1. Fixed layout

A fixed layout in web design is one that uses a unit of
measurement that does not depend on other factors, such as
the size of the font or the dimensions of the browser
window, to determine the width of a web page. To put it
another way, the website appears with a constant size no
matter how big the browser window is, or what sort of font
is chosen for the page.
Since the width of the page is fixed, such a layout is called
a fixed layout. The width of the various columns of such a
page is often specified using a unit of measurement like the
pixel, which doesn't change depending on the
circumstances. [3]


Figure I. Fixed layout in different resolution

Fixed-width page designs are widely used, particularly for
complex page layouts with many functional sub regions of
the page, such as in newspaper sites. Designing in a stable
environment means that you can fix the position of
elements on the page and control such typographic features
as line length and spacing. Stable layouts also preserve the
Gestalt visual and spatial logic of how various components
in the page layout relate to one another. [4]

1.1. Pixel approach
A fixed website layout has a wrapper that is a fixed width,
and the components inside it have either percentage widths
or fixed widths. The important thing is that the container
(wrapper) element is set to not move. No matter what
screen resolution the visitor has, he or she will see the same
width as other visitors.

Figure II. Fixed layout-dividing webpage using pixel approach

The image above shows the general outline of a fixed-
width website layout. The components inside are fixed to
520, 200 and 200 pixels, respectively. A 960-pixel width
has become the standard in modern Web design because
most website users are assumed to browse in 1024768
resolution or higher. [3]
These designs are wrapped with a div thats given a pixel-
based width (say, 960 pixels), and centered within the body
tag using margin: 0 auto;. If the browser window is wider
than 960 pixels, youll see the body elements background
to the left and right of the container; and if its narrower,
youll have a horizontal scrollbar. [7]
Now the question arises, how to choose the wrapper width?
Is choosing 960-pixel width is the standard option?
To this question, the answer is categorized and explained as
under:
The first consideration for a fixed-width layout, is the width
of the user's screen. If you have collected these statistics
from your current website visitors, then you should cater to
your current visitor base. If you do not have this
information, or this is your first website, then you will need
to use some more general statistics. If you search the web
you will find many different sites that have collected
browser statistics. At the time of this writing, the vast
majority claim that 1024x768 screen resolution has nearly a
50% majority, with a significant number using 800x600
resolution, and no users with lower resolutions than that.
(Some reliable stats can be found at
http://www.w3schools.com/browsers/browsers_display.asp
).
Printing is a slightly different story. Nearly all home and
office printing is done on 8.5x11" paper (standard "letter"
size). The maximum "safe" width to allow printing on
8.5x11" paper is 560 pixels. This means that you have three
options: 1) you can assume that none of your site visitors
will ever want to print your web pages, 2) you can restrict
your site to 560 pixels wide or 3) you must create CSS
definitions for both widths, and use the media="print"
directive on your CSS tag. With this method, you can also
hide certain elements, such as navigation trees or ad
banners, to make the printed page less cluttered.

To summarize:
Write your page based on your visitors.
for 1024x768 resolution, use a width less than 980 pixels
for 800x600 resolution, use a width less than 760 pixels
for printing, use a width less than 560 pixels
to accommodate printing and a wider screen resolution, use
the "media" attribute of the css tag. [5]

Basic HTML code with css to design the layout of web
page using Pixel approach:

Lets create a simple two-column fixed-width layout, with
a header section for the logo and primary navigation and
footer for additional website information. The HTML
would be as follows:

Figure III. HTML Code for Fixed layout

To make the width fixed, we set a width on the #container
DIV. We also assign a fixed width to the left and right
columns. To make the header and footer equal to the
containers width, we give them a width property of 100%
(which is unnecessary most of the time but good practice
nonetheless if we want to make sure they are indeed equal
to the width of the container).
We use the float property to display the left and right
columns beside each other (of course, we could use relative
or absolute positioning instead) and the clear property for
the footer so that it displays below the two columns. Note
that you would need to use some kind of global browser
reset to ensure a cross-browser presentation of the layout.

Figure IV CSS for Fixed layout [1]

Advantages of Fixed width layout
Gives designer more control over how an image
floated within the content will look
Allows for planned whitespace
Improves readability with narrower text blocks

Disadvantages of Fixed width layout
Can appear dwarfed in large browser windows
Takes control away from the user. [7]
They can also result in large expanses of
whitespace in larger monitors, resulting in a lot of
unused space and more scrolling vertically than
might otherwise be necessary.[8]
Fixed-width designs may fall apart visually if the
reader chooses to enlarge the text size. [7]

Figure V. Fixed width layout without enlargement [4]

Figure VI. Fixed width layout with enlargement [4]

2. Fluid/Liquid layout

Liquid layout is a layout that is based on percentages of the
current browser window's size. They flex with the size of
the window, even if the current viewer changes their
browser size as they're viewing the site. Liquid width
layouts allow a very efficient use of the space provided by
any given Web browser window or screen resolution. They
are often preferred by designers who have a lot of
information to get across in as little space as possible, as

they remain consistent in size and relative page weights
regardless of who is viewing the page. [8]

Figure VII. Fluid layout in different resolution

2.1 Percentage Approach
In a fluid website layout, also referred to as a liquid layout,
the majority of the components inside has percentage
widths, and thus adjusts to the users screen resolution. The
screen is first considered as wrapper whose width will be
100%. The wrapper will be further divides in different parts
as shown in the figure (based on percentage).

Figure VIII. Fixed layout-dividing webpage using percentage
approach

The image above shows a fluid (liquid) website layout. [1]
Flexible or fluid page design is in many ways more
challenging than fixed design because it requires a deep
understanding of html and its implementation across
platforms and browsers. It also requires that you think
outside the box of your configuration and come up with
graphics and layouts that will still work under varying
conditions. There are several methods for defining flexible
page widths. The most common approach is to use
percentages to define the width of the different elements on
the page. [4]
In such layouts, the relationships between layout elements
play an important role, because the widths of child
elements set in percentage values are always determined by
their parent elements (not adjacent elements!). For instance,
if the width of the layout container (whose parent is the
browser window) is set at 90%, and the width of the
navigation block within the container is set at 80%, then the
width of the navigation element is 72% of the browser area
(1 * 0.9 * 0.8 = 0.72). As you can see, coding for such
layouts requires a profound understanding of the structure
of the design; designers may be more prone to error when
working with this layout type, but a successful execution
will make the website more flexible and adaptable for some
end users.

Basic HTML code with css to design the layout of web
page using Pixel approach:

Lets create a simple two-column fixed-width layout, with
a header section for the logo and primary navigation and

Figure IX. HTML Code for fluid layout (Percentage approach)

Here is a fluid layout tested in two Web browsers, one with
a width of 1280 pixels, and the other with a width of 800
pixels, with the container width set to 75% of the browsers
view port.


Figure X. Difference in fluid layout when tested on different
resolutions [1]

2.2 960 Grid System Approach
The 960 Grid System is simply a way to lay out websites
using a grid that is 960 pixels wide.
The reason its 960 pixels wide is because the number 960
makes for a lot of clean divisions utilizing whole numbers
when factoring in column widths and margins. And it fits
nicely on the majority of screens.
The 960 GS comes in two primary variants: a 12-column
grid and a 16-column grid (a 24-column version is included
as well for those that really need extra control).
In the 12-column version, the narrowest column is 60
pixels wide. Each column after that increases by 80 pixels.
So the available column widths are: 60, 140, 220, 300, 380,
460, 540, 620, 700, 780, 860 and 940.

Figure XI. 12 Column Grid divisions

Similarly, in the 16-column version, the narrowest column
is 40 pixels wide and each column after that increases by
60 pixels.
So the available column widths are: 40, 100, 160, 220, 280,
340, 400, 460, 520, 580, 640, 700, 760, 820, 880 and 940.

Figure XII. 16 Column Grid divisions

We can directly refer to the css of 960 Grid System to make
our webpage Fluid and based on grid approach.
There are basically 5 concepts that we need to remember
while using 960 Grid System:
Use the container_12 class for the 12-column
version and the container_16 for the 16-column
version.
Use the classes grid_1, grid_2, grid_3, etc. to set
your column widths. If you want to fill a page
horizontally, make sure the numbers add up to 12
or 16 (i.e. grid_4 + grid_2 + grid_6 = 12).
Use the push and pull classes to independently
position items on the page, regardless of their
position in your pages markup.
Use the prefix and suffix classes to create empty
spaces in your layout.
Use the alpha and omega to fix the margins for
any nested grid units. [9]

2.3 Percentage Approach with media queries

Media queries let you to feed different CSS to users based
on their viewport size (among other things), allowing you
to create even more flexible layouts than ever before.
While creating effective, attractive, flexible layouts that
adapt to the users screen size has always been possible,
media queries add another layer on top of flexible layouts
to make them even more adaptable to an even wider range
of sizes, allowing you to really fine-tune the experience for
even more users. Media queries allow you to selectively
feed styles based on the characteristics of the users display
or device, such as how much width is available in the
viewport, whether its in portrait or landscape mode, or
whether it can display color. [10]
Media queries where introduced in the CSS3 specifications.
Put in a simple way, media queries enables the web
designer to create conditionals style sheets based on width,
height, but also orientation, color, etc.


Figure XIII. Media queries and their uses [12]

Based on certain parameters, as explained above will allow
user to design the web page according to the resolution by
including all the media queries under one css. Media
queries can be written as:

Figure XIV. media queries syntax to be included in CSS [11]
The inner brackets can have the code written for different
resolutions which give the user a feel while resizing the
browser size that the contents are in fluid nature and are
changing their content area based on the resolution.

Advantages of Fluid layout
A liquid width layout expands and contracts to
fill the available space.
All available real estate is used, allowing the
designer to display more content on larger
monitors, but still remain viable on smaller
displays.
Liquid layouts provide consistency in relative
widths, allowing a page to respond more
dynamically to customer-imposed restrictions
like larger font sizes. [8]
Strategic use of CSS and flexible HTML page
coding using fluid layout can liberate your
content to work well across many display media.

Figure XV 12 Liberation of content of webpage in different media [4]

Disadvantages of Fluid layout
Liquid layouts allow for very little precise control
over the width of the various elements of the
page. [8]
If width limiters using the CSS property max-
width which isnt supported by Internet
Explorer (IE) version 6 or older.
Images, video and other types of content with set
widths may need to be set at multiple widths to
accommodate different screen resolutions. [1]
Pages that look reasonable in fixed layout (below,
left) can fall apart when converted to stretchy
liquid layout.


Figure XVI Drawback of liquid layout while increasing
resolution [4]

3. Hybrid layout

In practice, designers usually try to come up with the right
mix of fixed-width, liquid and elastic layout elements to
offer users the advantages of each, while minimizing the
shortcomings of each as much as possible. For instance, it
has become a common practice to use em units for the
content area (thus ensuring optimal line length and text
scaling in Internet Explorer 6) and pixel units for the
sidebar (because the sidebar often contains fixed-size ad
banners that make this solution sensible). Another related
technique is to have a fluid content area with min-width
and max-width CSS attributes instead of the elastic
element, making it possible for users to adjust the line
length of the content block according to their personal
preferences.
So, a fluid layout that has a width of 960 pixels when
viewed in a browser whose view port is 1024 * 768 (960
1024 = 0.9375) would not have a width of 1350 pixels
when viewed in a browser whose view port is 1440 * 900
(1440 1350 = 0.9375), but would have a smaller width
instead. To achieve this effect, a large portion of the layout
is fixed using pixel units, while the rest is defined with
percentage values relative to the view ports width. [1]
Careful planning and a hybrid approach that mixes liquid
(green) and fixed layout elements (blue) can give you the
best of both worlds: pages that adapt to a variety of screen
sizes and media, with some areas of predictable widths.

Figure XVII Comparison of hybrid layout while increasing
resolution [4]

Another interesting approach is the fluid elastic layout,
which combines both liquid and elastic elements. The idea
here is to set min-width and max-width for an em-
based layout in percentage units (in essence, giving you the
ability to limit rescaling to a certain extent by taking into
account the view ports size). By setting maximum and
minimum widths, the text scales to a certain point and then
stops. The layout remains fluid because it automatically
adapts to the users view port, yet it is also elastic because
the width of the columns is scaled automatically when
the browser window is resized or the font size changes.
Lets create a simple two-column hybrid layout, with a
header section for the logo and primary navigation and

Figure XVIII CSS for Hybrid layout [1]

Advantages of Hybrid layout
If implemented correctly, this layout style can be
very user-friendly.
Hybrid layouts are perfect for designers who love
both fluid and fixed designs, because the pros of
each are found in hybrid layouts.

Disadvantages of Hybrid layout
Even given the first pro above, this type of layout
can create a huge problem with usability. It takes
a lot of savvy and testing to get the layout right
for all users.
This type of layout is much more difficult to
create than the other two, and the extra bit of
usability it brings may not always seem worth it.
Depending on the specifics of the layout, some
elastic designs may require supplementary style
sheets and cheats for IE6.

4. Other layouts

4.1 Elastic Layouts

An elastic sites main wrapper and other elements are
measured using ems as the unit of measure. Ems are
relative proportionally to the text or font size. Thus, as the
text size is increased, the sections measured in ems will
increase in size as well. [13]
An elastic (or zoomable) layout is a different approach that
achieves the same goal as fluid layout; the basic idea is that
designers adjust the width of the layout based on the users
font size rather than the browsers view port.

By using ems for both layout blocks and text elements,
designers are able to make a Web layout scale consistently,
maintain optimal line length for the body copy and create
realistic zoom effects. The result: when the user increases
the font size, the layout stretches automatically, just as you
would expect from an elastic object. One issue with elastic
layouts, or layouts whose widths are adjusted based on font
sizes, is the presentation of multimedia content, such as
images and Flash objects. This adds complexity to elastic
layouts, because in order for all elements in the layout to
maintain their proportion, they must scale as the font size
increases. Elastic layouts sometimes allow for all of their
elements to scale; in other words, images will scale up or
down in proportion to the layout, depending on the users
settings. [1]

4.2 Responsive Layouts

Responsive web design layout (RWDL) is a web design
approach aimed at crafting sites to provide an optimal
viewing experienceeasy reading and navigation with a
minimum of resizing, panning, and scrollingacross a
wide range of devices (from desktop computer monitors to
mobile phones).
A site designed with RWDL adapts the layout to the
viewing environment by using fluid, proportion-based
grids, flexible images, and CSS3 media queries, an
extension of the @media rule.
The fluid grid concept calls for page element
sizing to be in relative units like percentages,
rather than absolute units like pixels or points.
Flexible images are also sized in relative units, so
as to prevent them from displaying outside their
containing element.
Media queries allow the page to use different
CSS style rules based on characteristics of the
device the site is being displayed on, most
commonly the width of the browser.
Server-Side Components (RESS) in conjunction
with client side ones such as media queries can
produce faster-loading sites for access over
cellular networks and also deliver richer
functionality/usability. [15]

From mobile browsers to netbooks and tablets, users are
visiting your sites from an increasing array of devices and
browsers. [14]
Responsive web design layouts have mainly become a hot
topic, unsemantic.com provides different CSS to let the
user because more and more people are using mobile
devices such as iPhones, iPads, and Blackberrys to access
the internet. For instance define various breakpoints, either
between desktop and mobile, or between mobile, tablet and
desktop.

IV. RESULTS

Today, most designers assume that the majority of Internet
users have a screen resolution of 1024768 or higher.
Figure XIX Distribution of users using different resolutions [1]

However the statistics results are very unpredictable. Due
to this case, it is even difficult to decide the exact layout
suited to your webpage. Instead we have some better
options to judge which layout will suit you best. Knowing
the requirements from the user and pros and cons of all the
layouts will let the user identify the best layout for him.
A portfolio website, for example, would probably be best
shown in a fixed-width layout, so that you have more
control over the design. Any designer who seeks 100%
compatibility should take the time to set up a fluid layout.
[1]
According to various researches and my experience in CSS
designing, Hybrid Layouts work best for more or less
complicated websites. The preference being supported by
the fact that this layout will let the user apply both fixed
and fluid nature in his website based on his need.

ACKNOWLEDGMENT
We express our deep thanks to Mr. B.K. Murthy, Executive
Director; CDAC Noida (India) with the help of his vast
experience, efforts, valuable suggestion, support and
motivation helped us to great extent for the design and
development of this utility.
REFERENCES
1. http://coding.smashingmagazine.com/2009/06/02
/fixed-vs-fluid-vs-elastic-layout-whats-the-right-
one-for-you/
2. https://en.wikipedia.org/wiki/Web_design
3. http://www.thesitewizard.com/webdesign/liquid-
elastic-fixed-relative-layout.shtml
4. http://webstyleguide.com/wsg3/7-page-design/5-
page-frameworks.html
5. http://wiki.answers.com/Q/What_is_the_best_wi
dth_for_a_fixed-width_page_layout_and_why
6. http://coredogs.com/lesson/fixed-layouts
7. http://designfestival.com/resizing-fixed-fluid-or-
responsive-layouts/
8. http://webdesign.about.com/od/layout/i/aa060506
_2.htm
9. http://sixrevisions.com/web_design/the-960-grid-
system-made-easy/

10. http://zomigi.com/blog/examples-of-flexible-
layouts-with-css3-media-queries/
11. http://www.campaignmonitor.com/guides/mobile
/targeting/
12. http://www.onextrapixel.com/2012/04/23/respons
ive-web-design-layouts-and-media-queries/
13. http://green-beast.com/blog/?p=199
14. http://www.abookapart.com/products/responsive-
web-design
15. http://en.wikipedia.org/wiki/Responsive_web_de
sign
AUTHORS
HIMANI GOEL
She is working as Project
Engineer in CDAC Noida
since December, 2012. She is
having 10 months of IT
experience, in ERP, Japanese
and Health Informatics
Projects. She has completed
her B.Tech (Computer
Science and Engineering)
from Inderprastha Engineering College, GautamBudh
Technical University in 2012. She was among the
University toppers and secured second position in her
college in academics and overall performance. She has
been praised in many seminars and project presentations for
her presentation and technical skills. Her interest lies in
designing database, SRS, CSS Designing. E-mail:
himanigoel@cdac.in
PRAVEEN KUMAR SRIVASTAVA
He has done his Masters in
Computer Application from
Madan Mohan Malviya
Engineering College
Gorakhpur. Currently he is
working as Joint Director and
Group Coordinator for Design
Group in CDAC Noida. He is
having around 15 Years of
Experience His achievements include: He was the Topper
of M.Sc (Maths) from Allahabad University in the
Development and implementation of Health Care Solutions
at Different Hospitals. He has deep interest in standardizing
the Electronic Medical Record in Hospitals. Email:
pksrivastava@cdac.in

CHINMAY GARG
He is working as technical
officer in CDAC and received
his B. Tech in Electronics &
Communication from UP
Technical University, in 2005.
With knack towards learning
further he completed Post
Graduate Diploma in GIS &
RS from C-DAC Noida in
2006. He has done his MBA from IMT-CDL, Ghaziabad in
2010. His areas of interests are Geographical Information
Systems, Web Application UI Design, and Database
Structure Design. E-mail: chinmaygarg@cdac.in
AJAY GUPTA
Mr. Ajay Kumar Gupta, He has
done his Masters in Computer
Application from Institute of
Engineering & Technology,
Lucknow (U.P).He is currently
working as Senior Technical
Officer at C-DAC. His major
achievements include:
implementation of Patient Billing, ADT and Online
Inventory and Procurement module at Post Graduate
Institute Medical Education &Research (PGIMER)
Chandigarh, Successful implementation of Various
Modules at MGIMS Nagpur, General Hospital Chandigarh,
SMS Jaipur, RIMS Imphal and IGMC Shimla, Design and
Development of Various Modules of HIS for PGIMER
Chandigarh and GNCTD Delhi, Design of Drug Warehouse
Application for NRMH Rajashtan. He has expertise in
System Study, Analysis and Design of Software
Development Life Cycle which are his key interest
areas.Email: ajaygupta@cdac.in

Implementation Techniques of Website Layout Designing

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Implementation Techniques of Website Layout Designing

Загружено:

Авторское право:

Доступные форматы

I nternational J ournal of Computer Trends and Technology (I J CTT) volume 4 I ssue 6J une 2013

ISSN: 2231-2803 http://www.ijcttjournal.org Page 1573

Вам также может понравиться