CSS là cách tốt nhất để xây dựng các thiết kế trang web
Học cách viết bố trí CSS có thể phức tạp, đặc biệt nếu bạn quen với việc sử dụng các bảng để tạo bố cục trang web ưa thích. Nhưng trong khi HTML5 cho phép các bảng bố trí, nó không phải là một ý tưởng tốt.
Bảng không thể truy cập được
Cũng giống như các công cụ tìm kiếm, hầu hết các trình đọc màn hình đọc các trang web theo thứ tự chúng được hiển thị trong HTML. Và các bảng có thể rất khó cho trình đọc màn hình để phân tích cú pháp. Điều này là do nội dung trong bố cục bảng, trong khi tuyến tính, không phải lúc nào cũng hợp lý khi đọc từ trái sang phải và từ trên xuống dưới. Ngoài ra, với các bảng lồng nhau và các nhịp khác nhau trên các ô của bảng có thể làm cho trang khó tìm ra.
Đây là lý do mà đặc tả HTML5 đề xuất đối với các bảng bố cục và tại sao HTML 4.01 không cho phép nó. Các trang web có thể truy cập cho phép nhiều người hơn sử dụng chúng và là dấu ấn của một nhà thiết kế chuyên nghiệp.
Với CSS, bạn có thể xác định một phần là thuộc về phía bên trái của trang nhưng đặt nó cuối cùng trong HTML. Sau đó, trình đọc màn hình và công cụ tìm kiếm giống nhau sẽ đọc phần quan trọng (nội dung) đầu tiên và các phần quan trọng hơn (điều hướng) cuối cùng.
Bàn là Tricky
Ngay cả khi bạn tạo một bảng với trình soạn thảo web, các trang web của bạn sẽ vẫn rất phức tạp và khó duy trì. Ngoại trừ các thiết kế trang web đơn giản nhất, hầu hết các bảng bố trí yêu cầu sử dụng rất nhiều thuộc tính và các bảng lồng nhau.
Xây dựng bảng có vẻ dễ dàng trong khi bạn đang thực hiện nó, nhưng sau đó bạn cần phải duy trì nó. Sáu tháng xuống dòng nó có thể không dễ dàng để nhớ lý do tại sao bạn lồng các bảng hoặc có bao nhiêu ô trong một hàng và vân vân. Ngoài ra, nếu bạn duy trì các trang web với tư cách thành viên nhóm, bạn phải giải thích cho mọi người về cách các bảng hoạt động hoặc mong đợi họ mất thêm thời gian khi họ cần thực hiện thay đổi.
CSS cũng có thể phức tạp, nhưng nó giữ cho bản trình bày tách biệt với HTML và làm cho nó dễ dàng hơn nhiều để duy trì trong thời gian dài. Ngoài ra, với bố cục CSS, bạn có thể viết một tệp CSS và tạo kiểu cho tất cả các trang của mình theo cách đó. Và khi bạn muốn thay đổi bố cục trang web của mình, bạn chỉ cần thay đổi một tệp CSS và toàn bộ các trang web - không phải đi qua từng trang một để cập nhật các bảng để cập nhật bố cục.
Bàn không linh hoạt
Mặc dù có thể tạo bố cục bảng với chiều rộng phần trăm, nhưng chúng thường tải chậm hơn và có thể thay đổi đáng kể cách bố cục của bạn. Nhưng nếu bạn sử dụng độ rộng được chỉ định cho các bảng của mình, bạn sẽ có bố cục rất cứng nhắc và không trông đẹp trên màn hình có kích thước khác với màn hình của riêng bạn.
Tạo bố cục linh hoạt trông đẹp trên nhiều màn hình, trình duyệt và độ phân giải tương đối dễ dàng. Trong thực tế, với các truy vấn phương tiện CSS, bạn có thể tạo các thiết kế riêng biệt cho các màn hình kích thước khác nhau.
Các bảng lồng nhau tải chậm hơn so với CSS cho cùng một thiết kế
Cách phổ biến nhất để tạo bố trí ưa thích với các bảng là "lồng" các bảng. Điều này có nghĩa là một (hoặc nhiều) bảng được đặt bên trong bảng khác. Càng nhiều bảng được lồng vào nhau, thì càng mất nhiều thời gian để trình duyệt web hiển thị trang.
Trong hầu hết các trường hợp, bố cục bảng sử dụng nhiều ký tự để tạo hơn thiết kế CSS. Và ít ký tự hơn có nghĩa là ít tải xuống hơn.
Bảng có thể làm tổn thương tối ưu hóa công cụ tìm kiếm
Bố cục tạo bảng phổ biến nhất có thanh điều hướng ở bên trái của trang và nội dung chính ở bên phải. Khi sử dụng bảng, điều này (nói chung) yêu cầu nội dung đầu tiên hiển thị trong HTML là thanh điều hướng bên trái. Các công cụ tìm kiếm phân loại các trang dựa trên nội dung và nhiều công cụ xác định rằng nội dung được hiển thị ở đầu trang quan trọng hơn các nội dung khác. Do đó, một trang có điều hướng bên trái trước tiên sẽ xuất hiện có nội dung ít quan trọng hơn điều hướng.
Sử dụng CSS, bạn có thể đặt nội dung quan trọng đầu tiên trong HTML của mình và sau đó sử dụng CSS để xác định vị trí của nó trong thiết kế. Điều này có nghĩa là các công cụ tìm kiếm sẽ thấy nội dung quan trọng đầu tiên, ngay cả khi thiết kế đặt nó xuống thấp hơn trên trang.
Bàn không luôn in tốt
Nhiều thiết kế bảng không in tốt vì chúng chỉ đơn giản là quá rộng đối với máy in. Vì vậy, để làm cho chúng phù hợp, các trình duyệt sẽ cắt các bảng và in các phần bên dưới dẫn đến các trang rất rời rạc. Đôi khi bạn kết thúc với các trang trông ổn, nhưng toàn bộ bên phải bị thiếu. Các trang khác sẽ in các phần trên các trang khác nhau.
Với CSS, bạn có thể tạo một bảng định kiểu riêng chỉ để in trang.
Bảng bố cục không hợp lệ trong HTML 4.01
Đặc tả HTML 4 nêu rõ: "Bảng không nên được sử dụng hoàn toàn như một phương tiện để bố trí nội dung tài liệu vì điều này có thể gây ra sự cố khi hiển thị cho phương tiện không trực quan."
Vì vậy, nếu bạn muốn viết HTML 4.01 hợp lệ, bạn không thể sử dụng các bảng cho bố cục. Bạn chỉ nên sử dụng các bảng cho dữ liệu dạng bảng. Và dữ liệu dạng bảng thường trông giống như một cái gì đó bạn có thể hiển thị trong một bảng tính hoặc có thể là một cơ sở dữ liệu.
Nhưng HTML5 đã thay đổi các quy tắc và bây giờ các bảng cho bố cục, trong khi không được khuyến nghị, hiện là HTML hợp lệ. Đặc tả HTML5 nêu rõ: "Không nên sử dụng bảng làm trợ giúp bố cục".
Bởi vì các bảng bố trí rất khó cho trình đọc màn hình để phân biệt, như tôi đã đề cập ở trên.
Sử dụng CSS để định vị và bố trí các trang của bạn là cách duy nhất để có được các thiết kế mà bạn sử dụng để sử dụng các bảng để tạo ra. Và HTML5 mạnh mẽ đề xuất phương pháp này là tốt.
Bảng bố cục có thể tác động đến triển vọng công việc của bạn
Khi ngày càng có nhiều nhà thiết kế mới học HTML và CSS, kỹ năng của bạn trong việc xây dựng bố cục bảng sẽ ngày càng ít đòi hỏi hơn. Có, đúng là khách hàng thường không cho bạn biết chính xác công nghệ bạn nên sử dụng để xây dựng trang web của họ. Nhưng họ yêu cầu bạn cho những thứ như:
- Các trang web có thể truy cập được: các thiết kế có thể được xem bởi trình đọc màn hình đang được nhiều quốc gia và tập đoàn yêu cầu, khả năng tiếp cận ngày càng quan trọng hàng ngày.
- Các trang web có thể duy trì được: các mẫu thiết kế có thể mang theo chúng ngay cả khi bạn không duy trì chúng trong tương lai.
- Thiết kế linh hoạt: thiết kế hoạt động trên nhiều trình duyệt, độ phân giải và thiết bị.
- Trang tải xuống nhanh: tốc độ ngày càng trở nên quan trọng, thậm chí đến SEO.
- Thiết kế có thể in: các trang in mà không có tập lệnh đặc biệt hoặc trang phụ.
Nếu bạn không thể cung cấp những gì khách hàng yêu cầu, họ sẽ dừng lại với bạn để thiết kế, có lẽ không phải hôm nay, nhưng có thể vào năm sau hoặc năm sau. Bạn có thể thực sự đủ khả năng để cho doanh nghiệp của bạn bị ảnh hưởng bởi vì bạn không sẵn sàng để bắt đầu học một kỹ thuật đã được sử dụng từ cuối những năm 1990?
Đạo đức: Học cách sử dụng CSS
CSS có thể khó học, nhưng bất cứ điều gì đáng giá đều đáng để nỗ lực. Đừng giữ cho kỹ năng của bạn khỏi bị trì trệ. Tìm hiểu CSS và xây dựng các trang web của bạn theo cách chúng được xây dựng - với CSS để bố trí.