Layout is the skeleton of a page. Once the framework is set, visual elements, functional operations, and interaction flows have a place to land. The following items are the most fundamental parts of layout.
Several common framework structures
The top-bottom layout is the most common: the upper part is navigation, and the lower part is the main content. It suits websites with few navigation items and longer pages. The left-right layout places global navigation on the left and main content on the right, giving navigation higher visibility and making jumps between pages more convenient. There is also the "T"-shaped layout, with site-wide navigation at the top and the content area further divided into a sidebar and main body, mostly used for article-based websites.
Pages with more information use more complex structures. Adding vertical navigation on top of the "T"-shaped layout yields a three-section structure similar to a "C" shape, separating common actions from auxiliary actions, suitable for admin backends with many features. Adding another sidebar creates a structure with content areas on all sides and the main body in the center, holding the most information, at the cost of making the page feel crowded.
Page hierarchy
Page elements need a clear hierarchy. From bottom to top, it is usually: background layer, content layer, global control layer (navigation, menu, sidebar), mask layer, and pop-up layer. The background layer provides backdrop, the content layer carries core information, the control layer handles navigation, and the mask and pop-up layers handle temporary tasks. A chaotic hierarchy causes practical problems, such as pop-ups being obscured by content, or clicks passing through to buttons underneath.
Grid system
A grid divides the page horizontally into several equal-width columns, with spacing between columns. A lightweight project can get by with twelve columns, while projects with more information grouping can use twenty-four columns for further subdivision. Column width, column spacing, and page margins add up to the screen width; column spacing is generally fixed, while column width changes with the window.
Spacing also needs a rule. Since most devices' screen widths are divisible by eight, using eight as the smallest unit is fairly universal: module widths and spacing are multiples of eight, and the page rhythm naturally becomes consistent. If the spacing unit is too small, elements look fragmented; if too large, the spans can get out of control.
Adaptation: responsive or adaptive
Responsive design uses one set of pages to adapt to multiple screens, while adaptive design prepares separate pages for different devices. The former has lower maintenance costs and suits display-oriented websites with little interaction and infrequent feature upgrades; the latter allows finer optimization for devices and suits scenarios with complex features and frequent user interaction.
Responsive design has two prerequisites: the layout must be regular, and images on the page must be able to scale. Breakpoints are the critical widths at which the way content is presented needs to change during shrinking. The more breakpoints, the finer the effect, but the higher the maintenance cost; usually, choosing a few sizes that cover major devices is enough.
How modules are handled when shrinking
Responsive design is not proportional scaling, but rearranging according to the importance of content. There are five common approaches: squeeze or stretch with width; change from left-right arrangement to top-bottom arrangement; remove secondary content to preserve the main task; move side content below the page; and collapse a horizontal menu into a single entry that expands on click. The basis for adjusting order is importance: the more important the content, the higher it goes.
Layout has no single solution, and the judgment criterion can be simplified to one sentence: after shrinking the page to its narrowest size, can users still smoothly find what they want to do?