Ngày 22 / Tiết 3 / Thời lượng 20 phút. Mục lục khóa 100 ngày làm web [tháng thứ 2].
Giống như một bức tranh có chiều rộng và chiều cao, website cũng vậy.
Tuy nhiên ở website khái niệm chiều rộng quan trọng hơn nhiều chiều cao, lý do là vì chiều cao sẽ thay đổi theo độ dài nội dung, nó không hề cố định. Bài viết ABC dài thì chiều cao của nó dài, bài viết XYZ ngắn thì chiều cao của nó ngắn. Trong khi đó chiều rộng của website thường sẽ ổn định trên toàn bộ các trang trên đó.
Một điều cần lưu ý nữa là khi nói đến chiều rộng website, chúng ta đang chỉ đến chiều rộng của nó trên màn hình máy bàn, laptop, còn đối với màn hình cỡ nhỏ thì chiều rộng sẽ luôn lấp đầy màn hình, ví dụ trên màn hình thiết bị di động.
Các vị trí quan trọng trên website khi cần thiết lập chiều rộng
Website có rất nhiều vị trí có thể thiết lập chiều rộng, tuy nhiên dưới đây là các vị trí quan trọng nhất:
- Header
- Content
- Footer
Phần content nếu có sidebar (cột trái hoặc phải) thì cũng cần quy định chiều rộng của phần nội dung chính (main content), và sidebar là bao nhiêu.
Trong các thành phần trên, chiều rộng của phần nội dung chính là quan trọng nhất, vì đây là phần mà người truy cập tập trung đọc, xem nội dung website.
Các thành phần header, footer, sidebar có thể có chiều rộng linh động hơn (đặc biệt là header và footer), cốt sao nó tạo ra thiết kế hài hòa là được.
Giờ chúng ta sẽ tìm hiểu chi tiết hơn nữa.
Một số kích cỡ chiều rộng thường có ở website
Ở bài cấu trúc chung của một trang web, chúng ta đã biết có 2 kiểu thiết kế cho phần nội dung.
- Kiểu thứ nhất là có sidebar:
- Kiểu thứ hai là không có sidebar:
Điều đó sẽ dẫn đến các kết quả khác nhau khi thiết lập chiều rộng của website. Khi có sidebar, dĩ nhiên chiều rộng website thường sẽ lớn hơn, và để cân đối trong thiết kế, sidebar sẽ có chiều rộng bằng khoảng 25 – 30% chiều rộng của cả website.
Một lưu ý khác: Khi nói đến chiều rộng website, nếu không có thông tin nào khác, thì nghĩa là chúng ta đã bao gồm luôn cả lề của nó, giống như tờ giấy có lề vậy.
Chiều rộng phổ biến đối với website có sidebar rơi vào khoảng 1100px cho đến 1300px, trong đó con số hay được dùng làm mặc định trong các theme của WordPress là 1200px.
Chiều rộng phổ biến của website không có sidebar vào khoảng 700 – 900px, trong đó lề 2 bên trái phải thường từ 30 đến 50px. Sau khi trừ đi lề, bạn sẽ thấy là phần nội dung chính không tính lề của website có kích cỡ vào khoảng 640px – 800px.
Kích cỡ vừa nói ở trên (640 – 800px) của phần nội dung chính (không tính lề) là kích cỡ rất phổ biến trên nhiều website ngày nay, bất kể là có sidebar hay không.
Chiều rộng thực tế của một số website
Ở đây tôi tiến hành đo đạc thực tế kích cỡ nội dung chính và sidebar (nếu có) của một số website, kích cỡ được đo bên dưới không bao gồm lề:
| Website | Kiểu trang | Nội dung chính | Sidebar |
| Vnexpress | Tin tức, báo chí | 680px | 300px |
| iDesign | Thông tin chuyên ngành | 740px | không có |
| Thanh Niên | Tin tức, báo chí | 640px | 300px |
| Zing news | Tin tức, báo chí | 660px | 300px |
| Thế giới di động | Thương mại điện tử | 700px | 460px |
| Wikipedia tiếng Việt | Từ điển bách khoa | 960px | 270px |
| Vinmec | Thông tin chuyên ngành | 755px | 345px |
| Google.com.vn | Tìm kiếm | 600px | 365px |
Ngoài lề: bạn có thể thấy kích cỡ sidebar 300px gặp khá nhiều ở các website báo chí, vì đây là kích cỡ banner quảng cáo tương đối phổ biến, các trang có quảng cáo thường sẽ thích dùng kích cỡ này.
Bài tiếp >>> Thiết kế kiểu trang không có sidebar trên theme Astra.