Thiết kế web mobile Responsive

  • 11:24 SA 30/07/2014
  • 7903 lượt xem
  • 0 bình luận

Một thiết kế, Hỗ trợ đa nền tảng, đa kích cỡ màn hình.

 

Nếu bạn chưa quen với các khái niệm về thiết kế Web Responsive (RWD), đây là một hướng dẫn nhanh chóng và trả lời hầu hết các câu hỏi phổ biến mà bạn có thể gặp xung quanh kỹ thuật này. Chúng ta hãy bắt đầu.

 

Q1 - Tại sao tôi nên chuyển sang trang web phiên bản desktop của tôi để thiết kế web mobile Responsive?

 

A1 - Trang web của bạn sẽ rất tốt khi hiển thị màn hình máy tính để bàn nhưng có thể không được đẹp và đầy đủ khi trang web của bạn được xem trên một điện thoại Smartphone, máy tính bảng hoặc một e-reader (như Kindle). Một khi bạn làm cho thiết kế đáp ứng, trang web sẽ nhìn tốt (và có thể đọc được) trên tất cả các màn hình và không chỉ là máy tính để bàn.

 

Q2 - những lợi thế khác của việc chuyển đổi sang RWD là gì?

 

A2: Với thiết kế web mobile Responsive, bạn có thể tạo ra một thiết kế và nó sẽ tự động thích ứng 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 rất nhiều lợi thế:

 

Nó tiết kiệm thời gian và tiền bạc như bạn không có để duy trì trang web riêng biệt cho máy tính để bàn và điện thoại di động.

Thiết kế đáp ứng tốt cho SEO trang web của bạn (thứ hạng tìm kiếm) như mỗi trang trên trang web của bạn sẽ có một URL duy nhất và do đó nước Google được bảo tồn. Bạn không phải lo lắng về trường hợp một số trang web liên kết đến trang web di động của bạn trong khi liên kết khác để trang web của máy tính để bàn của bạn.

Báo cáo Google Analytics của bạn sẽ vẽ một bức tranh tốt hơn về cách sử dụng trang web của bạn từ các dữ liệu từ điện thoại di động và người sử dụng máy tính để bàn sẽ được củng cố.

Như vậy sẽ đúng đối với các số liệu thống kê xã hội chia sẻ (Facebook Likes, Tweets, +1) kể từ khi phiên bản điện thoại di động và máy tính để bàn của các trang web của bạn sẽ không còn phải URL khác nhau.

Thiết kế đáp ứng được dễ dàng hơn để duy trì khi họ không liên quan đến bất kỳ thành phần phía máy chủ. Bạn chỉ cần chỉnh sửa CSS cơ bản của một trang để thay đổi xuất hiện của nó (hoặc bố trí) trên một thiết bị cụ thể.

Các phương pháp thiết kế trước đó nhìn chuỗi tác nhân người dùng để xác định tên thiết bị di động và trình duyệt đang thực hiện yêu cầu. Đó là chưa chính xác và với số lượng thiết bị và trình duyệt di động mở rộng mỗi ngày, ma trận là rất khó khăn để duy trì. Thiết kế đáp ứng không quan tâm đến các đa số người sử dụng.

Q3 - Tôi cần biết gì để bắt đầu với thiết kế Responsive?

 

A3 - Responsive Design là kết tinh công nghệ mới nhất của HTML và CSS. Bạn tạo các quy tắc đơn giản trong CSS thay đổi phong cách dựa trên màn hình kích thước của thiết bị của người dùng.

 

Ví dụ, bạn có thể viết một quy tắc nói rằng nếu màn hình kích thước của người sử dụng ít hơn 320 pixels, 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áy tính để bàn màn hình rộng), tăng kích thước font chữ của cơ thể văn bản để 15px. Sau đây là các quy tắc tương tự dịch sang mã:

@media screen and (max-width:320px) {

    .sidebar { display: none }

 }

 @media screen and (min-width:1920px) {

    body { font-size: 15px }

 }

 

Q4 - Làm thế nào để kiểm tra xem trang web cụ thể là sử dụng các thiết kế Responsive? 

 

A4 – Thật là dễ dàng. Mở trang web này 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ố trí của trang web thay đổi khi bạn thay đổi kích thước, thiết kế đáp ứng. Bạn cũng có thể sử dụng các công cụ trực tuyến để so sánh các bố trí khác nhau của một trang trong cùng tab.

 

Q5 - Bạn có thể chia sẻ những ví dụ về một số trang web tốt nhất ứng dụng Responsive?

 

A5 - Đó là một vài nhưng yêu thích của tôi bao gồm Sieugia.vn (trang web TMĐT), Vnsolution.com.vn (công ty thiết kế web). Bạn cũng nên kiểm tra tại mediaqueri.es , một công cụ kiểm tra các trang web có sử dụng thiết kế Responsive.

 

Q6 - Nếu tôi đi theo cách tiếp cận thiết kế Responsive, trang web của tôi sẽ làm việc với các trình duyệt cũ?

 

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

 

Q7 - Có thiết kế Responsive chơi độc đáo với các mạng quảng cáo như Google AdSense?

 

A7 - Nếu bạn sử dụng quảng cáo trên trang web của bạn, bạn nên cẩn thận lựa chọn các định dạng vì các đơn vị rộng (như các điểm ảnh bảng dẫn 728 × 60) có thể không phù hợp trên một màn hình điện thoại 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) trên blog của tôi kể từ khi họ dễ dàng phù hợp trên màn hình điện thoại thông minh và máy tính để bàn màn hình rộng.

 

Một trong những vấn đề với thiết kế Responsive là vùng quảng cáo trên trang web của bạn mà là ở trên nếp gấp (ATF) thường bị đẩy xuống trên các phiên bản điện thoại di động và khách hàng có thể không luôn luôn như thế (nếu đã trả tiền bạn cho một khe ATF phí bảo hiểm).

 

Q8 - Hiện có hàng ngàn thiết bị di động. Màn hình độ phân giải gì nên tôi đáp ứng hỗ trợ trang web?

 

A8. Mở bảng điều khiển Google Analytics của bạn và chọn Audience -> Technology -> Browser & OS. Bây giờ chuyển sang màn hình Screen Resolution tab và có độ phân giải của thiết bị di động mà mọi người đang sử dụng trình duyệt trang web của bạn.

 

Tôi muốn giới thiệu thiết lập điểm break ít nhất là trong khung nhìn sau trong Mediaqueries CSS3 của bạn - 320px (cảnh quan iPhone), 480 px (iPhone landscape), 600px (Android Tablets), 768px (iPad + ~ Galaxy Tab) và 1024px (iPad landscape và desktops).

 

Q9 - Làm thế nào để bắt đầu với thiết kế Web Responsive? Bất kỳ hướng dẫn tốt?

 

A9 - Đầu tiên, hãy đọc bài viết này của tôi và sau đó tìm hiểu các nguồn thông tin trên mạng.

Đây là nguồn tài nguyên trực tuyến để giúp bạn có thể bắt đầu.

 

Q10 - một số nhược điểm của việc sử dụng thiết kế Responsive là gì?

 

A10 - Thiết kế Responsive có thể thêm một số kilobyte thêm vào trang web của bạn khi họ sẽ phải tải về CSS và các tập tin JavaScript là nếu không cần thiết. Các vấn đề khác là xung quanh hình ảnh. Bạn không muốn để phục vụ hình ảnh có độ phân giải cao hơn trên trang web điện thoại di động của bạn, nhưng đó là khó khăn để đạt được trong thiết kế đáp ứng (trừ khi bạn nhờ đến một cách giải quyết khác phía máy chủ).