Responsive Web Design sự lựa chọn cho các nhà thiết kế web

Responsive web design là một khái niệm dành cho các nhà thiết kế và phát triển ứng dụng web nhằm đáp ứng và thích nghi được với môi trường (hay thiết bị) của người dùng về kích thước màn hình, platform, trạng thái xoay hay đứng như: giao diện trang web phải thích nghi được trên từng loại thiết bị dù cho người đó dùng Iphone, iPad, netbook, BlackBerry, Kindle hay những chiếc điện thoại di động có màn hình nhỏ.

Khái niệm về Responsive web design
Responsive web design không phải là ý tưởng hoàn toàn mới, nó kế thừa và tương tự như responsive architecture, trang web khi được thiết kế phải có khả năng tự động điều chỉnh để thích nghi với nhiều nhóm người sử dụng khác nhau. Responsive web design không chỉ là việc tùy chỉnh cho phù hợp với kích thước màn hình và resize lại hình ảnh, mà nó mở ra một cách nghĩ hoàn toàn mới về thiết kế. 

Độ phân giải màn hình
Càng nhiều thiết bị, càng nhiều độ phân giải khác nhau, sự phổ biến của những thiết bị như iPhone, iPad và các smartphone có thể chuyển từ dạng xem ngang và đứng một cách nhanh chóng.

 

Hơn nữa khi thiết kế cho cả màn hình nằm ngang và màn hình đứng, chúng ta phải tính đến hàng trăm kích thước màn hình khác nhau. Ta có thể nhóm một số kích thước lại với nhau và thiết kế cho từng nhóm một, và thiết kế riêng cho từng nhóm này nếu cần thiết. 

Flexible layout



Hình ảnh cần phải được tự động điều chỉnh và không được phép làm vỡ cấu trúc website, vì ta không làm một sản phẩm in ấn. Khi kích thước ảnh không bị fix ở một giá trị nào đó, nó mang lại nhiều lợi ích hơn mong đợi, ý tưởng tuyệt vời cho những những thiết bị có thể xoay ngang và đứng.

Filament Group’s Responsive Images

 

Kỹ thuật này được giới thiệu bởi Filement Group, theo đó thay vì resize lại hình ảnh, sẽ load hẳn một ảnh khác khi cần, cách này có thể tiết kiệm được việc load ảnh lớn không cần thiết với các thiết bị nhỏ.

Media Queries
CSS 3 vẫn hỗ trợ đầy đủ media type từ CSS2.1 như screen, print, handheld, và đã bổ sung khá nhiều khai báo mới như max-width, device-width, orientation, color. May mắn thay những thiết bị chạy android, ipad đều không sử dụng trình duyệt IE, nên bạn an tâm khi sử dụng những thuộc tính css 3.

Ẩn hoặc hiển thị nội dung
Rõ ràng việc chỉ hiển thị những nội dung thật sự cần thiết trên những thiết bị có kích thước nhỏ là cần thiết, kinh nghiệm cho thấy trên các thiết bị di động bạn chỉ nên có một thanh navigation đơn giản, nhấn mạnh nội dung, xem dạng list nhiều dòng tốt hơn là chia thành nhiều cột

Touchescreen vs Cursors

 

Màn hình cảm ứng ngày càng phổ biến. Những thiết bị có màn hình cảm ứng thường có kích thước nhỏ, rõ ràng bạn phải thấy được rằng việc tương tác qua ngón tay cần một khoản không gian lớn hơn như khi dùng chuột, màn hình cảm ứng cũng không có trạng thái hover.

Tổng Kết
Web design không đơn thuần là tạo ra sản phẩm đẹp trong mắt người dùng mà còn là công việc tạo ra trải nghiệm mới cho người dùng. Responsive web design nếu được ứng dụng tốt sẽ tăng trải nghiệm người dùng không những thế còn giải quyết vấn đề hiển thị trên nhiều loại thiết bị, mọi nền tảng, nó sẽ còn được tiếp tục cải thiện trong nhiều năm tới.