So, how do web designers account for different screen sizes? Are there commands in HTML that allow you to size things relative to the screen size, or is it all just absolute size and you have to make the best of it? And by size, I mean both the actual dimensions and the aspect ratio.
Are you asking about what is possible or what is best practice? Because obviously, both ways are possible. If you just type in an HTML document with text and no margins then the text will expand (or shrink) to fit your window. But many websites are designed at a fixed size.
We decide beforehand whether the design will be “liquid” (stretch to fit the screen) or “static” (always at one width). It’s a conscious decision that we have to make with our clients based on their audience.
We also have to decide what the minimum width will be, in the case of a liquid site, or what the fixed width will be in the case of a static site.
The width of the design and the layout type is very important to the entire process of building a site. It’s not just a matter of “type X here and it will be liquid.” All of the graphics and the HTML/CSS have to be carefully thought out in order to make it happen properly.
It’s actually one of the more excruciating parts of designing a site. It takes a lot of skill…and a lot of explaining and re-explaining to clueless clients and graphic designers.
Most modern browsers also have a “zoom” equivalent, allowing those who need a larger font size or whatever to either enlarge individual elements, or the page as a whole so it’s in proportion. So that level of resize doesn’t really need factoring in to the design.
OK. I see.
But what about sites that your typical “amateur” web designer builds using tools like Yahoo SiteBuilder and such. Those folks never get near writing any HTML/CSS code. Do those tools offer the option to make things liquid/static, or do they just assume some format and you get stuck with it?
I do not have any experience with Yahoo SiteBuilder specifically, but of the applications like that which I have used, they seem to format the sites as ‘static’ with the contents of the page centered in the web browser (including whatever background is chosen) and some different background color showing down each side.
The examples that I see online a places like CNN.com or SI.com. Check them out on a large format or widescreen monitor and you will see what I mean.
EDIT: The striaghtdope column is also an example of what I have seen when designing sites using apps like SiteBuilder. Blank space down either side to keep the content centered and formatted correctly.
It might not be such a good idea to rely on users to deal with the zoom level. For one thing, not everyone knows how to do that – I’ve met a lot of people who were surprised when I demonstrated zooming in and out on Firefox. Secondly, the zoom is far from perfect: Images get blown up and pixelated, while text either gets reflowed all weird (on older versions) or blown up proportionally (in later versions), thus necessitating horizontal scrolling.
It’s just a whole lot easier for the user if the site were properly designed for common monitor resolutions to begin with.
I’m one of those people. And I just tried to find the zoom function in the toolbar, and I couldn’t. I see where you can increase the text size under “View”, but I don’t see a zoom function. Please fight my ignorance! 
What version do you have? I am using 3.03 and under the view menu there is a zoom sub menu.
2.0.0.17. Does that sound right? That’s what I got under Help, About Mozilla. Last time I updated was Jan 2007. I’m a slow adapter…
You may not have the zoom every thing option. I seem to remember a way to adjust the text size being on the menu specifically saying text size. Now there is a check box in the zoom menu to have the zoom apply only to text.
Yeah, you’d have to update. The zoom-everything feature was introduced in Firefox 3.
Is that rev stable and bug free enough that it’s definitely time to upgrade? I usually wait a few months after release before I even think about upgrading.
3 has been out a while. I have no issues but then computers love me and want to make me happy.
It might kill some of your addons, if you’re using any, though most of the popular ones have been updated by now.
One minor addition: Most web designers preview their output in a variety of browsers and screen resolutions before publishing the site. It’s the only way to positively account for different end-user environments.
Yes, that I’m aware of. Experimental computer programing. I love it.
You can specify an CSS to be a set number of pixels or inches or a percent, such as 95%
For layout information go to
They have all the CSS and HTML info you’d ever want and helpful forums
But it can’t be designed for all of the possible variations. It either has to be fixed width at one size only, or liquid for any widths. There’s no middle ground, but sometimes that’s what the user wants - hence the zoom function. Yes it’s flawed, because it’s a virtual kludge, but it’s an option that means the designer doesn’t have to find their own solution for that effect.
Basic html and simple tables will tend to wrap (but not magnify) to fit the window, however a lot of web design programs, especially dreamweaver, default to DHTML mode which is more like a page layout deal with a predetermined size. Blog apps tend to also have a fixed width design ethos. Flash sites tend to magnify/shrink (but not wrap) to fit. Any reasonably knowledgeable web design person can do whatever they want.