In web design measures of a web page is a very important and the reality is that it has no precise answer … It is a decision that must be made before starting the design, but there is nothing to say which is the appropriate option.
But you don’t have to worry, you are in your favorite design program because you are going to start drawing a new web page, you start defining the size of the canvas in your new document and you wonder what are the measures of a web page? Is there a standard measure or at least one suggested size?
At the end of this article we will include some measures that could be of great help but ultimately before choosing it you should consider the following three factors:
The screen resolution is the most important factor to consider for the size of a website, although not the only one, for this you have to take into account the most common screen resolutions. Until a while ago the most popular resolution was 1024 × 768 pixels but that has changed in recent years and now the most common size is 1366 × 768, secondly a much larger size 1920 × 1080.
Now, if the most common screen resolution is 1366 × 768, should I design the site of this size? Well, it is not necessarily, we will continue explaining the other factors that you should also consider.
The people you are addressing
Being more specific to the type of devices that these people use, if we go to a sector with a high purchasing power, their teams may have very high resolutions, if the type of site is going to be mostly consulted by people who work in government offices. Average resolution of your equipment would be about 1280 to 1024. The site could also be aimed at people who only visit it through their smartphones and a resolution of 800 px would suffice.
The type of content
This is another important factor that must be taken into account, if the type of content is mainly texts, such as blogs or news sites, it is not necessary to think of a screen width of 1900px. Can you imagine reading that extra wide paragraph? we would have to move our heads like a typewriter car to read it. Not too wide text columns are appreciated. On the other hand, if the content of the site is mainly high quality images or video, it is advisable to make sites designed in large resolutions that allow highlighting its content much more.
Our recommendation for the measurement of a website is 940 to 1000 pixels wide for the content area of the website. The canvas, canvas or work area in your design program, such as Photoshop, that has about 1200 or 1400px in total. For the high there is no limit, vertically you can grow as much as your content requires. According to current standards and trends, displaying content by scrolling down is a great usability practice that is even mandatory for mobile devices.
It is recommended to make the document at least about 400 pixels wider than the content area so that you consider the background that the website will have. If it will have a specific texture, pattern or color, it can be perceived as it looks as a whole with the web content. Normally the content area goes in the center of the document leaving about 200px on each side.
If you are going to use an image as a background of the site then I recommend you consider leaving those 200 pixels on each side free after the image ends so that you make sure that the image is not cut. Or if you are going to want that regardless of the resolution the image is always seen to the full width of the screen you should choose a sufficiently large and careful image in such a way that when it is scaled the ugliest pixels are not seen.
Of course, the size in bytes of that background image should not be very heavy or it will take a long time to load, it is suggested up to a maximum size of 250kb if that image is really worth it, everything is by design. If you follow this advice you will prevent that user who has a Mac Book Pro of 21 ″ with its vain resolution of 1920 pixels makes the site look bad because the background is cut or pixelated.
Why if the most common screen resolution is 1366 I do not do that size? Actually doing it for a specific resolution is a mistake, doing so within a range of 960 to 1000 pixels the site will look good from 1024 px resolutions that are still very popular to higher resolutions.
This site size is very good and you ensure that the site can be viewed by most users with a desktop. When designing your website template that is the least you should try.
However, devices with lower resolutions, tablets and smartphones will be left out and that is currently a large percentage of users who would not see your site correctly. The solution to this problem is considering a site with a responsive design, which will be adapted according to the type of screen and device on which it is loaded.
In a responsive site it is usual to have a version for desktop computers and consider modifications in the arrangement and size of the elements so that it fits and has a version for tablets and another for phones. It is also possible to have a version for larger monitors if desired.
We do not necessarily have to specify how the design of these smaller versions would be, if we rely on responsive design conventions to adapt the content, it will only be enough to adjust the same content elements to the new size.
For the version for tablets from 940 to 780 pixels wide, for the “portrait” or vertical version. Horizontal orientation generally supports the desktop version. In this case it is not necessary to leave a space on the extra canvas and that would be the total size of the design document.
For the version for phones I recommend a size of 780 wide and would serve for horizontal and vertical orientation alike.