Where Have All the Flexible Designs Gone?

Contributing Editor

fluid designsHas anyone noticed that flexible/fluid and elastic website designs are becoming rarer? Although it is not possible to determine numbers, it seems that flexible designs are not as popular or widespread as they were a few years ago.

This is an unusual situation because flexible layouts utilize the strengths of the web as a design medium:

  • Flexible sites can be made to work at many resolutions. There is no need for heated debates or research about user screen sizes. Besides, screen resolution statistics are a myth; not everyone runs their browser full-screen and many have toolbars, sidebars, or other widgets that use valuable screen estate.
  • The user – not the designer – determines the dimensions of the browser window. Flexible designs give control back to the user without the need for horizontal scrolling.
  • Mobile phones, such as the iPhone, and games consoles are becoming viable alternatives for web browsing. In general, these devices have smaller resolutions and can benefit from flexible web designs.
  • CSS min-width and max-width allow designers to implement elastic layouts (SitePoint.com is a great example). The flexibility is restricted to ensure columns do not become too wide and unreadable or too small and hidden. There are also workarounds for IE6 if you need to fully support the browser.
  • A flexible layout can be switched to fixed layout with one or two CSS width properties. Switching from fixed to flexible is likely to present a more significant recoding effort.

However, designing for flexibility is more difficult. Many designers produce fixed-width sites because they are easier to comprehend and mock-up in a graphics package. The trend toward highly graphical designs can also result in layouts that require pixel-perfect positioning.

Or perhaps it is the economy? Flexible designs take longer to code and test, especially given the number of browsers available today. The perceived user benefits may not be worth the longer production times and higher costs?

Or maybe I am wrong? Are there are just as many flexible website designs but I am missing them?

