Câu hỏi thiết kế web đáp ứng

Question

Tôi đã đọc về thiết kế web đáp ứng (RWD) và cố gắng bọc não của tôi xung quanh khái niệm này.

Thiết kế web đáp ứng thực sự là cách chúng ta nên đi để phát triển di động? Tôi thích ý tưởng có 1 trang web nên hoạt động trên nhiều thiết bị khác nhau như máy tính để bàn, máy tính xách tay, máy tính bảng và điện thoại di động.

Trên máy tính để bàn, tôi có màn hình rộng, vì vậy trang web của tôi hoạt động như thiết kế được thiết kế. Nó có một cột với hầu hết nội dung chính của tôi và cột trái hoặc phải ít rộng (tùy thuộc vào vị trí của bạn trên trang web) cho mục đích điều hướng. Làm thế nào để RWD xác định các cột nào được xếp chồng lên nhau trên các cột nào? Nó bắt đầu từ bên trái của màn hình, tải đầu tiên nội dung của cột bên trái và sau đó các nội dung của cột bên phải? Có thể thả một cột để nó không hiển thị trên các thiết bị nhất định không? RWD có thể xử lý các nội dung như thế này không? Thiết bị càng rộng, càng có nhiều nội dung bạn muốn hiển thị và bạn càng muốn có ít nội dung cần thiết hơn để hiển thị.

RWD xử lý nhiều điện thoại rẻ hơn như thế nào? Điện thoại không thực sự là điện thoại thông minh? Điều gì sẽ xảy ra nếu một chiếc điện thoại không thể xử lý RWD, sau đó là gì?

Làm cách nào để bạn nhận được lưới dữ liệu của mình với 20 cột để hiển thị trên điện thoại di động không có màn hình rộng? Và phân trang?

Đó là những thứ như thế này mà tôi không biết liệu RWD có dành cho tôi không? Tôi thích các trang web gọn gàng thay vì có tất cả mọi thứ đè bẹp chỉ để có được các nội dung vào nội trú của màn hình điện thoại.

Bên cạnh Twitter bootstrap, bất kỳ khung RWD phong nha nào khác cần xem xét? Tôi đã nghe nói về một vài khuôn khổ phong nha.

Answer 1

Đây thực sự là một câu hỏi lớn. Tóm lại, nó thường hoạt động như sau:

1. Tạo trang web di động với tất cả nội dung và tính năng.
2. Sử dụng truy vấn phương tiện/javascript để định dạng lại nội dung khi nó trở nên rộng hơn, trôi chảy hoặc với điểm ngắt hoặc cả hai.
3. Thêm bất kỳ tính năng mà chỉ có trên phiên bản máy tính để bàn của bạn (lý tưởng sẽ không có bất kỳ)

Bạn có thể sử dụng ajax để tải thêm nội dung vv nếu cần thiết, mặc dù thông thường bạn muốn được có nội dung tương tự (tại sao 30-40% khách truy cập của bạn muốn nội dung ẩn với họ?)

Bạn thường tập trung ở đây trên Điện thoại thông minh chứ không phải điện thoại cũ không có trình duyệt web hiện đại.

Để biết chi tiết cụ thể, ví dụ: lưới với 20 cột, thật khó.

Có lẽ lật bảng để nó theo cách khác, và có 20 hàng, hiển thị nó như một đồ thị, làm cho nó trượt sang trái và phải, hoặc chỉ xem xét lý do tại sao đó là ở đó - đó là một điều bất thường để có trên một trang web.

Phân trang thường được thực hiện dưới dạng cuộn vô hạn - ví dụ: Ứng dụng Mail của Apple.

Theo như khuôn khổ đi, không có bất kỳ điều đó sẽ giải quyết mọi thứ cho bạn. Các khía cạnh lưới của Zurb's Foundation và Bootstrap là hữu ích, nhưng nó sẽ không làm cho tất cả mọi thứ suddently làm việc.

Answer 2

Vâng, đó là một kỹ thuật và một bộ sưu tập các thực hành tốt nhất, sau đó một cái gì đó mà tích cực một cái gì đó cho bạn.

Tạo thiết kế đáp ứng (Web) có nghĩa là cung cấp cho khách truy cập/người dùng trải nghiệm sử dụng tốt nhất cho mọi thiết bị được sử dụng.

