Sponsor: The CSS Anthology
The CSS Anthology: 101 Essential Tips, Tricks & Hacks (external link)
Blog Entry
Are Resizable Layouts Dead?
Published on the 13th of November 2008
I've noticed in the past few months that fewer and fewer websites have resizable layouts that can properly shrink for an 800x600 resolution. The few resizable layouts I've encountered will only shrink for an 1024x768 resolution, which I guess they assume is the most common monitor size now, and slightly expand for anything larger. It was only a few years ago that most websites catered to an 800x600 resolution! Now it seems the era of resizable layouts is dying out.
Resizable layouts are ultimately better for the user because they don't restrict their browsing experience by requiring them to expand their browser window to see all the content. It also improves accessibility for users who simply have smaller monitors and furthermore for users who don't realise there is a horizontal scrollbar. I don't see any reason not to have resizable layouts, except because of the fact that a fixed-width layout is 100% easier to code and to design. From what I understand, a significant number of web users (particularly those in developing nations) still have smaller monitors with a maximum resolution of 800x600. Are web designers just ignoring this in favour of an easier design process?
The trend of non-resizable layouts seems to correspond with the development of Web 2.0. Just a few years ago, resizable layouts seemed to be the "holy grail" of web design with most web designers aiming to have their layouts work across browsers and across screen sizes. Most non-resizable layouts would at least work in an 800x600 screen resolution too. Has this trend just entirely died out? Why are so many websites leaving smaller monitors in the dust? Plus, Web 2.0-style layouts are generally easier to make resizable!
Both MSN and Yahoo! require horizontal scrolling on their homepage in the 800x600 resolution. Luckily, most of Google's services are still resizable, but Google tends to sacrifice design for the sake of accessibility in more cases than Microsoft and Yahoo! do. Of course, I was devastated when SitePoint's latest design (external link) update didn't shrink for 800x600. Web design websites I figured would hold out for screen-resolution accessibility. The day Google's normal search pages don't resize for different screen resolutions will be a very, very sad day.
Comments
-
Frans (external link) (13 Nov 2008 19:05)
On my current screen width of about 700px I have to scroll horizontally on Lowter. :P Opera's fit to width function works extremely well on nearly every site btw.
-
Ethan Poole (external link) (13 Nov 2008 20:42)
Well, I don't think it's plausible to support anything under 800x600 because images start to collide and such. I think you missed my main point in this post. Mainly, sites use to acknowledge that 1024x768 is the "target" screen size, but it would shrink for 800x600 and at least work, but maybe not look as pretty.
-
Doug (13 Nov 2008 20:48)
I like the 1024px width layouts, their quite reasonable. The content still fits within the 800px width of smaller monitors, and a bit of extra content is off to the side. You know it's there, but you're often not losing much by not scrolling over.
-
Ethan Poole (external link) (13 Nov 2008 21:31)
A lot of websites, however, haven't adopted the "less important" sidebar with these bigger layouts. Two I can think of off of the top of my head is CNET.com and BBC News. I think having a non-necessary sidebar is an acceptable practice, but I still think resizable layouts are better.
-
Matt Oakes (external link) (14 Nov 2008 3:12)
I always try to make my layouts fit into a 800px width browser window so that people don't have to scroll. However I sometimes make it a fixed with website for similicity and consitancy.
-
Doug (14 Nov 2008 7:58)
That's the main reason I like fixed layouts, their very consistant.
-
Frans (external link) (14 Nov 2008 9:55)
"Well, I don't think it's plausible to support anything under 800x600 because images start to collide and such."
I'm not suggesting to have the same layout exactly... that would for the most part result in a meager bit of text with giant sidebars obscuring everything. However, it's not a lot of work to use a media query to accomodate for mobile devices. My cellphone has a width of 320px, the iPhone has a width of 480px, and few mobile devices have a screen width that exceeds 600px (and don't forget about devices like the EEE PC with 800×480 pixels, although that falls within the scope of what you originally wrote). Apple can talk about Safari on the iPhone being like a desktop browser, but unless websites are specifically tailored toward it, it will remain clearly inferior rather than simply different experience.
Aside from that I find maximized browser usage a very unproductive way of using one's browser. I need to compare information, hold it next to each other etc etc.
Btw, I find the BBC News website perfectly fine to browse on aforementioned 700px.
Anyway, Opera's fit to width, mobile view, quickly disabling author styles and such usually aid me quite well in defeating obstructive author styles.
http://lofotenmoose.info is an example of a site that handles resizing (including pictures, for example) very well thanks to some relatively easy, but effective, CSS. Of course it won't work in IE, but on mobile devices, Opera is king (and semi-runner-up Safari supports plenty as well).
I suppose that ideally there would be about 3 or 4 different layouts around the same theme. One for windows/devices of about <500px, one for windows with about 500-1000px, and one for windows of >1000px. My potential 4th would be one for >1200px and could employ CSS3 column techniques. Anyway, where you would draw the lines is entirely up to how you want the fluid layout to behave, but in any case I think "static" layouts work better in the sense of max-width:1000px than as width:1000px.
However, the more decent a website was created, the easier it is for Opera to reformat it to a smaller view/screen format automatically and thus the less required a specific media query and/or stylesheet becomes necessary.
-
Ethan Poole (external link) (14 Nov 2008 15:32)
At Lowter we use to use some JS to load a special CSS file for smaller screens that got rid of a few columns so content was easily readable. The only thing with this is that it's unreliable because so many people have JavaScript turned off. It's an okay solution, but again not the best.
As for mobile sites, I think those should be seperate mainly to reduce file size anyway. But, yes, a seperate layout for them is certainly best.
Of course, Opera solves a lot of these problems, but with their small market share we can't rely on them to solve the issue, sadly of course.
Sponsor: Songbird Media Player
Desktop web player, a digital jukebox, and web browser mash-up. (external link)
