By continuing to use our website, you consent to the use of cookies. Please refer our cookie policy for more details.

Guidelines to Design Landing Page Layout

Oct 16, 2009

2 minute read

Below are some guidelines that can help you to create effective landing page layout:

Scrolling

Currently fixed width layout is used (which do not change their dimension according to screen resolution and window width) that are easy to maintain and design. An ideal practice is to have no horizontal scroll bar at the bottom of the landing page.

Screen Resolution

According to the current web statistics, 93% computers are using a screen size of 1024×768 pixels or more. But you may face an issue with this screen resolution. Vertical scrollbar in left is always shown in browser irrespective of height of content. Browser puts a left and right margin =10px. So we need to take account of scrollbar width 24px (appx.) and left and right margin (20px) and the final width available to us without horizontal scrollbar is: 1024-24-20=980px. So the best practice is to take width between 950px-980px.

Centered layout

At times when fixed width (980px) layout is seen on resolution higher than 1024, it will be aligned to left of the screen and does not look good. It can be fixed by:

Wrapping the content with center tag.
Wrapping the content with fixed width div tag and give and setting the left and right margin to auto.

<body><div style=”width:980px;margin:0 auto;”>Content Goes here
</div></body>

Positioning

Positioning of element plays a key role in div based design for the landing pages. It involves good understanding of CSS and position concepts. Positioning axis (0, 0) is the top left corner of available web area. It differs from resolution to resolution. At high resolution it shifts towards the left and our positioning element also shifts towards left and result in distracting of layout. We can fix this by putting a div wrapper around content and giving it a position attribute relative or absolute.

<body><div style=”width:980px;margin:0 auto; position:absolute”>Content Goes here</div></body>

Testing in Different Browser

Different browsers render html differently, so landing pages may not look the same in IE, firefox or Safari. Many browsers do not follow the guidance by w3c school. They need to pass acid2 test. Check out for more information for acid 2.