The size of the website also influences SEO, especially user experience. In this article, I will guide you in the most details about the best website size for SEO and UX-UI. Let’s get started.
I. Website dimensions to know
Hmm, a really well-designed website is like a nice store. Why am I such an example? Simply both impress you and increase the ability to “buy” (read blogs, buy goods, use products/services…). But first, we have to please Google.
Therefore, to achieve this ability, it is also necessary to follow the criteria set by Google. Of the more than 200 factors that Google will put your website on the top, the website size is a part of it.
Not to mention your image is beautiful or sharp. Google will prioritize the size first because the Google bot only reads the size and alt tags. And quality definitely needs to be there for optimal user experience.
Here are some dimensions of the Website that you need to note:
- Standard size (fixed layout) is the fixed size where the width is set according to certain parameters.
- Mobile size (Fluid layout) is the size in percentage, so the width of the web can be scaled to the size of the web browser.
- Elastic size (Elastic layout) is a combination of the two forms above.
Also note the banner size, Image size slider on the homepage, Image size in the article, and Size images inside the product…
Units in website size
Pt, pc, cm mm, in
These are standard and absolute sizes. That is, they do not change when you change display devices (computers, phones…). For example, if you use the 12pt Time New Roman font, all devices will look the same.
Px (pixels)
A pixel is a unit of one point on the screen, a screen usually has a lot of small points. For example, a screen with Full HD resolution with 1920×1080 pixels. Here you will have 2,073,600 pixels evenly divided by 1920 columns and 1080 rows.
Unit %, em, rem
As I mentioned above, % is the unit for mobile size. For example, an image assigned to a Width of 50% will have a width equal to 50% of the screen of a phone or computer.
“Em” is also the same unit as% but is used for fonts. And “rem” is used with a font size of HTML.
II. Best Website Size
What is the standard website size?
The fixed size of the website is understood as the size designed to fix the width of the web. This width will not change. Usually mostly 800px, 1000px, 960px or 1260px.
Fixed because these dimensions will not change whether you use devices with different resolutions.
The fixed size of the web usually designed by designers is 960px. This size is perfect when appearing on screens with a resolution of 1024 or larger. This resolution is also the standard of today’s computers.
Fixed Layout is 80% more used today for the web compared to mobile sizes. A fixed Layout helps to ensure consistency with all resolutions. This helps designers control other display elements. Also, it does not disturb too much the programming (code) of the web.
Advantages
- Easy in web design and deployment.
- Support many on different devices.
- Despite being designed at 800px, the web still provides good readability with high-resolution devices.
- Fixed-width HTML elements are simpler and faster to implement.
Disadvantages
- Create large space on both sides of the screen with a large resolution. This causes a lot of aesthetics.
- If the Width is higher than the resolution, the horizontal scroll bar will be created.
III. Mobile website size (Fluid layout).
What is dynamic website size?
For mobile website size, the size will be calculated in %. This helps the website display on different devices for the right size ratio.
Mobile dimensions use % for HTML elements, so don’t use pixels. Therefore layouts may also vary according to different screen resolutions.
Advantages
- Friendly to users, increasing the UX-UI of the website.
- There is no horizontal scroll bar as well as white space as is the case with fixed layouts.
Disadvantages
- More restrictive in using graphics on the website.
- The dimensions of images and videos must be carefully calculated. If not, the alignment and arrangement are quite difficult.
- If designed in Photoshop, the interface is very good, but on other machines, it is easy to be misleading.
- Machines with a large resolution will also experience spaces between letters. Losing user-friendliness.
IV. Other sizes
1. Size image slider on the homepage
- The size of the slider photo according to the golden ratio is 1360×540 pixels.
2. Image size in the article
- The size of the image shown outside will be 300×188 pixels.
- The image size in the article is 600×375 pixels.
3. Size images in the product
- The best size for artwork images should be 300×400 pixels.
- And product image size is 600×800 pixels.
4. Website sharing size on Facebook
Sharing social in general and Facebook, in particular, is quite necessary for SEO. This also helps your customers on Facebook interact with the website better.
When sharing on Facebook, you should leave the Cover Website photo at 1200×630 pixels. Or at least 600×315 pixels and the image size should be less than 8MB.
You can also upload other photos from your computer or phone. The minimum level will be 600×315 pixels.
V. Website resizing tools
Here I will introduce you to the tools to change the size of the website. Using these tools partly helps you to solve the task faster.
- Adobe Photoshop: National software for graphic designers as well as photo editing. However, using Photoshop you also need some knowledge to get the job done better.
- Paint: That’s right, you didn’t read it wrong. Paint helps you handle image sizes fairly well and quickly.
- Editing directly on WordPress: Then you just need to resize each image you want when posting or in the “Library” folder. The optimization helps the web run a lot faster.
How to change:
- Upload photos to the website with the “Add Media” button.
- Select the image you want to download.
- When inserting, select “Size”.
- In the “Size” section there will be 3 options “Thumbnail” “Medium” and “Full size”. Please select “Medium”
- Finally, click “Insert article”.
In addition, you can also refer to photo editing tools on the online platform:
- Pixlr: Photo editing tool quite convenient. The tool includes many effects, and filters … Pixlr also supports opening most image formats such as PSD (Photoshop), PXD, and Jpeg…
- Fotor: is a free tool. Support using online photo editing tools, such as you can add filters, frames, text, and stickers…
- Canva: this must be a familiar tool. Canva really has a lot of interesting things to help you solve your work from designing images, banners, logos… You just need to drag and drop the graphics, and fonts.. provided very simple.
Conclude
The above is the best website size knowledge for SEO and UX-UI. Hope this article can provide you with all the information you need.
Thank You!
