Logic’s Last Stand

August 8, 2008

End Fixed Width Layouts

Filed under: Computers — Tags: , , , , , — Zurahn @ 7:49 pm

Web design is more than making a site that looks good to you, or simply looks good in general. Usability and compatibility are essentially to all sites. With such a split between widescreen and 4:3 monitors, it’s more important than ever to accomodate design to all systems.

So why is it that there seems to be, if anything, an influx in fixed-width layouts. Take Youtube for example; nomatter what resolution your system is, what size you have your browser that page displays at the same width.

Blogs are even worse for this. 90% of all blog layouts seem to be fixed width, making the layout very thin on high resolution or widescreen monitors.

It’s not a difficult fix as the CSS for variable width layouts is pretty much down to two lines (one if you do shorthand).

#layout
{
margin-left: 5%;
margin-right: 5%;
}

There, we’re done. You have a bit of buffer space on either side and the layout expands to fill the monitor.

Let’s take a look at the aforementioned Youtube’s code and see what we can find?

#baseDiv{
position:relative;
width:875px;
margin-left:auto;
margin-right:auto;
padding-bottom:25px;
}

And modified…

#baseDiv{
position:relative;
margin-left:5%;
margin-right:5%;
padding-bottom:25px;
}

And it’s no longer fixed to that 900px width, though the content within the layout is designed to fixed width also, compounding the problem.

We’ve an inversion of the problem that persisted, yet perhaps hurried, the transition from 800×600 to 1024×768; sites were written completely ignoring 800×600. It’s not encouraging the adoption of widescreen or higher resolutions when all sites are now ignoring their existence and keep sites thinly displayed in a fraction of the screen.

Advertisements

1 Comment »

  1. […] Athletic Performances That Rival Michael Phelps 8 Gold Medals Saved by nonyma on Wed 17-12-2008 End Fixed Width Layouts Saved by nzdvc3 on Wed 17-12-2008 In-stock – Part 8 Saved by sussed on Mon 15-12-2008 […]

    Pingback by Recent Links Tagged With "width" - JabberTags — December 31, 2008 @ 11:34 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: