Great Examples of Full-Width Design?

[Aminka Ozmun]

Hi,

Does anyone know of a great example or two (or more!) of full-width website designs that take advantage of modern widescreen monitors of 23 inches and above??

Seems like so much screen real estate is wasted by artificially constraining things to a traditional eight-inch portrait-oriented page, but I understand that readability suffers tremendously otherwise.

Just wondering if anyone's figured this one out yet!

(And I don't mean by sticking endless widgets and such along the sides, either....)


Thanks!!

[Lil Chris]

While this may seem like a great idea, there's inherent problems with the content portion. You can do backgrounds fairly easily, but having the site look the way you want it on a 17" monitor with an 1024x768 resolution and equally brilliant on a 23" with 1920x1080. You may be able to write a custom script to check resolution sizes then show extra elements on larger resolutions.

Here's a good discussion in the comments section of this article.

And an article on responsive designs.

[Aminka Ozmun]

Thanks a million, Chris; very informative stuff!

[WarrenG]

Or you could do a horizontal scroller...

Dean Oakley | Web designer | Gold Coast, Australia

[aussieNickuss]

The Boston Globe is getting a bit of attention in the web design community for its recent "responsive" re-design.

Although it doesn't fill large screens completely (fills about 2/3rds of my 1920px wide screen), it does show more content on display that can accommodate it. If you're using Google Chrome or Firefox, you can see the responsive behaviour by resizing your browser window down to smaller size, right down to the point where you can see how it would appear on an iPhone screen.

[Aminka Ozmun]

Originally Posted by WarrenG

Or you could do a horizontal scroller...

Dean Oakley | Web designer | Gold Coast, Australia

LOL

Can you believe that I used to think that so cool??

I still kinda do...if it weren't for WordPress, I'd probably have hand-coded an old-fashioned HTML site that way! With frames, too, no less....

[Aminka Ozmun]

Originally Posted by aussieNickuss

The Boston Globe is getting a bit of attention in the web design community for its recent "responsive" re-design.

Although it doesn't fill large screens completely (fills about 2/3rds of my 1920px wide screen), it does show more content on display that can accommodate it. If you're using Google Chrome or Firefox, you can see the responsive behaviour by resizing your browser window down to smaller size, right down to the point where you can see how it would appear on an iPhone screen.

That's really cool!

Now why isn't this the default for websites? I mean, all these companies surely could have afforded what little extra design/coding work involved to implement responsiveness. I even have an old CSS book from 2006 that stresses responsive design, and it's just a basic text!

[aussieNickuss]

Originally Posted by Aminka Ozmun

Now why isn't this the default for websites?

Because an awful lot of time and money goes into planning, implementing, coding and testing responsive layout on the scale of that site. With responsive design, it's not just a case of shrinking/expanding the width of the content, considerations have to be made about how ALL portions and elements on the page align with each other on different sized screens.

Originally Posted by Aminka Ozmun

I even have an old CSS book from 2006 that stresses responsive design, and it's just a basic text!

"Responsive design" in it's current context refers to CSS3 media queries with which you can define different styles targeting different screen sizes (or even different hardware/software... printers, projectors etc.) within the stylesheet itself (as opposed to loading different stylesheets via the media attribute or javascript). CSS3 was very much still in its infancy around 2006 so I would say your text was referring more towards "fluid" layout. An example of a fluid layout is this very site... notice how depending on the browser width, the sidebar remains the same, however the main portion expands and contracts.

[Marger]

I wouldn't call my website a great example, but I think it shows that you do have some options to make more use of widescreens. When I created my design, one of the goals I set for myself was a (partial) fluid-width approach. My site works great in 1024 width browsers/screens, but on my own 24" screen @1920 width I think it fills the full width better than most sites.

That's because the width of both columns stretches up to about 1280px width total, which uses 25% more width than most other sites. Any wider than that compromises readability of my text. That's the problem with sites, like this forum, that have a completely fluid width: lines become way too long to comfortably read the text. I'm quite satisfied with my combination of flexible width and retention of readability. Unless everyone happens to disagree of course, then it would be time to reconsider

[Lil Chris]

Here's a good example of a full width site