CSS Layout Pattern, nó là gì và bạn đã biết gì về chúng?

Hiểu đơn giản, CSS Layout Pattern chính là cách bố cục giao diện hay mẫu thiết kế bằng CSS. Hẳn là các bạn đã từng nghe qua thuật ngữ Responsive Web Design (RWD) – giao diện có tính đáp ứng. Tuy nhiên có thể các bạn chưa biết. Để cho ra đời RWD, các Web Developer đã phải trải qua rất nhiều giai đoạn khác nhau. Với các mẫu CSS Layout Pattern khác nhau và rất nhiều các kiểm nghiệm khác nhau. Vậy thì các CSS Layout Pattern kia, chúng gồm những ai?

Fixed Layout (Bố cục cố định)

Đây là loại bố cục thường gặp nhất và những bạn mới học HTML & CSS thường áp dụng. Nó đơn giản là sử dụng các giá trị được xác định một cách cụ thể. Từ đó áp dụng để tính toán độ rộng trang cũng như các phần tử khác trong trang. Ví dụ như các cột chẳng hạn. Ví dụ như sau:

Với ưu điểm là đơn giản, không cầu kỳ. Thế nhưng đó chính là nhược điểm của nó khi thu nhỏ trình duyệt hoặc duyệt trên các thiết bị có độ phân giải thấp hơn. Nó sẽ xuất hiện thanh cuộn ngang (horizontal scroll bar) làm giao diện bên phía tay phải bị che khuất.

Elastic Layout (Bố cục linh động)

Đây là loại bố cục được cải tiến nhờ sử dụng giá trị em. Giá trị này dựa trên font-size của trang web để xác định độ rộng của của các phân tử trong trang web.

Tuy cùng nhược điểm là xuất hiện thanh cuộn ngang giống như fixed layout. Nhưng ở thời điểm đó, các trình duyệt đều hỗ trợ thay đổi kích thước văn bản dễ dàng thông qua một tính năng có tên là Text-Size. Vì thế khi người dùng thay đổi text-size, độ rộng của các thành phần trong trang sẽ tự thay đổi theo. Và giao diện sẽ luôn luôn có tỷ lệ tương xứng. Nhưng nó hãy còn quá phụ thuộc vào người dùng.

Fluid Layout (Bố cục lưu động)

Loại bố cục này sẽ tính toán độ rộng các phần tử dựa trên đơn vị phần trăm (%). Và tổng độ rộng trang sẽ dựa trên độ rộng của trình duyệt. Hãy lấy ví dụ nếu như bạn đang duyệt web ở chế độ toàn màn hình. Màn hình của bạn lại có độ phân giải là 1024×768 chẳng hạn. Lúc này để độ rộng trang web đạt 960px, sẽ tương ứng với giá trị 93.75%. Nếu giao diện có hai cột thì sẽ tính dựa trên độ rộng tuyệt đối mà nó nhận được. Sau đó quy đổi ra tỉ lệ phần trăm dựa trên phần tử cha chứa nó. Như các ví dụ trên, .content là 600px tương ứng với 62.5%, .sidebar là 360px tương ứng với 37.5%. Và đây là giao diện mẫu cuối cùng:

Bây giờ, bạn đã có thể vi vu thu nhỏ trình duyệt mà nỗi đau mang tên “thanh cuộn ngang” đã không còn nữa. Nhưng nỗi đau mới sẽ xuất hiện khi bạn thử nó trên màn hình có độ phân giải lớn hơn 1024px. Lúc này các khoảng trắng sẽ xuất hiện nhiều hơn khi các nội dung của bạn không đơn thuần chỉ là văn bản nữa. Hoặc khi bạn thu quá nhỏ kích thước trình duyệt, rất có thể các văn bản này sẽ chồng lên nhau. Lại đau khổ >.<

Hybrid Layout (Bố cục lai)

Thế là các Web Developer đã kết hợp các mẫu bố cục phía trên lại với nhau. Sau đó cho ra đời một mẫu mới với tên gọi Hybrid Layout. Mẫu này sẽ sử dụng kết hợp cả hai giá trị em và % để thiết lập độ rộng của phần tử.

Lấy ví dụ chúng ta sẽ dùng em để thiết lập độ dài trang và dùng % để xác định tỷ lệ các cột.  Còn nỗi đau thanh cuộn ngang kia, chúng ta sẽ dùng thuộc tính max-awidth để giới hạn kích thước của trang ở độ phân giải lớn. Có thể dùng thêm min-awidth để thiết lập giá trị cho các cột khi thu nhỏ trình duyệt. Và kết quả chúng ta có là:

Bây giờ chúng ta có thể thoải mái co giãn trình duyệt. Hoặc thay đổi kích thước font chữ mà layout vẫn hiển thị rất tuyệt vời.

Nhưng chúng ta lại quên mất một điều rằng, đây chỉ là một giao diện đơn giản. Nếu dùng loại layout này để thể hiện những trang web phức tạp như 3 hay 4 cột thì sao? Đương nhiên nó sẽ gặp vấn đề hiển thị ở các thiết bị có kích thước nhỏ hoặc khi thu nhỏ trình duyệt. Các nội dung sẽ trông rất khó kiểm soát. Lúc này bạn sẽ mất nhiều thời gian để đọc hết một nội dung nào đó của trang web.

Và chính vì lẽ đó Responsive Web Design ra đời để khắc phục tất cả các nhược điểm trên.

Responsive Layout (Bố cục có tính đáp ứng)

Được biết đến nhiều hơn với cái tên là Responsive Web Design (thiết kế giao diện có tính đáp ứng). Tuy nhiên layout của nó được thiết kế dựa trên các ưu điểm của các mẫu layout trước đó. Kết hợp thêm một module mới nằm trong CSS3 có tên là Media Query.

Với sự giúp đỡ của Media Query, ứng dụng web sẽ hiểu và xác định được là nó đang được thể hiện trên kích thước thiết bị nào. Ví dụ như là màn hình desktop, màn hình mobile hoặc là awidth và height của một viewport nhất định nào đó. Đặc biệt với bố cục mới này, khi trang web được tải trên một thiết bị có kích thước nhỏ, các nội dung của trang sẽ được bố trí lại sao cho hợp lý nhất. Nhằm để người dùng có thể “focus” nội dung tốt hơn nhằm tăng tính trải nghiệm.

Lời kết

Trên đây là các mẫu layout chính mà các bạn thường gặp nhất. Dĩ nhiên hiện tại Responsive Layout được ưu tiên nhiều nhất. Nhưng qua bài viết này, các bạn sẽ có cái nhìn tổng thể về quá trình phát triển của các mẫu layout mà các Web Developer đã từng sử dụng. Và dĩ nhiên nó sẽ là kiến thức bổ trợ bổ ích cho các bạn trước khi bước chân vào thiết kế mẫu Responsive Web Design cho chính mình.