HomeGroupsTalkZeitgeist
This site uses cookies to deliver our services, improve performance, for analytics, and (if not signed in) for advertising. By using LibraryThing you acknowledge that you have read and understand our Terms of Service and Privacy Policy. Your use of the site and services is subject to these policies and terms.
  • LibraryThing
  • Book discussions
  • Your LibraryThing
  • Join to start using.

PSA: fixed-width is evil

Redesign LibraryThing!

Join LibraryThing to post.

This topic is currently marked as "dormant"—the last message is more than 90 days old. You can revive it by posting a reply.

1timepiece
Mar 22, 2008, 2:21pm Top

Judging by how many of the new styles specify width in pixels, I'm fighting a losing battle here, but really, it's a bad idea. The beauty of CSS is supposed to be its flexibility, and specifying width severely curtails that.

I know that 800-900 pixels seems like it would include almost everyone nowadays, but it doesn't. As an example, at home I am usually on a slate tablet computer, which I use in portrait orientation. My resolution is 768x1024 (NOT 1024x768). That means my horizontal screen width is 768. Styles which specify widths of 800-900 pixels mean I have to constantly scroll sideways, and that is VERY ANNOYING.

Yes, I said evil. I hate fixed-width anything.

So please, try using more flexible design parameters. View it as a design challenge. Specify widths in percentages. Try min-width and max-width. Specify small distances in ems/exs, rather than pixels. Assume someone is very nearsighted and has an old monitor and has switched to 800x600 resolution (meaning, switch your resolution/window size and check your layout). Designing for the majority should not be enough - we want design for everyone.

I took me a long time to eliminate all the tables and width in my own personal page, but I was really proud of myself when it became a fully liquid layout, viewable and attractive anywhere from 800x600 to (and viewable, if not attractive, in 640x480, without side-scrolling). Believe me, if you manage it, you will feel even more proud of your design than if you simple made it look the way you want on your own computer.

2timepiece
Mar 22, 2008, 2:31pm Top

Aaah! It's even more evil if you hide the horizontal scroll bar! Don't DO that! How am I supposed to access the right sidebar if I can't scroll over to see it?

3markbarnes
Mar 22, 2008, 6:50pm Top

I had to hide the horizontal scrollbar to compensate for some CSS wizardry necessitated because of insufficient semantic markup in the original design. Sorry.

Fixed width might be evil for you, but imagine trying to read talk pages that go right across a 21" monitor. max-width would be the answer - unfortunately Internet Explorer doesn't support it. Internet Explorer 7 does support it, but only in XHTML strict (LibraryThing is HTML 4 Transitional).

One of the issues that designers have with redesigning LibraryThing is that understandably, the site was never really designed to be redesigned.

But, if there's a fixed width style you like, copy it and create your own fluid width version.

4PaulFoley
Mar 22, 2008, 7:34pm Top

Fixed width might be evil for you, but imagine trying to read talk pages that go right across a 21" monitor.

Here's an easy solution: don't make your browser fill the entire screen!

(I can't stand having any window take up more than about 50-60% of the screen anyway)

5timspalding
Mar 22, 2008, 7:58pm Top

My feeling against fixed-width are validated by something: John Buckman of BookMooch recently went to fixed width, on the idea that, although full width allowed BookMooch to "could display more data," moving to fixed width made everything "neat and tight."

Anyway, reaction was mostly negative--very negative. It was "cluttered and horrid," "REALLY weird," etc.

Based on the reaction, he changed it back.

See http://blog.bookmooch.com/

Personally, I'm really warming to the full-but-with-gutters look
http://www.librarything.com/profile_zengarden.php?viewstyle=librarythingtim-2

6timepiece
Mar 24, 2008, 10:52am Top

> 4
Yeah, I should have mentioned people who don't full-screen their windows among my "people who don't have the space". My husband has a wide-screen monitor, and he doesn't full-screen anything but games. He'll just adjust the window width until the lines are a comfortable reading length.

> 5
Even after the change back, I still have issues with Bookmooch, because his headers are all laid out with fixed-width tables. I have to side-scroll to see any of the action buttons (mooch, add to wishlist, etc). It's really irritating.

I do think the max-width centered div is generally the way to go. There are workarounds for IE, some CSS, some javascript (inside the css). The simplest seems to be this (source):

.class {
width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* sets max-width for IE */
max-width: 777px; /* this sets the max-width value for all standards-compliant browsers */
}

There are others.

On the bright side, IE7 seems to support min- and max- properties.

7timspalding
Mar 24, 2008, 12:49pm Top

If IE6 supported min and max, life would be great.

8ATimson
Mar 24, 2008, 4:55pm Top

How many LT visitors run IE6, though? And perhaps more importantly, how much traffic would Bug Collectors lose if IE6 were no longer supported? ;)

9Imprinted
Mar 24, 2008, 6:51pm Top

Please don't give up on us IE6 users!

10sabreuse
Mar 24, 2008, 6:52pm Top

It's different for every site, of course, but the latest general stats I've seen put IE 6 & 7 just about even. It certainly hasn't died out yet, nor anywhere near it.

11hailelib
Mar 24, 2008, 8:32pm Top

I have IE6 at work. It's irritating but I'm on a real clunker of a computer there. I love my son's cast-off iMac that now sits on my desk at home.

12timspalding
Mar 24, 2008, 10:45pm Top

Yeah, it's about 55/45 IE7/6 now.

13ATimson
Mar 25, 2008, 2:43am Top

Wow. Okay. I expected it to be more like 90/10 by now. I wonder how many of those IE6 users are still on Windows 2000, and how many are corporate boxes that haven't bothered to update their systems in the last two years?

14markbarnes
Mar 25, 2008, 5:55am Top

We still need to upgrade to XHTML Strict in order to use max-width in IE7, even with the CSS hacks for IE6.

15SqueakyChu
Mar 25, 2008, 8:31am Top

I'm on IE6 although I have FF on my computer. All of my own *tons* of bookmarks remain on IE6 and I don't want to mix them into FF.

16timepiece
Mar 25, 2008, 10:19am Top

What are the stats here for IE vs FF? Has Tim ever told us?

17timspalding
Mar 25, 2008, 3:27pm Top

>upgrade to XHTML

Not an upgrade...

18timspalding
Edited: Mar 25, 2008, 3:32pm Top



Internet Explorer — 54.14%
Firefox — 34.79%
Safari — 5.44%
Mozilla — 3.70%
Opera — 1.24%

19hailelib
Mar 25, 2008, 4:47pm Top

Interesting graph. I'm a little surprised at the low Safari which I use occasionally and my husband most of the time. Does that indicate something about Mac vs PC?

20ATimson
Mar 25, 2008, 5:03pm Top

#17: Not an upgrade...

Only because IE and other browsers don't bother to enforce validity. It'd be quite useful if they'd actually parse the XML right, instead of reducing it to tag soup!

That said, I'm glad that Microsoft is holding off on application/xhtml+xml support until they actually write an XML parser, specifically so they don't break XHTML like they did HTML.

21markbarnes
Mar 25, 2008, 5:35pm Top

>17 timspalding: Correction: "We'd have to update to a newer standard"

22brightcopy
Oct 10, 2010, 12:57pm Top

Tim> Any chance of a graph update? Would be interesting to see it over two years later.

Group: Redesign LibraryThing!

5 members

236 messages

About

This topic is not marked as primarily about any work, author or other topic.

Touchstones

No touchstones

About | Contact | Privacy/Terms | Help/FAQs | Blog | Store | APIs | TinyCat | Legacy Libraries | Early Reviewers | Common Knowledge | 130,260,043 books! | Top bar: Always visible