Kích thước website là bộ khung hình thành giao diện website. Một website được thiết kế phù hợp với lĩnh vực, ngành nghề sẽ mang tới trải nghiệm tốt cho người dùng. Từ đó hiển thị các thông tin trên website được tinh tế và dễ hiểu.
Dù bạn muốn thiết kế web trong lĩnh vực gì. Từ website blog, website giới thiệu đến website bán hàng… Bạn cũng nên kế thừa những góp ý của các chuyên gia trong lĩnh vực web. Đó là kích thước website cố định (Fixed layout) và kích thước website lưu động (Fluid layout).
Kích thước website cố định
Kích thước website cố định là website sẽ cố định chiều rộng của nó. Thiết kế web có kích thước cố định thường là: 970px, 1040px, 1140px hay 1170px… Khi đó website sẽ không thay đổi kích thước theo các màn hình khác nhau.
Ví dụ: Khi bạn truy cập website https://webaoe.com/ có kích thước cố định là 1140px. Trên màn hình có độ phân giải 1366, thì mỗi bên còn khoảng trống là 110px. Còn ở màn hình 1600px thì là 220px, với màn hình 1920px thì là 380px.
Mời bạn xem thêm: Có nên dùng Template trong thiết kế web hay không
Kích thước phổ biến
Kích thước hay dùng để thiết kế web với fixed layout thường là 1040px và 1170px. Đối với website giới thiệu, tin tức, blog thường dùng 1040px. Còn đối với web bán hàng, thương mại thì thường dùng 1170px.
Tại sao lại như vậy, vì theo các nghiên cứu UI/UX những web bán hàng thường cần không gian để giới thiệu sản phẩm. Còn những web tin tức thì chủ yếu là nội dung và hình ảnh nên cần không gian vừa phải.
Theo thống kê từ tháng 11 năm 2020 đến tháng 11 năm 2021 trên website StatCounter. Thì trên thế giới tỉ lệ người dùng 1920×1080 là 22.56% và 1366×768 là 18.76%. Trong khi ở nước ta tỷ lệ 1366×768 là 27.52% 1920×1080 là 21.11%.
Tỉ lệ website sử dụng kích thước cố định nhiều hơn kích thước lưu động. Bời chiều rộng website cố định thì người thiết kế UX có thể sáng tạo ý tưởng mà ảnh hưởng đến quá trình code web.
Mặt khác, fixed layout sẽ cho website hiển thị chuẩn trên 2 màn hình thông dụng hiện nay. Khi đó, nhà thiết kế có thể tạo ra những website hiển thị tối với người dùng.
Mặt hạn chế
Tuy nhiên nhìn ở một góc độ khác ta thấy. Thiết kế website với kích thước cố định sẽ tạo ra nhiều khoảng trắng (khoảng không).
Ngược lại với màn hình nhỏ hơn nó sẽ có thanh kéo ngang. Nội dung website sẽ không hiển thị hết, gây khó khăn cho việc lướt web.
Kích thước website lưu động
Kích thước lưu động là kích thước thay đổi theo chiều rộng theo kích thước màn hình. Giao diện website sẽ tính kích thước dựa theo thông số tỉ lệ % thay vì thông số cố định px.
Do đó, chiều rộng của website co giãn theo kích thước của trình duyệt. Fluid layout sử dụng tỷ lệ % cho các thành phần khối HTML của website. Vì vậy, layout có thể thay đổi theo các dạng màn hình khác nhau.
Ví dụ: Khi bạn truy cập vào facebook, pinterest.com, dribbble.com thì bạn nhận thấy website đều sát màn hình. Bạn có thể dùng ở các dạng màn hình sẽ thấy nhé.
Điểm nổi bật
Thiết kế web kích thước lưu động sẽ thân thiện với người dùng. Bởi khả năng tự điều chỉnh theo các khung màn hình.
Các khoảng trắng dư thừa được hạn chế tối đa ở các độ phân giải màn hình.
Kích thước lưu động không xuất hiện tình trạng thanh cuộn ngang ở máy có độ phân giải thấp.
Điểm hạn chế
Rất khó khăn hơn trong việc sử dụng video, hình ảnh. Bởi để hiển thị đẹp thì các thành phần web cần phải có chiều rộng cố định.
Từ bản thiết kế web đến công đoạn lập trình web sẽ khó kiểm soát. Dẫn đến việc hiển thị giao diện người dùng có thể bị khác so với bản thiết kế.
Kích thước tự do sáng tạo
Ngoài 2 kích thước chuyên dùng cho thiết kế web ở trên. Mình xin đưa ra thêm một loại khác mà mình không biết gọi thế nào nên gọi là “tự do sáng tạo”.
Ở loại này giao diện web gần như không có bố cục chuẩn nào mà khá lạ mắt. Có loại thì trang chủ chỉ có các hình ảnh đại diện của nội dung. Khi kích vào thì vào các trong trong. Có lại thì cột menu nằm bên trái và nội dung nằm bên phải.
Tuy nhiên cách thiết kế này ở một khía cạnh nào đó là sự kết hợp của thiết kế web và thiết kế đồ họa. Sự kết hợp này tạo cho website có cái lạ và độc, rất phù hợp cho cách lĩnh vực về nghệ thuật, nhiếp ảnh.
Ngoài ra với kiểu thiết kế này trong một số lĩnh vực, ngành nghề thông dụng. Thì kiểu thiết kế nào tạo ra sự khác biệt, tạo ra cái tôi trong mỗi cá nhân hay doanh nghiệp.
Ví dụ: bạn truy cập vào web demo https://bridge308.qodeinteractive.com/ bạn sẽ thấy bố cục lạ mắt.
Tóm lại
Thiết kế website là quá trình thiết kế dựa trên giao diện máy tính. Do vậy từ giao diện sẽ hình thành các chuẩn mực kích thước website là lưu động và cố định. Ngoài ra mình cũng nhận thấy có những phong cách rất sáng tạo, mang cá tính và phong cách riêng của bạn.
Từ kích thước website bạn sẽ thiết kế các thành phần web như menu, banner, content… Tuy nhiên, điểm nổi bật nhất vẫn là banner của website, từ kích thước bạn sẽ chọn cho mình những kích thước banner phù hợp.
Hy vọng những nội dung trình bày ở trên giúp bạn hiểu hơn về kích thước website. Mỗi website trong mỗi lĩnh vực, ngành nghề khác nhau sẽ có kích thước thông dụng.
Xin cảm ơn các Anh/Chị đã tham khảo bài viết kích thước website của Webaoe. Nếu có chỗ nào còn thiếu sót, xin các Anh/Chị góp ý ở phía dưới để hoàn thiện bài viết hơn.
