1. Technology
Send to a Friend via Email

Website Layout and Design

The layout of a web page is usually what people think of when they think of web design. If the layout is poor or doesn't work well, then customers won't like the site.
  1. CSS Layout Templates
  2. Website Templates (69)
  3. Layout Glossary (6)

Basics of Web Layout
It's one thing to know how to build a Web layout, but it's something else to know the rules behind designing a layout that works.

Web Design Basics - Placement and Position
The first thing you do when you design a Web page is you start with a blank page and you place elements on that page. Placement of your elements can be critical to whether your design works or is a dismal failure.

What is Responsive Web Design?
Responsive web design is a way of creating websites that attempts to future proof your designs by creating a style sheet that is specific to different resolutions and widths. This article explains what responsive design is and how you can get started using it.

How to Build a Responsive Design for Your Website
Responsive design doesn’t have to be extremely complicated. This article explains what you should consider for three different versions of the same site and how to set them up in the CSS and HTML.

Change is Good - It's Time to Give Up Your Table-Based Designs
It's time to break your old habits and admit that using tables for layout is outmoded and lazy. It's time to move on to CSS layouts, as your excuses just won't hold water for much longer, and why keep bailing when you could join the rest of us at the helm!

Don't Use Tables for Layout
Learn why you should use CSS to position your pages rather than HTML tables.

Why bother with CSS layouts - What is the point of using CSS instead …
Readers of the About.com Web Design site offer their thoughts on why you might want to use CSS for layout rather than tables.

Parts of a Web Page
The parts of a Web page can be broken down into five distinct elements: images, headlines, body content, navigation, and credits. Most Web pages will include all five of these items, but do you know what they all are?

Web Grids - Columnar Layout in Web Grids
When you work with Web layouts, you often have more control over the horizontal sizes than you do about the vertical. So grid layouts become columnar layouts. This gallery shows how grids can create dynamic layouts with various numbers of columns.

Why Use a Grid to Design Your Page?
Grids are an important part of layout in Web pages. They are a great way to impose order on your Web pages and provide balance to your layouts.

Prioritize Your Content and Put Important Stuff First Using CSS Float…
Learn how to use CSS floats to lay out your Web pages in any fashion you like, without changing the HTML. Putting the most important content first in the HTML gives robots and search engines a leg up in knowing what content is important.

CSS Align
Learn how easy it is to use CSS to align web page elements both horizontally and vertically on the page. You can align your elements to the left, right, or centered, and you can also align text to be justified.

Alignments
Learn how to use alignment style tags to lay out the elements on your page where you want them.

Sample Layout Alignments for Web Pages
Alignment within your Web page elements is important to create harmony within the page and establish the mood. These images show you the same content on a Web page aligned in several different ways.

How to Create Tabbed Navigation with CSS and No Images
It's easy to create a tabbed menu with CSS. And with CSS 3 you can also add in features like rounded corners to your tabs to make them look even more like tabs. This step-by-step tutorial will guide you through the steps to add a tabbed menu to your web page using CSS, HTML, and no images.

Tabbed Navigation in Web Design
It's easy to add tabbed navigation into your Web pages with CSS and page identifiers.

Online Wireframe Tools
If you are looking to create a website, it can be helpful to first do a wireframe of the project. These online tools range in price from free to around $30 per month, and offer some great features to make it easy to create your wireframes and collaborate with clients and co-workers.

Use Real Text for Testing Page Designs - Not Lorem Ipsum
Learn when to use lorem ipsum and when to use actual text that people can read when designing a website. Real text can solve more problems in the long run than placeholder text.

How Long Should Your Web Page Be
There is a lot of focus on most Web design sites on how wide you should make your pages. And width is important. But what about how long they are? Conventional wisdom says that people don't like to scroll, and in fact won't scroll. So you should make your pages short and provide links to additional content. But is that really the case?

Why does my page layout stretch while the site is loading?
When you use a liquid layout, your design will change as the page loads.

Making Web Columns Appear to Be the Same Height
When building CSS designs you may find that the columns end up all different heights, which can look bad. But there is a way to fake it so that the columns appear to all end at the same place.

Web Design Design Gallery
Get ideas for how to design your Web site by looking at how other people design their Web sites.

Web Design Home Page Gallery
Take a look at the designs of various home pages to see how these companies get their customers from their home page to whatever they are selling.

Show Off Your Favorite Web Page Design
Have you created a Web page design that you're particularly proud of? Now you can show it off to the world, and explain why you like it. Or see other examples of great design from other About.com readers.

Fixed Width Layouts Versus Liquid Layouts
Web page layout has essentially two different methods: liquid and fixed width layouts. Learn the pros and cons of each, and how you can decide to use one or the other for your site.

Fancy Photo Gallery
Fancy Photo Gallery Template

Web Design Gallery March 2009
This is the About.com Web Design Gallery for March 2009. In it you will see examples of Web designs and my critiques of them. You will also have the opportunity to provide your own critiques of some of the designs.

Review of BarackObama.com
Website reviews of barackobama.com

Continued: Web Design Design Gallery - Barack Obama and Joe Biden: The Change...
Get ideas for how to design your Web site by looking at how other people design their Web sites. Review of Barack Obama and Joe Biden: The Change We Need.

User Reviews of JohnMcCain.com
site review johnmccain.com

Continued: Web Design Design Gallery - John McCain.com - McCain-Palin 2008
Get ideas for how to design your Web site by looking at how other people design their Web sites. Review of John McCain.com - McCain-Palin 2008.

Layout Considerations: Neon Design Tips
Okay, the colors are, well, NEON, but the site is excellent. This page gives some hints on to lay out your Web page for maximum impact.

Float Navigation Layout
Home

Should we forget columns?
Many websites use columns for the layout, but should we avoid them when converting a site for mobile?

©2014 About.com. All rights reserved.