Thiết kế web đáp ứng là một cách tiếp cận, theo đó một nhà thiết kế tạo ra một trang web "phản hồi" hoặc tự thay đổi kích thước tùy thuộc vào loại thiết bị mà nó đang được xem qua. Đó có thể là màn hình máy tính để bàn cỡ lớn, máy tính xách tay hoặc thiết bị có màn hình nhỏ như điện thoại thông minh và máy tính bảng.
Thiết kế web đáp ứng đã trở thành một công cụ thiết yếu cho bất kỳ ai có sự hiện diện kỹ thuật số. Với sự phát triển của điện thoại thông minh, máy tính bảng và các thiết bị điện toán di động khác, nhiều người đang sử dụng màn hình nhỏ hơn để xem các trang web.
Các trang web này cũng phải xem xét chỉ mục đầu tiên trên thiết bị di động vừa được Google công bố trong tháng 4 2018. Khi có nhiều doanh nghiệp nhỏ tăng sự hiện diện trên thiết bị di động, trang web, thương mại điện tử, trang Google Business, trang truyền thông xã hội và các nội dung khác phải dễ dàng truy cập trên tất cả các thiết bị.
Thiết kế web đáp ứng là gì?
Mục đích của thiết kế đáp ứng là có một trang web, nhưng với các yếu tố khác nhau phản ứng khác nhau khi được xem trên các thiết bị có kích thước khác nhau.
Hãy lấy một trang web “cố định” truyền thống. Ví dụ: khi được xem trên máy tính để bàn, trang web có thể hiển thị ba cột. Nhưng khi bạn xem cùng một bố cục trên một chiếc máy tính bảng nhỏ hơn, nó có thể buộc bạn phải cuộn theo chiều ngang, điều mà người dùng không thích. Hoặc các phần tử có thể bị ẩn khỏi chế độ xem hoặc bị méo. Tác động cũng phức tạp bởi thực tế là nhiều máy tính bảng có thể được xem theo hướng dọc hoặc quay sang một bên cho chế độ xem ngang.
Trên màn hình điện thoại thông minh nhỏ, các trang web có thể còn khó khăn hơn để xem. Các hình ảnh lớn có thể "phá vỡ" bố cục. Trang web có thể tải chậm trên điện thoại thông minh nếu chúng là đồ họa nặng.
Tuy nhiên, nếu trang web sử dụng thiết kế đáp ứng, phiên bản máy tính bảng có thể tự động điều chỉnh để hiển thị chỉ hai cột. Bằng cách đó, nội dung có thể đọc được và dễ điều hướng. Trên điện thoại thông minh, nội dung có thể xuất hiện dưới dạng một cột, có thể được xếp chồng lên nhau theo chiều dọc. Hoặc có thể người dùng sẽ có khả năng vuốt qua để xem các cột khác. Hình ảnh sẽ thay đổi kích thước thay vì bóp méo bố cục hoặc bị cắt.
Vấn đề là: với thiết kế đáp ứng, trang web sẽ tự động điều chỉnh dựa trên thiết bị mà người xem nhìn thấy.
Thiết kế web đáp ứng hoạt động như thế nào?
Các trang web đáp ứng sử dụng lưới chất lỏng. Tất cả các phần tử trang được định kích thước theo tỷ lệ, thay vì pixel. Vì vậy, nếu bạn có ba cột, bạn sẽ không nói chính xác độ rộng của từng cột, nhưng thay vào đó chúng phải rộng bao nhiêu so với các cột khác. Cột 1 nên chiếm một nửa trang, cột 2 nên chiếm 30%, và cột 3 nên chiếm 20%, ví dụ.
Phương tiện như hình ảnh cũng được thay đổi kích thước tương đối. Bằng cách đó, một hình ảnh có thể nằm trong cột hoặc yếu tố thiết kế tương đối của nó.
Các vấn đề liên quan
Chuột v. Chạm: Thiết kế cho các thiết bị di động cũng đưa ra vấn đề về chuột so với cảm ứng. Trên máy tính để bàn, người dùng thường có chuột để điều hướng và chọn các mục. Trên điện thoại thông minh hoặc máy tính bảng, người dùng chủ yếu sử dụng ngón tay và chạm vào màn hình. Những gì có vẻ dễ dàng để lựa chọn với một con chuột, có thể khó chọn với một ngón tay trên một điểm nhỏ trên màn hình. Nhà thiết kế web phải xem xét “chạm”.
Đồ họa và tốc độ tải xuống: Ngoài ra, có vấn đề về đồ họa, quảng cáo và tốc độ tải xuống. Trên thiết bị di động, có thể hiển thị ít đồ họa hơn so với lượt xem trên màn hình để trang web không mất thời gian tải trên điện thoại thông minh. Kích thước quảng cáo lớn hơn có thể cần được trao đổi cho quảng cáo nhỏ hơn.
Ứng dụng và “phiên bản dành cho thiết bị di động”: Trước đây, bạn có thể nghĩ đến việc tạo ứng dụng cho trang web của mình - nói ứng dụng iPad hoặc ứng dụng Android. Hoặc bạn sẽ có một phiên bản dành cho điện thoại di động dành riêng cho BlackBerry.
Nhưng với rất nhiều thiết bị khác nhau ngày nay, việc tạo ứng dụng và các phiên bản khác nhau cho mọi thiết bị và nền tảng điều hành trở nên khó khăn hơn.
Tại sao các doanh nghiệp nhỏ cần chuyển sang thiết kế web đáp ứng
Nhiều người hơn đang sử dụng thiết bị di động. Một nghiên cứu gần đây Pew 77% của người Mỹ hiện đang sở hữu điện thoại thông minh trong 2018 mà là từ chỉ 35% trong cuộc khảo sát sở hữu điện thoại thông minh đầu tiên của Trung tâm nghiên cứu Pew thực hiện trong 2011.
Kiểm tra lưu lượng truy cập của bạn và bạn có thể chỉ bị sốc khi có bao nhiêu khách truy cập vào trang web của bạn thông qua thiết bị di động. (Trong Google Analytics của bạn, chọn “Đối tượng” ở bên trái, sau đó “Thiết bị di động” để xem tỷ lệ lưu lượng truy cập đến từ thiết bị di động. Bạn thậm chí có thể xem chi tiết xem thiết bị nào đang gửi lưu lượng truy cập.)
Các mẫu thiết kế đáp ứng hiện có ở mọi nơi, để mua. Ví dụ: nếu bạn có trang web WordPress, bạn có thể truy cập vào thư viện mẫu có uy tín như ThemeForest và tìm kiếm "chủ đề WordPress đáp ứng". Mua một cái dưới $ 50. Sau đó, nhà phát triển web của bạn có thể tùy chỉnh nó cho logo và thương hiệu của bạn.
Ghi chú của biên tập viên: Ở đây tại Xu hướng doanh nghiệp nhỏ, chúng tôi đang nghiên cứu thiết kế đáp ứng mới. Phải không?
Ảnh qua Shutterstock
