Trong thời đại CNTT 4.0 như hiện nay, việc sở hữu thiết kế Website chuyên nghiệp không còn quá xa lạ đối với các chủ công ty. Tuy nhiên bạn đã biết kích thước Website chuẩn là gì và vì sao cần chú trọng đến việc tối ưu kích thước trang Website chuẩn hay chưa?
Mục Lục
1. Kích thước Website chuẩn là gì?
Kích thước chuẩn Website (Fixed layout): Kích thước cố định trong số đó chiều rộng được đặt theo thông số riêng, không thay đổi ngay cả trên các thiết bị có độ phân giải không giống nhau.
– Thông số chiều rộng Web thường là: 800 Pixels, 960 px, 1000 px, 1260 Pixels. trong đó, kích thước cố định phổ biến của Web là 960 Pixels hiển thị hoàn hảo trên các màn hình có độ phân giải 1024.
– Kích thước Website full màn hình ổn định thường thường là: 1440×900 px
Kích thước chuẩn Website, kích thước Web mobile, kích thước layout Web
Điểm mạnh của kích thước Website chuẩn:
+ Bảo đảm nhất quán với tất cả độ phân giải Website.
+ Thiết kế, làm chủ kích thước Web, triển khai Web một cách dễ hiểu hơn.
+ Hỗ trợ trên toàn bộ thiết bị, trình duyệt khác nhau.
+ Đơn giản, nhanh chóng bố cục các thành phần HTML có chiều rộng cố định.
+ Dễ dàng đọc nội dung trang Website khi hiển thị trên các máy có độ phân giải cao hơn 800×600 (px).
Kích thước chuẩn bố cục và giao diện Website, kích thước Web chuẩn
Hạn chế
+ Kích thước chiều rộng rãi hơn độ phân giải => Tạo thanh cuộn ngang gây khó khăn khi lướt Website.
+ Mất tính thẩm mỹ, thiếu cân đối & hài hòa khi xem trang Website trên những màn hình có độ phân giải cao => Có khoảng trống lớn ở 2 bên
– Đơn vị tính kích thước Web chuẩn
+ px (pixel): Đơn vị tính một điểm trên màn hình.
+ % là tổ chức kích thước lưu động
+ “em” là đơn vị dùng cho font chữ
+ “rem” được sử dụng với font-size của html.
Tối ưu kích thước Web chuẩn, kích thước chuẩn của 1 Website
2. Tầm cần thiết của kích thước Website chuẩn trong bán hàng
Web trở thành kênh bán hàng trực tuyến hữu hiệu đối với các công ty, nhà bán lẻ trong mùa dịch kéo dài hiện nay. Việc thiết kế một trang Website có kích thước chuẩn sẽ đem đến đa lợi ích sau:
- Làm tốt vai trò quảng bá thương hiệu công ty, dịch vụ / sản phẩm hiệu quả với khoản chi thấp.
- Mở rộng phạm vi tiếp cận khách hàng và tăng khả năng khai thác thông tin về leads mục tiêu trên mạng.
- Hiển thị toàn bộ thông tin về doanh nghiệp, dịch vụ / sản phẩm, blog, tin tức liên quan… 1 cách trực quan và gọn gàng nhất.
- Gia tăng trải nghiệm người dùng truy xuất, “giữ chân” họ trên Web lâu hơn => tăng chuyển đổi cao hơn.
- Tương thích với mọi giao diện và trình duyệt web sử dụng, có lợi cho việc làm SEO => cải thiện xếp hạng trên Google.
3. Các kiểu kích thước Website chuẩn hiện nay
Khi lập trình Website sẽ có 2 loại kích thước cho bạn lựa chọn là: Lưu động (Fluid layout) và Cố định (Fixed layout). Prodima sẽ giúp ích rất nhiều cho bạn hiểu rõ về những ưu – điểm yếu của hai dạng kích thước này ngay sau đây:
Kích thước Website lưu động (Fluid layout)
Sử dụng kích thước lưu động khi lập trình Web sẽ có chiều rộng = tỷ lệ % thay vì dùng đơn vị cố định là px. Chính do đó, trang Web của bạn có độ co giãn linh hoạt theo từng độ phân giải rõ ràng.
Điểm mạnh
- Thanh kéo ngang giúp bố cục và giao diện tổng thể của trang Website hiển thị hoàn hảo ở mọi kích thước màn hình.
- Khắc phục điểm không tốt thường gặp: khoảng trắng Web.
- Gia tăng trải nghiệm người dùng khi dùng bất kỳ thiết bị nào.
Điểm yếu
- Khó kiểm soát vì lẽ đó đôi khi thiết kế Web hiển thị thực tế thì bố cục trang có thể khác đi đôi chút.
- Tránh khi liên kết với các thành phần Web khác như hình ảnh & Video.
Kích thước Web cố định (Fixed layout)
Đây là kích thước Website chuẩn không thay đổi về chiều rộng khi hiển thị. thông thường kích thước sử dụng cho Fixed layout là 960px cho phù hợp với mọi màn hình có độ phân giải là 1024px.
- Ví dụ: Nếu Web có chiều rộng 800px sẽ hiển thị full màn hình trên máy tính có độ phân giải 800×600 khi setup ở chế độ maximum.
- tuy vậy nếu độ phân giải của máy tính lên đến 1024 hoặc 1280 thì màn hình sẽ dư một khoảng trống ở 2 bên hông trang Website.
Đa số các Designer thích dùng dạng kích thước Fixed layout hơn là Fluid layout, vì có thể khai triển các ý tưởng phát minh của mình mà không ảnh hưởng đến bộ phận lập trình.
Điểm mạnh
- Dễ thiết kế & làm chủ kích thước Web.
- Phối hợp nhịp nhàng với bộ phận lập trình, vì kích thước Fixed layout sẽ dễ cắt HTML hơn.
- Nội dung trên Website hiển thị chuẩn trên các bố cục và giao diện máy tính có độ phân giải cao.
Điểm yếu
- Xuất hiện khoảng trắng trên các màn hình phân giải lớn, dẫn đến thiếu tính thẩm mỹ trong mắt người dử dụng.
- Kích thước Website không tự động co lại cho phù hợp với màn hình nhỏ, dẫn đến thông tin hiển thị bị “cắt” gây khó chịu cho người dùng khi lướt Website.
4. Các đơn vị của kích thước trong thiết kế Web
Các đơn vị pt, pc, cm, milimet, in
Trong kích thước thiết kế Website chuẩn, đây chính là các đơn vị tuyệt đối. Một thành phần được cài đặt theo đơn vị này sẽ không dựa vào vật hiển thị chúng. việc này có nghĩa là một font chữ 12pt sẽ bằng nhau trên mọi màn hình laptop, mobile, trên giấy…
Px
Có thể bạn đã không hề biết, một màn hình hiển thị được chia thành các điểm, mỗi điểm là một pixel (px). Nếu một màn hình máy tính có độ phân giải 800×600 Pixels, nghĩa là nó bao gồm 480.000 px, chia đều thành 800 cột & 600 hàng. & pixel là đơn vị nhỏ nhất của độ phân giải màn hình.
Các đơn vị %, em, rem
- % là đơn vị đo lường tương đối. Một thành phần được thiết lập với width một nửa sẽ có độ rộng bằng 1/2 thành phần chứa nó.
- Còn em cũng tương tự như %, mặc dù vậy em là tổ chức tỉ lệ theo font chữ. 1Em bằng kích thước của font chữ parent.
- Cũng tương tự như em, rem là đơn vị tỉ lệ với font-size của thẻ HTML.
5. Kích thước ảnh chuẩn khi thiết kế Website là bao nhiêu?
Tùy theo phong cách thiết kế Web mà mỗi Website lại có kích thước ảnh chuẩn khác nhau. Với độ phân giải màn hình phổ biến hiện nay là 1024px, bạn sẽ tham khảo một vài kích thước ảnh chuẩn khi thiết kế Web dưới đây:
- Ảnh slide tại trang chủ: 1360x540px
- Ảnh minh họa trong bài viết: 600x400px
- Ảnh sản phẩm: 300x400px (hoặc 600x800px để hiện thị tốt hơn khi zoom ảnh)
6. Kích thước banner Website chuẩn là bao nhiêu?
Ngoài kích thước ảnh chuẩn thì kích thước banner Web cũng cần chuẩn hóa để thống nhất quy trình thiết kế cũng giống như hiển thị tốt trên trang. một số kích thước banner Website chuẩn bạn có thể tham khảo là:
- Leader board: 728×90
- Rectangle: 300×100
- Pop under: 720×300
- Medium Rectangle: 300×200
- Half Page Ad: 300×600
- Wide Skyscraber: 160×600
- Skyscraber: 120×600
7. Kích thước Website có ảnh hưởng đến SEO không?
Trong số 200+ yếu tố ảnh hưởng đến việc thứ hạng vị trí Web của Google, kích thước Website cũng là yếu tố ảnh hưởng khá lớn đến quá trình SEO (tối ưu hóa các công cụ tìm kiếm giúp hỗ trợ việc đưa Web lên top đầu tìm kiếm).
Bên cạnh chất lượng hình ảnh (độ sắc nét, tính độc đáo…), kích thước Web chuẩn là tiêu chí căn bản để Google nhận xét trang Web cũng như tối ưu trải nghiệm người dử dụng.
Vì lẽ đó khi thiết kế Web bán hàng hay bất cứ loại Website nào: Web tin tức, Website bất động sản, Website giới thiệu doanh nghiệp, Website du lịch,… các bạn cũng cần đáng chú ý lưu ý đến thiết kế kích thước Website chuẩn để tạo ấn tượng với khách hàng ngay từ lần “ghé thăm” Website trước tiên.
Lời kết
Bài viết trên đã sẻ chia đến các bạn các thông tin liên quan đến kích thước Website chuẩn. Hy vọng sẽ có ích với độc giả khi thiết kế Website để phục vụ những mục tiêu kinh doanh khác nhau.
Xem thêm: Cách tạo trang web WordPress trong 24 giờ
Hảo Hảo – Tổng hợp và chỉnh sửa
(Nguồn tham khảo: thietkewebso.com, prodima.vn,web4s.vn)
Discussion about this post