Responsive Web Design - Từ khái niệm tới thực tế

Đăng bởi kuangthien trong mục Tổng hợp vào 19 tháng 2, 2012 | Comments

Thế giới Web mà chúng ta vốn biết xưa nay đang thay đổi. Trước đây, thợ tô màu web với thợ chọc sửa mã nguồn vốn chỉ cần quan tâm việc Web nó chạy trên màn hình máy tính như nào, nhúng được vài hiệu ứng flyout, dropdown cùng với Ajax là đã có thể bá đạo thiên hạ. Thì ngày nay, cùng với sự phát triển chóng mặt của nào những iPhone, Galaxy Note tới iPad hay Kindle Fire phổ cập tới mọi tầng lớp, anh em chúng ta lại có thêm việc để làm!

Thực vậy, hàng loạt đồ công nghệ khủng ồ ạt ra đời cộng với nhu cầu xài Web trên di động của bọn người dùng ngày càng gia tăng, đồng nghĩa chúng ta phải tính chuyện Web mình làm hiện thế nào trên các kích thước màn hình khác nhau? Nếu bây giờ đang là năm 2008 – năm người ta hay nhắc tới KhoiVinh với chủ nghĩa tôn thờ fixed width layout , có lẽ đề cập tới chuyện này là thừa thãi. Nhưng giờ đã là lúc thích hợp nhất, dù có vẻ hơi muộn, để chúng ta nói về Responsive Web Design – RWD.

Một cách tổng quát, RWD giúp chúng ta phát triển những website có khả năng tự động thay đổi bố cục trên các kích thước màn hình khác nhau. Một thiết kế 3 cột với tổng width là 980px, lại thêm thanh navi kéo ngang như trang DanTri mà hiển thị trên một màn hình kích thước 250px như iPhone lại có thể tự "hóa thân" thành bố cục 1 cột với cách xếp navi rất gọn gàng hẳn sẽ khiến người dùng thoải mái hơn là chuyện phải kéo thanh cuộn ngang màn hình!

Khái niệm RWD vốn được đề xuất bởi Ethan Marcotte trong cuốn sách cùng tên. Cuốn "Responsive Web Design" của lão gồm 3 phần chính:

A fluid grid
Fluid images
Media queries

Bài viết này không định mổ xẻ chi tiết những điều này vì nó đề cập nhiều tới HTML và CSS . Tôi biết, đa số thợ trang trí Web các bạn không biết CSS. Tuy nhiên, nếu bạn muốn không muốn cả đời chỉ là thợ trang trí Web thì bạn nên đọc. Nếu ngại đọc sách, giải pháp thay thế chấp nhận được là đọc ba bài viết này, cũng của lão viết: Fluid Grids, Fluid Images, and Responsive Web Design. Nếu phải chọn một, thì bạn chọn cái cuối cùng vì nó quan trọng nhất hoặc, nếu chỉ cần biết để chém gió thôi thì có thể đọc bài viết này

Responsive Web Design

RWD là phiên bản khác hoàn toàn so với thiết kế web như trước đây nên là bọn gõ code (đặc biệt là lính mới) phải biết rõ những tác dụng và hạn chế của RWD.

Để phát triển thành sản phẩm thực sự, những bản thiết kế cần tới CSS media queries – giúp website tự động thay đổi bố cục theo kích thước màn hình. CSS3 Media queries được phát triển lên từ Media Type đã có từ CSS2. Đây là một câu lệnh media queries minh họa:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Điều tệ hại bạn phải đối mặt là nhiều khi cùng một màn hình nhưng bọn người dùng nó ngứa tay nó thu nhỏ cửa sổ lại, các queries được kích hoạt và trang web bị…biến dạng đột ngột. Các chuyên gia khuyên bạn nên xài thêm CSS transitions để sự thay đổi được mượt mà hơn. Nếu bị bó hẹp ở ngôn ngữ CSS, hãy viện tới một vài thư viện Javascript!

Những trang chứa bảng biểu dữ kiệu cũng là thử thách khó nhằn. Mặc định, bảng hiện lên có kích thước ngang khá rộng. Nếu thử zoom out thì chữ lại hiện rất bé, còn khi zoom in cho to lên, bạn phải xài tới cuộn ngang và cuộn dọc để đọc hết nội dung. Giải pháp tạm chấp nhận được là …định dạng lại bảng ở kiểu bánh tròn hay biểu đồ cột. Biểu đồ cột hiển thị khá đẹp trên màn hình nhỏ. Tuy nhiên, điều này khó khả thi ở đa số trường hợp.

Ảnh trong responsive web designs được gọi là context-aware. Chúng không những co dãn được mà còn tự thay thế được bằng phiên bản phù hợp hơn. Với sự trợ giúp của CSS, ảnh có thể thay đổi kích thước khá linh hoạt. Tuy nhiên trong một số trường hợp, việc sử dụng phiên bản khác của ảnh cần tới sự can thiệp của ngôn ngữ lập trình.

Responsive Web Design

Nếu bạn cảm thấy hơi nhàm vì những nhận định thiên hướng kỹ thuật, ta sẽ nói một chút về thiết kế. Như đã nói ở trên, media queries (nếu chém gió về RWD thì đây là từ khóa quan trọng nhất) giúp bạn thay đổi được bố cục web. Vấn đề ở đây là, bạn cần khiến thiết kế của mình có tính hướng module. Thiế kế nên được phần chia thành các khối rõ ràng, ví dụ: main content, sidebar, header, và navigation. Hãy quan tâm tới việc xếp lại vị trí và khả năng kéo dãn của chúng. Dưới đây đây là một ví dụ điển hình:

Responsive Web Design

Nếu ở màn rộng, layout được chia làm 2 cột thì ở màn nhỏ hơn, chiều rộng bó hẹp lại và cột chính được hiện lên trên cột sidebar, thiết kế thành layout 1 cột. Cột sidebar cho xuống dưới là ý tưởng khá hay. Nếu cột này có các box như "popular post" hay "hot news" thì sau khi đọc hết nội dung chính, khả năng người dùng bấm đọc tiếp là khá cao. Ở những thiết kế phức tạp hơn, có box search, product grid, giỏ hàng… bạn càng phải vận dụng tính sáng tạo của mình. Nhiều khi câu hỏi chỉ đơn giản như "Giá cũ với giá mới nên xếp thế nào ở trang List? Nút Readmore nên để bên trái hay bên phải?" cùng khiến mình đau đầu.

Nhìn chung, Responsive Web Design là một cuộc cách tân, không phải một cuộc cách mạng. Nó không lật đổ hoàn toàn những gì trước đó. Bước tiến hóa này không chỉ đòi hỏi dân làm Web như chúng ta phải trang bị kỹ năng cần thiết về công nghệ mà còn phải trau dồi khả năng sáng tạo để tìm ra những chuẩn mực mới trong nghề.

Để kết thúc bài viết, xin được gửi anh em kha khá các mẫu ví dụ về RWD cho anh em tham khảo: