Member Avatar for virtualmisc

Hello friends


i wanted to know if there was a standard dimension for a web page?
i.e width and height

Thanks

  • 10 Contributors
  • 11 Replies
  • 194 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by jerinjames

Recommended Answers

All 11 Replies

Member Avatar for xara

No, there isn't one, but usually I made mine around 900 px wide, considering that there are still a lot of people using a 1024x768 display. The height depends on the content and the design of the page.

Member Avatar for Cragdo

You could also use a liquid layout that will shrink and stretch to whatever screen resolution.

this is the code that I use:

*, * focus { outline: none; margin:0; padding:0;}
body {
	font-family: "arial", "tahoma", "verdana";
	font-size: 62.5%;
	color: #000;
	line-height: 180%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	background: #fff;
}
/* main layout */
#header,#navmenu,#content,#footer {
	overflow: hidden;
}
#wrapper {
    margin: 0 auto;
    text-align: left;
}
#wrapper,#header,#footer { width: 100%; }
#navmenu,#content { float: left; }
#navmenu { width: 20%; }
#content { width: 79% }
#footer { clear: left; }
/* end main layout */

/* check wireframe*/ *{border: solid 1px #ff0000;}

and the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Liquid CSS Layout</title>
<link type="text/css" rel="stylesheet" href="styles/style.css" />
</head>
<body>
<div id="wrapper">
	<div id="header">header</div><!--end header section-->    
    <div id="navmenu">navmenu</div><!--end menu section-->    
    <div id="content">content</div><!--end content section-->    
    <div id="footer">footer</div><!--end footer section-->
</div>
</body>
</html>

If you want the menu bar along the top instead of a sidebar just remove

#navmenu,#content { float: left; }

and change the #navmenu and #content percentages to suit.

I have also set the font-size in the body to 62.5% that means that I can use ems more easlily(for me) throughout the rest of my stylesheet as 1 em = 10px - 1.2em=12px etc.

Hope this helps

Member Avatar for leahmarie

cool source for liquid css layout thanks for sharing this code.

Member Avatar for Cragdo

OOPS!! Just noticed an error in the code. You can delete

margin: 0 auto;
padding: 0;

from the body element as it is not required.

Member Avatar for scottloway

There definitely are not "standards" per se, but targeting your users by understanding their screen resolutions is the best place to start as MJ080 points out; 1024px width would be a good starting point.

That said, your design needs to consider variability in how the browser is fit within the monitor, and how your site would fit into the browser page itself. For this reason, you need to think about browser chrome (like vertical scroll bars), etc. This is why you tend to see a lot of sites built under 970px (or so) page width. There are also an abundance of CSS frameworks out now that you can use as building blocks, such as http://960.gs.

Vertical space is not as limiting because users are accustomed to vertically scrolling for additional content. That being said however, not all page real-estate is created equal. You'll obviously want to keep your most important content toward the top, and above the "fold" (where the page content gets cut off due to browser height/screen resolution).

Lots of documentation online, just search around and read up on best practices and such.

Good luck!

Member Avatar for Cragdo

There is still about 3% out there that are still using a resolution of 800x600. Taking into consideration the amount of screens world wide then 3% is a pretty large number.

Users will scroll vertically all day but refuse to scroll horizontally and will quit your site rather than do so. If you're trying to make money from your site then do you really want to risk losing those potential customers?

So really you should be aiming for about 770px minimum width to make sure all visitors can view your site properly. This is why I always use a liquid design.

Cheers

Member Avatar for suzzena

check in google u will get better information

Member Avatar for karol33

standard resolution for a web page is 800x page content but u can always input nice background to the body

Member Avatar for digital29

I usually use 960px width for my sites, so I will fit in 1024x768 resolution.
I wouldn`t recommend sites that stretch to fit all the page on different resolutions...

Member Avatar for jerinjames

No there is no standard size for a website. It depends on your site purpose, content, design and layout. You need to be aware of the "graphic safe" areas while you design.

Though most display screens have large resolutions, there are many many people who still use 800 X 600 resolutions. Web page graphics that exceed the width dimension of the most common display screens look amateurish and will inconvenience many readers by forcing them to scroll both horizontally and vertically to see the full page layout. It's bad enough to have to scroll in one (vertical) direction; having to scroll in two directions is intolerable.

Graphic "safe area" dimensions for layouts designed for 800 x 600 screens:
Maximum width = 760 pixels
Maximum height = 410 pixels (visible without scrolling)

Or go for the liquid design which should generally keep most people happy. But there are limits to what you can achieve with it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.