Jump to content

Website Dimensions


Recommended Posts

The length is generally dictated by content, unless you need a set height for design reasons.


As to the width, I usually go with a centered wrapper set at 960. 1024 is a good one to use, too. Generally, it's recommended to go with the most supported width, but now that we also consider iPads and Smart phones, that may have changed a bit.



Link to comment
Share on other sites

Is there a standard website starting dimension.

I have heard that 1024 x 768 is what I should use. then I hear that 960 x 720 is.


Is there a standard size?


Just to expand a little bit on Andreas answer, 1024 - 960 is the target width you should use if you are designing a website to be displayed on a desktop or laptop. Where you need to consider the height is where your focus content will fall in the initial view the visitor will have when the page loads. Considering 768 - 720 as your horizon line, always want to have a significant portion of your focus content above this horizon line, you never want it below the horizon line. In other words you never want the content that is the focus of that page to be hidden and require the visitor to scroll down to find it. Most people won't and not seeing what they came to that page for will simply move on, possibly boucing right off your site.


In either case it's never a bad idea to design for the smallest area. This will give you a little play room in your design. I am sure there are occasions where this is not favorable, but where and when you deem this true is up to you.

Link to comment
Share on other sites

I like to add to the last post...


Trying to determine a height can be troublesome because not all browsers and screens are the same. You also have to keep in mind that users tends to have additional toolbars and add-ons that takes up additional screen space. I do agree that it's important that you get your key content to the top of the page (other than the header) in trying to attract or make a point about the page/site they are on.


As for width, there are still a good number or users that have monitors with 1024 screens. Since vertical scroll takes up about 18-24px (depending on the browser) it's best to set your max width to 990px so that it does not force a horizontal scroll.


Finally, using media query for different devices of different resolutions will help overcome the width limitation. For example, you may build a desktop version website that has a width of 990px. However, you also want to cater for mobile devices as well and since most mobile devices (i.e Iphone, Samsung Galaxy III, IV, etc) have smaller resolutions you can use media query in your css to change the width for a specific device. Of course you have to consider the content that is contained within the framework or else it just simply breaks the layout. It's takes a bit of doing to create a responsive design but that a whole nother topic.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...