Old table and print think vs. css layout think
Right now I’m working on coding a site into WordPress that was designed by a graphics designer who is, from what I can see, a print designer. It was done for another gal who was originally going to do the coding slice and dice for Macromedia Contribute, using a table layout, but for various reasons she decided to instead go with WordPress and editing online, and chose me to do the “translation”.
It really brought home to me how far I’ve come in the past few years in working with the web as a medium. What do I mean by that? This layout I’m currently working with is designed on a grid. It’s been YEARS since I tried to jam a css layout into a fixed grid, and it’s proving to be a uniquely frustrating experience, since I just don’t think that way anymore.
The people designing for print or table layouts are used to working on a grid. After all, a piece of paper is always a fixed dimension, and table layouts are also grids with (more often than not) fixed pixel dimensions. The early web didn’t have the variations in screen sizes we do today. People were looking at your design in 640 x 480 or in 800 x 600 resolutions, and you optimized for one or the other. This particular layout is optimized for the latter.
The problem with that thinking is that the web today is accessed by many different devices besides desktop computers, and even desktop computer resolutions range in width from 640 to 1680 wide. The average screen resolution, with just under a 50% share, is 1024 x 768 (those stats only include computers, not mobile devices) and if you include those viewing the web on cellphones, palm devices, and other non standard web viewers, there are as many people viewing at smaller resolutions than that average as larger. So table layouts optimized for one width end up looking like a postage stamp in the middle of the screen on the larger resolutions at fullscreen, and end up needing sidescrolling in the smaller devices, since if there isn’t a stylesheet to strip out you’re left with the html coding dictating the layout form it is forced to take, instead of a simpler (css designed) page with styling stripped out and simply presenting the information in simpler form and in source order for those smaller screens.
Because of the wide variations in screen size and resolution, it is more likely that people have tweaked whatever device they’re using to access the web to use a font size that is more comfortable for them on the screen they’re using. This is especially true of larger screens used by the Baby Boomer generation, since larger resolutions make font sizes look so much smaller if not adjusted. So not only are the screen sizes variable, the font sizes are also variable, unlike a nice predictable sheet of paper. And setting them in point or pixel sizes tends to piss off those who have reset them and are using IE6, which won’t adjust them. So point or pixel sizing is definitely against best practices as defined by groups such as the W3 and CSS-Discuss.
In other words, if you’re working to a grid, you’re definitely going to make a fair proportion of viewers uncomfortable viewing your webpage. It’s simple to test this theory out, especially if you’re using a larger computer screen. Simply kick the text size up a couple notches in your browser, and resize the browser window smaller on any of your favorite sites. Some can handle it. Many don’t even come close, with overlapping elements, partially hidden navigation, and much layout breakage.
So here I am, trying to give as much flexibility as I can within the strictures that were handed to me. I’m also realizing that, moving forward with this person who I like a lot, I’ll have to do some educating so that future projects allow more fluidity in design and execution.
Technorati Tags: css vs table, grid design, print design vs web design
