Khái quát về bố cục dạng lưới
Bố cục dạng lưới (grids) là kĩ thuật dàn bố cục cổ điển cái đã được sử dụng trong xuất
bản trong hàng trăm năm và, như nhiều kĩ thuật xuất bản khác, có thể được áp dụng vào thiết
kế web. Cách tiếp cận cơ bản là tưởng tượng rằng trang chứa một hệ thống các dòng (rows) và
cột (columns) đan xen nhau cái hình thành một bố cục lưới. Các dòng được dựa trên nội
dung trang. Một trang dài với một vài bài viết có thể mở rộng một vài dòng, hay nó có thể
là một trang chủ với nội dung giới thiệu cái khớp với một dòng đơn. Số các cột dựa trên con số
cái cung cấp tính linh động nhất trong dàn bố cục nội dung trang. Nhiều hệ tống bố cục lưới
dựa trên 12 cột vì 12 chia được cho 2, 3, 4 và 6, nhưng nhiều kích cỡ khác cũng được sử
dụng. Ảnh dưới thể hiện bố cục lưới 12 cột.
Nhà thiết kế trang sau đó xắp sếp các phần tử trang bên trong bố cục lưới đã chọn. Ảnh dưới thể
hiện một bố cục có thể cái chứa một phần tử main header (vùng màu tan), 3 sections chính (vùng màu
lavender, light green, và blue), cũng như một thanh điều hướng và một footer (vùng màu dark green).
Một vài sections (như vùng màu dark green và blue) được chia tiếp thành subsections nhỏ.
Nó nên được nhấn mạnh rằng bố cục lưới không phải là phần của nội dung trang web. Thay vào đó, nó
là cách tiếp cận hệ thống để ảnh hoá làm cách nào khớp tốt nhất nội dung lên trang. Làm việc từ một
bố cục lưới có nhiều ưu điểm thực tiễn bao gồm:
• Bố cục lưới thêm trật tự vào cách trình bày nội dung trang, tạo thêm nhịp điệu hình ảnh, điều này
làm dễ chịu cho mắt.
• Một thiết kế lô-gic ổn định mang lại sự tự tin cho người đọc để tìm kiếm thông tin họ cần.
• Nội dung mới có thể được đặt một cách dễ dàng vào trong một bố cục lưới sao cho phù hợp với
thông tin đã nhập trước đó.
• Một bố cục lưới được thiết kế tốt dễ tiếp cận hơn cho người dùng có khuyết tật và nhu cầu đặc biệt.
• Bố cục lưới tăng tốc quá trình phát triển bằng cách thiết lập một khung hệ thống cho
bố cục trang.
Có hai loại bố cục lưới cơ bản: bố cục lưới cố định (fixed grids) và bố cục lưới lỏng (fluid grids).