Common Web Page Structure

As per the content of each page, the web page layout may vary.
Here is an example of page content layout that most commonly suits a business / individual needs. The kind of content you have will determine the correct page layout to use.

Wide screen Layout:

Here you can see the sections of a web page:
1. Header: Area for branding (logo / site title / site description) may include navigation
2. Feature: Area for Message / Image / Slideshow
3. Sidebar: Area for side menu / widgets / other information
4. Page Body: This is the main content area and any content, text, images, galleries, video clips, etc could also come in here.
5. Footer: website information / links / other information

In a content management system the header footer, main menu and page body, may always be retained, on each page. The page body may vary in layout, and widths can be adjusted by columns.

Responsive Layout:

When the above layout renders on a smaller and narrower screen, the layout will stack like so:


The responsive layout will adapt to smaller screen sizes as a single column. Assets that are ordered from left to right will now stack top to bottom. The height of the various page segments will vary based on the content, including font and image sizes. Text in images should be minimal and large and once saved as an image becomes pixels. Text in slideshows are possible, but can become cumbersome to work with as sizes and display become unpredictable in responsive layouts.

Note: Responsive layout has become an industry standard to solve the problem of multiple websites for multiple devices. Multiple websites are a challenge to maintain.
Tip 1: Consider your content for layout in smaller viewports.
Tip 2: Simplify Content.
Tip 3: Cut out content fat by writing concisely.


Leave a Reply

Your email address will not be published. Required fields are marked *