1. Responsive là gì?

Nói một cách ngắn gọn, Thiết kế web thích ứng (hay Thiết kế web Responsive) là thiết kế website sao cho trang web có thể hiển thị và tính năng tương thích ứng với kích cỡ màn hình, hành vi tương tác trên các thiết bị khác nhau như Desktop, Mobile & Tablet.

Người dùng giờ đây không nhất thiết phải dùng máy tính để bàn (PC/Desktop) hay máy tính xách tay (Laptop) để có thể truy cập website. Và bạn cũng biết, các thiết bị này có kích cỡ màn hình và nền tảng hệ điều hành, ứng dụng hỗ trợ khác nhau, đặc biệt là kích cỡ màn hình. Trước đây, khi thiết kế một website, bạn chỉ cần quan tâm đến giao diện đẹp, bắt mắt, bố cục và tính năng hợp lý. Mặc dù đối với Desktop & Laptop cũng có nhiều kích cỡ màn hình khác nhau, nhưng bạn chỉ cần thiết kế với một vài tiêu chuẩn kích thước là có thể đáp ứng được. Giờ đây, các website buộc phải thích ứng từ kích thước màn hình rất nhỏ trên điện thoại di động cho đến rất lớn trên màn hình Desktop với số inch cao.

Không chỉ có vậy, hành vi tương tác của người dùng trên các thiết bị này cũng khác nhau. Đối với điện thoại di động, hành vi tương tác cơ bản với màn hình cảm ứng sẽ là chạm bằng tay trên một không gian hẹp. Đối với máy tính để bàn, hành vi tương tác cơ bản là rê chuột và click trên một không gian rộng lớn hơn nhiều.

Vì vậy, để thiết kế một website mà không gây cản trở, khó chịu cho người dùng khi sử dụng website, các nhà thiết kế web buộc phải tìm cách thiết kế web sao cho website sẽ tự động ứng với kích cỡ màn hình, thiết bị và hiển thị những thông tin tương thích phù hợp và do đó khái niệm "Thiết kế web Responsive" ra đời.

2. Vậy còn Mobile-first

Đây là hình ảnh so sánh Responsive và Mobile First - bạn có thể thấy rõ cách thức mà chúng hoạt động:



Giải pháp đối với Web Mobile-first sẽ có hai hướng

- Vẫn ứng dụng Reponsive: Tức là bạn vẫn tiếp tục sử dụng chung mã nguồn Back-end, điều chỉnh các tính năng Front-end cho tương thích với các loại thiết bị, ẩn hiện tuy theo kích thước màn hình. Nhưng cần ưu tiên lấy màn hình nhỏ làm cơ sở. Tuy nhiên, phương pháp này sẽ gây không ít cản trở nếu muốn tối ưu rốt ráo cho điện thoại di động. Điều này sẽ được nói rõ hơn ở các tiêu chí sẽ được đề cập ở bên dưới.

- Thiết kế một phiên bản riêng cho mobile: Với cách này bạn vẫn có thể sử dụng chung cơ sở dữ liệu website nhưng cần tinh gọn lại những xử lý Back-end không cần thiết đối với thiết bị di động, những xử lý sẽ bị ẩn trên thiết bị di động như cách làm Responsive. Việc thay đổi hay nâng cấp cho từng nền tảng thiết bị có tính độc lập, ít ràng buộc hơn.

Sau đây là một số tiêu chí cơ bản cần quan tâm khi chuyển sang thiết kế web Mobile-first:

- Bố cục nội dung: Với màn hình nhỏ trên điện thoại di động, bạn cần quan tâm đến bố cục sao cho dễ tương tác nhất.

- Tốc độ xử lý: Giảm bớt các xử lý tối đa tập trung cho những thứ cần thiết trên thiết bị di động. Trên thiết bị di động, cấu hình máy thấp hơn nhiều so với PC/Desktop/Laptop.

- Tương thích hành vi: Tập trung xử lý các tính năng liên quan đến hành vi thao tác trên thiết bị di động.

- Tốc độ tải web: Giảm tối đa lượng yêu cầu (Request), kích thước hình ảnh, nội dung ưu tiên cho màn hình nhỏ để tăng tốc độ tải web. Cần lưu ý rằng tốc độ đường truyền trên thiết bị di động đa phần chậm hơn trên PC/Desktop/Laptop.

Cuối cùng: Mình có một vài lưu ý cho các bạn rằng khi sử dụng theme đặc biệt là theme wordpress thì bạn nên chọn những theme nào có hỗ trợ responsive là tốt nhất vì chúng tương thích trên mọi thiết bị và nở rộ trong nhiều năm tới.