Website width and height

Get Started
1

I’m hoping to clear up this question that I see on a lot of unanswered forum posts: what width and height should I design my webpage to be? Rather than go into the science and technicalities of this answer, I will simply tell you how it’s done, and you’ll have to take my word for it. My resources for this answer are 10 years of web design and programming experience, and information taken directly from various SitePoint published web design books that my family and friends have acquired over the years. Yes, I’m not just a designer and developer myself, I am surrounded by similar people.

The truth is, the width should always be a certain percentage of the screen, while the height should always be variable, depending on the content. However, ALL OF THE MOST IMPORTANT INFORMATION should be ABOVE the fold - meaning all of the most vital information should be above the scrolling point on a webpage. So brief descriptions of content or titles, teaser quotes, etc. should be above the fold to summarize the content and catch the users attention so they… you guessed it, scroll down.

About scrolling - horizontal scrolling is a big no-no. Now most of the Site Point publications will tell you that the standard width to design for is 960px, which is derived from the browser width of the most common screen resolution of 2012 - 1024x768. HOWEVER, I have found it is best to incorporate a fluid page design, meaning if the resolution is much larger, like 1920x1280, the width will still be appropriately proportioned.

How to do this? Well, instead of creating images for tables using width percentages, and then discovering they are pixelated as they upsize to a larger browsers, you can try a couple things. Substitute as many graphics as possible for CSS. This is fail-proof, however designs may become simpler.

Simpler is not a bad thing at all. Check out Dawg House Design Studios - extremely simple page, and it is fluid to fit any display size. In fact, it is a special kind of fluid design called a Responsive Design, and you can find out more about this on websites like A List Apart, and in books like The Principles of Beautiful Web Design, by Jason Beaird. I believe he talks about responsive design starting in the second edition.

However, if this becomes too complicated, another easy way to design a fluid width, and psuedo-responsive design is to put your CPU and RAM to the test. What I mean by this is design the site at a 1920x1080 resolution at something like 250-300dpi, and have the browser scale it down based on screen resolution. This means that at 1024, the website width will be 93.75%, or 960px, while at 1920, the width will be 1800px. This means that it will be appropriately proportioned, without scrolling, every time, and you will never run into pixelated web pages.

So which method do I recommend more? Obviously, a fully responsive design. Next would be a CSS-based design, as this is fail-proof. The next would be designing at a large resolution, since this could result in slower loading if you don’t use certain coding. As for the last of the three, if you can use javascript to detect browser size and load a different set of table images based on that size, you can decrease loading time.

The major benefit of a fully-responsive design is that it will change the entire layout depending on the resolution, meaning it is mobile friendly.

One thing I would definitely advise AGAINST is anything Word Press. But that is a discussion for a separate post. I did not proof-read this, take it as-is.

2

One pitfall to be aware of with a fluid/ adaptive layout is
the resulting width of any text blocks as the template
expands to fill the available viewing area of the screen.

For instance regardless of screen size this paragraph
and the one above though dull in content is fairly
easy to scan at a glance, because you only have to
move your eyes as everything is in a visual ‘sweet spot’.

However as the length of a line of text increases and you get beyond the six hundred pixel mark the movement of the viewers eyeballs becomes more pronounced, minor re-focussing needs to occur and often the head will turn as well. As a result the reader is more likely to lose their place in the text and most likely any interest in reading further. Publishers have been aware of this for centuries but many web designers are strangely not.

3

I’m glad you brought that up - I was thinking of mentioning that, but decided to let users explore that aspect through layout. The easiest way to adapt to line length as such is to use a responsive column layout that adapts to some sort of fluid 960 grid system. I freakin LOVE the whole 960 grid system, and it has never failed me. Another thing that Site Point articles point out is not only line length, but text size. There are various formula for calculating the proportional text size based on content area size. In fact, one of the articles recently posted by this site goes in depth on that. I’ll try to find the link.

And the text says:

"By basing text sizes, widths and margins on percentages or on the em, a unit of measurement based on a font’s point size, you can turn a fixed size into a relative size. This means you’ll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em is very simple:

target ÷ context = result

Let’s say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:

24 ÷ 16 = 1.5

This results in the following CSS style:

h1{
font-size: 1.5em;
}

Always take the context into account. Continuing with the previous example, if you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for “H1 a” is:

12 ÷ 24 = 0.5

And the CSS style is:

h1 a{
font-size: 0.5em;
}"

I’m entirely new to forums, this is one of my first forum posts, the concept is foreign to me, so forgive me if I am breaking rules by posting that link.

4

