With the powerful development of the 4.0 industrial revolution, conducting business on the internet is no longer unfamiliar. Every business looking to thrive must have its own online storefront. However, when it comes to professional website design, not everyone knows what the standard dimensions should be. With that in mind, follow us to learn more about the optimal standard dimensions for website design!
Dimensions of Standard Web Design
When designing a website, you need to consider the following dimensions:
1. Fixed layout (standard size) : The width is set to a specific value. It's a fixed size.
2. Fluid layout (flexible size): The size is calculated as a percentage. The width of the web page can change according to the browser.
3. Elastic layout: It's a combination of the two types mentioned above.
Units in website dimensions:
- Pt, pc, cm, mm, in: These are absolute sizes. They don't change when you switch display devices. For example, if you use an Arial font with a size of 10pt, it will display the same size on all devices.
- Px (pixel): This is the unit for one point on the screen. For instance, a full HD resolution screen with 1920 × 1080 pixels would have 2,073,600 pixels, evenly distributed across 1920 columns and 1080 rows.
- %, em, rem: % is the unit for flexible sizes. For example, an image set with a width of 50% will have a width equal to 50% of the display screen. "Em" is a unit similar to % and is used for font sizes, while "rem" is used for the font size of the HTML.
Size of the standard website
Standard website size, also known as fixed layout, refers to the fixed width of the web. The width of the web is usually 800px, 1000px, 960px, or 1260px.
The common fixed size designed by designers is 960px, suitable for display on screens with a resolution of 1024 or higher.
This size is applied to 80% of websites compared to fluid sizes. Fixed Layout ensures the consistency of resolution, controls various display factors, and doesn't disrupt the web code.
Advantages:
- Easier web design and deployment
- Support for display on various devices
- Good readability on high-resolution devices
- HTML elements with fixed width deploy quickly and are simpler.
Disadvantages:
- Creates large empty spaces on both sides if displayed on a high-resolution screen, affecting aesthetics
- If the width is higher than the resolution, it can create horizontal scrolling.
Fluid Layout Website Size
The size of a fluid layout website is calculated in percentage units. This allows your website to display with the most appropriate size ratio on any device.
Fluid layouts use percentages for HTML components, minimizing the use of pixels. Therefore, layouts can adapt to different screen resolutions.
Advantages:
- Improves UX and UI of the website, making it user-friendly
- No white spaces on both sides and no horizontal scrolling.
Other Dimensions:
1. Size of Slideshow Images on the Homepage:
- The recommended ratio for slider images on the homepage is 1360 x 540 pixels.
2. Image Sizes in Articles:
- External featured image: 300x188 pixels
- Illustrative images within articles: 600x375 pixels
3. Image Sizes in Products:
- Product illustration image: 300x400 pixels
- Detailed product image: 600x800 pixels
4. Size for Sharing Website on Facebook:
- When sharing on Facebook, use a cover image of 1200x630 pixels or a minimum of 600x315 pixels. Image file size should be smaller than 8MB.
- If uploading from a phone or computer, the minimum ratio should be 600x315 pixels.
Tools for resizing websites
To achieve professional website design and easily resize your website, you can use the following tools:
- Adobe Photoshop: Popular software for graphic design, website design, and image editing.
- Paint: Use Paint for quick image resizing while ensuring quality.
- Direct Editing on WordPress: Easily change the size of each image you want to post or in the library. This optimization helps your website run faster and smoother.
- Pixlr: Versatile and convenient image editing tool.
- Fotor: Free online image editing tool.
- Canva: Familiar software for designing images, logos, banners, etc.
Does the website size affect SEO?
Website size has a significant impact on SEO.
Yes, the website size is one of the factors that influence SEO. It's a fundamental criterion for Google to evaluate your website and optimize user experience.
Therefore, when designing e-commerce, news, introduction websites, etc., pay attention to the standard website size to create a user-friendly and easily SEO-friendly website that ranks high.
These are the most detailed pieces of information about standard website design sizes and their impact on the SEO process. It is our hope that this article has provided you with the most useful knowledge.
Frequently Asked Questions (FAQs)
1. Should I design for mobile-first or desktop-first dimensions?
A mobile-first approach is recommended as the number of mobile users is skyrocketing on the internet. Consider designing for the smaller screens such as smartphones, and then scale up for the larger ones, such as desktops, by means of responsive design approach.
2. What is the size of my website?
To determine the size of your website, you can utilize various online page size checkers available on the internet, both free and paid. An example of a free tool provided by Google is Page Speed Insights, which offers a quick method to check your page size. Tools can be used by entering the URL of your website that you want analyzing and then clicking on the "Analyze" button.
