By iraszl on
I want to hear your opinions why most of the Drupal sites including Drupal.org is not fixed width, but scaleable? I understand that fixed width sites are restricting the user, and do not allow to open the page in full screen, but than who is going to do that? It's hard to read an inch long line, isn't it? It's much nicer to have short lines. But, most people don't know that, so I would rather force the user to have a more legible fixed width layout for their own good. What do you think about this?
Comments
Easy enough
All that can be set in the CSS for your theme, can't it?
Personally I don't like fixed width -- seems like a lot of wasted space to me -- but a compromise can always be making the important column(s) fixed width, leaving the rest to variable width.
--
mediagirl.org
Yes, this is easy to change
Yes, this is easy to change in CSS. Just set the width in the BODY tag in your theme's CSS file.
Some sites lend themselves well to fixed width and some don't. I prefer to go without but sometimes it's a pain not to, depending on the complexity of the graphics and formatting.
It can be hard to read text that is way too wide. You can always narrow down the content area a bit. A nice change of pase is even to leave the content area wide but then blow up the text a bit.
Greenthing = fixed width
We have a contributed theme that is fixed-width (Greenthing).
However, its fixed-width nature causes problems with administration pages that are wider than the fixed width.
I agree that many sites
I agree that many sites would do better with a fixed-width layout. But also think some, like drupal.org, is better off fluid.
Anyway, there is 2 new themes (Kubrick & Persian) in the download section which are fixed width, and don't look too bad. May be you'll like them.
there's a CSS "max-width"
there's a CSS "max-width" that only works in mozilla and not IE, but there is also a javascript hack for IE that makes the same.
so you can have a site that is fluid, but only to a point, like say, 1024.
Yes. But there are also
Yes. But there are also sites which will not not benefit from even that hybird layout. When design aestetic comes into the question, it is very hard to work with fluid design. Look at web designer's sites out there. I'm sure you will find no more than 5% is fluid.
yes, designers are
yes, designers are over-rated and overpaid, to the damage of usability and flexibility and hillbillity.
Of course they will not be
Of course they will not be overpaid like they are if there are not people who like their works.
And if you pay attention, you will see that their sites are more accessible and usable than most. The word is not 'damage', but compromise. And 'flexibility' means more than using fluid design or max-width attribute.
A lot has been said on this topic, let's not repeat them here. There are accessible, flexible, usable sites out there which are fluid, fixed, hybrid. If you understand the issue you can do it right whichever way you choose.
I use a two tiered approach
My site visitors get the standard, fixed-width designed screen, while my account is rigged to show a Drupal default when I log on to admin it. In terms of general site design, I don't normally mind getting fixed width content as long as the site's been designed to look/work best with it, rather than taking what could quite easily have been a full-screen job and just capriciously locking it in a tiny div.
I have a website. It's very blue indeed.
Why I hate fixed width
I generally dislike fixed width; I run my browser at a variety of widths, depending on what else I'm doing at the time, and fixed width sites either (1) waste a lot of my browser window by not expanding to fit or (2) force me to horizontally scroll to see all content.
Also, if the site posts large graphics (screenshots, etc.) having the width dynamic allows them to be presented as intended instead of overlapping fixed elements.
Generally, I'll avoid fixed width themes -- and sites.
Fixed-width looks more professional?
Or am I wrong? I like the layout of http://worldvision.org which I'm pretty sure is fixed. nytimes.com also uses this. It helps for standard viewing across browsers. I like the smaller letters and tighteness of these pages. However, fixed-widht doesn't play nicely with Drupal as admin pages, and album upload pages and many others I'm sure, stretch over the right side content or force it to the bottom of the page. Most of us don't see our sites in tiny screens, but when I have the non-fixed ones look crunched and horrible. So do you theme to the smallest screen?
Its not fixed width that
Its not fixed width that makes things look professional, its an attention to detail and an understanding of how we read content on the screen. Design should be thought of as problem solving, where the decision to use fixed width or fluid should be made to achieve specific functions and to aid readability of content, be it images, text or whatever.
I generally find fixed width designs to be much easier to read and quicker to create, though I'm willing to be proved wrong! As mentioned by others, the administration area of Drupal can cause problems with a fixed width design, though I feel the benefits far outweigh the drawbacks and I'm looking into a design/technical solution which get around the problems.
RE: smallest screen
Yup, make it viewable on even the smallest screen, why exclude people from trying to view your site, unless you have a very clearly defined audience with posh big screen setups? And design your site so it remains legible and the design intact for text at many sizes - give the user control!!
RE: worldvision.org
I don't like that site at all! I find it scrappy with lots of conflicting shapes. Graphics for the main links are way too small & are not consistent across the site. Its another case of someone thinking "that looks good" but not thinking if it helps users understand the content or navigate a site - a trap I've fallen into many times myself;)
><>tomskii
><>www.mutinyarts.co.uk
Good points
All good points, thanks for your contributions to the discussion. As I looked over the world vision sight I liked it less and less as well. In fact, I think they made some changes since I had last browsed it. I'm just reeling from the shock of seeing some sites look horrible both in IE and on small screens as I try to develop. Three colums just seem to kill a small screen unless the colums are ridiculously skinny. Viewing on some giant screens, I find that having long lines of content aren't helpful in viewing. So what is a good solution? I like the max-width feature of Mozilla. Does using percentages instead of px help?
Different css style sheets for different media types
You can include different css style sheets for different media types in your pages. Although not a lot of handheld devices support this, you can specify a different style sheet for them. The key point is to structure your (x)html document and present the content in different forms for different media devices. Fixed or fluid the choice is yours, the important thing is to target the correct media device.
BTW The world vision page didn't have a doctype and uses tables for layout. A nightmare regarding accessibility.
--
Webmaster Resources for Business Websites
a good rule of thumb I read
a good rule of thumb I read somewhere on the web: Fixed width is good for 'wow factor' sites, while fluid layouts are good for textually heavy or conversation heavy websites. I think it could also be seen then as advertising vs. conversation. If you're trying to impress someone about something, then a fixed width will allow you to incorporate more graphics, control column widths, etc. A fluid layout lets people adjust columns to what they prefer, it's up to them to do it or not. Then you have em sizing, which will allow users to utilize the + - font sizes. If you have a fluid layout in ems then the columns and margins can adapt as well. So there are different levels of fluid and fixed to consider.
If you are concerned about small browser sizes try the firefox extention web developer which has a setting to resize your browser window to 800 x 600 resolution. There's lots of other little features in there too that make it a very useful plugin.
I wouldn't follow rules of
I wouldn't follow rules of thumb like that. You can have crap fixed width sites & crap fluid sites. If you want to make a decision as to which to use then learn to look at other sites you find easy to navigate/read, then identify why you like them & what combination of techniques have been used to achieve that aim.
As for wow factor, this is generously achieved when things are used an an unexpected way i.e. not following rules of thumb as this is what everybody does - be original ;)
><>tomskii
><>www.mutinyarts.co.uk
WRONG!
I think that thumb rule is completely wrong. Actually it should be the other way around.
Text heavy sites should be fixed width and everything else can be fluid.
It has been proven by many researches that the longer the lines the more difficult to read long text. There is an optimal 10-12 words per line rule. Different researches showed only slight differences depending on the testing conditions.
For example most Mac users have wide screen monitors, because they allow better fitting of palettes in applications. If you made the web page full screen on such a monitor size this forum would be impossible to use.
On the other hand, many gallery sites, like gettyimages are using fixed width layouts which are also not a good idea. The eye can take in more information than a column with a width of 10-12 words, unless it's not written text. So, for a gallery a fluid layout that uses the maximum amount of screen space is ideal.
I think fixed layout sites actually look worth than the liquid layout sites, because usually they have big empty areas on the sides, but it's ok, because I want to read the content and looks should be secondary.
It's true that liquid layout sites can be sized to make the text more legible, but I've never seen any user to resize a browser window for this purpose. 98% of the users don't even know what causes the strain on the eye or that the 10-12 word per line rule exists. Hey, even we argue about it, so why expect the average reader to know. Even if your readers would know this rule they would have to manually resize the browser window to carefully choose the optimal size. That's asking too much in my opinion.
It's very simple if you want a good reading experience go for fixed width. That is why all blogs and news sites are done that way. That's not a coincidence. :)
---
http://creativebits.org
RIGHT!
Maximum words get thrown out the window when you consider font sizes. I could be using a 14pt font, overriding whatever you had. You could be using 10px. You can't just write a bit of css that says length: 10 words please. It's good to be a little flexible.
As I mentioned, theres a lot of inbetweens. A fixed width layout in pixels is going to be really bad from a accessibility perspective, as it doesn't accomodate users who have to make the text larger. An em width solves this but then there are concerns when attempting something pixel perfect.
The average user isn't going to know about resizing windows, which I basically said. But if "we know" and drupal has a fluid layout don't you think that it stands to reason that some audiences would know this more than others? You also have to consider the what the audience will be displaying, and that any time there is going to be CODE tags then there is going to be issues with width to a degree.
I know a bunch of people with macs, and none with the circumstances you describe, but since you focus on macs more than me, I'll accept what you're saying there. However, I don't agree that most people would browse web sites with a maximized browser, though I can't really speak for mac users here.
Galleries in a liquid layout are great though, and I'd like to see more of them. It's frustrating that the drupal image galleries seem to be stuck in tables, it's always a formatting issue.
This discussion is a lot more complex than fluid vs. fixed. There are a lot of considerations, just like there are with any other sort of design project. I'm not really convinced that anything that's light on text (or perhaps then heavy on graphics) should be a fluid layout by default. Image galleries are an exception to this, where browsing in a priority. Generally columns of text have a size range that allows for maximum readability, but when balancing that with accessibility issues and the type of text that will be poured into that column size there are reasons to go with fluid layouts or wider columns.
Consider csszengarden - a lot of these designs are simply stunning. But those designs don't really have to take much into consideration. They are beautiful but only would be do-able on brochure ware and simpler layouts, perhaps a wordpress blog even. That is the type of site I was referring to when I said "advertising" sites. They don't have to worry about the admin area, editing on the same layout as viewing, or polls, or book pages, or X module with it's own css. There aren't any portal/community like layouts there because it's a different beast all together. Surely we should aspire to some of the things on csszengarden, but there is a lot of work necessary to do so using the tools that we have in common, and a lot of the time it's not really practical.
WRONG!! (a pattern emerging
WRONG!!
There's a pattern emerging here;)
"A fixed width layout in pixels is going to be really bad from a accessibility perspective, as it doesn't accomodate users who have to make the text larger"
I don't agree with that at at all, if you design your fixed width layout properly, text can expand as much as you like without the design breaking.
& the MAC vs PC is not really an issue as sites should be designed so they can be used across all platforms, even ones we don't know about yet (look closely at whats happening in the mobile phone world). This is done by working with standards, separating design from content (CSS) and using semantically correct code, which all help to make things future proof, useable with emerging technologies and accessible - remember a speech browser doesn't care about design, its the semantics that have to be correct...
><>tomskii
><>www.mutinyarts.co.uk
if you kept reading...
Continuing onto my next sentence,
I do agree that Mac vs. PC shoudn't be an issue, however, realistically it's only a non-issue if you tread through all the reasons that it is. The rest of what you said I'd also agree with.
Also I'm not really sure why flame-like titles should be dished out. I don't think design, being an artful persuit is subject to right and wrong type situations.
non issue?
"non-issue if you tread through all the reasons that it is"
I'm sure I get you here.
"An em width solves this"
Without an em width, a layout can still be pixel perfect & expand (vertically) to satisfy accessibility requirements, its when very long words/urls or many-col tables come in that problems start to occur, but as long as those limitations are understood you can avoid them. Its all about making sure that you choose the right layout for your requirements, rather than rules of thumb which tend to be crass "catch alls".
In terms of how Drupal currently stands many workarounds have to be used (+ bare in mind I've only been using drupal for 3 weeks on a small site so I'm only going to have a certain level of understanding here), which can start to take away some of the flexibility, its all about weighing up the pro's and cons in a given circumstance and the the core of what design is about.
After much weighing, I currently use a 3 col fixed width layout and change to a 2col for any admin pages. This frees up space for editing content and the larger tables such as access control. I can see as my site expands than I will start to run into more problems, but I don't see these as being a major issue as currently as I'm not displaying tabular data with lots of cols in areas I want to be accessible (in all meanings of the word). A massive limitation of drupal is the left col /right col allocation for blocks, there should be many more spaces to make this a more designer friendly application and provide tools for more workarounds.
I agree about flame titles, apologies if it seemed over the top, I found it quite funny that people seemed to be getting so heated up over such a "grey" issue, so was continuing the joke.
><>tomskii
><>www.mutinyarts.co.uk
Inspired by this discussion
I wrote a blog entry on my site that discusses some possibilities beyond fixed or liquid layouts in case you're interested:
http://creativebits.org/Fixed_liquid_or_something_else
---
http://creativebits.org
throwing the baby
True, I guess I was throwing the baby out with the bathwater there. The main problem that ems fix is the side columns, which aren't that big to begin with. Enlarging the text twice will make words like gnu/linux (from the site on your signature) push past the column width. It's not a really long word for my taste, so I've been trying to do columns in ems, that way for the most part things stay in there. In short, I like ems for they're hybrid nature, they're a 'relative fixed', a pixel and a percent.
flame wary... sorry, it was funny but when i came home from work it wasn't as funny a situation.
Your solution with ems is a
Your solution with ems is a good one. Thanks! But this means it's still a semi-fixed layout. I do agree that it's a complex question, but nothing however in your argument supports liquid layouts other than the admin pages. And if you have a problem with an admin page you can always just switch off the CSS temporarily, however this little annoyance far outweights thousands of users struggling to read the liquid layout content. Btw. there is a possibility to create flex layout tpl pages just for admin pages, right?
---
http://creativebits.org
I'm not sure if
I'm not sure if admin.tpl.php or the like would be possible. It would be really cool. I've made a lot of progress in the past few days in other ways... for example, in the input formats area, the table pushes off the side. It's basically the table header (th) being set to nowrap. by overwriting this in css as whitespace: normal it fits on the page again. I've been doing a lot of site specific template stuff, so i suppose it's possible it may not work for everyone.
EDIT: it's still possible to break the layout, but the th overwrite does help...
But in that department check out the question I posted here: http://drupal.org/node/20827 about customizing phptemplate to add a div enclosure only in specific areas, like the admin pages, user profile, edit pages, etc. Pretty neat stuff that's helped out a lot! It definitely helped with table control as I had something to fit the table into where before it was occupying the whole space. Then by setting the table widths to auto, it seems to pour into the layout quite nicely.
Again, i've changed a lot of the containers so it could be different for different theme layouts...
Thanks!
Great ideas.
---
http://creativebits.org
This discussion is Simply
This discussion is Simply superb