# Web page size and Monitor size

**URL:** <https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177>\
**Category:** Factual Questions\
**Created:** [November 5, 2008, 12:22am UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177 "2008-11-05T00:22:18Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Mace](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/john_mace/32/185_2.png) [@John\_Mace](https://boards.straightdope.com/u/John_Mace)\
**Post date:** [November 5, 2008, 12:22am UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/1 "2008-11-05T00:22:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Arnold\_Winkelried](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@Arnold\_Winkelried](https://boards.straightdope.com/u/Arnold_Winkelried)\
**Post date:** [November 5, 2008, 12:25am UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/2 "2008-11-05T00:25:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [November 5, 2008, 6:28am UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/3 "2008-11-05T06:28:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)\
**Post date:** [November 5, 2008, 6:53am UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/4 "2008-11-05T06:53:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![John\_Mace](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/john_mace/32/185_2.png) [@John\_Mace](https://boards.straightdope.com/u/John_Mace)\
**Post date:** [November 5, 2008, 3:17pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/5 "2008-11-05T15:17:43Z")

</div>

> [@ZipperJJ](#):
>
> 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.

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?

---

<div class="post-metadata">

**Author:** ![RickQ](https://avatars.discourse-cdn.com/v4/letter/r/35a633/32.png) [@RickQ](https://boards.straightdope.com/u/RickQ)\
**Post date:** [November 5, 2008, 4:23pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/6 "2008-11-05T16:23:30Z")

</div>

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](http://CNN.com) or [SI.com](http://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.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [November 6, 2008, 11:17am UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/7 "2008-11-06T11:17:04Z")

</div>

> [@GuanoLad](#):
>
> 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.

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.

---

<div class="post-metadata">

**Author:** ![John\_Mace](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/john_mace/32/185_2.png) [@John\_Mace](https://boards.straightdope.com/u/John_Mace)\
**Post date:** [November 6, 2008, 3:25pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/8 "2008-11-06T15:25:56Z")

</div>

> [@404 Clue Not Found](#):
>
> 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.

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! 🙂

---

<div class="post-metadata">

**Author:** ![gazpacho](https://avatars.discourse-cdn.com/v4/letter/g/6f9a4e/32.png) [@gazpacho](https://boards.straightdope.com/u/gazpacho)\
**Post date:** [November 6, 2008, 3:37pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/9 "2008-11-06T15:37:05Z")

</div>

> [@John\_Mace](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![John\_Mace](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/john_mace/32/185_2.png) [@John\_Mace](https://boards.straightdope.com/u/John_Mace)\
**Post date:** [November 6, 2008, 5:45pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/10 "2008-11-06T17:45:03Z")

</div>

> [@gazpacho](#):
>
> 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…

---

<div class="post-metadata">

**Author:** ![gazpacho](https://avatars.discourse-cdn.com/v4/letter/g/6f9a4e/32.png) [@gazpacho](https://boards.straightdope.com/u/gazpacho)\
**Post date:** [November 6, 2008, 5:58pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/11 "2008-11-06T17:58:11Z")

</div>

> [@John\_Mace](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [November 6, 2008, 6:11pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/12 "2008-11-06T18:11:02Z")

</div>

> [@John\_Mace](#):
>
> 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…

Yeah, you’d have to update. The zoom-everything feature was introduced in Firefox 3.

---

<div class="post-metadata">

**Author:** ![John\_Mace](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/john_mace/32/185_2.png) [@John\_Mace](https://boards.straightdope.com/u/John_Mace)\
**Post date:** [November 6, 2008, 6:29pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/13 "2008-11-06T18:29:36Z")

</div>

> [@404 Clue Not Found](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![gazpacho](https://avatars.discourse-cdn.com/v4/letter/g/6f9a4e/32.png) [@gazpacho](https://boards.straightdope.com/u/gazpacho)\
**Post date:** [November 6, 2008, 6:31pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/14 "2008-11-06T18:31:18Z")

</div>

> [@John\_Mace](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [November 6, 2008, 6:49pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/15 "2008-11-06T18:49:44Z")

</div>

> [@John\_Mace](#):
>
> 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…

> [@John\_Mace](#):
>
> 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.

It might kill some of your addons, if you’re using any, though most of the popular ones have been updated by now.

---

<div class="post-metadata">

**Author:** ![Chief\_Pedant](https://avatars.discourse-cdn.com/v4/letter/c/a6a055/32.png) [@Chief\_Pedant](https://boards.straightdope.com/u/Chief_Pedant)\
**Post date:** [November 6, 2008, 7:43pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/16 "2008-11-06T19:43:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![John\_Mace](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/john_mace/32/185_2.png) [@John\_Mace](https://boards.straightdope.com/u/John_Mace)\
**Post date:** [November 6, 2008, 8:51pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/17 "2008-11-06T20:51:20Z")

</div>

> [@Chief\_Pedant](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![Markxxx](https://avatars.discourse-cdn.com/v4/letter/m/5daacb/32.png) [@Markxxx](https://boards.straightdope.com/u/Markxxx)\
**Post date:** [November 6, 2008, 9:00pm UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/18 "2008-11-06T21:00:33Z")

</div>

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

[dynamicdrive.com](http://dynamicdrive.com)

They have all the CSS and HTML info you’d ever want and helpful forums

---

<div class="post-metadata">

**Author:** ![GuanoLad](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/guanolad/32/42_2.png) [@GuanoLad](https://boards.straightdope.com/u/GuanoLad)\
**Post date:** [November 7, 2008, 12:30am UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/19 "2008-11-07T00:30:04Z")

</div>

> [@404 Clue Not Found](#):
>
> 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.

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.

---

<div class="post-metadata">

**Author:** ![jackdavinci](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/jackdavinci/32/3259_2.png) [@jackdavinci](https://boards.straightdope.com/u/jackdavinci)\
**Post date:** [November 7, 2008, 10:39am UTC](https://boards.straightdope.com/t/web-page-size-and-monitor-size/471177/20 "2008-11-07T10:39:11Z")

</div>

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.
