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

Blog at WordPress.com.