Page Layout of a Website
It can be sure that a part of the user interface design is affected by the quality and dynamic ability of the page layout, a designer may also consider whether the site’s page layout should remain consistent on different pages of a website when designing the layout. At beginning, the designers can decide to have fixed-width websites which generally have the same set width to match the current most popular browser window, at the current most popular screen resolution, on the current most popular monitor size and the current most popular need of users. In some cases, most pages are also center-aligned for concerns of aesthetics on larger screens.
Fluid layouts became a trend around 2000 as an alternative to html-table-based layouts and grid-based design in both interface design and coding technique, but they were very slow to be adopted as the designers had no control over screen reading devices and varying window sizes. Accordingly, a design may be broken down into units (header, footer, menu, content blocks, sidebars or embedded advertising area) that are sent to the browser and will be fitted into display window or screen size by the browser, as best it can.
As the browser does recognize the details of the reader’s screen (window size, image size and font size relative to window etc.) the browser can make user-specific layout adjustments to fluid layouts, but not fixed-width layouts and this was a new experience for the users. Such a display may also often change the relative position of major content units, sidebars may be displaced below body text rather to the side of it. This is a more flexible and useful display than a hard-coded grid-based layout that doesn’t fit the device window. In particular, the relative position of content blocks may change or differ while leaving the content within the block unaffected. This also minimizes the user’s need to horizontally scroll the page, and help to optimize the use of a website.
Responsive design was a new top approach to website design in 2012, based on the power of CSS3, and a deeper level of per-device specification within the page’s stylesheet through a progressive enhancement use of the CSS media queries.