Để không bị đào thải khỏi thị trường thiết kế web cạnh tranh khốc liệt, các công ty web cần bắt kịp xu hướng đang "nổi đình nổi đám" này. Tuy nhiên, "nhiệm vụ" phải bắt kịp xu hướng "Responsive design (Thiết kế đáp ứng)" không phải là một việc dễ dàng nếu bạn không biết nên bắt đầu từ đâu. Hôm nay, với kinh nghiệm tích lũy được, Ngôi Sao Số xin chia sẻ với các bạn các bước cần thiết để bắt đầu làm một "Responsive Web Design (Thiết kế web đáp ứng)"

Cùng với sự gia tăng của các thiết bị di động, "Responsive Web Design (Thiết kế web đáp ứng)" ngày càng trở nên phổ biến và chiếm lĩnh thị trường thiết kế web thế giới nói chung và Việt Nam nói riêng. Để không bị đào thải khỏi thị trường thiết kế web cạnh tranh khốc liệt, các công ty web cần bắt kịp xu hướng đang "nổi đình nổi đám" này. Tuy nhiên, "nhiệm vụ" phải bắt kịp xu hướng "Responsive Web Design (Thiết kế web đáp ứng)" không phải là một việc dễ dàng nếu bạn không biết nên bắt đầu từ đâu. Hôm nay, với kinh nghiệm tích lũy được, Ngôi Sao Số xin chia sẻ với các bạn các bước cần thiết để bắt đầu làm một "Responsive Web Design (Thiết kế web đáp ứng)"

Trình duyệt web IE8 trở xuống không hỗ trợ Media Query. Do đó, bạn có thể sử dụng media-queries.js hoặc respond.js để hỗ trợ.

3. HTML

Bước tiếp theo là xác định cấu trúc trang web của bạn. Điều này bao gồm thiết lập cách bố trí trang bằng cách xác định chiều cao tiêu đề, chiều rộng của khung chứa nội dung, các thanh bên, khung Header và Footer. Bạn có thể bỏ vào các yếu tố điều hướng trong cấu trúc HTML nếu cần thiết.

Ví dụ: Tạo một bố cục trang cơ bản với các yếu tố: 1 Header, 1 khung nội dung, 1 thanh bên và 1 Footer. Tiêu đề có chiều cao 180px cố định, nội dung có chiều rộng 600px và thanh bên rộng 300px.

HTML code: 

4. Thiết lập một số đặc tính tạo nên phong cách của Web

Bởi vì bạn muốn trang web đáp ứng của bạn có các đặc tính cơ bản giống nhau trên tất các kiểu màn hình nên bạn cần phải thiết lập các đặc tính thể hiện phong cách web như kiểu chữ, màu sắc... ngay sau bước HTML.

5. Bắt đầu với Media Queries dành cho màn hình nhỏ

Bây giờ chúng ta chuyển sang CSS3 Media Queries - sự kỳ diệu đằng sau thiết kế web đáp ứng. Bạn nên bắt đầu với chiều rộng nhỏ - khoảng 320-480 px - vì điều này đòi hỏi bạn chỉ thiết lập những nội dung thực sự cần thiết. Thiết lập Media Queries cho một chiều rộng tối đa là 480px hoặc nhỏ hơn, rồi thiết lập chiều cao tiêu đề và kích thước font cho tương thích với chiều rộng.

6. Chuyển đến Media Queries cho một màn hình tương đối lớn

Khi nói một màn hình tương đối lớn, ý tôi là màn hình iPad (máy tính bảng). Bạn thiết lập Media Queries cho một màn hình tương đối lớn có chiều rộng tối thiểu khoảng 480px

Bạn có thể bổ sung cột cho màn hình máy tính bảng để có thể hiển thị thêm nội dung.

7. Xác định Media Queries cho màn hình lớn

Cuối cùng, bạn sẽ viết Media Queries cho màn hình máy tính để bàn. Thiết lập chiều rộng tối đa 769px hoặc 1100px :

8 . Thêm nội dung

Một khi bạn đã xác định các lệnh có liên quan, đây là thời gian để thêm nội dung cho trang web.

9. Làm cho hình ảnh linh hoạt

Sau khi hoàn thành các bước cơ bản, đừng quên làm cho hình ảnh cho trang web của bạn linh hoạt. Xác định chiều cao và chiều rộng của hình ảnh theo Media Queries cho các kích thước màn hình có liên quan.

10. Làm cho Video linh hoạt

Sử dụng kỹ thuật tương tự với hình ảnh để làm cho video linh hoạt.

11 . Xem Demo cuối cùng

Cuối cùng, sau tất cả các bước trên, bây giờ bạn có thể xem bản demo cuối cùng của trang web. Hãy xem nó trên máy tính để bàn, Smart Phone, máy tính bảng để kiểm tra xem trang web có "Responsive" hay không.