Basics of Web Layout (part 1)
The first thing when you start planning a web design is the layout. Layout is actually the basic structure of a website design. At this stage you plan which component goes where. But before you start working on the layout, you should know the required layout size, layout style and website components.
Layout Size:
The layout can be fluid which can fit any kind of screen resolution or it may be fixed width size. Fluid layouts are not common now a days, Wikipedia is the one among today’s top websites using fluid layout. Most of today’s websites use layout width between 900px and 990px which are the best fit for the screen resolution 1024px and wider.
- Yahoo ------ 972
- WordPress -- 970 pixels
- eBay --- 990 pixels
- You Tube -------- 970 pixels
- Linked in --------- 980 pixels
- Twitter ----- 920
- Facebook ------- 980 pixels
There is no standard for the height, it depends upon the content and any specifications from client or technology used in website development (Flash based websites normally have a fixed width and height).
The correct layout size decision can be made in the light of your web page components, industry, web development technology and the end-user’s screen resolution. For example, a suitable width for large websites is 900 pixels to 990 pixels. For small websites with limited content it can be 900 pixels and less. Similarly for Flash based websites it can be 900 pixels and less.
Web Design Layout Components
As we discussed above that website components play an important role in the layout size decision. On the basis of these components we know the suitable width and height dimensions of the web layout. We will divide these components into two categories, “Basic Components” and “Secondary Components”. Basic Components are the integral part of any website and 90% (a rough idea) of the websites have them. The list of “Secondary Components” may be too long because it varies from industry to industry and from small websites to large websites.
Basic Components:
- Header (Logo)
- Navigation
- Banner (Billboard)
- Main content area
- Footer
Secondary Components:
- Sub Navigation (Quick Links)
- Search Area
- Subscription Area
- Latest News, Offers or Products
- And a many more
We will learn the best possible placements of these components in our next tutorial.
Tip: The best practice to design web layout is to sketch it on a paper sheet. It should be like a rough drawing to show positioning of your web components.
Layout Alignment:
Like liquid (full width) layouts, the left aligned layouts are not common in modern websites. Most of the website designs are centre aligned, it gives a balance to the website and fit for wide screens better than the left or right aligned websites. The content of the website stay in front of the user all the time which give a little comfort to your website users.
Latest Design
UK Pharmacy Live is a new e-commerce project designed and developed by our professional designers and programmers. We designed the logo, designed the website and provided a complete e-commerce solution.
Latest Offers
- 10% less on all web packages.
- Logo Design
Get free logo design with your website. - SEO
Free Website review for internet marketing - Facebook page:
Get your company facebook page developed for only £99.
Guarantees:
- 100% satisfaction guaranteed with design or your deposit back.
- Delivery on schedule or 10% off your total bill.
- Price satisfaction, we will do it for 10% less than a quote provided by any UK based company.
- You will own your website after completion.
- Free support and consultation over the life time of the project.