Nhưng cách bạn phải thiết kế nội dung (trang web, ứng dụng web, ứng dụng) cùng với kích thước màn hình và thiết bị đầu vào để bạn có trải nghiệm sử dụng tốt nhất là thứ bạn cần tìm ra cho trường hợp sử dụng đặc biệt của mình.

Có các kỹ thuật cách bạn có thể tìm ra yếu tố nào quan trọng đối với người dùng của bạn và cách bạn hiển thị chúng, nhưng không có quy tắc chung nào cần phải ở vị trí nào. (Các quy tắc luôn đúng, nhưng cũng có một số vấn đề về hương vị và thay đổi theo thời gian)

Vậy làm cách nào để thực hiện Thiết kế đáp ứng? Đầu tiên bạn phải tìm hiểu yếu tố nào của nội dung là quan trọng và nếu tầm quan trọng của các yếu tố này khác với trường hợp sử dụng (bạn đã bao giờ nghĩ rằng người dùng máy tính để bàn có thể mong đợi các thông tin khác từ cùng một trang/ứng dụng) sau đó người dùng di động)

Nếu bạn biết yếu tố nào là yếu tố quan trọng bạn có thể nghĩ đến cách trình bày chúng. Phần nhập khẩu ở đây là để chắc chắn kích thước màn hình, nhưng cũng là những gì thiết bị đầu vào được sử dụng, bạn không muốn hiển thị một điện thoại sử dụng một danh sách nhỏ hoặc các nút điều hướng nhỏ.

Và ở đó chúng tôi đã có một vấn đề khác. Các bảng được sử dụng với bút stylus thì sao? Điều gì về máy tính xách tay có màn hình cảm ứng? Làm thế nào để đưa họ vào tài khoản? Đây cũng là điều gì đó tùy thuộc vào bạn, bởi vì cách thiết bị được sử dụng thay đổi theo thời gian.

Để chắc chắn có các khung công tác khác nhau giúp bạn hoặc tự động thực hiện nhiều việc. Nhưng bạn không nên mong đợi rằng họ sẽ tạo ra trải nghiệm người dùng tốt nhất. Có khung làm việc, cho phép nói mẫu cho trường hợp sử dụng tình huống phổ biến và chúng thực sự sẽ tự động thay đổi menu của bạn và xác định cách hiển thị nó.

Nhưng Thiết kế đáp ứng không có nghĩa là một cái gì đó tự động xác định những gì cần phải được thay đổi cho kích thước màn hình nào. Nhưng bạn xác định các phần khác nhau sẽ trông như thế nào và hoạt động trên các trường hợp sử dụng khác nhau (bằng cách tự làm hoặc sử dụng thư viện cố gắng làm tốt nhất cho bạn)

Answer 3

Để "xử lý" điện thoại rẻ hơn, không thông minh điện thoại, bạn có thể sử dụng @media handheld and (orientation: portrait) { ... } Nó sẽ là trực quan nếu điện thoại thông minh, đó là "cầm tay" sẽ trở lại đúng khi kiểm tra "cầm tay" nhưng họ không. Vì vậy, nếu bạn muốn tối ưu hóa cho các thiết bị cầm tay cũ, bạn có thể truyền thông cầm tay.

Cũng lưu ý rằng @media screen and ... hoặc một số truy vấn như vậy sẽ không nhắm mục tiêu cũ hơn, điện thoại thông minh vì chúng không phải là "màn hình phương tiện".

Câu trả lời này là một trong các câu hỏi khác nhau của bạn. Nhưng một tỷ lệ rất nhỏ người dùng đang sử dụng loại thiết bị này, ít nhất hiện nay. Tùy thuộc vào nhân khẩu học của bạn, bạn có lẽ là tốt nhất để bỏ qua những điện thoại cũ.

Answer 4

Giải pháp thiết kế web đáp ứng (RWD) trong trình khởi động. Nếu bạn muốn 20 hệ thống lưới trong trang web của bạn, bạn có thể sử dụng tùy chỉnh bootstrap CSS bằng cách sử dụng liên kết này: http://getbootstrap.com/customize/. Bằng cách này, bạn chuyển đổi trang web trong chế độ xem trên thiết bị di động. Theo quan điểm của tôi, đây là cách tốt nhất để giải quyết vấn đề của bạn.