One of my main goals while re-designing this website was to create a 100% fluid layout. 100% fluid layouts aren’t something you see very often and I wanted the experience of having created one. I also figured that, as with doing anything for the first time, I might learn something new, and I did. I learned that 100% fluid layouts are more effort than they are worth.
There are fixed width layouts (everything specified in pixels), and there are elastic layouts (most things specified in pixels but one main fluid column), but I’m talking about a 100% fluid layout. All widths, margins and padding specified in percentages and all text sizes specified in em. The entire site grows and shrinks with the browser and when the text size is increased and decreased everything flows to accommodate. When calculating percentages I left as many decimal places as possible in the style sheet so that the browser could interpret it to the best of it’s ability. It’s 100% fluid and it’s beautiful, until you start using it.
The biggest problem with fluid layouts is that they’re fluid, when the browser is wide the site is wide and when the browser is squished the site is squished, obviously. But what happens when the browser is so wide an entire paragraph fits on one line? Suddenly your site is a little less usable than it used to be. Maybe width isn’t something that should be left up to the end user.
When my new design was done I started adding my portfolio which includes screen shots of some of the work I’ve done. The images are 700px wide and jpgs do not scale, so when the browser width drops below a certain amount of pixels the images start falling out of their containers. My only option was to add a min-width declaration to the entire site. The second I added min-width my site was no longer 100% fluid.
I work for a media company as a Front-End Web Developer where I cut everything from full websites and micro sites to video players, email newsletters and everything in between. I have never even considered using anything but 100% fixed width layouts when cutting anything at work, it’s just not practical.
When I am asked to cut a Photoshop mock it is expected that I make it pixel for pixel exactly the same as the mock. I’ve never worked on a project that wasn’t short for time and when the clock is ticking it isn’t worth it to try to figure out “what happens when the user expands their browser window” or “what if the guy with the 30 inch monitor has his browser maximized?”. We go out of our way to make sure every site has a sweet scalable background image so the site doesn’t look broken in those situations but there are too many variables and too much hacking older browsers involved to make a 100% fluid layout a viable business option.
Despite all of my complaining I am still glad I got the chance to attempt a 100% fluid layout. The math involved to figure out the margins was the hardest math I’ve done in the past few years and it was a little exciting to see the entire site scale on a huge monitor at work. If the ability to scale images was easier than it currently is fluid layouts would be the norm but as it stands fixed width wins every time.
I was under the impression that margins should be in percentages but doesn’t it make more sense for them to be in ems so they scale with the text? Someone please explain this to me.
A lot of people, all smarter than me, have already written about this subject. See what they have to say.
It sounds like a painstaking process with a lot of trial and error…definitely more effort than it’s worth! Live ‘n learn right?