Enter a URL
Testing my website in different screen resolutions
To verify the functionality of your site in different resolutions, we recommend using the devices you would like to test, instead of external tools. If you don't have the possibility to access those devices, you can use the developer tool (DevTools) of Google Chrome to simulate the visualization.
Important: The Google DevTools tool and other external applications are emulators and should only be considered as a guide to simulate the visualization of your site on different devices. Seo tools is not compatible with external emulators and therefore we cannot guarantee that the results accurately reflect the actual browsing experience on your site.
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. If you want to know this in more detail, in this link you can see the most updated data of the most common resolutions.
Now, if the most common screen resolution is 1366 × 768, should I design the site of this size? Well, that is not necessarily the case, I want to continue explaining the other factors that you should also consider, although if you are in a hurry you can go directly to the recommendations.
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 equipment 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.
This is another important factor that must be taken into account, if the type of content are mainly texts, such as blosg 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.
My 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.
I recommend making the document at least 400 pixels wider than the content area so that you consider the background that the website will have. If you have a texture, a specific pattern or color can be perceived as it looks in its entirety with the content of the web. 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 an image large enough and cared for in such a way that when it is scaled you will not see the uglier pixelotes than adolescent grains.
Of course, the size in bytes of that background image should not be very heavy or it will take a long time to load, I would dare to suggest up to a maximum size of 250kb if that image is really worth it, all because of the design although my colleagues programmers obsessed with performance would surely be infarcted. 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 fuchi the site 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, when 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 seen 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. Now if you want to clearly detail how these designs would look, the suggested sizes would be:
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.
Desktop version (base) 940 to 1000 px
Version for tablets 940 to 780 px
Version for 780 px phones
At the moment the question of what are the measures of a web page? I think it has been answered more or less well, if you have any questions, leave a comment that I will gladly answer and singular joy. If you want to be aware of the contents that will be coming out, I strongly recommend you subscribe to our mailing list to send the updates directly to your inbox.
In addition, if you need someone to do the programming of the design of your web page, we specialize in transforming your designs into manageable and responsive websites so that they can see it beautifully on any screen, we are at your service.