The Rising Importance of Flexible Web Layouts
Just a few years ago, creating a fixed-width design and the coding to stick to that width was practical, as long as it could accommodate a wide range of users. However, just a few years ago, having the Internet on a cell phone was a luxury, netbooks were rare, and the convenient tablet device, such as an iPad, didn't even exist. Now, a fixed-width design is almost inconvenient.
Image credit: Wapple Mobile Web
Mobile web designs began gaining momentum within the last few years, but often times they were just mobile stylesheets for very small devices, that accompanied the default, fixed-width stylesheet. Beyond this, truly flexible web designs have been few and far between. Ideally, a flexible web design should be fully proportional from the smallest to the largest device, without those proportions straining. After widths or heights hit a certain point (e.g. becomes too small for a computer screen), a design would then change stylesheets to alter content availability, layout structure, and more.
It's easy to see the advantage of flexible layouts, but there are still many advantages of fixed-width layouts as well: they're easy to create, faster to create, the layouts don't break, and content doesn't overflow to create a messy and unusable look. In other words, a fixed-width layout can be far more usable than any flexible layout if that flexible layout is implemented incorrectly. In this article, we'll discuss the basic pros and cons of each type of layout, and why flexible layouts, despite past drawbacks, will be gaining a competitive edge in the next several years over the once popular fixed-width choice.
Today's Popular Devices are Not Tomorrow's
2010 was the year of the iPad, and soon after it really took off, it was almost a necessity to create many websites to fit into the smaller screen, both in portrait and landscape mode. Suddenly, designers saw the need to create iPad versions of their website(s), whether they had previously had a mobile version, netbook version, or otherwise before. The iPad became such a popular choice for everyday web viewing, that this new screen size created significant attention.
Another popular platform that came out was Android, and the new devices and screen sizes that came with it. While the iPhone came out previously, 2010 was also an advancing year for smart phones. Even more than in previous years, "larger" mobile versions of websites were needed because larger smart phone screens encouraged more web use on phones. Suddenly, far more mobile versions of websites as well as tutorials surrounding this idea came about, both for these larger smart phones, and smaller mobile phones.
Image credit: almekinders
For whatever new devices come out in 2011, or whatever becomes more popular, are we going to repeat the same trend? For some new popular devices, yes. Is it practical to do this every year though, spending time to create website stylesheets and markup structures for only the most used and practical devices at the time, plus the standard computer screen browser?
A better answer would be to use more flexible design. We can set break points in flexible design, or specific rules for the most used devices and screen sizes that will be reigning over the next several years, but we should also plan for the future, and create a more usable web for all screen sizes — popular or not, and for those that have been invented yet or not.
Standard Computer & Laptop Sizes
Five years ago, the majority of web users from standard computers had a screen size of 1024x768. According to W3School's statistics, In 2005, the number sat at 53%, while 12% were above this size, and 30% - %35 were smaller or unknown. Shortly after this was about the same time when the popular 960.gs grid system came out (960px in width), and otherwise fixed width web designs were roughly between 800px and 1000px. This accommodated a large number of users quite nicely, and as the years continued, the once popular 800x600 screen size became even less popular.
As of January 2010, the smaller 800x600 screen size is at a mere 1%, but screen sizes are still growing. Now only 20% were said to be 1024x768, and over 76% were larger screens.
Now, for the majority of users, the many fixed width designs that are created around 960px or similar still fit into these larger screens without scrolling, but are these websites viewed on larger screens necessarily just as visually appealing and balanced? Are they still equally as usable?
Too much whitespace to the left, right, and even bottom of a webpage can make a design seem off balance, non proportional, and overall the content looks a lot smaller, even if it technically isn’t. With a flexible design, we could move content to the right as space allows, increase text size if necessary, and retain balance, proportion, and hierarchy once again.
On the other end of the spectrum, netbooks may not be considered the standard use computer to all, but these "mini-laptops" are becoming more popular for regular use when it comes to mobile working environments. For the most part, many of the same types of websites that are often viewed regularly on larger or more standard size screens are now being viewed on netbook sized screens.
Image credit: ekosystem
Many netbooks tend to strive for a usable screen resolution, mostly between 800x480 (one of the smallest) to 1280x800 (one of the largest). Many fixed width designs still work great, and are almost optimum for this sort of screen size. However, there are many netbooks that are smaller, and otherwise, many more that can fit many fixed width designs but still look rather squished. As these grow in popularity, it does seem possible that all netbook sizes, including the smaller versions, will grow in numbers as well.
Flexible designs could (and should) accommodate between all netbook ranges, and all or most standard computer sizes - without sacrificing proportion and other basic design principles.
Less Users are Using Maximized Browsers
After getting a new laptop with Windows 7, I was immediately a huge fan of the snap feature. It allowed me to easily "snap" two windows side by side, and for many projects, allowed me to work much faster.
However, I soon realized how many websites were still not flexible - including my own! There have long been users that do not maximize their browser, whether it’s because of new features like above, or otherwise. It never really truly hit me of how annoying and non-user-friendly a non-flexible design can be to these users until I, myself, became one of them.
For users that prefer to minimize browsers, non-flexible designs can require a lot of scrolling, and therefore possibly defeating the purpose of the added productivity they intend.
Smaller Devices Are Usually Touch Screen
If we can make a flexible design fit a smaller screen with minimal to no need for scrolling, we're already off to a great start. However, that's only part of the solution. With smaller screens also comes the greater chance that the device is a touch screen. Because of this, smaller screens should have simpler layouts with better touch-friendly navigation and usability. Even for smaller devices without touch screens, this same sort of added simplicity is better for mobile buttons and simplified navigation options.
Having custom-made flexible layouts that simplify as they reduce in size can create a better user experience for all users, opposed to the minimum of just allowing every user see the full design.
Today's Better Flexible Layout Methods
One excuse to not using flexible layouts for all web designs in the past was that flexible layouts were not only more difficult to implement, but they were also prone to breaking and eventually becoming unusable past certain stages.
One more thing 2010 was great for was the gaining popularity in responsive web design techniques. Elastic layouts, flexible or cropping images, and text resizing all gained new and easier methods to implement easily. Changing layout structure based on screen size, simplifying as screens or browsers became smaller, and structure based on orientation and general device use also became more popular.
With the use of CSS3's new media query features, doing these things also became a lot easier and gave web developers far more options.
Below are a few resources and techniques that have made creating fully flexible designs easier and smarter:
- CSS3 Media Queries
- How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
- Hardboiled CSS3 Media Queries
- Fluid Images
- Responsive Images: Experimenting with Context-Aware Image Sizing
- The Incredible Em & Elastic Layouts with CSS
- Liquid, Fluid, and Elastic Layout Templates, Tools, and Frameworks
The web is relatively new, and it's difficult to say what can evolve from it in the many years to come. Just within the last few years, we've seen an explosion of new devices, screen sizes, resolutions, and more, and it is becoming increasingly important to accommodate many of them.