Thiết kế web Reponsive: Nó có tải xuống cùng một lượng dữ liệu trên mọi thiết bị không?

Tôi muốn thiết kế lại blog và trang web của mình trên wordpress để phù hợp với người dùng di động và người dùng máy tính bảng ngày càng tăng.

Tôi cũng đang nghe về thiết kế đáp ứng. Tôi muốn biết một thiết kế web đáp ứng có tải cùng một lượng dữ liệu trên màn hình máy tính không?

Tôi cũng đã thấy nhiều công ty tiếp thị lớn đã không đầu tư vào thiết kế web đáp ứng và vẫn đang tìm kiếm một trang web riêng được tối ưu hóa cho thiết bị di động. Vì vậy, tôi nên làm gì, một thiết kế web đáp ứng hoặc một trang web riêng được tối ưu hóa cho thiết bị di động?

Theo định nghĩa của Ethan Marcotte trong ALA 306 , thuật ngữ "thiết kế đáp ứng" dùng để chỉ kỹ thuật áp dụng các quy tắc kiểu khác nhau cho HTML của bạn tùy thuộc vào kích thước màn hình của người dùng. Để giải thích thêm về thiết kế đáp ứng, đây là một bộ bài tuyệt vời của Mike Bollinger .

Trong mô hình này, bạn gửi cùng một HTML chính xác cho khách hàng cho dù màn hình nhỏ hay lớn. Tuy nhiên, nếu tài nguyên (hình ảnh chủ yếu) được tham chiếu trong CSS không được hiển thị cho các độ phân giải màn hình nhất định, chúng có thể không được tải xuống. Chẳng hạn, đối với màn hình lớn, bạn có thể sử dụng high-res.pngCSS của mình và cho màn hình nhỏ low-res.png- máy khách web có thể chọn chỉ tải xuống hình ảnh theo kiểu hoạt động. (Xem bình luận của @ DBUK cho ít nhất một khách hàng quan trọng hiện đang tải xuống cả hai! Hy vọng khách hàng sẽ thông minh!)

Kỹ thuật này có thể có ý nghĩa trong trường hợp của bạn hoặc có thể có ý nghĩa hơn để tạo một trang web di động riêng biệt.

Các thiết bị khác nhau có thể ngụ ý bối cảnh sử dụng khác nhau. Điện thoại di động luôn ở trong túi bạn - người dùng sẽ sử dụng trang web của bạn như thế nào trong hàng tạp hóa? Bạn có muốn gửi cho họ toàn bộ trang web? Hay chỉ là một vài tính năng? Hoặc các tính năng hoàn toàn khác nhau? Điều gì sẽ xảy ra nếu họ đang ở trên ghế với TV trên tình cờ lướt qua iPad của họ?

Các thiết bị di động có xu hướng xử lý chậm hơn, ít bộ nhớ hơn và tốc độ kết nối chậm hơn (tất cả những "sự thật" đó trở nên ít đúng hơn mỗi năm, btw) - bạn có thể muốn gửi một trang web di động riêng ra một cách nghiêm ngặt vì lý do hiệu suất.

Tôi sẽ mạo hiểm rằng, nói chung, trang web càng tĩnh, văn bản và hướng nội dung (tức là một blog), cơ hội tốt hơn là sử dụng HTML hiện có và thiết kế đáp ứng. Trang web càng tương tác, đa phương tiện và do người dùng điều khiển (tức là một cửa hàng), bạn càng có cơ hội điều chỉnh các trang web riêng biệt cho các loại thiết bị riêng lẻ.

Ngoài ra, đừng quên rằng trong thời đại ngày nay, cũng có câu hỏi liệu trải nghiệm di động nên là một trang web hay một ứng dụng .

Thiết kế đáp ứng không nên tải xuống cùng một lượng dữ liệu trên mọi thiết bị vì không phải tất cả các thiết bị đều có cùng yêu cầu đa phương tiện. Các trang web di động nên sử dụng hình ảnh lo-res và ít đồ họa hơn so với các trang web cho máy tính để bàn / máy tính xách tay / máy tính bảng. Và nếu bạn muốn kết hợp các trang web di động và thông thường của mình, thì bạn cần phải tính đến điều này, nếu không thì trang web của bạn không phản hồi lắm phải không?

Các peteorpeter slidedeck liên kết để đề cập đến tập lệnh Responsive Images của Filament Group, cho phép bạn cung cấp hình ảnh có kích thước phù hợp cho thiết bị phù hợp bằng JavaScript, lý tưởng mà không cần tải xuống nhiều hơn một phiên bản. Đối với tài sản hình ảnh bố cục, điều này thường được thực hiện thông qua các truy vấn phương tiện chỉ định các kiểu khác nhau cho các độ phân giải màn hình khác nhau.

Tôi nghĩ rằng rất nhiều công ty sẽ mất nhiều thời gian để cập nhật trang web của họ, chết tiệt, vẫn còn một số sử dụng bảng. Responsive, và cách tiếp cận đầu tiên trên thiết bị di động, chắc chắn là từ thông dụng của thời điểm này.

Như poster trên đã đề cập, bạn nên sử dụng hình ảnh lo-res cho điện thoại di động / thiết bị có độ phân giải thấp hơn. Truy vấn phương tiện sẽ giúp bạn nhắm mục tiêu tất cả các độ phân giải thấp hơn. Tuy nhiên, tôi nghe nói rằng safari di động sẽ bỏ qua màn hình: không có quy tắc nào và cũng tải xuống các phiên bản máy tính để bàn của hình ảnh. Ngoài ra, nếu bạn đi xuống tuyến hình ảnh phản hồi, nó sẽ gây áp lực lớn cho bộ xử lý di động - 3byte trên 1 pixel ... tôi nghĩ vậy. Có rất nhiều giải pháp để có được xung quanh nội dung bổ sung đang được tải xuống - một số khá khó khăn - https://docs.google.com.vn/s Lansheet / ccc?

Để biết một số thông tin về những nhược điểm của thiết kế web đáp ứng, hãy xem http://www.webdesignshock.com/responsive-design-probols/ . Đừng để bài viết trên blog khiến bạn thất vọng. A Book Apart đã viết một cuốn sách tuyệt vời về chủ đề này - http://www.abookapart.com/products/responsive-web-design . Nó chắc chắn là giá trị lấy phiên bản sách điện tử.