Forum > Blogs > End Fixed Width Layouts
End Fixed Width Layouts
avatar
Country: US
Comments: 6470
News Posts: 413
Joined: 2008-06-21
 
Sat, 09 Aug 2008 01:50:04
0

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.  It's certainly simpler to actually design flexibility than shoehorn it in later.  On sites where content is posted, it takes more diligence to ensure the content doesn't overflow lower resolutions, but with good CSS, this isn't a problem.

We've reached an inversion of the problem that persisted, yet perhaps hurried, the transition from 800x600 to 1024x768; sites were written completely ignoring 800x600.  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.

---

Tell me to get back to rewriting this site so it's not horrible on mobile
avatar
Country: GB
Comments: 48515
News Posts: 59786
Joined: 2008-06-21
 
Sat, 09 Aug 2008 19:55:50
0
...........
......
.. K

I'm waiting to see if the CSS course will be availible next month or not. What's happening with this error on page thing Yobucket? And how you doing in general?

avatar
Country: US
Comments: 6470
News Posts: 413
Joined: 2008-06-21
 
Sun, 10 Aug 2008 08:19:08
0
If you resize your browser, you'll see the layout resize with it.  That's flexible width.  If it were fixed width, nothing would resize whether it fits or not.

Error on page is a loading issue on the server where it just cuts off for some reason.  I can only look for a new server.

---

Tell me to get back to rewriting this site so it's not horrible on mobile
avatar
Country: GB
Comments: 48515
News Posts: 59786
Joined: 2008-06-21
 
Sun, 10 Aug 2008 12:46:31
0
Ah ha. I see. Thanks for the heads up. You know my tutor basically doesn't even know CSS. I think she uses this XHTML and javascript.

avatar
Country: US
Comments: 6470
News Posts: 413
Joined: 2008-06-21
 
Sun, 10 Aug 2008 17:32:38
0
Knowing XHTML but not CSS is pretty incoherent.  Most styling attributes won't validate in XHTML (espcially in XHTML strict), so you couldn't have any visual design whatsoever, including font faces, any colours, etc.  You can safely bet she at least knows the basics.

---

Tell me to get back to rewriting this site so it's not horrible on mobile
Log in or Register for free to comment
Recently Spotted:
SupremeAC (1m)
Login @ The VG Press
Username:
Password:
Remember me?