Are fluid designs dying out? Do your clients prefer fixed-width sites? Does flexibility offer any real advantages to your users?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jim

    For me it is about what the vendor wants, we offer them advice about a good design based on their requirements but more often than not the fluid design we put forward is accepted on the proviso we make it fixed width, “we like this one but can you make it stay still”.

  • Smush Ltd

    I agree, flexible designs are becoming rarer but I always try to design and build flexible over fixed sites. It is however a lot more hassle which is probably why people are avoiding them if at all possible.

  • codepotato

    I find that fluid designs are difficult to work with, as often designing promotional areas with fixed widths look ridiculous on larger resolution monitors. Personally, there isn’t a demand for them.

  • madr

    There are 2 more reasons I think are relevant.

    * Banners and Ads are usually made with images and flash-movies, making it harder to do a design elastic or flexible. I have worked in the news paper world for 1 year and a half, and the ads really are a holy cow in these areas. So does article images too, where an elastic layout would make the view area to big for the top image.

    * Every browser but Safari 3 and below (safari 4 is coming), Firefox 2 and below and IE6 and below (which are to be viewed as obsolete/deprecated soon) have support for page zoom instead of text resizing, making the time to accomplish a flexible and elastic design hard to motivate since the majority of the visitors won’t even notice it.

    I have an elastic layout on my own site and feel comfort about using it, since I consider it good practice and fun to develop. I always give it a thought when entering new projects, but it is very unusual to actually implement it.

  • jphilapy

    # Flexible sites can be made to work at many resolutions. There is no need for heated debates or research about user screen sizes. Besides, screen resolution statistics are a myth; few people run their browser full-screen and many have toolbars, sidebars, or other widgets that use valuable screen estate.
    =========================

    That is one problem. More flexibility means less creative control. Somewhere there needs to be a balance between creativeness and science. It can’t all be about usability. Really, flexible layouts are very limiting in how creative you can be with them which ultimately boors the designers of the web sites.

    # Mobile phones, such as the iPhone, and games consoles are becoming viable alternatives for web browsing. In general, these devices have smaller resolutions and can benefit from flexible web designs.
    ======================================================

    I thought this is where css comes in allowing you to create alternative style sheets for different devices. So I can’t see this as a problem.

    Jeff

  • Stevie D

    I get frustrated with the number of websites that need pretty much the full width of 1024 to display without a horizontal scrollbar. On my laptop that’s fine, because I maximise the browser panels (1024 width) but on my PC, with a 1280 screen, I don’t – and I haven’t seen anywhere in Opera to change the default panel size, so some sites always appear with h-scroll. How many years of good practice development have passed these people by?

  • jphilapy

    I wanted to add to my first paragraph ‘ and in some instances the flexibility actually does limit usability and sometimes usability / creativeness goes hand in hand.

    Jeff

  • NathanaelB

    Line length. At modern screen resolutions upwards of 1280 pixels wide mean that unless you have a 5-column layout lines of text run longer than optimal reading length of 45-60 characters.

  • krues8dr

    It’s more a trait of the current style than anything else, imho. Especially these days with the rise of grid-based layout, fixed widths are more and more in vogue. Flexible width sites just look too 1997 these days.

    Ideally, you’re designing the layout with the content in mind, not just shoving the content in after you’re done. On a flexible-width site, that means your carefully kerned and spaced text is now 1200 pixels wide and looks like crap.

  • http://www.crearedesign.co.uk TomBradshaw

    I personally don’t like elastic sites. For me (and my clients) the overall design of the website is the most important thing, so I want it to look the same on every computer as it does when I’m designing it. I always design to a maximum width of 1000px, that way it can be viewed on a variety of screen sizes. Elastic designs can look quite empty on larger screens and look old fashioned. Saying that I think the sitepoint design is an example of how it can be done right.

  • http://www.magain.com/ mattymcg

    Great topic Craig.

    Interesting that you reference sitepoint.com as an example of a flexible layout. Unfortunately I can’t say for certain that this won’t change, largely due to one factor that hasn’t been covered yet — advertising units.

    IAB ad sizes are fixed dimensions, and for a site that sells advertising, as sitepoint.com does, creating a flexible layout that accommodates these fixed size ads and still looks good is very, very difficult — not just from a CSS point of view but as a design problem to solve. We’ll be the first to concede that the current incarnation of sitepoint.com doesn’t achieve it. And there is every possibility that future versions of the site will be strongly influenced by the need to integrate these banners.

    Of course, if your site has no need to accommodate online advertising units, then this isn’t a factor.

  • Andre Eldar Eide

    Personally I’m waiting for better browser support for media queries:
    http://www.quirksmode.org/css/mediaqueries.html

    Fluid layouts can be hard to maintain and test. While making 3-4 versions of CSSs adapted to different screen resolutions, can give a lot of interesting possibilities.

  • csleh

    Most sites I design are elastic, but every now and then a site needs certain image quality or size that doesn’t work with the flexible methods (use css to size in ems, a container that stretches or shrinks to show part of photo, etc).

    My clients don’t generally care whether a design fixed, fluid or elastic but I explain that using the elastic approach allows their viewers see the same(ish) design no matter what size they browse in.

    Besides specifying widths in ems, having a wrapper with a max-width in pixels is the only css difference. The design doesn’t change.

  • http://www.optimalworks.net/ Craig Buckler

    It’s interesting that ad units appear to be a major stumbling block for flexible designs. However, adverts have used fixed dimensions since day one and it is possible to have a couple of fixed-width columns dedicated to them.

    Adverts or not, I think krues8dr is possibly correct that it’s a design trait. I’m guilty myself at times, but sites such as mozilla.org show that attractive flexible designs are possible.

  • Tarh

    As a user, the most annoying thing to me in terms of design is when a website is fixed to a maximum of 1000px. I browse with a usable width of 1900px, so these designs become a waste of space. Honestly, I don’t care how pretty your website looks; I’m there for information, so give me information in the most easily digestible package (fluid width). Also, I haven’t met anyone who uses a computer with 1024×768 for over 3 years.
     
    For that reason, as a developer, all of my sites are fluid.

  • http://www.studio-gecko.com/ XLCowBoy

    The most common width is… 960px. Don’t believe me? Look around. Popular blogs, social network profiles, shops, etc. etc. Pretty much everyone has their content locked within 960px.

    One respondent mentioned readability – that’s one of the major points here. Nobody enjoys reading lines of text that are long enough to cover near-1280px of screen width.

    We’re currently redesigning our site to be fluid, but for 99.99% of our clients? All of them prefer fixed width, and at a size that usually falls into the 960px width area.

  • http://www.patricksamphire.com/ PatrickSamphire

    I think part of it is because design techniques have become more advanced. We don’t any longer just have to have white space outside the usable area. Clever use of background images means that the ‘spare space’ outside the 960px (or whatever) can be made interesting but not essential. Because of that, fixed widths can actually use space better.

    I think flexible designs (by which I mean fluid or elastic) have had their day.

  • http://www.visual28.com visual28

    I agree with others posting above. Long line lengths are a big problem with flexible layouts. Especially on newer iMacs and large monitors where you have 1680px and up resolutions with windows maximized. Personally I think it’s disgusting to see this, but I am amazed how often I do see it. A fixed width is the lesser of two evils.

  • stressonthesky

    Hmm a few varied responses to this. First of all to Tarh – hello, nice to meet you – I use a monitor whose ideal display resolution is 768×1024.

    I’m fairly sure I’m not alone here, perhaps any figures dredged up relating to average viewers’ screen width is more a reflection on a greater number of people using their widescreen laptops than anything else… but that’s a completely different debate.

    When I am starting a new web design I always attempt to think about what the site will look like not only in different screen sizes. It’s a fairly fundamental and important stage.

    I don’t feel web design has moved to a point where fluid layouts are obsolete. Equally I don’t believe the death of fixed-width is on the horizon either. I think it is more of a gentle combination of the two is required. And it’s quite possible, designers have been doing it for years. It just requires a little forethought and some clever css.

    I do however still resent designs which are fixed-width to the point where I have to scroll horizontally across the screen as well as down. It’s such a tedious b***l-ache and really detracts from what may be a very good design.

  • MGoddard

    For myself, I am limited to the designs that my company ‘approves’ and most of them involve fancy rounded corners, background gradients and use of a Content Management system where I cannot control the XHTML that is output so I am forced to create ‘fixed’ layouts unfortunately.

    I did try to create a ‘flexible’ layout once but with the so many variations that the users can add/update/delete options within the CMS, there was a greater chance of the designs breaking in ‘flexible’ layouts vs. ‘fixed’ layouts. Maybe my skill level is not up to par in creating ‘flexible’ layouts yet…? But with time, budget and requirement restraints, fixed has been the way to go.

  • Chris

    “few people run their browser full-screen”

    What statistics do you have to back this claim up? Every time I’ve looked at someone else’s computer (be they my parents, family or other non-tech people, or developers, marketers etc) they run their browser *maximised*. And pretty much all other apps for that matter too.

  • dmwalk

    Flexible widths should be almost completely eliminated because of the wide screens most newer monitors have. There are many studies that show line widths should be limited. You mentioned Sitepoint. Your flexible design is horrible. On my wide screen monitor, the line width in the center column of this blog is 9 inches long, way too long for comfortable reading. Flexible headers and background can fill space, however, the main content area should be fixed. Google News, for another example, limits line widths to about 6 inches on my monitor, however, then there is a huge amount of white space between columns which is not good. Quite frankly, I don’t think the technology is really up to feeding different layouts to different size monitors when they vary so much.

  • Paul McKeown

    Lovely thought provoking blog item; some interesting responses too. Who says the internet is full of garbage? Thanks – keep them coming!

  • Scott Hoff

    Flexible + fixed width Pictures can be a real pain in the butt. Now that browsers have zoom, it makes a good case for not having to do this. I made a totally flexible design for our company and was ordered to take it down b/c they wanted absolute control.

  • Anonymous

    Could it have something to do with the fact that zom is becoming the default resize method on the web at least?C

  • http://www.sinthuxdesigns.com sinthux

    It takes a lot of effort to make a design perfect for any screen resolutions. A lot goes into making a design look perfect at 1024×768 and then at 1680×1050. Which is why I typically don’t design my work for it to be coded fluidly.

  • dougoftheabaci

    1. Flexible layouts look ugly at almost every single resolution except the one you design them to look best at. There is no way around this as it’s a fundamental aspect of flexible layouts. Working at every resolution is only of benefit if it actually looks good at that resolution. ugly sites don’t sell.

    2. The user doesn’t always know best. More to the point if they need to zoom in to view it more any modern browser can zoom the entire page, making scalable pages a non-issue.

    3. iPhones work just fine on static layouts. I can’t comment on browsers but unlike mobile browsers (which are on the rise) I haven’t seen any data that puts the combined console browser market at anything close to a large number and considering how hobbled most mobile browsers are most of the time layout is stripped anyway. The iPhone just happens to have a nifty way around it.

    4. This last one is untrue if there’s a very complex layout. It can take a lot of reworking to convert some layouts so simply saying it’s an easy fix can be an outright lie in the right circumstance.

    Personally, I think this entire article is based on the outdated concept that fluid layouts are better than fixed, something I have never agreed with. Now that all the major browsers have scaling abilities it makes it useless from an accessibility standpoint leaving the only benefit as a rather tenuous one for those who use very old browsers, who tent to not get supported anymore anyway.

    I don’t know about everyone else but I stopped giving support to IE6 and now charge it as a feature, as I would for javascript, a CMS or any Flash work.

  • Stevie D

    krues8dr Says:

    Ideally, you’re designing the layout with the content in mind, not just shoving the content in after you’re done. On a flexible-width site, that means your carefully kerned and spaced text is now 1200 pixels wide and looks like crap.

    Sorry, but you haven’t understood what fluid sites can do. By using max-widrth (and a bit of Javascript if you’re bothered about IE6 users getting the full experience), you can have a site that is fluid up to a certain point, and then maxes out at a certain width. This gives you the best of both worlds – you constrain line lengths to a readable size and don’t have ever extending lines on a wide screen, but you make your site able to fit on a narrower viewport without horizontal scrolling.
    .
    TomBradshaw Says:

    I personally don’t like elastic sites. For me (and my clients) the overall design of the website is the most important thing, so I want it to look the same on every computer as it does when I’m designing it. I always design to a maximum width of 1000px, that way it can be viewed on a variety of screen sizes. Elastic designs can look quite empty on larger screens and look old fashioned.

    Oh boy, where do I start with this one?! OK, from the top.
    .
    The only way to ensure that people using the website see it as you designed it is to invite them round to your house and sit them down at your computer. Once you put it on the internet, preople WILL be browsing with different setups – Windows, Mac or Linux – IE, Firefox, Opera, Safari – PC+CRT, PC+TFT, laptop, mobile phone, TV+PS2 – different screen sizes – different viewport sizes – different preferences. You CAN’T control what people see. If you’ve designed a site for a 1000px wide viewport and I’m looking at it in an 800px wide viewport, I WON’T see it the way you’ve designed it. And you would seriously prefer me to miss 20% of the content and be pissed off because I have to scroll horizontally (assuming I even realise that) than make a design decision about how the site will squeeze down on a narrower viewport? A website isn’t printed on paper – one of the huge advantages of designing for the web over designing for paper is that it allows you to be flexible in the way information is displayed. Otherwise, why not just print off a PDF and nail it to the user’s monitor?
    .
    Don’t design to a maximum width of 1000px. And yes, I know lots of big websites do it, I know Alistapart, Facebook, Sitepoint, BBC and others need about that size. But it is still WRONG. A very significant proportion of people don’t have a 1000px viewport. A lot of people still have 800px screen resolution, so they will never see the whole of it. A lot of people have a sidebar open, so the viewport doesn’t take up the full width of the screen. A lot of people don’t have their windows maximised, so don’t fill the screen. I have my screen res set to 1280×1024, and I browse with Opera maximised, but each individual tab in a non-maximised window. Opera has decided that this should be 951×617 by default, and I can’t see any way to change that default. When I see a website that invokes a horizontal scrollbar, I know that the people behind the website haven’t given accessibility and usability the consideration it deserves – and yes Sitepoint, I am including you in this.
    .
    If you have a page width of 1000px, your site CAN’T be properly viewed in a good variety of screen sizes, because a huge number of people have their default or maximum possible viewport smaller than that. What you meant to say was “I always design to a maximum width of 1000px, that way it can be viewed by quite a lot of people with good eyesight and decent computers, and those who don’t fit my own computer and browser preferences can go hang”.
    .
    Yes, elastic designs that continue to stretch to infinity can look a bit crap – but come on guys, this is 2009. Even Jakob Nielsen has realised that you can constrain the maximum width of a fluid or elastic page, and has added a max-width to his site. That way, at a screen size of [your chosen preferred maximum] or larger, the viewer sees the site as you intended it (subject to the usual caveats), and if their screen size is less, the site will reduce to fit on the screen without horizontal scrolling. That is exactly what should happen.
    .

    Tarh says:

    Also, I haven’t met anyone who uses a computer with 1024×768 for over 3 years.

    They all use larger, or smaller? I use 1280 on my home PC, 1024 on my laptop, and 1024 on my work PC. I’d say between a quarter and a third of people have their work PCs set to 800×600. Just because you and your techy mates use high-end computers with massive screens (or very high resolution) doesn’t mean that “normal” people do.

  • http://www.lunadesign.org awasson

    Well it’s nice to see I’m in good company. Tarh ~ Pleased to make your acquaintance… I too have at least one 1024×768 monitors one of which I use every day to ensure that my fixed layouts are still acceptable in it.

    I have never been a fan of flexible layouts because unless you write code to vary the dimensions of your columns, switch images (of varying dimensions) based on resolution, adjust font sizes, etc… you are only fudging it and as has been mentioned the line lengths become a mess. I like the idea of switching stylesheets based on resolution. I think I’ll give that idea some further thought.

    I usually add Google Analytics to any site we’re redesigning and let it collect data for a while so we can get a snapshot of the demographics resolution and use that as a rule of thumb.

  • jdo

    With the exception of my first website, everything I have done has been a flexible layout design. That being said, I am serious considering fixed layout for the project I am just now starting to work on. The demographics for the site are late teens to early 20s and the content is not that extensive. Looking at similar sites it seems that the most successful are fixed width with a heavy emphasis on graphics. My current thoughts are (1) flexible layout for more content driven sites with more sophisticated users, and (2) fixed layout site with a heavily emphasis on graphics for the more ADD crowd.

  • Justen

    My clients tend to prefer fixed-width designs. I will advocate for flexible width if I think it’s going to serve their purposes better, and I have done that in the past successfully. Most of the time though they either already know they want fixed width or I present the option to them during the initial discussion and try to give each a fair shake; usually they choose fixed. I have seen some really great flexible width implementations that have inspired me to try to do it more often though – http://unstoppablerobotninja.com/ and http://therissingtonpodcast.co.uk/ are tied for my favorites.

    I don’t find designing flexible width more difficult per se, but I do come up with designs that just won’t work in one mode or other and so my decision is made for me.

  • john

    If you want your page to be the same on everyone’s computer, you can do this. It’s called a PDF. “Bullet Proof Web Design.” it’s a good book. It is difficult to design a fluid layout, but once you learn it you can quicky produce them. Remember switching from table to CSS for layouts and how hair pulling was involved? You should also check out some “progressive enhancing” for websites. Start with a symantec bare bones site that works on netscape 2 and then add CSS and JS to make it all web 2.0. Oh that takes time and we have a deadline. Photoshop, slice and dice. Next client/paycheck please.

  • Anonymous

    My observations as a designer, basic xhtml/css coder and business owner is:

    1. It requires longer timeline.
    2. It requires detailed planning from the designer & developer side. Example: Designer advises developer how a design can stretch without affecting the overall look.
    3. It incurs more cost for the time.

    End of the day, I believe it’s IF the project requires a fluid layout. And instead of the width, some users prefer controlling the details they only need to see – which gives them more space, in general.

    Well, that’s my take on this.

  • Anonymous

    There is one major reason behind fixed layouts, and that is CSS. We all understand that tables should not be used for layout, but the current versions of CSS is not really ready for it. Or, at least not the implementation in the curent browsers.

    Flexible layouts can be made, but the development time just can’t compare with using tables.

    And to those who think they make “flexible” designs. If you need to specify the width of something, even if you use percentages and ems, you are actually making a fixed design. A truly flexible design, as used by tables in the past, will adjust automatically to whatever you choose to put inside the coloumns

  • http://www.jasonbatten.com NetNerd85

    There are a lot more things to raise issues over other than resolution.

  • Philip Seyfi

    I think the main reason is the constantly increasing size of monitors and resolution. I have a 30″ (2560×1600) LCD screen an I hate fluid sites – they are unusable and very hard to read… You have to move your mouse over the whole screen to click a menu item, you have to move your head to read the date stamp on a forum etc.

  • http://www.lunadesign.org awasson

    Chris Says:

    “few people run their browser full-screen”

    What statistics do you have to back this claim up? Every time I’ve looked at someone else’s computer (be they my parents, family or other non-tech people, or developers, marketers etc) they run their browser *maximised*. And pretty much all other apps for that matter too.

    I think as a result of super large monitors less people are running their browser windows at full screen. For example the 24″ iMac runs at a resolution of 1920×1200… That is a huge dimension to use in its entirety for viewing a web page.

    …But on my SyncMaster 20″ I run browser windows at full screen (1280×768) most of the time :)

  • Weirdo Wisp

    Also mind that netbooks sell like crazy. Most of them have a resolution of only 1024 × 600 or even 1024 × 576. Of course, then you still have to subtract browser and OS chrome … There are lots of small devices out there today and I guess their numbers will still increase.

    On my high resolution screen, the browser window is usually smaller than 1000 × 1000 pixels. I cannot understand people who maximize all their windows on larger resolution.

    I do not like multi-column or grid layout with too many columns. Those are distracting most of the time. Just do one large main content column and one or at most two smaller columns. There is no need for fixed pixel sizes on the main column; max-width (set in em, not px!) should take care of a readable line length.

    Oh, and while we are at it: Do not size fonts too small. Generally, everything smaller than 12px is too small for me. Just use the browser default (1em).

  • Ddotkling

    My new “elastic” website has just made its debut– please check it out!

    http://www.debraklingcolourconsultant.com

  • dizayn

    I agree, flexible designs are becoming rarer but I always try to design and build flexible over fixed sites.

  • fproof

    The layout of the site we’re working on right now is for a great part determined by the ads that are going to be served, and MIGHT by served in the near future.
    In the top we have a leaderboard of 720, but since ad agencies are asking more and more for 840px leaderboards, we have to take that into account. The skyscraper might grow as well, from 160px in width to 240px. And then you have the overlays, the rectangles, the take-overs, this new ADRIME ads, the old 468 banners, etc…
    Then you still need to try and match all this with a nice graphic design.

    In the end the design has to follow a whole bunch of rules making it practically impossible to create a flexible layout. So in this case (and there are thousands and thousands of websites like this) the commercial aspect impacts the layout, and there’s not so much to discuss there. So for this reason we stick with a fixed 960px, which is a relatively ‘safe’ width that keeps it fairly easy to integrate all IAB banner sizes.

  • http://akindale.com brandaggio

    In my personal experience, very short duration iterations and a strong need to validate against PSD comps, make flexible layout uncommon. As such, it is incredibly rare to see it as a business or technical requirement (or even enter into the discussion for that matter).

    Beyond IAB requirements, internal promotions on ecommerce sites and the like are almost always fixed width (e.g. some Flash slideshow teaser).

    The grid techni

  • http://akindale.com brandaggio

    ^Didn’t mean to submit quite yet…oops :)!

    The grid techniques we see in Flex RIA dev (and other similar approaches) will slowly bring this sort of layout back, but only if it is built into the dev – not if it adds overhead.

  • http://www.lunadesign.org awasson

    Ddotkling Says:
    April 19th, 2009 at 12:53 pm

    My new “elastic” website has just made its debut– please check it out!

    Unless I missed something it doesn’t appear that your new site is “elastic”. I didn’t look at the source but it acts like a fixed width centered website. Nothing wrong with that but it isn’t quite the same as the flexible designs that the author was discussing.

  • nwhite

    I generally use 1900×1200 res and my browser generally takes up 1200-1500 width. I have real issues with designers that take print design and try to apply it to the web. As its been pointed out you can’t control how the content is going to be digested/viewed. With that said I agree with a lot of the comments about fluid layouts on larger screens. I think there is a middle ground that can be achieved. I’m not saying my site is the best example of this but it works well for me http://www.nwhite.net/. I think its a pseudo fluid site. The content area can grow and contract. The sidebar is fixed, this solves the issue for banner ads. I lockout the max size of the site at 1300, and a min at 700. For me the site still retains the structure and style while giving the flexibility to the user.

    As far as dev time, this is BS. If you have a solid understanding of CSS it doesn’t add anymore time. I think fluid principles and techniques can enhance and improve the usability of a fixed site without breaking the design. You can contain fluidity and find a happy medium. It is not all or nothing.

    Ddotkling: this is not a fluid site, table code?

  • Tim

    Monitors have got bigger and wider, but the amount of content being published per page still remains about the same unless you are a news site.

    Making the design fluid only solves the problem if making it fit different resolutions. At some point it just looks ridiculous on a larger format screen (which are becoming more common), without adding more content. Add more content and all of a sudden it looks ridiculous on a smaller screen.

    Now if there was a way to make the amount of content per page fluid along with the design, AND solve the brain overload problem from having a massive screen full of text … not going to happen anytime soon.

  • Ddotkling

    “Elastic” was a pun, in my case. The rubberbands (flash) are elastic. I was just trying to inject some humor into the discussion.

  • Tim

    awasson Says:

    I think as a result of super large monitors less people are running their browser windows at full screen. For example the 24″ iMac runs at a resolution of 1920×1200… That is a huge dimension to use in its entirety for viewing a web page.

    But on my SyncMaster 20″ I run browser windows at full screen (1280×768) most of the time :)

    I have 3 monitors plugged into my PC. A 1600×1200, 1920×1200 and 1024×768. And I run browsers full screen most of the time on all of them. Except of course when the elastic/fluid website decides to use the entire browser width and makes their content unreadable. And then I *have* to resize my browser window to make it readable.

  • http://nixbased.com tuxus

    It is surprising that some of the developers commenting both A) don’t understand the entire concept of fluid/fixed and elastic layouts and/or B) have not read the comments made before they decided to comment themselves.

    For me the answer is usually a hybrid but each has pros and cons, to claim you hate one type or the other is equal to limiting your abilities to those that fit inside your own metaphorical box.

  • http://thenetgen.com agentforte

    @jphilapy

    That is one problem. More flexibility means less creative control. Somewhere there needs to be a balance between creativeness and science. It can’t all be about usability. Really, flexible layouts are very limiting in how creative you can be with them which ultimately boors the designers of the web sites.

    I find your comments are very narrow minded. I don’t see how a fluid design would limit creativity. In fact, you can be more creative with a fluid design. I get bored with static designs. There is no challenge. Fluid designs actually allow you to make your website look all kinds of sexy. Of course, only a creative person would be able to understand that.

  • http://thenetgen.com agentforte

    By the way, I agree, many sites seem limited to static designs, it is not just you. I also agree with tuxus, a mix is usually the best way to go, since content is king and paragraphs should not be too narrow or wide or it becomes difficult for users to read that content.

    I use fluid designs for my employer’s website, which allows more products to be “above the fold”. This is like having a larger store front, and it is more valuable to a business.

    As for the time investment… it would take just as long to crate static as it does fluid. It is just a matter of using percent instead of pixels when you design the layout. I think some people just think it takes long because they did not know how to prevent floating objects from jumping down the page when the screen is re-sized. Once you figure this out, it does not take any significant amount of time.

  • http://www.lunadesign.org awasson

    Ddotkling Says:
    April 20th, 2009 at 9:58 am

    “Elastic” was a pun, in my case. The rubberbands (flash) are elastic. I was just trying to inject some humor into the discussion.

    Ahhh… Ya got me : 0

    Thanks for adding some humor to the discussion. I think (based on my response) it needed it.

  • Ddotkling

    Here are the rubberbands again, to make it easy: http://www.debraklingcolourconsultant.com/Rubberbands.swf

  • http://www.patricksamphire.com/ PatrickSamphire

    Some of you seem to be assuming that those of us who don’t like fluid sites just don’t understand how to do them properly. That’s not true. I have, I think, six sites that have variable width with a maximum and minimum width (that works in all browsers from IE5.5 on). But the truth is, the content is only at its best at one particular width (on my sites, it tends to be at the maximum width), and at other sizes it’s definitely sub-optimum. This is inevitable; you can’t optimize for every width you allow.

    So, now I wouldn’t even consider a variable width site (unless I was using completely different layouts at different widths, which is an option). In my humble opinion, it is far better to use backgrounds to fill the white space on larger screens with graphical elements that draw the eye towards the content, but which are not content in themselves.

  • http://thenetgen.com agentforte

    A lot of people can see where flexible designs are not good: paragraphs of text.

    When you are displaying items (products, images, etc) on a page however, you can use the “float left” and have a lot of products fill the top area when maximized on a large screen, and have them “jump down” to prevent the horizontal scroll bar on smaller screens.

    Here is a flexible design that looks good at almost any width: http://tmetrix.com/. Although, like any website design, if the screen is too narrow it would never look good (hidden content with horizontal scroll or too many line breaks in the text). I think the key test is to determine if you have “compartmentalized” content. If so, a fluid width may work since you can float the items. If not, then things can stretch out of whack.

  • Stevie D

    So, now I wouldn’t even consider a variable width site (unless I was using completely different layouts at different widths, which is an option). In my humble opinion, it is far better to use backgrounds to fill the white space on larger screens with graphical elements that draw the eye towards the content, but which are not content in themselves

    That’s all very well for the times when the viewport is wider than the chosen width, but not for the frequent occasions when it is narrower. It is far better to have a design compress in a slightly suboptimal way so that it fits into the width of the viewport than to protect the original design but require horizontal scrolling to see all of it.

  • Lars

    This general question has been discussed a lot. But it seems like newcomers don’t understand the possibilities offered by CSS and Javascript in term of adaptive design. Check this out :

    http://themaninblue.com/experiment/ResolutionLayout/

    Of course, thinking elastic requires more work. That’s why nobody does it. No time. And the clients are still thinking web = print.

  • Tarh

    They all use larger, or smaller?

     
    They all use larger, if only by a little. These are mostly resolutions from laptops as well; 1024 x 768 doesn’t even deserve a place in the discussion of desktop resolutions.
     
    ————————
     
    And to everyone chiming in to say they use 1024 x 768: it was fun to read the text that you wrote on my computer monitor, but I have news for you — we still haven’t met. Nonetheless, I feel quite sorry for you for using such an unusable resolution; coding must be a nightmare!

  • http://www.patricksamphire.com/ PatrickSamphire

    That’s all very well for the times when the viewport is wider than the chosen width, but not for the frequent occasions when it is narrower.

    In those cases, particularly if using a mobile device, I think it’s better to detect the lower size and serve a different version, rather than trying to cover all viewport sizes. I appreciate that’s not possible for all sites, though.

  • Anonymous

    They all use larger, if only by a little. These are mostly resolutions from laptops as well; 1024 x 768 doesn’t even deserve a place in the discussion of desktop resolutions.

    Except that according to analytics reports for a dozen sites in my care, 1024×768 has the largest percentage of visitors. Yes there are visiors with larger resolutions and maybe 2% with lower but the largest percentage are 1024×768.

  • Tarh

    Except that according to analytics reports for a dozen sites in my care, 1024×768 has the largest percentage of visitors.

     
    I don’t recall writing anything that disputed this claim.

  • Stevie D

    They all use larger, if only by a little. These are mostly resolutions from laptops as well; 1024 x 768 doesn’t even deserve a place in the discussion of desktop resolutions.

    If your website is aimed solely at high-end users and you don’t want any business from someone so destitute as to not own the very latest technology, that’s your call. But for a general website aimed at a cross-section of the population, 800px is the minimum width to design for – even 1024px is an unacceptable minimum.

    “Doesn’t even deserve a discussion” … I simply can’t believe the élitist snobbery of it. What screen resolution and browser window size I choose to use is absolutely no business of yours … your business is to cater for any reasonable choice I might make, and whether you like it or not, 800px is a reasonable choice.

  • Cvdb

    What about fixed left-aligned sites vs fixed center-aligned sites?

    I still see a lot of fixed sites (800px – 1000px width) being left-aligned, does anyone know why many large sites still do this? Especially on widescreen monitors left-aligned sites look weird in my eyes (my chair and eyes are positioned at the center of my screen). Can any of you name arguments to left-align a fixed site and why it’s better to center it?

  • Stevie D

    I still see a lot of fixed sites (800px – 1000px width) being left-aligned, does anyone know why many large sites still do this?

    Centering a page within the viewport generally looks better, and more balanced, than having it all squidged up on one side. (That’s a general view, and there probably are some sites where it doesn’t hold true)

    I would guess that one factor for left-aligning a page is that it is a bit easier! Less to think about in the design, less to go wrong, particularly at smaller window sizes. That isn’t necessarily a good reason, but it is a possibility.

    There are plenty of questionable (and worse) design practices out there, and left-aligning sites is not high my list of things to worry about!

  • http://www.tibobeijen.nl Tybe-O

    Interesting discussion. My feel in general is that in most cases fluid sites don’t look to good on high resolutions. Take for example amazon.com. It’s min res. is 1024 and scales up to my screen res. of 1600. I don’t see the added value in the white space around product icons. For me, the site might just as well have kept it’s original width.

    The main benefit of fluid design I think is in allowing 1024 optimized sites to scale down to 800px. A reason for that is accessibility and zoom. I wrote an article on that subject on my blog.

  • Niels Matthijs

    Fluid design is nice for blogs and other text-heavy sites. And even then, the fluid aspect should be quite limited. Fully liquid sites result in overly long or overly short line-lengths, decreasing readability.

    It’s also difficult to style visual components over a certain width-range. If, for example, you have a tab component in a liquid container, the tabs can’t reach further than the min-width, or else the tab navigation might break and will mess up the tab-effect.

    My site is still liquid, as I have a simple blog where the main text part can size a little. Still, sometimes I wonder whether a scrollbar isn’t a better solution, simply hiding the context (= not as important) and keeping the content section the same.

  • http://www.jasoncurran.com/ JasonCurran

    My experience doing client work has taught me that clients expect that a web site will appear identical across all resolutions, browser versions, and platforms..

    Just like a television show looks the same on all televisions (before 16×9..

    Most clients do not understand the concept of fluid designs, and even though it is possible to make almost web site a fluid design, it often takes much longer to code, and in a world where time is money, clients would rather save the money than pay for the extra time that it would take to make a complicated design fluid..

  • Hamranhansenhansen

    The problem is that so-called “flexible layouts” or “liquid layouts” were not flexible enough or liquid enough, and look bad under most circumstances. You have to use JavaScript onresize to make a layout that is sophisticated enough in its construction to actually achieve the results that were advertised as being possible with HTML+CSS alone. Hardly anybody does this yet, but I think in a few years everybody will be altering the page layout with JavaScript onresize and other events.

    For example, you can watch for when a Web browser goes double-wide and fill up the empty right-half of the page with a sitemap or callouts to items within the page, or split a single column into 2 now that you have the width. There are all kinds of ways you can use extra space that the user gives you to enhance the page.

    Another thing that contributes to fixed layouts being popular is the graphics and design workflow for most Web projects is still stuck in the print past. Web pages are essentially designed and built in Photoshop and then instead of going File > Print, the designer emails the PSD to an engineer who translates it into HTML+CSS+JS so that you see the exact same thing in the browser. The engineer essentially enables a “Print to Web” command in Photoshop. Worse still, the online version almost certainly won’t be built in layers, it’s just a flat photocopy of the original design so it can’t be animated or adjusted at runtime. There’s a whole universe of online design possibilities that is not even being explored by most designers because they’re essentially still working in Print.

  • Sergey

    …elastic layouts (SitePoint.com is a great example)…

    It is not easy to read SitePoint.com text on both small and big resolution. Also I fill not ok when there are not much of free space.