Don't look now: CSS3 Media Queries make liquid layout feasible again
For years, web designers have argued amongst each other whether layouts should have a fixed width, remaining in the same width regardless of the size of the browser window, or liquid, expanding to the full width of the browser window. Thanks to CSS3 Media Queries, this storied debate has a new chapter.
Just when I thought we had this settled
When I had heard that Jon Hicks used Media Queries to feed smartphones a specialized layout that looked gorgeous on small screens, I thought that was pretty cool. But in later iterations, I began to notice something: the site’s layout also changed if I expanded the browser window to be a lot wider than 1024 pixels, the industry standard that virtually all web designers support.
A simple perusal of the site’s stylesheets (a practice Hicks welcomes, with a friendly greeting in a comment at the top of his HTML markup) reveals that he created a layout specifically for browser windows wider than 1500 pixels. Even in a browser window 1920 pixels wide, the layout is gorgeous, and the text is readable.
In other words, CSS3 media queries enabled Hicks to overcome what I felt was the most compelling reason to use a fixed-width layout: by changing the layout depending on window size, he kept column width down to a readable width.
Liquid layout helps sites feel like apps
More and more apps are going from the desktop to the cloud, and that means more and more web-based designs behave like desktop applications. Fixed-width layouts do not feel like desktop applications, because those applications always expand window content to fill the entire window.
This will raise expectations for websites that aren’t really applications, but mostly offer text to read. One interesting example is USA Today’s Chrome Web App (which only works in a Webkit-based browser like Chrome or Safari). It customizes the layout somewhat for various window sizes, and makes use of CSS3 columns to help maintain readability for wider browser windows. However, the site also has a maximum width of 1280 pixels, which is the most popular screen resolution for many sites (even more popular than the stalwart standard, 1024). Without traditional website-style navigation tools, this site lets users focus on the content, and just the content — much like an app on a mobile device would.
More sites use client-side scaling
Combine all of the above with the fact that client-side scrolling is not only appearing in many more sites, it usually looks great, thanks to the filtering that modern browsers apply to resized images. This technique is forbidden in most best practices documents. However, it’s possible that technology has advanced enough, with hardware graphics acceleration being a standard in most modern browsers, it may be time to re-examine this standard.
New technology calls for new ideas
No technical field remains stagnant. No standard remains the standard forever. Now is an exciting time to be in the field of web design, because in order to remain competitive, we need to go back to the drawing board and re-imagine what we want to accomplish with our work.
Amy Ort