One more thing I forgot to add - my general rule is to keep text areas no bigger than 1/2 the container size for resolutions between 1024 and 1920, and keep it under 2/3 for resolutions of 1024 to 800. This is done easiest with a 12-column 960 grid, as 960 can be broken into a 2, 3, or 4 column layout easily. There are also 16 grids and other sizes, but 12 translates the best proportionally, in my opinion.

5

Personally, I tend to design at 960px unless the project requires an exception to this, I then try to utilise the background as a design feature when appropriate. I use 2 22" monitors on my desktop giving a total res of 3840x1080 but would never consider designing a site that fits a specific % of that, 960px is more than enough in most situations and I would rather have a little too much background on show than too much space to fill within the template.

Also, personally speaking of course, the “traditional” notion of important content above the fold is somewhat redundant now. Of course there are elements that should always be at the top and other elements that should be close to the top and fair enough SEO suggests that we should keep important content up high when possible but short of these 3 guidelines it doesn’t matter how far below “the fold” content is. Looking at how wide the screen resolution divide is now how can you actually tell (with reasonable accuracy) where the fold is in any given situation? Mobile phone, small laptop, large laptop, large desktop monitor, multi screen set-ups, tv’s and projectors… with everything in between.

I would not like to think that people are still reluctant to scroll down a page. If your site looks interesting and the content is laid out nicely then there is no reason for someone to decide scrolling is not worth the effort.

If you really want to keep content above the fold in every situation possible then you are going to have a hell of a job playing with media query’s and have somewhat complex templates and still endup in a situation where you run the risk of reducing important content to make it fit (in an extreme scenario).

TLDR: Well designed sites with well designed content with SEO principals in mind should generally encourage users to explore the site and remove the necessity to cram as much above the fold as possible, these guidelines and “ideals” should be the basis of planning your site but not hard rules to design by.

This is just opinion of course.

6

What I mean by above the fold is above 57.29%. This percentage is derived from the standard resolution of 1024x768. This means that no matter the browser size, it will always translate back to that standard resolution. That means that there may be information above the fold that isn’t vital in a large application.

However, you misunderstand what my concept of the fold is. I did not say to put only the most important information above the fold. This is what the whole fold concept usually entails, but this is not my belief. Instead, put the most interest-catching information above the fold. This doesn’t mean what you think it means either.

You have assumed that this means that specific information belongs above the fold and only above the fold, but in fact, it should be repeated below the fold, often, as is common in the practice of good writing. Here’s a summary of my idea of the fold: above 57.29% (of the width) should be a summary of the content, or the first section of content. Below should be the content. Simple as that. It’s how you would type in a print application to, or writing a school essay, or a president’s speech. It has as much to do with proper writing structure as it does with web design.

Now here’s the catch. Most people don’t navigate and live above the fold either. Most people give two or three scrolls down the page until the top of the content is at the top of their page, and if the menu and banner doesn’t engage them, they do this almost immediately. This is even more common when the user knows what they are looking for.

For this reason, adapting the most interesting and summarizing content to be above the fold that is relative to the top of the content area is what I normally recommend. Again, 57.29%. Everything is a proportion.

7
8

The truth is, the width should always be a certain percentage of the screen, while the height should always be variable, depending on the content. However, ALL OF THE MOST IMPORTANT INFORMATION should be ABOVE the fold - meaning all of the most vital information should be above the scrolling point on a webpage. So brief descriptions of content or titles, teaser quotes, etc. should be above the fold to summarize the content and catch the users attention so they… you guessed it, scroll down.

Users have proven in usability tests that they scroll, and if keeping x-amount of “important” stuff “above the fold” means overcluttering the top of your page, then it’s stopped being a good thing.

Since “folds” are not universal, the important thing is that you make sure the user KNOWS there’s a fold. I’ve seen plenty of website designs where, on both my machines (different rezzes), it seemed that what I saw was the whole page. I would have to notice that there WAS a scrollbar to know I COULD scroll. So being careful with the vertical space between elements is important. So long as people see a bit of what is further down, they have that visual cue that there IS something further down.

As for the reading width of text, I choose to fullscreen my browser for a reason. If I don’t want text that wide, I will make my browser smaller. When you make that choice for me, though, it’s your best guess, and coupled with my likelyhood of needing to enlarge the text, along with what if your language isn’t English (or similar with many tiny short words), means disaster reading for me.

9

Once again, you misunderstand me. The point of information above the fold is NOT to cram it up there. This is the traditional idea, however when I say most important, I mean attention-catching. This attention-catching information should be repeated. Read that exact quote in your post - my quote. I says, “So brief descriptions of content or titles, teaser quotes, etc…” This clearly will not cram anything. Also, “above the fold to SUMMARIZE the content and catch attention”. It’s pretty hard to cram with a summary.

