Fluid vs. Resolution Dependent
August 17, 2010 8:58 AM Subscribe
I've got some questions about resolution dependent vs. fluid layouts in web design...
I'm doing some content updates for a university website, and as we're going along, I'm also fixing minor issues with code. I'm not a professional web designer, by any means, I only know basic HTML/PHP/Javascript etc...
The problem I'm running into is this - the site is designed with a CSS for each browser/resolution, which I think is called a resolution dependent layout. Well, not *each* browser, actually. There are about 20 CSS files, evenly split between Opera/Firefox/IE. In addition, all of the widths are fixed, instead of percentage, like so:
This is for ie7x1280:
div.menuBar {
float:left;
padding-left: 2px;
padding-bottom:1px;
margin-left: 0;
margin-top:178px;
background-color: #29069B;
width: 980px;
}
ie7x1024 has width: 759px, and so on.
This seems, in my uneducated opinion, to be a massive pain in the ass. Here's the current site in question.
Not only that, but the proposed update to the site that the designer has sent actually looks worse.
So my questions are :
1. For a site like this, which is a better plan in the long run, resolution dependent or a fluid layout?
2. If fluid, would it be possible for a competent designer to switch over to it, and how many hours might it take? An educated guess is ok here, I'm not going to take it as gospel.
3. If resolution dependent, am I just being silly about the fixed pixels, ie. is this standard, and people just deal with it?
A little backstory on the website, as it may be pertinent : The site was originally created by an actual web designer (or so they claimed), and the current assistant director (my boss) loves the design. The current person working on the website isn't actually a web designer, he's a database programmer, who apparently does the design stuff "in addition." He doesn't seem to have a very good eye - for example, we haven't been able to explain to him in a way he understands that this image looks terrible on the new site, it appears pixelated.
I've already suggested moving everything over into something that would be far simpler for the staff (present and future) to work with, say like Joomla - but as I mentioned, they have a lot invested in their current design, and it would have to duplicate the current layout, which is probably a lot more work than I'm getting paid to do.
If I'm sounding like one of the nightmare clients like the ones mentioned in this post, feel free to correct my mistaken notions.
I'm doing some content updates for a university website, and as we're going along, I'm also fixing minor issues with code. I'm not a professional web designer, by any means, I only know basic HTML/PHP/Javascript etc...
The problem I'm running into is this - the site is designed with a CSS for each browser/resolution, which I think is called a resolution dependent layout. Well, not *each* browser, actually. There are about 20 CSS files, evenly split between Opera/Firefox/IE. In addition, all of the widths are fixed, instead of percentage, like so:
This is for ie7x1280:
div.menuBar {
float:left;
padding-left: 2px;
padding-bottom:1px;
margin-left: 0;
margin-top:178px;
background-color: #29069B;
width: 980px;
}
ie7x1024 has width: 759px, and so on.
This seems, in my uneducated opinion, to be a massive pain in the ass. Here's the current site in question.
Not only that, but the proposed update to the site that the designer has sent actually looks worse.
So my questions are :
1. For a site like this, which is a better plan in the long run, resolution dependent or a fluid layout?
2. If fluid, would it be possible for a competent designer to switch over to it, and how many hours might it take? An educated guess is ok here, I'm not going to take it as gospel.
3. If resolution dependent, am I just being silly about the fixed pixels, ie. is this standard, and people just deal with it?
A little backstory on the website, as it may be pertinent : The site was originally created by an actual web designer (or so they claimed), and the current assistant director (my boss) loves the design. The current person working on the website isn't actually a web designer, he's a database programmer, who apparently does the design stuff "in addition." He doesn't seem to have a very good eye - for example, we haven't been able to explain to him in a way he understands that this image looks terrible on the new site, it appears pixelated.
I've already suggested moving everything over into something that would be far simpler for the staff (present and future) to work with, say like Joomla - but as I mentioned, they have a lot invested in their current design, and it would have to duplicate the current layout, which is probably a lot more work than I'm getting paid to do.
If I'm sounding like one of the nightmare clients like the ones mentioned in this post, feel free to correct my mistaken notions.
Best answer: 1) I tend to like fixed width sites. I usually go with one size - 960px wide, but I imagine I'll bump that up in a bit, as screens are getting bigger. This article on Responsive Web Design might be worth reading.
That said, I think your site could go fluid pretty easily. I just find wide widths for text are not so easy to read.
2) Are you using a CMS at all now? I am guessing not - but if you were, it wouldn't take that long to edit things to a fluid width I imagine. If you're not, then you're looking at manually going through each file and making adjustments to the html... unless you're lucky and you can do everything with CSS, but I doubt it.
3) I don't like the idea of 20 different css files based on browser size. One set for 960px (or whathaveyou) for most computers, and another for mobile should be fine.
I don't think you'd have too much trouble converting this layout to a CMS. Not too familiar with Joomla, but I can't imagine this layout would take that much time in Wordpress. Chances are you can find a template out there that is already pretty similar, and just make a few adjustments.
posted by backwards guitar at 9:38 AM on August 17, 2010
That said, I think your site could go fluid pretty easily. I just find wide widths for text are not so easy to read.
2) Are you using a CMS at all now? I am guessing not - but if you were, it wouldn't take that long to edit things to a fluid width I imagine. If you're not, then you're looking at manually going through each file and making adjustments to the html... unless you're lucky and you can do everything with CSS, but I doubt it.
3) I don't like the idea of 20 different css files based on browser size. One set for 960px (or whathaveyou) for most computers, and another for mobile should be fine.
I don't think you'd have too much trouble converting this layout to a CMS. Not too familiar with Joomla, but I can't imagine this layout would take that much time in Wordpress. Chances are you can find a template out there that is already pretty similar, and just make a few adjustments.
posted by backwards guitar at 9:38 AM on August 17, 2010
Best answer: 1. In the long run, you'd want to transition to CSS3 techniques like media queries, which let you have your cake and eat it too. This leaves retro browsers like IE7 behind though.
2. CSS3 is kind of a new world, and I don't know how many people are fluent in it. I don't know how long it would take to get the site up and running in it--on the one hand, it's not a complicated layout, on the other, doing it right means there's always more fiddling that can be done.
3. I think fixed width and using pixels as the basis for metrics are fine. I've seen some CSS frameworks that use ems as the basis for almost all metrics, which involves a little more math--I think this has the advantage of handling scaling better.
Adapting an existing design to a CMS template shouldn't be all that hard, although there can always be unforeseen hiccups, where a certain CMS-generated page winds up with elements your original design didn't allow for.
posted by adamrice at 9:44 AM on August 17, 2010
2. CSS3 is kind of a new world, and I don't know how many people are fluent in it. I don't know how long it would take to get the site up and running in it--on the one hand, it's not a complicated layout, on the other, doing it right means there's always more fiddling that can be done.
3. I think fixed width and using pixels as the basis for metrics are fine. I've seen some CSS frameworks that use ems as the basis for almost all metrics, which involves a little more math--I think this has the advantage of handling scaling better.
Adapting an existing design to a CMS template shouldn't be all that hard, although there can always be unforeseen hiccups, where a certain CMS-generated page winds up with elements your original design didn't allow for.
posted by adamrice at 9:44 AM on August 17, 2010
Best answer: Fixed width versus fluid is, I think, a question with legitimate debate and no right answer. Certainly no quick right answer.
However I do feel fairly happy in declaring off the bat that the current implementation is dreadful. I'm inclined to be even more offended by the browser specific CSS files than the resolution specific ones, but even that pales in comparison to my horror at what pengale points out, the fact there are no styles without javascript. Eww. Even that's a very minor quibble compared to the drop down menu, which is an eipc WTF - it seems to have a whole load of new doctypes and s in the middle of the document, I'm honestly surprised firefox renders it at all. And I agree with you that the new version looks worse, that font size thing is hideous (and unnecessary).
Basically there's enough wrong here that I'm tempted to make very profane and derisive statements about this self-proclaimed "actual web designer". On the other hand, from what I gather of MetaFilter, such rudeness is frowned upon, and I agree the visuals aren't particularly bad by academia standards, and the markup of the new verson is an improvement. It doesn't validate, but it seems to be mostly fairly small and silly things, and while I don't suppose if it would pass Section 508 / AAA etc (which might be your best basis for arguing for an overhaul?), it could be much much worse in accessibility terms.
So I'll try and stifle my natural elitist/snob/jerk bitchiness - it's not great but it's not the worst. Which leaves me not sure how to tackle your questions. Honestly this seems more of a "political" situation than a technical one. By which I mean, in practice, getting it changed is more about exactly how much you care about it, how hard and persuasively you can fight for changing it, than a matter of clear cut technical web developer "right answers".
All that said, my best stab:
1. Personally for a site like this I would probably a kind of "semi-fluid" approach, where the main column was (e.g.) 600 < w < 1400. It's not "designy" enough to necessitate a fixed-to-the-pixel approach, so it's nice to take the web ethos of expanding depending on UA. But the trouble with fully fluid layouts is that people with huge screens end up with hugely long lines, which is proven to be poor for reading.
2. Really hard to say. Is it content managed? If so, in what? To be honest, if I couldn't whip up a nearly-identical-looking-but-technically-better "shell" in half a day I'd be highly disappointed with myself. If it's in a CMS, turning that into a template is going to depend on the templating language, so I can't really estimate. If it's not, applying to that new shell to all the pages manually is obviously a case of manual tedium that roughly scales with how many pages there are (I didn't feel like counting) and how many have awkward "special case" content.
3. Fixed pixel layouts raise strong "philosophical" ire in some people. I don't quite agree, I'm a bit more pragmatic. My technical problems with this site are not so much the fixed pixel parts per se as the way it's been done specifically.
I hope that's some sort of help. Full disclosure: I am professionally employed in the field, but I wouldn't ever claim to be a shining expert of almighty correctness.
posted by Slyfen at 10:12 AM on August 17, 2010
However I do feel fairly happy in declaring off the bat that the current implementation is dreadful. I'm inclined to be even more offended by the browser specific CSS files than the resolution specific ones, but even that pales in comparison to my horror at what pengale points out, the fact there are no styles without javascript. Eww. Even that's a very minor quibble compared to the drop down menu, which is an eipc WTF - it seems to have a whole load of new doctypes and s in the middle of the document, I'm honestly surprised firefox renders it at all. And I agree with you that the new version looks worse, that font size thing is hideous (and unnecessary).
Basically there's enough wrong here that I'm tempted to make very profane and derisive statements about this self-proclaimed "actual web designer". On the other hand, from what I gather of MetaFilter, such rudeness is frowned upon, and I agree the visuals aren't particularly bad by academia standards, and the markup of the new verson is an improvement. It doesn't validate, but it seems to be mostly fairly small and silly things, and while I don't suppose if it would pass Section 508 / AAA etc (which might be your best basis for arguing for an overhaul?), it could be much much worse in accessibility terms.
So I'll try and stifle my natural elitist/snob/jerk bitchiness - it's not great but it's not the worst. Which leaves me not sure how to tackle your questions. Honestly this seems more of a "political" situation than a technical one. By which I mean, in practice, getting it changed is more about exactly how much you care about it, how hard and persuasively you can fight for changing it, than a matter of clear cut technical web developer "right answers".
All that said, my best stab:
1. Personally for a site like this I would probably a kind of "semi-fluid" approach, where the main column was (e.g.) 600 < w < 1400. It's not "designy" enough to necessitate a fixed-to-the-pixel approach, so it's nice to take the web ethos of expanding depending on UA. But the trouble with fully fluid layouts is that people with huge screens end up with hugely long lines, which is proven to be poor for reading.
2. Really hard to say. Is it content managed? If so, in what? To be honest, if I couldn't whip up a nearly-identical-looking-but-technically-better "shell" in half a day I'd be highly disappointed with myself. If it's in a CMS, turning that into a template is going to depend on the templating language, so I can't really estimate. If it's not, applying to that new shell to all the pages manually is obviously a case of manual tedium that roughly scales with how many pages there are (I didn't feel like counting) and how many have awkward "special case" content.
3. Fixed pixel layouts raise strong "philosophical" ire in some people. I don't quite agree, I'm a bit more pragmatic. My technical problems with this site are not so much the fixed pixel parts per se as the way it's been done specifically.
I hope that's some sort of help. Full disclosure: I am professionally employed in the field, but I wouldn't ever claim to be a shining expert of almighty correctness.
posted by Slyfen at 10:12 AM on August 17, 2010
Response by poster: Everyone : no, it's not currently in a CMS. Thanks for the great answers!
posted by HopperFan at 10:24 AM on August 17, 2010
posted by HopperFan at 10:24 AM on August 17, 2010
Response by poster: Also, if anyone else has any suggestions, "very profane and derisive statements" are fine - even, dare I say, welcome. I didn't design the site, so you won't be bruising my ego.
posted by HopperFan at 10:37 AM on August 17, 2010
posted by HopperFan at 10:37 AM on August 17, 2010
Best answer: By which I mean, in practice, getting it changed is more about exactly how much you care about it, how hard and persuasively you can fight for changing it, than a matter of clear cut technical web developer "right answers".
+1. But: good design in general takes an institutional commitment (personal projects aside). Even if the OP cares and is persuasive, what happens when they leave or have to focus on something else? Remember, the boss "loves" the current (broken-ish) design.
I think there's a conversation to have here well before the designer-y fixed-vs-fluid let's-redesign-the-site conversation. This conversation has to do with standards of work -- that is, how important is "pro" level design, accessibility (should be important), CMS-style updating, style guidelines, etc. -- and roles -- that is, who, in the long term, is going to keep up those standards, and how are they going to be kept and transmitted when people responsible for them leave the organization?
At some (many) workplaces, even if one person is committed and cares, if everyone else thinks following a style guide when making updates (for example) is too much work and doesn't care, the design will degrade over time even if it's initially any good. Even plug-and-play CMSes are problematic from this standpoint. Ever seen a vulnerabilities list for, say, Wordpress or Joomla? Those things need to be updated as new versions come out. Static HTML pages, as behind-the-times as they are, don't have SQL injection vulns. (CMSes shouldn't either, but that's another story.) Fortunately your technically-oriented DB person could probably handle updates.
In other words, HopperFan: if you can talk "business" (so to speak, as appropriate in an academic-resource-center context) before you talk tech, you will probably come out ahead. Especially since it's unclear if you have any authority here, as you report to an assistant director and are "doing some content updates." And since I don't imagine an undergrad resource center at a state university is made of money, especially right now, to hire pros.
posted by pengale at 11:14 AM on August 17, 2010
+1. But: good design in general takes an institutional commitment (personal projects aside). Even if the OP cares and is persuasive, what happens when they leave or have to focus on something else? Remember, the boss "loves" the current (broken-ish) design.
I think there's a conversation to have here well before the designer-y fixed-vs-fluid let's-redesign-the-site conversation. This conversation has to do with standards of work -- that is, how important is "pro" level design, accessibility (should be important), CMS-style updating, style guidelines, etc. -- and roles -- that is, who, in the long term, is going to keep up those standards, and how are they going to be kept and transmitted when people responsible for them leave the organization?
At some (many) workplaces, even if one person is committed and cares, if everyone else thinks following a style guide when making updates (for example) is too much work and doesn't care, the design will degrade over time even if it's initially any good. Even plug-and-play CMSes are problematic from this standpoint. Ever seen a vulnerabilities list for, say, Wordpress or Joomla? Those things need to be updated as new versions come out. Static HTML pages, as behind-the-times as they are, don't have SQL injection vulns. (CMSes shouldn't either, but that's another story.) Fortunately your technically-oriented DB person could probably handle updates.
In other words, HopperFan: if you can talk "business" (so to speak, as appropriate in an academic-resource-center context) before you talk tech, you will probably come out ahead. Especially since it's unclear if you have any authority here, as you report to an assistant director and are "doing some content updates." And since I don't imagine an undergrad resource center at a state university is made of money, especially right now, to hire pros.
posted by pengale at 11:14 AM on August 17, 2010
Response by poster: "In other words, HopperFan: if you can talk "business" (so to speak, as appropriate in an academic-resource-center context) before you talk tech, you will probably come out ahead. Especially since it's unclear if you have any authority here, as you report to an assistant director and are "doing some content updates." And since I don't imagine an undergrad resource center at a state university is made of money, especially right now, to hire pros."
That made a lot of sense, pengele, thanks. No, I don't have authority, but I do have some influence. They have money for this - quite a bit has gone into the current website. I don't have an exact figure, but it's over 10K, I believe. I'll have to think about this statement a bit more :
"...getting it changed is more about exactly how much you care about it, how hard and persuasively you can fight for changing it, than a matter of clear cut technical web developer 'right answers'."
posted by HopperFan at 12:05 PM on August 17, 2010
That made a lot of sense, pengele, thanks. No, I don't have authority, but I do have some influence. They have money for this - quite a bit has gone into the current website. I don't have an exact figure, but it's over 10K, I believe. I'll have to think about this statement a bit more :
"...getting it changed is more about exactly how much you care about it, how hard and persuasively you can fight for changing it, than a matter of clear cut technical web developer 'right answers'."
posted by HopperFan at 12:05 PM on August 17, 2010
Best answer: Just to note, in the absence of Javascript, your site has no CSS at all, by virtue of the way it's been implemented.
posted by AmbroseChapel at 4:25 PM on August 17, 2010
posted by AmbroseChapel at 4:25 PM on August 17, 2010
Best answer: Just wanted to add that the Javascript-selected CSS issue could be corrected using @media-queries (mentioned above) fairly simply, I'd guess in an hour or two as long as no major quirks show up.
That's just one of your issues, but it would be a major boost to accessibility. Even if absolutely nothing else is changed, this would be a huge improvement.
posted by ella wren at 5:11 PM on August 17, 2010
That's just one of your issues, but it would be a major boost to accessibility. Even if absolutely nothing else is changed, this would be a huge improvement.
posted by ella wren at 5:11 PM on August 17, 2010
Best answer: Short answer to your question: go with fixed width. Pick one size instead of dealing with all 20+ versions. 960 is a common and reasonable size. It is not too big or too small for most monitors.
Now a more advanced solution, also my favorite formula:
Use static width for the main container, and its content / child elements use a fluid layout. That way you only need to change the main container size.
Set the default size to 960, and use JavaScript to overwrite its value based on detected window size. Note that a user could have a very wide monitor, but still opens a small window, so use windows size, not screen size.
This approach makes implementation and maintenance simple, and gives you the best of both worlds in terms of user experience and screen real-estate utilization.
This technique is used by The Rentables to implement the minimum and maximum page widths. It is "statically fluid", and "fluidly static".
Let me know if you have any questions.
posted by schien at 4:58 PM on August 24, 2010
Now a more advanced solution, also my favorite formula:
Use static width for the main container, and its content / child elements use a fluid layout. That way you only need to change the main container size.
Set the default size to 960, and use JavaScript to overwrite its value based on detected window size. Note that a user could have a very wide monitor, but still opens a small window, so use windows size, not screen size.
This approach makes implementation and maintenance simple, and gives you the best of both worlds in terms of user experience and screen real-estate utilization.
This technique is used by The Rentables to implement the minimum and maximum page widths. It is "statically fluid", and "fluidly static".
Let me know if you have any questions.
posted by schien at 4:58 PM on August 24, 2010
Response by poster: Fascinating, schien, thanks! I'll go play around with your suggestions.
posted by HopperFan at 11:08 AM on August 25, 2010
posted by HopperFan at 11:08 AM on August 25, 2010
This thread is closed to new comments.
Another issue you have is that no styling at all is applied when JavaScript is disabled. A script is used to select one of those 20 stylesheets based on screen resolution. This is a sub-par way of doing things (versus a proper CSS-based fluid layout.)
The visual design does not look particularly bad for an academic site. It's not cutting-edge web design, but it basically looks like most university/academic sites I've seen, apart from the pixelization in the header image (which affects the text as well as the background image you linked to.) Your boss probably likes it because the look is familiar.
I don't think that layout would be hard to do in a CMS template system, unless they were sticklers about it being a pixel-perfect replica. I can't give you a time estimate as that's skill-dependent as well as involving details of the current implementation, amount of content, etc.
posted by pengale at 9:24 AM on August 17, 2010