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. In old days websites layout width used to be from 900px to 990px which were the best fit for the screen resolution 1024px and wider.
Most of today’s websites use different layout width for different devices which is referred as responsive layout. There are different css frameworks/grid systems for responsive website development. The most famous ones are Bootstrap framework, Foundation and Pure.CSS. Each of them has its own benefits. If we consider Bootstrap, the key width breakpoints are:
• 768px and up (tablets),
• 992px and up (desktop)
• For large desktop it starts from 1200px and go up.
• User can add more breakpoints for mobile devices if required.
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 user.
