Responsive Web Design – Phần 1

Phần 1: Giới thiệu về Responsive Web Design

Việc truy cập các website bằng các thiết bị di động đã phổ biến từ lâu nay, nhưng phải cho đến gần đây, với sự ra đời hàng loạt của các loại điện thoại thông minh và máy tính bảng thì nó mới trở thành một xu hướng thực sự. Theo một dự đoán của Gartner thì đến năm 2013 việc sử dụng các thiết bị di động để duyệt web sẽ trở nên phổ biến hơn là sử dụng PC.

Với xu hướng đó, hầu hết các các công ty hiện nay đều tính đến việc chuyển đổi website của mình để có thể hỗ trợ tốt việc duyệt web trên nhiều thiết bị khác nhau. Một giải pháp được đưa ra đó là tạo ra nhiều phiên bản khác nhau của website cho các thiết bị khác nhau: iPhone, iPad, netbook, Kindle, BlackBerry… và tất nhiên là cho cả pc. Thế nhưng, với sự phong phú về chủng loại của các thiết bị di động, cũng như đa dạng về kích thước màn hình như hiện nay thì chúng ta sẽ phải tạo ra bao nhiêu phiên bản cho đủ? Đó là chưa kể những trường hợp các thiết bị “thông minh” như iPad hiện nay có khả năng quay ngang quay dọc màn hình; ngoài ra, theo một thống kê khác, có một số lượng lớn người dùng thường không để cửa sổ trình duyệt của mình ở dạng cực đại; làm thế nào để các website có thể hiển thị tốt trong tất cả những trường hợp trên?

Tháng 5 năm 2010 Ethan Marcotte đã đăng một bài viết với tiêu đề “Responsive Web Design” đề cập đến một hướng tiếp cận mới cho việc thiết kế giao diện web, theo đó thì chúng ta không nhất thiết phải tạo ra vô số các phiên bản khác nhau cho website của mình, mà thay vào đó chúng ta chỉ nên tập trung vào một thiết kế duy nhất, và thiết kế này phải có khả năng tự động điều chỉnh, tự động thích nghi với với các kích thước màn hình khác nhau. Nhưng Responsive Web Design không chỉ dừng lại ở việc tạo ra các website có khả năng thích nghi với nhiều lại kích thước màn hình, mà nó còn là một cách suy nghĩ mới về việc thiết kế. Trong loạt bài này, chúng ta sẽ cùng nhau điểm qua những tính năng chủ chốt của Responsive Web Design, và chúng ta cũng sẽ có các ví dụ demo nhỏ để ta có thể dễ dàng hơn trong việc làm quen và tiến tới áp dụng Responsive Web Design vào trong các sản phẩm thực tế.

Để tìm hiểu xem sự quan tâm của người dùng đối với Responsive Web Design là như thế nào, tôi đã thử dùng công cụ Google Insights for Search và nhập vào từ khóa “Responsive Web Design” thì nhận được kết quả như sau:

Biểu đồ trên phản ánh số lượng tìm kiếm được thực hiện của từ khóa “Responsive Web Design”, ta có thể dễ dàng nhận thấy rằng kể từ nửa cuối năm 2010 mới bắt đầu xuất hiện sự quan tâm đến khái niệm này, và đến nửa cuối năm 2011 cho đến nay thì nó đã tạo nên một xu hướng thực sự trên toàn thế giới (Chú ý rằng con số từ 0-100 được chia theo tỷ lệ chứ không phải là giá trị thực của số lượt tìm kiếm). Và chúng ta cũng có được kết quả thống kê theo từng vùng, theo đó thì sự quan tâm lớn nhất đến từ các quốc gia Bắc Mỹ, Bắc Âu, Ấn Độ và Úc, điều đó cũng không có gì là ngạc nhiên, bởi vì đây chính là các quốc gia có nền CNTT phát triển đứng vào top đầu của thế giới.

Để bắt đầu với Responsive Web Design, trong lúc chờ đọc bài viết tiếp theo (nếu bạn vẫn giữ được hứng thú cho đến khi đọc dòng này J),  bạn có thể vào đây và chọn xem qua các demo của các website sử dụng media queries (chúng ta sẽ có một bài về cái này). Để thấy được cái hay của nó thì bạn nên mở trình duyệt của mình ở dạng cực đại, sau đó thu nhỏ dần dần trình duyệt của mình để quan sát sự tự điều chỉnh của website. Nếu bạn có một chiếc điện thoại thông minh, hoặc máy tính bảng thì cũng có thể sử dụng nó để trải nghiệm sự “thông minh” của các website này.

Thân chào và hẹn gặp lại các bạn trong các phần tiếp theo.