What are the recommended measures for a web page ? Is there a standard measure or does it all depend on the site and content? If you are thinking of setting up your own website, you have surely asked yourself these questions.
When designing your website and thinking about the ideal size you must take into account several factors. Not only be aware of the devices from which users could access your content, but the type of service you offer and the trends within your niche. Obviously, today it is clumsy to think of a unique design; taking into account the great diversity of devices from which you navigate. Therefore, it is very important to decide on a responsive design (which adapts to the various display formats).
But going back to the topic at hand, in this article we will give you some initial notions about what things you should take into account to choose the ideal size for your website .
What is the size of a suitable web page ?: Ideal measurements or dimension
The ideal measurements for a web page vary over the years. Due to the wide range of devices through which we can access the Internet, it is an aspect that is constantly evolving. And this is the fundamental point to analyze before deciding on the format.
Where are users going to connect from? What measurements do the most popular appliances have? How to get it to be displayed correctly from any device? These are very important questions, whose answers will lead you to choose the appropriate measures for your site .
Screen resolution
When thinking about the size of a web page and the template we must consider a relevant issue: the resolution. This means, the vertical and horizontal size that it will occupy within the screens.
It should be said that, even if you have a 4K monitor (3840 x 2160 pixels), probably very few users have this resolution, which has not yet become the standard; therefore, making your website in that resolution will be an inappropriate decision. You should look for one that fits a large number of viewing options.
Until not long ago the standard resolution on the Internet was 1024 x 768 px. At present, the most used is 1366 x 768 px , which corresponds to the standard resolution of Windows 8. Deciding on a higher resolution could cause that, on certain devices, your website is not displayed correctly.
Now: what if users have a higher resolution; will they see my web page wrong? No, as long as you take this eventuality into account. To do this, the ideal is to fill the outer space of the page with a color or texture that can be repeated. In this way, from any device your site will be seen correctly. One important thing: it is not recommended to use a background photo, because images cannot be resized with CSS, so they will not infinitely fill the space. Furthermore, while a color or a pattern does not take up space on your server, a photograph does; and that is another against for this type of funds.
When thinking about the size of the screen, you have to bear in mind that, although there is no ideal resolution, we do have certain standard measurements: certain trends that can serve as a reference when creating our design.
Once we have analyzed these aspects of the resolution, we must think about the type of design on which we are going to work. Depending on the niche we are in, the style we want for our website and our resources, it will be convenient for us to opt for a more or less dynamic path.
What you should take into account in the size of a web page beyond the measurements, is that it is a responsive design , which adapts to different types of devices, it is essential, if you want your web page to be a success .
Let’s now look at the trends in resolutions, taking into account the various devices.
Desktop or desktop
It is not convenient to consider for our design taking as a starting point the most popular resolutions of the devices; since one thing is the resolution of the screen and another is the Internet standard (which is still much lower than the possibilities of the commercialized systems). However, taking these trends into account, you can guide us to find out what the standard measurements are.
In the case of desktop computers, a clear differentiation between small, medium and large screens has been established for a few years. While the most used small ones usually offer a standard resolution of 1024 x 600 px, the medium ones usually have 1280 x 720 px resolutions, while the large ones, 1400 x 900 px or 1600 x 1200 px.
Taking these values into account can help you make the decision.
Tablets
If in the field of computers we have a great variety of resolutions, in that of tablets and mobiles the variety of resolutions exceeds all expectations ; We could almost say that there are as many resolutions as there are brands, although, obviously it would not be entirely true, but it is better to exaggerate to understand each other better.
Given this great diversity, it is impossible to hit a specific measure with the vast majority of devices from which our site will be accessed; therefore, we must opt for those more popular resolutions . We tell you some of the ones that you will find most frequently.
In the Apple tablet models (iPad and iPad Mini) we have an average of 1024 x 768 px. In Samsung Galaxy Tab we find a resolution of 1024 x 768 px in 7-inch tablets, while from 7 o’clock and onwards the resolution is usually 600 x 1024 px. Microsoft’s Surface W8 RT tablets have a resolution of 768 x 1280, which is also handled by many second-brand tablets. On the other hand, the most common Nexus offer a resolution of 603 x 966 (on 7-inch tablets) and 800 x 1280 (on 10-inch tablets).
Thinking about all these possibilities will help you find the most recommended size for a web page .
Mobile phones
In the world of mobile phones there are almost as many resolutions as there are brands and models on the market. However, there are some resolutions that have been established as the norm. Let’s talk about them.
Broadly speaking, we find that in the iPhone brand we have from 320 x 480 px resolution (iPhone 3GS) to 1242 x 2688 px resolution (iPhone 11 Pro Max). Samsung offers resolutions ranging from 720 x 1280 px (Samsung Galaxy Nexus) to 3200 x 1440 (Samsung Galaxy Note 20). The rest of the mobiles, most of them with the Android operating system, oscillate between 480 x 800 px and 1080 x 1920 px.
You cannot think of a web page leaving you out of the mobile world, since it is believed that more than eighty percent of the traffic that travels on the Internet comes from these devices. Hence, it is so important to think of a design that suits these users.
The people to whom it is addressed
Taking into account the main origin of your web traffic is another aspect that you should analyze calmly.
If your website is aimed at an audience with high purchasing power, it is very likely that the vast majority have the latest generation computers and devices, so thinking about a high resolution design and with certain system requirements would not be a totally unacceptable idea. Although, we recommend that you keep reading.
What we want is that the Internet disseminates equality, therefore, thinking of a design only taking into account a group does not seem the most sensible idea. Many network users live in areas with connection problems or belong to a less economically favored sector and do not have state-of-the-art computers; It is also very common that certain people do not consider this device as a basic necessity and do not mind keeping it for many years. This will make it difficult for you to access certain content. It is not a good idea to think about your design leaving these people out. Don’t you think? Therefore, it is ideal to raise these aspects trying to include as many people as possible; so that everyone can enjoy your magnificent work.
But here it is necessary to make a small comment. It all also depends on the type of content . If you dedicate yourself to creating content where the fundamental thing is the text: a news site, a literary blog or a corporate corporate website , you should focus on ensuring that all users can correctly access that part of the content: the text. But if you dedicate yourself to fashion or have a store, you will have to give priority to images, which means thinking of a resolution that allows your website to look beautiful.
Although discriminating against those users who do not access the internet from the latest generation devices is not a good plan, sometimes you have to make difficult decisions, to prevent everyone from having a bad experience with your site. Reduce the weight as much as you can, but don’t downgrade the quality of your site .
The recommendation
There is another concept that you should take into account when thinking about the design of your website: breakpoints . What does this concept refer to? In responsive development, it could be said that it is about the leaps that the design gives when changing from one template to another, to adjust to the device from which you want to visualize it. For our design to adjust to the various resolutions, we must take into account the most popular ones, but creating the jumps taking into account specific resolutions is not a good idea, because then, you should create as many templates as there are resolutions, so that they are view correctly on all devices.
Therefore, taking resolutions into account is very important, but it should not be absolutely decisive for your work; because the group to which your website is directed is essential. In other words, it is about offering the most satisfactory experience possible for the audience you are interested in reaching.
The ideal is to bet on a resolution of 940 to 1000 pixels, for the total size of the web, and devise the work template with a resolution of approximately 1200 px. We are talking about the width of the web, since the vertical extension is not so relevant, because vertical content can be accessed by sliding the screen as much as necessary, as we are used to doing.
In short: the ideal is to prepare the template about 400 px wider than the area where the content will go; so that we make sure that from any device it is seen correctly. This involves placing the content area in the center of the template, leaving about 200 px of margin.
conclusion
At this point we must clarify that there is no ideal size for a web page , because it will depend on the type of content and the people to whom it is directed. Calmly analyzing these aspects will help you decide the appropriate size of each page, so that it can be displayed correctly on as many devices as possible.
Of course, whatever your design, think about the importance of developing it to fit various devices ; To do this, choose a good responsive design, to avoid headaches and offer the best possible navigation for your users.
By following these tips, you will surely know how to find the ideal size for your site and you will propose a design with many possibilities of success. Have you had any doubts? Leave us your comment, so that we can help you to propose your web project in the best possible way .
