Nhờ sự phát triển của thời đại 4.0 mà internet đã không còn là gì quá xa lạ với tất cả chúng ta đặc biệt là sự xuất hiện của các trang web. Việc thiết kế một trang web không phải chuyện quá khó khăn với một số người, tuy nhiên ít ai biết và làm được kích thước website chuẩn. Vậy nên hôm nay MOA Việt Nam sẽ giới thiệu cho bạn bài viết về các kích thước website chuẩn nhé.

Các loại kích thước website chuẩn

Kích thước của website có 2 dạng chính là Fixed Layout (fixed layout) và Fluid Layout (fluid layout). Ngoài ra còn có dạng bổ sung thứ 3 là kích thước co giãn (elastic layout) là dạng layout được kết hợp của 2 dạng trên. nhưng hôm nay chúng ta sẽ tập trung vào 2 dạng chính đó là Fixed Layout và Fluid Layout nhé. Có một số điều mà bạn cần nắm rõ đó là:

Fixed Layout là kích thước mà chiều rộng (width) của website được thiết lập theo 1 thông số cố định: Ví dụ 800px, 1000px, 960px, 1260px, v.v.v
Fluid Layout là kích thước được tính theo thông số tỷ lệ % thay vì thông số cố định px và do đó, chiều rộng của website co giãn theo kích thước của cửa sổ trình duyệt (browser windows)Xem thêm: KÍCH THƯỚC COVER FANPAGE FACEBOOK 2021 CHI TIẾT

Fixed Layout

Đối với Fixed Layout, vì chiều ngang của website được thiết lập một con số cố định nên các website này không thay đổi kích thước theo độ phân giải màn hình mà vẫn giữ nguyên cùng một kích thước.

Ví dụ như một website có chiều rộng 800px thì máy tính có độ phân giải 800×600 sẽ thấy website hiển thị toàn màn hình khi trình duyệt ở chế độ maximum. Còn nếu máy tính có độ phân giải cao hơn như 1024 hoặc 1280 thì website không còn hiển thị toàn màn hình nữa nhưng sẽ dư ra một khoảng trống bên hông của website. Nghe có vẻ bất tiện như vậy nhưng hầu hết các nhà thiết kế thích sử dụng fixed layout hơn là fluid layout vì đối với fixed layout, graphic designers (đồ họa viên) có thể tự do thực hiện ý tưởng của mình mà không sợ làm khó cho bộ phận lập trình. Hơn nữa, fixed layout đảm bảo kết quả cho ra là thống nhất trên mọi độ phân giải, nhà thiết kế có thể kiểm soát kết quả hiển thị với user.

Tuy nhiên, khi Đối với Fixed Layout, kích thước chuẩn khi được sử dụng bởi 90% các thiết kế website mới là 960px vì kích thước này phù hợp với màn hình có độ phân giải 1024 hoặc cao hơn và độ phân giải 1024 được xem là độ phân giải chuẩn của máy tính bởi hầu hết các nhà sản xuất phần cứng cũng như nhà thiết kế.

Ưu điểm

Trên phương diện thiết kế, fixed layout dễ thiết kế và triển khai hơn vì nhà thiết kế web có thể kiểm soát kích thước website của minh
Chiều rộng website là cố định và giống nhau trên tất cả trình duyệt bất chấp độ phân giải màn hình. Vì thế, các thành phần HTML có chiều rộng cố định được bố cục dễ dàng hơn, nhanh hơn
Được hỗ trợ bởi nhiều trình duyệt hơn (khi không cần sử dụng thuộc tính CSS như min-width, max-width)
Ngay cả khi website được thiết kế với độ phân giải 800×600, nội dung website vẫn có thể được đọc dễ dàng ở những máy có độ phân giải cao hơn rất nhiều.

Tuy nhiên, bên cạnh những ưu điểm của mình, fixed layout vẫn có những khuyết điểm mà ta có thể tổng hợp như sau:

Khuyết điểm

Website với Fixed Layout có thể tạo ra nhiều khoảng trắng không cần thiết ở bên hông website khi xem ở độ phân giải lớn, tạo nên cảm giác mất cân đối, thiếu tỉ lệ hài hòa và xung khắc với một số nguyên lý thiết kế website.
Nếu thiết kế website với fixed width cao hơn độ phân giải màn hình có thể làm xuất hiện thanh cuộn ngang (horizontal scrollbar) gây khó khăn cho việc lướt web.

Một số thiết kế sử dụng Fixed Layout

thiết kế sử dụng Fixed Layout

Fluid Layout (Fluid Layout)

Fluid Layout

Đối với Fluid Layout (hay còn gọi là liquid layout), các thành phần trong website có chiều rộng là tỷ lệ % thay vì đơn vị cố định px . Nhờ đó, website có thể co giãn theo độ phân giải của màn hình.

Fluid layout hay còn gọi là liquid layout sử dụng tỉ lệ % cho các thành phần HTML của nó và hạn chế tối đa việc sử dụng px. Do đó layout có thể thay đổi theo từng độ phân giải nhất định.

Cũng như fixed layout, fluid layout có ưu, khuyết điểm tương đương như:

Ưu điểm

Thân thiện hơn với người dùng vì có thể tự điều chỉnh tùy từng độ phân giải
Khoảng trắng dư thừa không quá khác biệt cho dù trình duyệt và độ phân giải RẤT khác nhau. Điều này giúp tạo nên sự cân bằng tốt hơn fixed layout
Nếu được thiết kế tốt, fluid layout có thể chấm dứt tình trạng thanh cuộn ngang (horizontal scrollbar) ở máy có độ phân giải quá thấp

Khuyết điểm

Hạn chế hơn và khó khăn hơn trong việc sử dụng graphics để tô điểm cho website của mình
Giao diện có thể hiển thị tốt trên máy nhà thiết kế nhưng bị sai khi hiển thị trên máy người dùng vì nhà thiết kế khó kiểm soát bố cục sử dụng fluid layout hơn là fixed layout
Hình ảnh, video hoặc các thành phần web cần phải có chiều rộng cố định có thể gặp không ít khó khăn, trục trặc khi kết hợp với các thành phần có chiều rộng co giãn
Với những máy có độ phân giải CỰC LỚN, mặc dù website có thể tự co giãn nhưng nếu nội dung bên trong website không đủ để lấp đầy bố cục thì nó có thể tạo ra RẤT NHIỀU những khoảng trắng không cần thiết

Một số thiết kế sử dụng Fluid Layout (fluid layout)

large resolution

smaller resolution

Kết luận

Hy vọng bài viết sẽ giúp các bạn nắm rõ về kích thước website chuẩn cũng như các ưu nhược điểm của Fixed Layout và Fluid Layout. Chúc các bạn thành công trong công việc của mình.