Choosing the correct page layout for your website
When creating a website, it is important to understand the different page layouts that are available. The page layout will affect how your design and information are conveyed. Each layout will differ on how it reacts to changes in the horizontal width of the browser.
In a static or fixed layout, the page uses one size and does not change based on the browser. Many older sites are static and built with a permanent width size because there wasn’t much variation in screen size. Now that websites can be viewed on phones and tablets, screens come in all different sizes.
A static site may react differently depending on the device and browser. For example, on a desktop, the page may be cut off with horizontal scroll bars if the window is too small. On a mobile phone, the page will be scaled to fit the screen, allowing users to zoom in on different parts of the page.
Static design can be difficult to work with because it is impossible to predict what screen size users will be viewing your site on. Because it’s not adaptable, it can be hard for users to navigate.
As its name suggests, a liquid layout will fill the width of the page in any size screen regardless of the device you are using. Aside from the static layout, it’s the simplest way to create an adaptable layout.
However, the liquid layout does come with some concerns. Most liquid layouts work in percentages rather than pixels to scale the size of the page to match the browser. This means that a large screen may stretch the images. For example, a short paragraph may look like one long line in a wide screen or a two-column page may look crowded on a small screen.
Using CSS media queries to determine the width of a browser, adaptive layouts can adjust to the size of any screen. A media query is a form based on an algorithm that sets certain widths for your page based on different width browsers. A smaller or narrower size screen may move different parts above or below the main content.
Often static layouts are converted into adaptive layouts so that they can be viewed easier on mobile devices. This layout has a few drawbacks − screens that don’t fit the standard sizes set-up can result in the page not fitting the page perfectly.
Taking the media queries from an adaptive layout and using relative units from a liquid layout creates a responsive page layout. No matter the size of the browser, the responsive layout will adjust to the size. Larger shifts in size will adjust the content to fit the screen as in an adaptive layout.
Building the mobile design layout first is how a typical responsive layout is designed. The design is then expanded to fit wider browsers on tablets, laptops and finally desktops. It is done this way because it’s easier to expand a design than compress it. This layout takes the most work to design.
The more adaptive and flexible the design, the more opportunities you have for viewers to find your site.
Need help with your page layout design? Contact us for more help.