Posts Tagged ‘web page widths’

h1

775px webpage width

April 16, 2008

Awhile back I posted what the standard size for a web page’s width should be. I noticed that it has been very popular amongst readers and have decided to put a cool update.

Copy and paste the following code to notepad (or equivalent) and save it as an htm file:


<html>
<head>
<title>https://funbytebitstop.wordpress.com</title&gt;
</head>
<body leftmargin=0 topmargin=0 >
<img src=”https://funbytebitstop.files.wordpress.com/2008/04/775.jpg”/&gt;
</body>
</html>


Put your monitor’s resolution to 800×600 and preview the file you just created in any browser. Now you can see for yourself that 775px is the perfect standard web page width.

Enjoy! 🙂

NOTE: When pasting this code, you may have to replace the double quotes with your own double quotes when referencing the img src (image source). For some reason when I copy and paste the code into notepad and saved it, it didn’t understand the double quotes, so you’ll have to put your own in by literally replacing it with your own double quotes. Ugh.

Also, it is always a good idea to put your values in double quotes. I omitted putting double quotes for the leftmargin/topmargin values because it was being annoying when I copy and pasted it. Some browsers are forgiving of this and don’t mind omitting the double quotes, however, you should always put your values in double quotes when using HTML.

Advertisements
h1

775 px, make it your default webpage width

March 1, 2007

When designing a web-page, your hope as a designer is to have your work look the same on everyone’s computer as it does on your own. Wake up. That is not happening. All browsers don’t get along, and sometimes, it’s the web-pages that are the victims. Here is how you can help:

Start using CSS to manage every element on your web-page.

This page for instance, is laid out using CSS only, no tables. Yes. It’s true. But I’m not here to talk about CSS; I’m here to tell you about 775 px wide. The least you can assume is that people are browsing the Internet at a minimum of 800×600 resolution. For those of you who have it below this, get off of the Internet and think about what you did wrong. Then come back and increase the resolution of your computer.

Whether you are using tables or CSS to layout your design, you should set the width to 775 pixels wide. This way, if people are browsing at 800×600, your page will fit perfectly in any browser. Nobody likes to scroll left or right when viewing a web-page. I have seen a few sites that have gotten away with it, but this is rare. Do yourself a favor and avoid designs that have people scrolling horizontally.

And for those of you who follow in the myspace trend, please stop it with your enormous pages. It may look cool on your computer, but for those users with a lower screen resolution, your site can be a nightmare to navigate. Stop with the huge images too. They can totally skew your web-page and drive users up a wall. Consider reducing the size of big images using any imaging software.

The other (maybe not so) obvious option is to use percentages for the widths of tables (or layers if your going the CSS route). In the event that you have created your own interface with graphics, this really can’t apply. Just try and make sure your graphic is 775px wide.
And remember:
Scrolling horizontally on a web-page = crappy design

UPDATE: I posted a pretty cool update to this post. Check it out here:
https://funbytebitstop.wordpress.com/2008/04/16/775px-webpage-width/