logo

Accidental Design Update

At some point this week I accidentally upgraded the design of this site. I didn't notice this until Yesterday when somebody commented on the increased width of the site. You might have noticed this yourself? Notice also the tabs are on the left hand side now.

The upgrade was to version 6.4, which I wasn't planning to release until after IE7 gets released proper. I mentioned in March that IE7 now supports min/max-width. Using these new CSS properties I was playing with an elastic layout for the site - moving away from fixed-width layout to make more use or "real estate".

What you're seeing now is flaky because it was a design in progress. I've left it like this to get your feedback on the idea. The key improvement is that the page width scales with your browser but is restrained by a minimum and maximum width.

My issue with this is that IE6 doesn't support either property and so the page keeps on growing and shrinking the page can break the whole thing. What do you think? How many IE6 users have I really got? Is the max width I've gone for too wide? Your feedback appreciated.

Comments

  1. "Accidently Upgraded!!!"...

    That's definitely one for the developer "Get Out Of Jail Free" cards!

    "Oh.... I accidently upgraded your database and now it doesn't work, because X, Y and Z!!!"

    I'm sure i'll have some use for that statement in the future...!

    Later

    Patrick

    P.S. I'm on IE6 and the website looks fine.... even at 800x600!

    • avatar
    • IanB
    • Fri 30 Jun 2006 07:24 AM

    perfect for me Jake. At work I'm on IE6 SP2, and 1024x1280 (portrait) and the page sits nicely. I would assume that would also be the case for 1024x768 users.

    • avatar
    • Lance
    • Fri 30 Jun 2006 07:29 AM

    IE6 here at work and the site looks fine.

    • avatar
    • Michael
    • Fri 30 Jun 2006 07:36 AM

    I have IE6 and I like the new layout just fine. I prefer websites that take advantage of the extra space with my screen resolution. I liken the big margins with centred content to someone driving in two lanes on the road. Pick a side or resize the window already! :)

  2. All is ok Jake. Works well on IE.

  3. Works for me.

    Both IE 6.0 and Opera 9.

    To tell the truth I didn't even spot it.

  4. i think its great - I am currently using firefox 1.5.0.4 - i have a pretty decent sized monitor (1600 * 1200) so could still stand to go a bit wider

    • avatar
    • Jake Howlett
    • Fri 30 Jun 2006 08:26 AM

    Thanks guys. Those of you using IE 6 - shrink the browser down and see what happens though. I know it looks ok in IE6 it just behaves oddly at small/large widths.

    Jason. It probably could go wider but that's not always a good idea. The max width is dictated by the length of a line of text that it's ok to read. Try reading a paragraph of text in a P that is 1600px wide. Not good. I think I've over-stepped this limit as it is, but wondered what others thought.

  5. I agree on the max width. Looks great. My screen at home is 1680 x 1050 and sites that scale infinitely are hard to read when I maximize the window. I know, stupid user... if you know your screen is so wide why maximize? Well, some sites do work well that way, but not those that I spend time reading.

    As for the site breaking when you size the window too small, I think it's only us developers who sit there resizing the window to see if our site breaks. Most people kind of grasp Minimize Maximize buttons, but the freesize grippy in the lower right escapes most normal users. I think it's safe to say your audience probably knows how to size the page to their liking, and doubtless very few of us read the page at 200x300. If we are, your "mobile" css rule should take over :-)

  6. And I thought I was having an acid flashback when something just wasn't right on your site. ("Is it the width? No, Jake would have mentioned he is redesigning his blog...").

    I think it is too wide. On my 1024x768 screen the line length is almost 100 characters long which is more than the recomended 60-70 chars for line length. It's ok for content heavy sites to use more "real estate" but blogs usually don't fall in this category.

    • avatar
    • ursus
    • Fri 30 Jun 2006 10:07 AM

    I agree with Roman i.e. think it's too wide. I am using 1600 x 1200 @ 24". I do like the header / menu (blue bit at the top) being wider, just the entries seem a bit too wide - maybe make the boxes to the left of the text wider?

    Anyway, just my 2 cents ;o)

    • avatar
    • Richard C
    • Fri 30 Jun 2006 11:54 AM

    Is it possible to detect users who are viewing in wide-screen mode and load a different css file which increases the size of the font? (thereby reducing the number of characters per line).

  7. @Richard C: You can do it with javascript:

    if (screen.width>1024) document.write('<link rel="stylesheet" type="text/css" href="wide.css" />'

  8. Jake,

    I am also running IE6 at 1024 x 768 and I am not having any problems.

    E

    • avatar
    • Michael
    • Fri 30 Jun 2006 07:14 PM

    @ursus - you can't honestly be working with maxmized windows on a 24" screen?! Any larger and you'll need a wider mousepad and a neck brace.

    I'm still voting for keeping as it is. Looks good.

    • avatar
    • Jon
    • Sat 1 Jul 2006 07:21 AM

    Jake,

    Tried it at various screen sizes in IE6. 1280 and below, only seems to be a problem, at less than 750px wide. Tried it at 1680 widescreen, and it's still readable Just!

    Cheers

    Jon

    • avatar
    • zomek
    • Mon 3 Jul 2006 05:01 AM

    In Firefox 1.5.0.4 it doesn't resize at all :(

    By the way (on the road to wide-screen layout), I've read interesting analysis of typography's expert who advise to create pages for screens that have no more than 50 characters in single line (70 for printed pages)!! Otherwise, reading longer lines starts to be too difficult... Maybe it's time to re-think the idea of makeing more use of "real-estate"

    • avatar
    • Doug Cohen
    • Mon 3 Jul 2006 11:58 AM

    I'm using IE 6.x with my resolution at 1400 x 1050. Like some others, I prefer the extra width.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Fri 30 Jun 2006

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content