"Since “folds” are not universal, the important thing is that you make sure the user KNOWS there’s a fold. " Again, the misunderstanding. That whole thing I said about percentages is exactly what I was talking about here. The fold is NOT standard on any given device, however it IS standard in that you can fit 57.29% of the width above the fold by adjusting margins. If you keep this 57.29% rule, your design will ALWAYS translate back to… you guessed it, 1024x768. It’s all about hiding a standard within a non-standard design.

“As for the reading width of text, I choose to fullscreen my browser for a reason. If I don’t want text that wide, I will make my browser smaller. When you make that choice for me, though, it’s your best guess, and coupled with my likelyhood of needing to enlarge the text, along with what if your language isn’t English (or similar with many tiny short words), means disaster reading for me.” as the lovely Pam from Human Resources would say, “For serious?” I’m just going to establish one fact, moving your eyes 1 and a half feet after every line just to read text is ridiculous. And no, this is not an exaggeration. The monitor I am on right now is 1.5 feet wide. It hurts the eyes. Badly. It breaks the flow - it is disjointed.

For the purpose of this discussion, I began creating a website this morning to show you how the fold and text widths can be utilized. The site will be responsive eventually, but hell, I just started it this morning, so at the moment its a static size. To see how the fold really works, ctrl-scroll out to zoom out until the 1650 content area fits in your browser. Sorry about that, but like I said, I’m not to the responsive part yet. Just getting a flat layout. john.grupe.us/template.htm

Notice how every article has a large flashy image at the very top with less than a paragraph of text. This is what I mean by above the fold. Now the actual fold starts when you scroll down. Scroll to where you normally would - so the top of the content is at the top of the page. See all that? Above the fold.

The traditional concept of the fold is what is above scrolling point, but its actually not. The REAL fold is everything above scrolling point where the content is at the top of the page. This means that “The Fold” is NOT an area on the page, but an area in the mind.

10

An update - I took my example website and created a copy to experiment on. Between the hours of 10:30AM this morning and 8:15PM tonight, I made the entire page a fluid grid using javascript. I have never used javascript before in my life, yet today, I just looked up the ways to make functions and variables and built every inch of code myself, and it works perfectly. My point here is that this stuff is not difficult at all. The best part is, the javascript is such that if you have it disabled, the entire website will fall back to it’s designed dimensions, which is ALSO variable using CSS based on the resolution, meaning the site is nearly fool proof. To add to this, I created my first CSS code only a few days ago, CSS is also entirely new to me. My other point is that if you learn just a little bit of many codes, you will start to pick up on new ones faster. The grammar is all basically the same, you just need to know the vocabulary. The same thing applies with actual languages like Spanish or French. If you can learn the grammar of a bunch of different languages, it will be easier to learn new ones. You don’t necessarily need to memorize the dictionary, you just need to memorize how you would arrange the words in said dictionary.

11

I meant to add one more thing - I will post the link to the mentioned javascript/css page when it is cleaned up. Right now my whole domain is a freakin mess… drives me crazy. I’m generally a very neat and tidy coder.

12

09jlardinois I don’t think they understood at all. Great Post in my opinion. The simplest way I describe “above the fold” is by explaining where the phrase came from. The front page of the newspaper. The front page of the newspaper had to sell it self, but it only got to use the territory “above the fold”. Yes scrolling is easy and near automatic, but there is still something to be said for purposeful layout. percentage based layout is more difficult for sure and I’m still working at it, but it allows for more stable development, less maintenance, and is typically less effected by browser updates. Again, great post. I appreciate your explanation of fluid text sizing.

13

Ok… it’s possible I am misunderstanding something here!!!

design the site at a 1920x1080 resolution at something like 250-300dpi, and have the browser scale it down based on screen resolution. This means that at 1024, the website width will be 93.75%, or 960px, while at 1920, the width will be 1800px. This means that it will be appropriately proportioned, without scrolling, every time, and you will never run into pixelated web pages.

Why would resolution fit for PRINT ( and medium to magazine quality at that) be a recommendation for web design?

Best practice is to think of elements in your markup as BG containers design/art direct your graphics as patterns and repetitions. Not only does this help make the site fluid but keep d/l times down. There will be an instance or two when that is not possible… a pic of Stomme Poe’s silly kitty as a corner flair, for example. But really, aesthetically this wont make much difference if it scales or not.

There are normal “human breaking points” I likr to consider too, but I think it end up involving responsive design by necessity , at that point. I mean, if a user has a 3200 pix wide screen… ~90% is ~2800px… its just a pain in the neck ( literally) to read lines that long. so either keeping the MAX-WIDTH at a comfy 960-1200px or having an alternate layout present itself as the best practice.