Thực tiễn tốt nhất về thiết kế web đáp ứng

bởi Bradley Nice, Trình quản lý nội dung tại ClickHelp.com - công cụ tài liệu phần mềm

Google đã chính thức đề xuất Responsive Web Design là phương pháp ưa thích của họ để xây dựng trang web di động. Nếu bạn có một trang web hoặc một blog, đã đến lúc cân nhắc chuyển sang thiết kế đáp ứng thay vì duy trì các trang web thân thiện với thiết bị di động và máy tính bảng.

Nếu bạn chưa quen với khái niệm Thiết kế Web đáp ứng (RWD), đây là những câu hỏi phổ biến mà bạn có thể có xung quanh kỹ thuật này.

Tại sao tôi nên chuyển trang web của mình sang RWD?

Trang web của bạn trông tuyệt vời với màn hình máy tính để bàn nhưng nó có thể không đúng khi trang web của bạn được xem trên điện thoại thông minh hoặc máy tính bảng. Khi bạn thực hiện thiết kế đáp ứng, trang web sẽ trông tốt (và có thể đọc được) trên tất cả các màn hình.

Với Responsive Design, bạn có thể tạo một thiết kế và nó sẽ tự động điều chỉnh dựa trên kích thước màn hình của thiết bị di động. Cách tiếp cận này cung cấp nhiều lợi thế:

  • Nó tiết kiệm thời gian và tiền bạc khi bạn không phải duy trì các trang web riêng cho máy tính để bàn và điện thoại di động.
  • Responsive Design rất tốt cho trang web của bạn SEO SEO (bảng xếp hạng tìm kiếm) vì mỗi trang trên trang web của bạn sẽ có một URL duy nhất và do đó, nước trái cây của Google được bảo tồn. Bạn không phải lo lắng về các tình huống trong đó một số trang web liên kết đến trang web di động của bạn trong khi các trang web khác liên kết đến trang web máy tính để bàn của bạn.
  • Các báo cáo Google Analytics của bạn sẽ vẽ nên một bức tranh tốt hơn về việc sử dụng trang web của bạn vì dữ liệu từ người dùng di động và máy tính để bàn sẽ được hợp nhất.
  • Điều tương tự cũng đúng với các thống kê chia sẻ xã hội (Lượt thích trên Facebook, Tweets, + 1) vì các phiên bản di động và máy tính để bàn của các trang web của bạn sẽ có cùng một URL.
  • Thiết kế đáp ứng dễ bảo trì hơn vì chúng không liên quan đến bất kỳ thành phần phía máy chủ nào. Bạn chỉ cần sửa đổi CSS cơ bản của một trang để thay đổi giao diện (hoặc bố cục) trên một thiết bị cụ thể.

Tôi nên biết gì để bắt đầu với Responsive Design?

Responsive Design là HTML và CSS thuần túy. Bạn tạo các quy tắc trong CSS thay đổi kiểu dựa trên kích thước màn hình của thiết bị người dùng.

Ví dụ: bạn có thể viết quy tắc cho biết nếu kích thước màn hình của người dùng nhỏ hơn 320 pixel, không hiển thị thanh bên hoặc nếu kích thước màn hình lớn hơn 1920 pixel (màn hình rộng), hãy tăng kích thước phông chữ của thân máy văn bản đến 15px.

Làm cách nào để kiểm tra xem trang web cụ thể có đang sử dụng Responsive Design không?

Điều đó thật dễ dàng. Mở trang web đó trong bất kỳ trình duyệt máy tính để bàn và thay đổi kích thước trình duyệt. Nếu bố cục của trang web thay đổi khi bạn thay đổi kích thước, thiết kế sẽ phản hồi.

Nếu tôi đi theo phương pháp Thiết kế đáp ứng, trang web của tôi có hoạt động với các trình duyệt cũ hơn không?

Chủ yếu là có. RWD sử dụng truy vấn phương tiện CSS3 và HTML5 (cho ngữ nghĩa tốt hơn) không được hỗ trợ trong các phiên bản IE cũ hơn. Tuy nhiên, có các giải pháp dựa trên JavaScript - chẳng hạn như answer.js và hiện đại hóa - mang lại sức mạnh của CSS3 và HTML5 cho các trình duyệt cũ hơn bao gồm IE6.

Responsive Design có chơi tốt với các mạng quảng cáo như Google AdSense không?

Nếu bạn sử dụng quảng cáo trên trang web của mình, bạn nên cẩn thận chọn các định dạng vì các đơn vị rộng (như bảng xếp hạng 728 × 60 pixel) có thể không vừa với màn hình di động 320px. Tôi thích sử dụng các đơn vị hình chữ nhật tiêu chuẩn (như 300 × 250) vì chúng dễ dàng phù hợp với màn hình điện thoại thông minh và máy tính để bàn màn hình rộng.

Có hàng ngàn thiết bị di động. Những gì độ phân giải màn hình nên hỗ trợ trang web đáp ứng của tôi?

Tôi sẽ khuyên bạn nên đặt điểm dừng cho ít nhất các chế độ xem sau trong CSS3 Mediaqueries của bạn - 320px (ngang iPhone), 480 px (chân dung iPhone), 600px (Máy tính bảng Android), 768px (iPad + ~ Galaxy Tab) và 1024px (ngang iPad và máy tính để bàn).

Làm cách nào để bắt đầu với Responsive Web Design? Bất kỳ hướng dẫn tốt?

Dưới đây là các tài nguyên trực tuyến để giúp bạn bắt đầu:

Trang web: Tạp chí Net, Tạp chí Smashing, Thủ thuật CSS và Tường thiết kế web

Hướng dẫn bằng video: YouTube, Tuts Net

Thuyết trình: Sàn PowerPoint

Podcasts: Shop Talk, 5by5 Web Show và ngành công nghiệp

Twitter: @RWD, @NetMag và @SmashingMag

Nhược điểm của việc sử dụng Responsive Design là gì?

  • Thêm kilobyte vào trang web của bạn vì họ sẽ phải tải xuống các kiểu CSS và các tệp JavaScript không cần thiết.
  • Hình ảnh. Bạn không muốn cung cấp hình ảnh có độ phân giải cao hơn trên trang web di động của mình nhưng điều đó khó đạt được trong thiết kế đáp ứng (trừ khi bạn sử dụng cách giải quyết ở phía máy chủ như Hình ảnh thích ứng và Sencha.io).
  • Nỗ lực để thêm một lớp đáp ứng cho trang web hiện tại của bạn. Đôi khi nó có ý nghĩa hơn để bắt đầu từ đầu hơn là làm cho trang web có chiều rộng cố định hiện tại của bạn trở nên linh hoạt.

Bạn cũng có thể thích: Bố cục đáp ứng EBOOK miễn phí

Chúc một ngày tốt lành!

Bradley Nice,
Trình quản lý nội dung tại ClickHelp.com - công cụ tài liệu trực tuyến tốt nhất cho các nhà cung cấp SaaS