Introduction to Layouts

What’s the point? The layout for a website is as important as the content. The sole purpose of creating a website is to attract and keep visitors. People are more likely to visit and return to websites that are easy to use.

Just as important as the Content Make or Break People like easy What do you prefer? The layout for a website is as important as the content that is chosen for the website itself. This is because the layout decides how easy a website is to navigate and how easy it is to find things on it. You have probably noticed that there are layouts which are fast and easy to use and ones that you spend more time looking for what you want than it takes to obtain the information once you have found it.

Keep them coming back If they don’t come back the site has failed. Keep it clean and uncluttered Keep it easy to use and navigate They don’t all have to be exactly the same layout. Presentation Placement Impact The sole purpose of creating a website is to attract and keep visitors. If visitors find your site unattractive, confusing, cluttered, or unprofessional in looks, they will rapidly move on to the next offering. That is why website layout can be every bit as important as the content of the site. Over all people are more likely to visit and return to websites that are easy to use. Also layouts that are easy to use are usually easier to create. How is it set up? Where is everything located? Will the layout allow you to contain everything that you want to place on the website? Keep in mind that you can use different layouts for different pages. Just because they belong to the same website does not mean that they are required to be uniform.

Which layout is right? There are considerations That depends What is the content? Who is the audience? What type of browser or device will access the site? There are considerations Fixed Fluid Columns How will the layout display the content? Pictures Text Multimedia Which layout is right for your website? In order for you to answer that question, you must first understand the difference between the different types then compare the pros and cons of each. Finally, you must consider the audience you hope to attract to your site. Very large audiences may mean large variances in screen resolution, browser used, extra toolbars taking up space, and even differences in operating systems and hardware. In the end, your needs as well as those of your intended audience will determine your choice. It is important to understand what each type of layout involves and how it varies from the others. A fixed layout consists of a fixed width wrapper with components that have either a percentage or fixed width. Regardless of the screen width a visitor uses, he or she will see the site at the same width as other visitors. A fluid, or liquid, layout contains elements of percentage widths that adjust depending on the viewer’s screen resolution.

some main considerations A fixed-width layout or a liquid layout. A traditional 'brochure' style layout. The width can be any fixed to any specific length (usually about 750 pixels). A vertical menu or a horizontal menu. In a liquid layout the content is allowed to flow to the edges of the browser rather than being set to a fixed-width - stretch your browser and the content moves with it. The amount of columns required.

Fixed-width layout A traditional 'brochure' style layout. The width can be any fixed to any specific length (usually about 750 pixels).

Liquid layout In a liquid layout the content is allowed to flow to the edges of the browser rather than being set to a fixed-width - stretch your browser and the content moves with it.

Vertical menu The menu provides a link to other pages and other links. There are different vertical menu styles.

Horizontal menu The menu provides a link to other pages and other links. There are different horizontal menu styles.

Two-column layout

Three-column layout

A Difference of opinion Many designers often choose one layout over another. A fluid layout allows the user to adjust the browser to display a resolution they desire White space is economically distributed when the resolution of the screen is changed. A fixed layout allows the designer more control over the site design. The end user does not have to re-adjust a browser to fix a resolution issue. Many designers refuse to use a fluid layout for a wide variety of reasons but it has many great benefits that should not be overlooked. A fluid layout adjusts to fit the screen at any resolution, eliminating the need for a scroll bar at low resolutions. The amount of white space is similar for all viewers, improving the visual appeal of the site. Some problems that designers have with this type of layout include less control over what viewers see at different resolutions and the need for applying various widths to fixed-width elements. A fixed layout means that you can control the every aspect of the webpage layout, and you don’t have to adjust your layout to accommodate different resolutions. You will be able to provide a design that may not work within a fluid layout. There are often no reasons for the end user to resize their browser to make the site look correct.

Its about the content Present text differently than pictures or video The content is KING. Make it shine with the proper placement. Keep it simple Keep the links visible Keep it easy The layout is also based on what you are presenting. If you are presenting primarily text you are not going to want a layout that is primarily for pictures or video and vice versa. You will also want a layout that provides all link and page option requirements that you need.

So…What layout to use? The right choice depends on what you hope to achieve as a designer. It should be about the needs of your intended viewers. Experiment with different layout styles and see which one you are most comfortable with. It’s your design and your point of view that matters! The different types of layout provide their own advantages and drawbacks and, in the end, the right choice depends on what you hope to achieve as a designer and the needs of your intended viewers. The best advice is to experiment with different layout styles and see which one you are most comfortable with and which one most closely presents your content the way you want it.