Responsive design là gì và ảnh hưởng của responsive design

EQVN Blog – Thế giới SEO biến đổi kéo theo đó là sự ra đời của nhiều thuật ngữ mới và một trong những thuật ngữ được nhắc đến nhiều ngày nay là responsive web design. Vậy responsive web design là gì và có tầm ảnh hưởng thế nào? Chúng ta sẽ cùng tìm hiểu trong bài viết này.

Minh họa cho Responsive Design – Thiết kế tự điều chỉnh

Responsive design (tạm dịch là thiết kế tự điều chỉnh) là cách tiếp cận trong đó thiết kế (hay giao diện) của website sẽ linh hoạt điều chỉnh sao cho phù hợp kích cỡ màn hình cũng như nền tảng mà người truy cập sử dụng.

Sự đồng nhất này trong trải nghiệm người dùng sẽ là tiền đề quan trọng cho các bộ máy tìm kiếm và những nhà phát triển web khi mà có những dự đoán cho thấy lượng sử dụng thiết bị di động sẽ vượt qua lượng sử dụng máy tính để bạn vào năm 2014. Bằng cách khuyến khích những nhà phát triển web tạo ra một trải nghiệm web mang tính thuyết phục, có khả năng điều chỉnh theo nền tảng người dùng, Google có thể tiết kiệm khá nhiều trong thuật toán liên kết của họ – và đến một mức nào đó – có thể tránh được gánh nặng đánh giá các phiên bản trên thiết bị di động và trên máy tính để bàn như những thực thể riêng biệt.

Đối với các nhà phát triển web, những lợi ích cũng rất rõ ràng: không phải tốn công duy trì nhiều phiên bản của cùng một website. Bên cạnh đó, động thái chuyển qua thiết kế tự điều chỉnh có khả năng tạo ra tâm lí “thiết bị di động là trên hết”, mà chắc chắn sẽ dẫn đến một kiến trúc rõ ràng hơn và trải nghiệm người dùng sẽ được quan tâm thích đáng hơn.

Tìm hiểu Thiết kế tự điều chỉnh

Đối với một thiết kế tự điều chỉnh, yêu cầu cần có ba thuộc tính sau đây:

• Lưới “co dãn”: Một hệ thống lưới co dãn sử dụng tỷ lệ phần trăm để xác định chiều rộng của cột hoặc thẻ div thay vì dùng pixel. Ví dụ, một “anh hùng” có thể có chiều rộng 650px trong thiết kế chiều rộng cố định, trong khi đó nó sẽ được đánh dấu là 100% trong tập tin CSS của thiết kế chiều rộng co dãn.
• Truy vấn media: truy vấn media cho phép tùy chỉnh CSS dựa trên chiều rộng min-max của một trình duyệt. Ví dụ dưới đây là một truy vấn media với chiều rộng tối đa của 450px chỉ dành cho các trình duyệt trên thiết bị di động.
• <link href=”css/phone.css” rel=”stylesheet” type=”text/css” media=”only screen and (max-width: 450px)”>
• Hình ảnh tự điều chỉnh: bản chất tương tự như lưới co dãn, hình ảnh tự điều chỉnh không có độ rộng cố định, nhưng thay vào đó là thuộc tính độ rộng tối đa max-width  (thường là 100% khi hiển thị trên máy tính để bàn). Điều này cho phép hình ảnh được thu nhỏ lại để phù hợp với chiều rộng của màn hình mà trang web được kết xuất.

Kết quả của các thuộc tính này rất dễ nhận ra. Đơn giản chỉ cần vào một website có thiết kế tự điều chỉnh như Starbucks và thay đổi kích thước trình duyệt. Bạn sẽ thấy có sự điều chỉnh giao diện và kích thước màn hình tùy theo độ rộng của trình duyệt.

Bắt đầu với Thiết kế tự điều chỉnh

Dưới đây là một vài công cụ tuyệt vời để thử nghiệm với thiết kế tự điều chỉnh.

• Twitter Bootstrap: Bootstrap Twitter là một bộ công cụ tuyệt vời để nhanh chóng xây dựng các trang web tự điều chỉnh và các trang đích. Hầu hết các nhà phát triển xem đây là công cụ phải có vì nó hỗ trợ mạnh mẽ các plugin Javascript và CSS.
• ThemeForest: tín đồ WordPress và những người “thích tự mò” có thể tham khảo các mẫu có sẵn tại ThemeForest. Có hàng trăm mẫu thiết kế tự điều chỉnh ở đây và một cộng đồng khá tích cực đánh giá chúng.
• Net Magazine: gồm 50 công cụ hàng đầu của Net Magazine cho Thiết kế WordPress tự điều chỉnh.

Lợi ích tức thì

Responsive Design giúp gia tăng hơn nữa những trải nghiệm trên thiết bị di động, đặc biệt trong thế giới doanh nghiệp nhỏ/trung bình. Tiêu chuẩn không chính thức này sẽ là một bước tiến quan trọng vì nó đảm bảo hình ảnh cho nhiều doanh nghiệp nhỏ/trung bình trên thiết bị di động mà không cần chi phí bổ sung đáng kể nào. Cho dù sự hiện diện này sẽ có thể sinh lời hay không thì sẽ là một câu chuyện khác.

Lược dịch từ Search Engine Watch

Vui lòng ghi rõ nguồn eqvn.net khi đăng lại nội dung này.

: website, xu hướng