Thiết kế web responsive hay thiết kế website mobile đang là xu hướng “nổi đình nổi đám” hiện nay. Và chính vì sự phát triển mạnh mẽ này mà cạnh tranh giữa các công ty thiết kế là vô cùng lớn, nếu không ngừng học hỏi, tích lũy kinh nghiệm thì sẽ dễ dàng bị đào thải. Để bắt kịp xu hướng cũng như thiết kế một web responsive hoàn chỉnh không phải là đơn giản, nếu bỏ qua các bước chi tiết dưới đây, thất bại là điều khó tránh khỏi. 1. Bản chất responsive nghĩa là gì?
Trước khi bắt tay vào thiết kế, bạn cần hiểu bản chất
responsive nghĩa là gì. Theo đó, thiết kế web responsive là kiểu thiết kế giúp website có thể tương thích với mọi thiết bị và trình duyệt, trong đó, nội dung và hình ảnh sẽ tự động co giãn để tương thích với mọi màn hình, từ PC, laptop đến smartphone, tablet,... mà bố cục, font chữ và tính thẩm mỹ không hề mất đi.
2. Tạo Meta Tag
Meta Tag giúp thiết lập tỷ lệ màn hình theo chuẩn 1x1, loại bỏ chức năng mặc định từ các trình duyệt smartphone hay iPad, cho phép người dùng có thể phóng to màn hình bằng tay. Bạn có thể sử dụng các công cụ media-queries.js hoặc respond.js để hỗ trợ để hỗ trợ cho việc tạo Meta Tag.
3. HTML
Đây là bước xác định cấu trúc của một
thiet ke website mobile, bao gồm những công việc như xác định chiều cao tiêu đề, chiều rộng khung chứa nội dung, khung Header và Footer và các thanh bên.
4. Xác định những đặc tính tạo nên phong cách của web responsive
Do web responsive có khả năng hiển thị tốt trên mọi màn hình của tất cả thiết bị nên bạn cần xác định những đặc tính cần có trên website, bao gồm màu sắc, font chữ,... hay bất cứ yếu tố nào tạo nên phong cách của trang web.
5. Bắt đầu Media Queries với phiên bản dành cho màn hình nhỏ
Một số nhà thiết kế thường mắc sai lầm là bắt đầu với màn hình PC, tuy nhiên, các chuyên gia thiết kế cho rằng tốt nhất vẫn nên bắt đầu Media Queries với những phiên bản màn hình nhỏ, kích thước khoảng 320 - 480 px. Khi bắt đầu với kích thước màn hình này, bạn sẽ dễ dàng xác định được những nội dung cơ bản, cần thiết.
6. Chuyển Media Queries tới màn hình lớn hơn
Màn hình tốt nhất để thử nghiệm khâu này là màn hình của iPad (máy tính bảng) với chiều rộng tối thiểu khoảng 480 px.
7. Chuyển Media Queries tới màn hình lớn nhất
Bước này, bạn sẽ tập trung viết Media Queries dành cho phiên bản máy tính với kích thước chiều rộng tối đa trong khoảng 769 px hoặc 1100 px.
8. Thêm nội dung cho trang web
Sau khi đã viết Media Queries cho tất cả các phiên bản màn hình thì đây sẽ là lúc bạn “thêm thắt” những nội dung cần có trên web responsive.
9. Bổ sung hình ảnh
Cùng với nội dung thì hình ảnh góp phần mang đến ấn tượng, nổi bật cho trang web. Căn cứ vào Media Queries, bạn có thể xác định chiều cao và chiều rộng hình ảnh cho phù hợp.
10. Làm video
Nếu muốn website linh hoạt và thu hút hơn, hãy tạo video cho website với kỹ thuật tương tự như bước tạo hình ảnh.
11. Xem bản demo cuối cùng
Thử nghiệm bản demo trên tất cả thiết bị, từ màn hình PC, máy tính bảng đến smartphone để kiểm tra khả năng hiển thị và vận hành của web responsive.
Nắm vững khái niệm
responsive website là gì cùng với việc tuân thủ 11 bước thiết kế trên, chắc chắn bạn sẽ không gặp bất cứ khó khăn hay trở ngại nào trong quá trình xây dựng và thiết lập một website responsive.
Lê Trinh