Wireframes
Many designers create wireframes to help in page layout. A wireframe is simply a sketch or blueprint of the page showing basic structure and elements; this is helpful for comparing designs. This can be done with paper and pencil or with various apps.
Do note that consistency within a given site is important.
Page Layouts
There are multiple ways to design a page; the following is simply a list of common approaches.
Fixed Layout
This is occasionally referred to as a solid, ice, or jello layout (ice and jello are somewhat dated and rarely used now).
In a fixed layout, the width of the page is specified. If the monitor is larger than the page, excess space will appear either on the right hand side or will be split between the left and right sides. This layout provides total control to the designer; however, this design is NOT responsive and will not work well for mobile devices.
CSS
body {
width: 800px;
}
or
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
Fluid or Liquid Layout
In this layout, the page is allowed to fill the entire monitor. This does mean the page will appear differently based upon the monitor in use! However, a liquid layout is the basis for true responsive design.
