Editing Web design (section)

=== Page layout ===
Part of the user interface design is affected by the quality of the [[page layout]].  For example, a designer may consider whether the site's page layout should remain consistent on different pages when designing the layout.  Page pixel width may also be considered vital for aligning objects in the layout design. The most popular fixed-width websites 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. Most pages are also center-aligned for concerns of [[aesthetics]] on larger screens.

'''Fluid layouts''' increased in popularity around 2000 to allow the browser to make user-specific layout adjustments to fluid layouts based on the details of the reader's screen (window size, font size relative to window, etc.). They grew as an alternative to HTML-table-based layouts and [[Grid (page layout)|grid-based design]] in both page layout design principles and in coding technique but were very slow to be adopted.<ref group="note" ><code>&lt;table&gt;</code>-based markup and [[spacer .GIF]] images</ref> This was due to considerations of [[Screen reader|screen reading devices]] and varying windows sizes which designers have no control over. Accordingly, a design may be broken down into units (sidebars, content blocks, [[Web banner|embedded advertising]] areas, navigation areas) that are sent to the browser and which will be fitted into the display window by the browser, as best it can. Although such a display may often change the relative position of major content units, sidebars may be displaced below [[body text]] rather than to the side of it. This is a more flexible 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 while leaving the content within the block unaffected. This also minimizes the user's need to horizontally scroll the page.

[[Responsive web design]] is a newer approach, based on CSS3, and a deeper level of per-device specification within the page's style sheet through an enhanced use of the CSS <code>@media</code> rule. In March 2018 Google announced they would be rolling out mobile-first indexing.<ref>{{Cite news|url=https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html|title=Rolling out mobile-first indexing|work=Official Google Webmaster Central Blog|access-date=2018-06-09|language=en-US}}</ref> Sites using responsive design are well placed to ensure they meet this new approach.