The Rising Importance of Flexible Web Layouts

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.

The Rising Importance of Flexible Web Layouts
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.

Today's Popular Devices are Not Tomorrow's
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 1024×768. 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 800×600 screen size became even less popular.

As of January 2010, the smaller 800×600 screen size is at a mere 1%, but screen sizes are still growing. Now only 20% were said to be 1024×768, and over 76% were larger screens.

Standard Computer & Laptop Sizes

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?

Facebook Fixed Width

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.

Netbook
Image credit: ekosystem

Many netbooks tend to strive for a usable screen resolution, mostly between 800×480 (one of the smallest) to 1280×800 (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.

Snap Feature Flexible

Left: Garret Keizer | Right: Art Equals Work

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.

Snap Feature Fixed

Left: Keynote | Right: Panoetic

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.

Stephen Caver

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:

Conclusion

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.

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

  1. / Reply

    Totally agree.

    Also, it’s a great thing to bring up with clients I find.

    Once I speak to them and discuss the landscape of different browsers and devices then responsive design seems the obvious choice.

    Perhaps it’s not right for all projects but I think that they are very useful.

    On another related note, you can use media queries (as far as I know) to serve up different resolution videos (HTML5 based). I think this could also be very handy in supporting mobile users especially if this is combined with media queries for the CSS too. It’s mentioned here: http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

    Cheers,

    James

    • Ed,
    • February 4, 2011
    / Reply

    Great article Kayla. Things are changing for sure and the facebook page is a prime example. We’ve just been evaluating all this in-house and those browser stats are all the argument needed to drive the required change. Yes, it needs to look good at 1024×768, but it also needs to look amazing at higher res’s.

    On the subject of video players, JS player is pretty good at offering virtually 100% compatibility.

    • Alex,
    • February 4, 2011
    / Reply

    Nice article, but what’s the fuzz about fluid grids suddenly. Lately there’s popping out an article about this almost every week.

    I think it’s a good thing to consider, but overall and in my humble opinion; i think it’s still best to create a dedicated website for mobile users IF the client wishes to.

    Why? Let’s say you build a normal website width a fixed width so it’s viewable for the wide range visitors, that same site doesnt need another layout for let’s say the iPad ( or for any other tablet ), those things will fit the site in by themselfs.

    But notice that if someone needs a website, that HAS to be completely user friendly for a tablet, than you should redesign for touch interface, not just make a website fluid.

    same thing goes for mobile devices.

    Bottom line: Fluid grids are good but if you want maximum user experience for all those other devices: REdesign- simple as that

    • paul,
    • February 4, 2011
    / Reply

    Alex, it means your site can still look good in a non maximised browser window. (no horizontal scrollbar
    but clients love jquery slideshows, which are not flexible.
    so, if the browser window is not full screen, then the horizontal scrollbar appears.
    there’s a technique to only load javascripts depending on device width : http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

    1. / Reply

      If the slideshow contains images, than it should be possible to apply this easy technique:
      http://unstoppablerobotninja.com/entry/fluid-images/

      It doesn’t work when an image is set as background using CSS, only those inserted directly.

    • Pablo,
    • February 4, 2011
    / Reply

    Very good article!

    Trend is now that screen differs a lot between devices and it is becoming more and more difficult to keep a good balance regarding design.

    For bigger screens also special care has to be taken regarding the available with of the page.
    Imagine a fluid grid shown on a 1920px wide screen can make a site look really ugly if there isn’t a max width set for the page and the different page sections.

    Also on the development side it’s becoming harder to take decisions on how to structure a site to take such an amplitude of screen: do I make my site to work on every screen dimension? hide/remove different sections? make different site for certain scren sizes?

    Hard times are coming,

    Cheers,
    Pablo

    • Rana Mukherjee,
    • February 5, 2011
    / Reply

    good article

  2. / Reply

    the 960 grid system is the best

    • Donna,
    • February 7, 2011
    / Reply

    nice article having excellent web layouts…

  3. / Reply

    I would like here to mention two other discussion “responsive webdesign” and “adaptive webdesign”:

    http://www.alistapart.com/articles/responsive-web-design

    http://csswizardry.com/2011/01/forget-responsive-web-design/

    http://cssgrid.net/

    • Ben,
    • February 11, 2011
    / Reply

    Great article.

    • kevin,
    • February 18, 2011
    / Reply

    *fewer* users

    • Jane,
    • March 8, 2011
    / Reply

    One important factor now with multiple devices is not not have fixed fonts, try using em instead of px. That’s my advice. Remember how it will look on multiple devices and test.

    • Sambinomio,
    • March 21, 2011
    / Reply

    Excellent article !!!

    • Anonymous,
    • May 5, 2011
    / Reply

    Hi. I appreciate your willingness to put yourself out there and right an article.

    However it is this kind of regurgitated crap that bothers me about the state of web design/development today.

    You don’t own any of these concepts, discuss the implementation of them in different environs and assume that most people are working in agencies with full freedom to create such sites.

    When you are out of college and actually have some recognition for your accomplishments I’ll take you seriously.

    Otherwise I can read this article anywhere else. Sigh.

  4. / Reply

    Apple ipad did well in paying attention to the importance of flexible web layouts. it’s good to enjoy.

  5. / Reply

    great read. thank you. ;)

    • joe,
    • December 11, 2011
    / Reply

    I so agree with you.

    I have decided to almost completely stop google searching and getting ‘helpful hints’ from gurus out there.

    I spent so much time on this in the past. There was a site, that applauds itself over and over about its HTML5 version.

    Thing, is, you go do a W3C on them, to validate their site. There’s like over 100 errors.

    I did all mine in HTML5 and I have no errors.
    Mine don’t have the flash or whatever, but I like what this poster just said….the real world is a whole different thing than writing a self-congratulatory article or doing a website that breaks every rule you want to – but obeys none of the standards.

  6. / Reply

    As a webdesigner, i quite agree with you.. great job!

  7. / Reply

    Great article. With the increase of mobile browsing, now is the time to ensure that is adhered to!

  8. / Reply

    I wrote about flexible/fluid design in 2004. It has always been important. We have never had control over the user’s browser width/size, their screen/monitor size nor their resolution settings.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals