Phần ba này sẽ khác đi một chút so với các phần còn lại. Ở các phần trước bạn đã viết kiến thức cơ bản về hệ thống lưới, một số ví dụ khi sử dụng hệ thống lưới với thiết kế in ấn. Tuy nhiên thật không may cho các nhà thiết kế web, họ phải tuân thủ vài quy định khi tạo ra các sản phẩm của mình. Tuy nhiên họ cũng có nhiều lợi thế bởi sự đa dạng các phương tiện truyền thông có thể sử dụng.

Xem xét toàn bộ

Hệ thống lưới có vẻ như dễ dàng sử dụng với thiết kế in ấn. Trong khi với thiết kế web nó lại phức tạp hơn nhiều. Bởi trong thiết kế in, mọi thứ đều cố định, khổ giấy, kích thước phông chữ, màu sắc… Còn với thiết kế website, nhà thiết kế đụng phải sự đa dạng của các trình duyệt, kích thước màn hình, kích thước lớn nhỏ của font chữ…

Thật không tưởng để tạo ra một hệ thống lưới cố định cho website khi chúng ta mới chỉ liệt kê ra vài điều phức tạp dành cho nó. Thậm chí lúc này tôi đang nghĩ sản phẩm của tôi sẽ ra sao nếu đọc trên Ipad, iphone…?

Trong một thế giới lý tưởng

Chúng ta đã hình dung ra sự phức tạp của việc hiển thị những thiết kế trên web của chúng ta. Nhưng ngay lúc này, hãy gạt nó qua một bên.

Thiết kế hệ thống lưới cho website không khó khăn, và nó cũng không cần sự khác biệt như thiết kế hệ thống lưới cho các phương tiện truyền thông khác. Như mục đích của bài viết này, chúng ta sẽ xây dựng hệ thống lưới cho web trên màn hình tương tự như hệ thống lưới dành cho in ấn. Dựa trên các tỉ lệ, kinh nghiệm với kích thước, các khoảng trắng v.v.

Hiểu biết về pixel (điểm ảnh) và lấy nó làm số đo chuẩn cộng với các kiến thức khác giúp thiết kế của bạn chính xác trên mọi trình duyệt. Trên hết, là một người thiết kế bạn hẳn phải biết người đọc cần gì ở thiết kế của bạn. Có thể là màu xám cho chữ, font verdana kích thước 10px cho 600 điểm ảnh

Pixel là đơn vị nhỏ nhất có thể định vị được của màn hình hiển thị hình ảnh. Độ phân giải (tính bằng pixel) càng cao (có càng nhiều hàng và cột các pixel) thì càng có khả năng hiển thị nhiều thông tin. Về mặt lưu trữ, các pixel được tạo bởi một hay nhiều bit.

Trong một thế giới thực

Một nhà thiế kế web tốt, ý thức được những thiết kế web của họ hoàn toàn có thể bị thay đổi một số thứ bởi người dùng, họ có thể tăng kích thước chữ hay thay đổi độ phân giải màn hình v.v. Tùy theo sở thích của họ

Nhà thiết kế không thể kiểm soát được sản phẩm của mình. Điều này không dễ thích nghi, nhất là đối với những người được đào tạo về thiết kế đồ họa in ấn. Họ được dạy để quản lý các không gian, khoảng trắng, kích thước chữ v.v. Giữ nó một cách chuẩn mực.

Bạn đã hiểu chúng ta đang nói đến điều gì. Chúng ta có thể buồn khi người sử dụng thay đổi kích thước chữ của màn hình. Nhưng chúng ta có hệ thống lưới để thích ứng với những thay đổi đó.

Không chỉ là các cột

Trong vài năm qua, cùng với sự gia tăng các trang web dựa trên CSS, chúng ta đã nhìn thấy một sự gia tăng cấu hình lưới nhất định mà tất cả đều dựa vào số lượng cột. 2, 3, 4 bố trí cột, các vị trí v.v. Nhiều trang web với tỉ lệ “750px, 3 cột”. Vì sự tiện lợi của nó, hệ thống lưới này thậm chí đã trở thành quy ước.

Chúng dễ dàng được tạo ra, phù hợp với nhiều trình duyệt, và không biến đổi như cách bố trí dựa trên table (bảng). Tất cả điều này đều tốt. Chỉ có một điều không tốt là những sự thiếu hiểu biết về hệ thống lưới, và những câu hỏi của các nhà thiết kế khi họ ngồi xuống thiết kế và bắt đầu hỏi “Tôi nên sử dụng bao nhiêu cột?”. Đây không phải là thiết kế hệ thống lưới.

Trong phần tiếp theo chúng ta sẽ tìm hiểu về hệ thống lưới cho web

Theo Mark Baulton