Cơ bản về xây dựng bố cục website

Share vì hữu ích

Trong một website, xây dựng bố cục là việc hầu hết các web developer phải làm. Code Tốt xin giới thiệu lý thuyết về việc xây dựng markup bố cục website và một số tình huống cụ thể.

Trong các giai đoạn hoàn thiện một website, quá trình xây dựng bố cục được đánh giá là khá quan trọng và có tính ảnh hưởng rất cao.

Bố cục website là gì?

Nếu bạn nhìn các website phổ biến, bạn sẽ thấy nhiều bố cục trình bày từ đơn giản tới phức tạp hiển thị trên màn hình máy tính, laptop hay cả màn hình trên mobile.

Bố cục website (Layout), trong một định nghĩa dễ hiểu nhất, là cách sắp xếp các đối tượng vào những khung cố định.

Các bố cục truyền thống

Không xét đến các block như Header, Footer, ta tạm khoanh vùng bố cục website trong các thành phần nằm trong <main>.

Phổ biến và cổ điển là các khung chỉ có 2 cột, trong đó 1 cột là <aside> hay còn gọi là Sidebar. Thông thường trong các khung này bố cục sẽ là 1/3 + 2/3 hoặc 1/4 + 3/4, trong đó mục chứa nội dung chính thường có độ rộng lớn hơn.

Cũng từng được sử dụng nhiều là bố cục cung cấp 2 Sidebar với các bố cục: Sidebar nằm hai bên hoặc Sidebar nằm cùng phía (2 sidebar – nội dung chính).

Các bố cục hiện đại HTML5

Thế giới web đã thay đổi công nghệ, và bước tiến đó ảnh hưởng rất nhiều tới cảm quan thẩm mỹ với sự hiện diện của các bố cục mới.

Chẳng hạn như bố cục Hai cột nhưng tràn khung như trang chủ của GoDaddy dưới đây:

Phần giới thiệu của GoDaddy căn ảnh lệnh phải

Hay như bố cục Hero tràn width trên trang chủ của ManageWP:

Trang chủ của ManageWP với Hero kèm ảnh nền nhưng tràn khung

Vậy điều gì làm những bố cục này lên ngôi?

Các bố cục bày trí mới

Phải thừa nhận rằng, các bố cục mới có sức ảnh hưởng lớn tới người xem, trong đó có kết hợp cả các yếu tố thẩm mỹ, tính sáng tạo và công năng (tỷ lệ chuyển đổi trong Marketing).

Các bố cục ngày nay phân phối dữ liệu theo chiều dọc từ trên xuống và thường tràn khung màn hình để tối ưu hoá trên nhiều thiết bị với các khung hình khác nhau.

Nhờ vậy, ta xuất hiện các tên gọi bố cục mới (bằng tiếng Anh):

  • Hero (thường nằm trên cùng một trang)
  • Grid (thường nằm giữa trang, cung cấp một loạt các item dưới dạng bố cục 2, 3 hoặc 4 cột.
  • Two Up (Dạng 2 cột, thường 1 cột chứa Media (Image, video) và cột còn lại chứa nội dung text).
  • Features (Dạng tương tự như Grid, nhưng các item chỉ chứa ảnh nhỏ, icon kèm text content với bố cục 2, 3 hoặc 4 cột).
  • Slideshow (Dạng này khá đa dạng, từ 2 cột cho tới 1 cột, hiển thị hàng loạt item và click để sang item tiếp theo).

Xây dựng Grid tiêu chuẩn

Tiêu chuẩn của một 1 Grid, tức là đáp ứng các tiêu chí dưới đây:

  • Hiển thị phù hợp trên tất cả thiết bị từ di động tới máy tính (Responsive)
  • Đảm bảo khoảng cách (spacing) giữa các item.
  • Cân đối về cả chiều cao cho các item này.

Lựa chọn công nghệ

Công nghệ CSS sử dụng hiện nay mới nhất là có thuộc tính display: grid, tuy nhiên nó chưa hỗ trợ tốt cho các trình duyệt cũ, nên Code Tốt khuyến nghị nên sử dụng CSS display: flex bởi nó vẫn hoạt động được trên IE11, Safari 7 và giảm thiểu nguy cơ không tương thích trên các trình duyệt cũ tương đương.

Lý thuyết về xây dựng Grid

Grid thực chất bao gồm 1 block cha và các block con. Các block con thông thường sẽ có chiều rộng bằng nhau, và lý tưởng nhất, là cả chiều cao bằng nhau, tức nếu độ dài của kí tự trong block con không ảnh hưởng và làm mất cân đối các block con khác trong cùng block cha grid.

Nếu bạn đã sử dụng bootstrap framework, bạn sẽ thấy:

  • Grid cha sẽ có margin-leftmargin-right âm (ví dụ -20px).
  • Các block con sẽ có padding-left và padding-right dương (ví dụ 20px).

Điều này được giải thích bằng việc khoảng cách của item nằm bên trái và item nằm bên phải của mép grid cha, sẽ có thừa 1 khoảng cách cố định, nên grid cha cần bù trừ cho phần diện tích này.

Hãy thử đoạn code dưới đây:

<div class="grid">
  <div class="block"></div>
  <div class="block"></div>
</div>
/* CSS */
.grid { display: flex; flex-wrap: wrap; margin: 0 -20px; }
.block { width: 100%; padding: 0 20px; }
@media (min-width: 600px) {
  .block {
    width: 50%;
  }
}

Để responsive, bạn cần sử dụng @media để thực hiện việc chuyển chiều rộng của block con trên các khung hình phù hợp.

Tài liệu tham khảo:

What do common web layouts contain?

Còn tiếp…

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

Trả lời