The way we approach the height and width, in terms of flexibility and measurements, is one of the variable web design aspects. There has been some switching up of measurements – such as fixed, liquid, and elastic – weighing the pitfalls and benefits. This has been done in a quest to provide a viewing experience that is optimal in varying situations. All this while balancing the urge to control every aspect of our web pages.
That being said, things change. And with every change, something new comes along. With the changes to layout types, we get a variety of different and new ways of having our web pages viewable through a variety of methods.
Throughout this article, you will learn about old, new, and future web layout types. All of the layouts we talk about enhances the website experience for the user. We will discuss the context of websites being viewed in different ways, such as:
- Mobile Phones
- iPad
- NetBooks
- Other Touchscreen Devices
Your Layout Options
While chasing after pixel perfection is something you could do forever, there is more to layouts than just elastic, fixed, or liquid. If you take anything away from these options, let it be the thought of how your choices affect the viewers. You need to consider why an option is ideal for a specific situation.
Without further ado, here are your layout options.
Absolute Layout
In web design, the least commonly utilized measurement method is the absolute measurement (i.e. cm, mm, inches, and picas). These units are normally found in print media; the positioning is traditional with this native measurement.
Converting the print to web format is seen in software for word processing, such as Microsoft Word. Microsoft Word still utilizes these conventions when sizing dimensions and formatting the text of documents to have them resemble printing on paper as closely as possible. However, in web design, absolute layouts come with very little use.
One use for absolute layouts you will find on the web is where content is static such as PDF documents. While it may not be very popular, that isn’t saying it doesn’t have its place among the options of a web designer.
Using style sheets that are printer-friendly – yes, printing web pages is still a thing – absolute measurements help to transform the page layout for a more accurate print.
Relative Layout
Depending on the viewport of the user’s browser, the relative layout adjusts in size.
The red border outlines the browser’s viewport. You are able to adjust the size of this viewport by simply resizing the window. With different monitors, you will have a different maximum size for its viewport.
The catch with this layout is that it will typically rely on everything functioning at 100% width, regardless of screen size. Put simply, it will scale to the situation of the viewer.
While it does work, you will find a few sites that actually make use of widths at 100%.
Fixed Layout
This method is often referred to as the least flexible way of laying out web designs. Pixel-based measurements are associated with a digital resonance that transfers from the print industry. The medium is forced to rely on static/fixed measurements.
This unit does leave little guesswork to how web design will look on different browsers. For sites that favor predictability and control over optimizing layouts for the audiences’ specific situation of viewing, this measurement has become insanely popular.
However, it is well known that scrolling in multiple directions comes with its own set of problems. This issue comes in spades with the px-based layout of a fixed measurement.
It is commonly practiced that people will seek out an ideal width to provide maximum compatibility. Well, with a fixed measurement layout, you can do a good job in most situations. That is thanks to the use of several elements that require rules from fixed layouts, Such as:
- Non-Repeating Background Images
- Borders With Non-Relative Elements
Elastic Layout
The relative unit of measurement is a method that is used by many. It is most commonly known as an elastic layout. It is referred to like this because of the way it grows and shrinks to the content’s needs. Thanks to the ability it has to scale text sizes, content, and more, it has been given a great amount of appreciation.
While absolute unit elements are best with images for their maintenance without distortion, elastic layouts are more flexible with content like text blocks. You could say that elastic takes a front seat.
The elastic nature makes em measurements recommended for different font sizes. If you compare it to the rest of these listed methods, elastic is the most subservient for content. Giving it the deciding position of the layout’s scale.
If you were to make the text larger with this design, the height and width would expand. Making it smaller will have a reversed effect. It is because of its unique attribute that it is able to size the layout based upon the content rather than the layout’s needs themselves.
If you want your site’s layout to be determined by content, then the elastic solution is ideal. However, issues do arise if the text is scaled passed the viewport.
Equated Layout
The next method makes use of a newer function in CSS known as calc, it is the equated layout.
Once this measurement is applied to browsers, the level of control will be new. It doesn’t rely on the specific heights and widths that are provided. Instead, equated layouts will allow you to mix relative and fixed values using calculations.
Have you ever been in a situation where you want to account for the divs with borders and other elements that are fixed with their widths, but at the same time, wished you could use the full 100%? Most likely, you have.
Though it isn’t widely adopted, the calc CSS3 function may just be the one you need. It isn’t supported by a wild amount of existing web browsers, but this is a great option of the future for building with additional layers of pliancy.
Scaled Layout
Device orientations, such as portrait and landscape, have the viewport manipulated around them thanks to the latest CSS3 method. The visual layout is potentially altered depending on which way the device is held. It does this to alter the amount of space that is given to the content.
Unlike other layouts, this type isn’t reliant on measurement units. Instead, it relies on a specific layout type. It is still a way of handling complex columns on smaller screens.
The screen’s orientation wasn’t a consideration 10 years ago, but times do indeed change. Scaled layouts have their time in the sun on smartphones. The display is often rotated or readjusted frequently.
With iPhones, the orientation of the website is adjusted on the fly. Most handheld mobile devices have limited space available. You cannot alter the way pixels are being allocated. However, you are able to choose the method preference to visualize the information.
How each person utilizes their own web-enabled mobile device is different. This means your design is allowed to relate your content in a way that is transformative. It just depends on the orientation. This way, you are able to maximize your content’s usability.
Liquid Layout
The percentage unit of measurement is a method that is perhaps the most relaxing. It provides a dynamically contracting or expanding design. Also known as the fluid layout, it has gained major popularity due to its ultimate way of providing a layout that is the exact opposite of fixed.
When you use percentages, they require careful calculation. They won’t be able to provide more than 100% without having any issues. Just imagine your a 6-inch screen compared to a 100-inch screen at an 80% width. The limit will guarantee that you hold the viewport that is being used to go above and beyond screen resolutions.
This is a method that is worth looking into. It should go without saying that liquid layouts are more useful in web-based situations because the viewport dictates the width.
Conditional Layout
There has been a rise in catering to smart devices such as the iPhone. The primary objective for this catering is to alter web designs further than what conventional layouts allow. This provides an optimized experience for mobile device users.
Giving rise to a friendlier and more flexible way to represent the content on your site, serving a unique style sheet that is based on the viewport width and height or device has been implemented. We call this layout conditional.
Above is the design that uses CSS3 media queries. These queries scale the design down to a required size. This method shows the most promise over all of the others that have recently popped up. There are sometimes compatibility issues that need to be smoothed over, though.
A single style sheet is all that most web designs use. However, with CSS3 media queries, you can bring conditional layouts to meet the user in the best way. There is a downside, though. It is the fact that you have to maintain and develop style sheets for devices. This is done much like you would maintain IE-specific style sheets in the past.
Fluid-Min/Max Layout
It is a common problem that designers have; the amount of space becomes too narrow or wide, and the relatively-measured/flexible content because too compressed or diluted. However, with the use of min/max widths and heights, you are able to set up limits on the scaling of the design. This allows some flexibility still, if not only to a certain point. The viewport isn’t spanning. Instead, it flows where it is allowed.
This layout will only scale to a certain height or width that is fixed. Available space is an assumption that causes many problems with different layouts.
These benefits of the CSS properties (Min-height, Min-width, Max-height, Max-width) are most noticeable once your layout has been confined to certain fixed dimensions. Primarily when you don’t want the wrath of scrolling horizontally cursing you.
As an example, if you want your scale of width to be 100% for smaller screens, but only as much as 1,500px, you could set your max-width to 1,500px.
This web page layout method will provide a safety net for browsers to rely on. It is based on the values you set, giving your fixed work a bit more flexibility.
Hybrid Layout
With the mentioning of these above layout types, we should probably address the most popular of all the methods – the hybrid method. It lives up to its name, using a mixture of different layout types. This does include matching and mixing various concepts and units that ensure the adaptation of the web design to the viewport of the browser when it needs to be adjusted while retaining a level of control in areas that need a fixed structure.
This method does require that your work be more thoughtful. However, it is considered the smart way to develop and design your layout.
It is very common for websites to stick to hybridized measurement types suited to their needs. They use this hybrid layout because there are certain measurements that are useful for different situations. It is easy to cling to the idea that there is a single perfect layout somewhere ou there. However, the situational issues that many layouts encounter are easily overcome by the hybrid method. It overcomes them by blending the best of each layout together.
Maybe you wind up with an absolute layout for your print style sheet, and then perhaps you have fixed-widths using a body that is liquid and content that is elastic. The control could be fluid for the edges on the outside, flexible and scalable for specific devices. The combinations are endless…. almost.
In The End
In the end, when you are laying out the pages of your website, there are many options you can choose from. Pragmatically and theoretically, it only makes sense to pay closer attention to the design scope of your project. You need to do this while being aware of each detail as well.
The color of your theme and the fonts you use are important, but the layout type that you decide to implement is equally important. Also, it is worth noting, there isn’t a perfect way to handle every single situation. That just means that there isn’t a universal layout for all situations.
There isn’t exactly a wrong or right way to design, but being thoughtful about the different circumstances and situations will show you that there are practical approaches.
Web professionals have to come to terms with the fundamental skill of design. The internet is undergoing rapid evolution. Not just the progression of the utility it offers, but the way we view the information on the web is changing too. Making use of the right methods to accommodate these different devices is just as important as the content on your website.
The needs a good website must meet is ever increasing. The bar is constantly being raised. So the search for the perfect layout is constantly underway. Every web designer is putting great thought into finding the ideal layout for each situation. However, they may have to settle for a method that is a mixture of all the above listed to complete their quest.
