A dearth of fluid page designs

Get Started
1

I’ve recently been checking out CMSs and blogging systems, and I noticed that virtually all “skins” and “templates” for such systems had a fixed-size page design. That is to say, their content exists in boxes that don’t resize when you resize your browser. So if your browser is too narrow, you have to scroll horizontally. On the other hand, if your browser is wider than strictly necessary, you just get empty space because the text doesn’t reformat to take advantage of the extra space.

I thought that was bad practice. I thought that “content” columns (that is, not sidebars with menus and links) were supposed to resize as the user resized the browser.

But I notice it’s not just WordPress themes that have fixed-size columsn; it’s mainstream sites like Yahoo! and [URL=“http://www.cnn.com”]CNN that have the same fixed-size design.

What are your thoughts on this, everybody?

2

Yes, there does seem to be a lot of media confusion.

Pages have to look exactly like they do in print. Please ignore the fact that the canvas might have different shapes or sizes.

3

I too am saddened at how many large corporations don’t really take our profession seriously. I once actually had someone at one of my workplaces tell me, “My son did a page for our church once. How hard can it be?” I asked for the URL, and the page was an accessibility nightmare packed with hundreds of validation errors, a horizontal scrollbar, and the seemingly obligatory Comic Sans font. I stopped counting “click here” links at around 20 on the index page alone.

At my current job, we require an HTML version of any PDF that’s posted. The content owners still get their pretty PDF document, and the HTML fits the accessibility requirements. But that still doesn’t stop the content owners from whining about how the HTML version isn’t “pretty” enough and can we spice it up with a bunch of eye-candy graphics that crank the document size up for no good reason.

If I have to explain it all once more, I think I’m going to stick my head in a blender.

4

It seems to get worse and worse every year in that regard…

I’d like to blame it on the photoshop jockeys as typically that’s all they know how to do – but many of the sites I doubt anyone with any artistic sense was even involved with. (Yahoo and CNN are great examples of this)… I very much doubt a ‘designer’ was involved.

I’d like to blame it on laziness – But I’ve always found fluid sites and dynamic fonts with dynamic containers EASIER to create since you don’t have to sit there screwing around with the math as much as everything adjusts to the content – and such layouts are usually LESS prone to breakage cross browser…

So that just leaves ignorance – which is evident in such sites crapping out pages filled with fonts declared in px, the crappy fixed widths you mentioned that are too small for my desktop and too large for my netbook (that get even worse trying to use something like a pad or smartphone)… and to compound it even further we see the typical “color contrasts for legibility, what’s that?” attitude on many such pages.

But it comes down to people who never bothered learning to do things properly in the first damned place and are COMPLETELY unqualified for the jobs they are working. Further proof of the outright ineptitude and ignorance of such developers are apparent the moment you look at the code coming from such brick outhouses. One look at the source code of the STOCK turdpress template is sends you into such shock over the FLAT OUT INEPTITUDE of it’s coders, it’s a miracle anyone is DUMB ENOUGH to try to use it – and most off the shelf CMS are actually WORSE… much less corporate websites for mega-houses.

Take CNN for example, who’s homepage isn’t just a mess of link overload in absurdly undersized fixed metric fonts (12px and smaller) – it’s only 7.3k of plaintext but sucks down 102k of code to deliver it – even accounting for all the anchors a worst case page size for such a thing should be down around MAYBE HALF THAT… and that’s before the MEGABYTE of javascript on a page that doesn’t seem to actually do anything with it… 1.5 megabyte page total to deliver a page that’s 95% plaintext and 361 anchors? 103 images/objects on a page that only has 16 apparent content images? That’s before we talk static scripting inlined in the markup, static style inlined in the markup, divitus, classitus, nothing remotely resembling semantic markup – Such a miserable /FAIL/ the only reason these “developers” are able to keep their jobs is the average suit’s ignorance on the subject.

Yahoo is similarly afflicted. 4.3k of plaintext, 229 anchors, and 14 “content” images on their home page, so naturally it needs 163k of HTML… NOT. That’s THREE TIMES as much HTML as should be there, and of course the megabyte sized page load… for that… RIGHT.

SO many developers, especially at places like Yahoo piss all over accessibility at every opportunity and just sleaze out their work any old way – not caring that it costs the company they work for money in hosting costs ALONE (kiss off raises this year), makes more work for themselves on maintaining it, and in general makes them look like such idiotic fools that even non-technical people can make fun of them and their idiocy. You want to know why Yahoo has been an “also ran” for about six or seven years? THERE IT IS! Shockingly bad…

Though as Stephen Colbert said “I for one am shocked… Does Yahoo still have customers?” (2 minutes in)

Or as I’ve been saying for the better part of a decade – taking web development advice from Yahoo is like taking technical advice from Forbes or financial advice from Popular Mechanics.

Bottom line – This is EXACTLY why I am disgusted with the entire web development industry as a whole at this point; endless lame excuses being used for developers to not do the jobs they were hired for or to cover up that they aren’t qualified to do so.

Though it does come down to Hanlon’s razor – Never attribute to malice that which is adequately explained by stupidity.

5

Pragmatism, lack of understanding and no sense of what “Professional” should mean?

Applications written by those that don’t know good mark-up that creates poor mark-up used by those that don’t know good mark-up sold to those that don’t care if it’s good mark-up as long as it “works”?

A conspiracy to protect job security? Push unmaintainable mark-up so that when it stops “working” (blame the browser) it needs to be written created the wrong way again all over again?

6

Thanks, people, I really appreciate your thoughts on this. I’m glad to know it’s not just me. I’m hardly a pro at this, and I kept thinking to myself, this seems wrong, but everybody’s doing it!

I know what you mean about CNN, deathshadow60, and yes, I think the obsession with graphics and the printed page has a lot to do with it. Not only is the text tiny, but changing text size in the browser has no effect. Maybe that’s why Microsoft put an actual zoom function into IE. It’s the only way to view CNN at the size you want. While visiting these mega-sites, I’ll sometimes get a pop-up telling me a script is hogging the CPU and would I like to interrupt it before everything grinds to a halt. Of course, by the time I get the pop-up, everything has ground to a halt. I like Flash when I want to see it, not when it wants me to see it.

7

I used to do a lot of fluid/elastic designs but as monitors got wider and wider some of my sites started to look very stretched. I have noticed that the trend seems to be back towards fixed-width design. I am now doing more fixed-width stuff with background images to fill the space on each side for those with vey wide screens. Some clients even ask specifically for fixed-width.

8

I think this article is relevant but unfortunately someone thought it was a GREAT IDEA to put dark-grey text on black.

So I suggest if you actually want to read it (because I believe it’s Yet Another Good Argument To Build Flexibly) I suggest you copy the text and paste it somewhere. Or highlight it with ctrl-a. Or something. Gawd what a retarded colour scheme. We’re not vampires, people, we can’t see in the dark!

(i even turned on javascript for the main domain just in case it was one of those things where for some ungodly reason you need scripts to make a contrasting background appear… nope)

9

Yeah, I just saved it as a PDF and it’s all nicely formatted and black text on white. :slight_smile:

10

Opera – View -> Style -> High Contrast (B/W)

Increasingly I’m having to use the default styles and user CSS to make many websites even functional… LIKE THIS ONE.

11

Word. I can understand if max width is between 800-1200, but once you get past that, anything with even a slight bit of design gets hosed.

12

You make a good point. I notice people I know do not use multiple windows, even after upgrading to wide monitors. They may have several applications or browser tabs open, but everything is maximized, and they use one thing at a time.

But is it futile to educate and push back? I don’t do much web development, but when I do, I explain to people that I’m going to make their website so everyone can see it, even people with narrow browsers. And what about the people with wide browsers? Well, unlike the people with narrow browsers, the ones with wide browsers can make theirs narrower.

13

LOL At least the font isn’t teeny-tiny. Thanks for the article.

Javascript is another pet peeve of mine. I’m not paranoid about it, but the problem is that my browser reports JS errors at so many websites I visit. And, of course, the error usually renders the functionality useless.

14

Yes, which is a good argument for why a page should not depend on JS to be accessible/usable. Lots of people argue that so many people have JS on these days that there’s not point providing a fallback, but having JS on doesn’t mean that it will work. :slight_smile:

15

But is it futile to educate and push back?

Ideally (utopia here), your design/page would work whatever people like to do with their browsers. I happen to also be a full-screener most of the time. Maybe I got this ginormous screen (actually not that big now that I see people with these 27" CineMac things) precisely so I could use all that real estate for one application?
But, plenty of other people buy the big screen so they can have all 500 of their programs open and somewhere on the screen.

I agree that limiting page width at some reasonable place when users may have 30+" screens is not a bad idea, but we’d still use max-width for that anyway. Not the same as actual fixed width though. I’d still prefer my pages to adapt easily to whatever the user needs to do.

16

… which is a good point – SEMI-fluid really seems to be the way to go with things right now; giving you the best of both worlds. You can restrict the width from making your content lines be too wide to follow, and at the same time have the layout be friendly to smaller displays… then tie in some media queries and you can add small screen support as well.

BUT, I would not make the max-width in px… on a two column layout for example you might think 976 wide is too much, but for large font/120dpi users or users of even larger font metrics, 976 is bupkis… Solution? Declare the min-width in px and the max-width in EM.

There’s a reason most of my current page layouts use this for the outermost container (assumes body sets fonts to 85%):


#pageWrapper {
  width:95%;
  min-width:752px;
  max-width:70em; /* 980 @ 96dpi, 1190 @ 120dpi */
  margin:0 auto;
}

* html #pageWrapper {
  width:752px; /* legacy IE knows not min-width, gets crappy stripe, OH WELL! */
}

Then my narrow.css which is applied with media queries if client-width is less than 800 wide goes with:


#pageWrapper {
  min-width:256px;
}

Which seems to work really well.