Hầu hết các trang web sử dụng responsive thiết kế đang sử dụng nó không chính xác, dẫn đến các vấn đề. Cách tiếp cận chung để responsive thiết kế là một công việc lười biếng và nếu bạn áp dụng cách tiếp cận đó, một số responsive các trang web sẽ hoạt động hoàn toàn hoàn hảo và nhiều trang trong số đó thì không. Đối với những người làm việc hoàn hảo, có lẽ đó là vấn đề may mắn.
Khái niệm của responsive thiết kế rất đơn giản, nhưng chính sự đơn giản của nó lại là điều khiến người ta dễ mắc sai lầm. Các nhà thiết kế có nhiều năm kinh nghiệm đã quen với việc thiết kế cho desktopvà vì vậy họ thường lập kế hoạch thiết kế dựa trên desktop bố trí.
Desktop bố cục khác với bố cục trên máy tính bảng và bố cục trên thiết bị di động vì chúng thường có nhiều cột, thường bao gồm một lượng lớn khoảng trắng và mọi thứ chỉ là "lớn", vì muốn có một từ hay hơn. Nếu như responsive kỹ thuật thiết kế được sử dụng, bố cục nhiều cột này được cho là sẽ chia thành một cột duy nhất.
Nếu đó là tất cả của bạn responsive thiết kế thực sự hoạt động khi nó được xem trên thiết bị di động, bạn có thể gặp vấn đề. Mức độ của vấn đề phụ thuộc vào thái độ của bạn, nhưng những nhà thiết kế giỏi quan tâm đến trải nghiệm người dùng tốt. Họ thậm chí còn quan tâm nhiều hơn đến UX xấu. Nếu trang web của bạn có UX xấu và bạn muốn trở thành một nhà thiết kế giỏi thì bạn cần phải sửa nó.
Vấn đề khi thu gọn bố cục nhiều cột thành một cột duy nhất là nó không hoạt động theo tỷ lệ. Nếu bạn phải thu nhỏ thứ gì đó theo chiều ngang và không thực hiện bất kỳ thay đổi nào khác thì rõ ràng nó sẽ mở rộng theo chiều dọc.
Đổ nước từ một chiếc ly ngắn mập vào một chiếc ly cao mỏng, nước sẽ có hình dạng của chiếc ly cao mỏng, trong khi thể tích nước vẫn giữ nguyên. Điều mà các nhà thiết kế cần hiểu là với một trang web, chúng ta cần có khối lượng để thay đổi. Thông thường, không nên thay đổi hình dạng nhưng vẫn giữ nguyên nội dung chính xác giống nhau. Một cái gì đó phải cho đi.
Ai đó thực sự đã đạt được danh hiệu nhà thiết kế sẽ hiểu rằng đây là một vấn đề cần giải quyết và điều mà các nhà thiết kế thực sự làm là tìm ra giải pháp cho vấn đề đó. Vì vậy, công việc hoàn hảo là bạn phải tìm ra cách tốt nhất để truyền tải nội dung cốt lõi của trang web mà không biến trải nghiệm người dùng thành một cuộc cuộn trang khó chịu. Dưới đây là một số điều đáng cân nhắc khi chia nhỏ một desktop thiết kế thành thiết kế di động:
1. “Mobile First” thật ngu ngốc
Xin lỗi, nhưng đúng vậy. Mọi người đều đang lặp lại điều này, nhưng xét về mặt khái niệm, nó không hữu ích lắm vì nếu bạn thực sự thiết kế “di động trước tiên” thì sẽ là một cơn ác mộng khi cố gắng mở rộng quy mô của nó lên mức tối đa. desktop thiết kế trừ khi bạn đang gắn bó với bố cục một cột hoàn toàn.
Cách tiếp cận tốt nhất là thiết kế vật lý ít nhất ba (và tối đa 11) bố cục khác nhau. Những cái tối thiểu bạn có thể xem xét bao gồm:
- Desktop
- Cảnh Quan Di Động
- Chân dung di động
Nếu bạn muốn kỹ lưỡng hơn một chút, bạn cũng nên xem xét:
- Máy tính bảng phong cảnh
- Máy tính bảng chân dung
Và danh sách đầy đủ, nếu bạn muốn hoàn toàn đầy đủ sẽ là:
- Lớn Desktop
- Bình thường Desktop
- Máy tính bảng cảnh quan lớn
- Máy tính bảng chân dung lớn
- Máy tính bảng phong cảnh nhỏ
- Máy tính bảng chân dung nhỏ
- Di động cảnh quan lớn
- Chân dung lớn trên thiết bị di động
- Cảnh quan nhỏ di động
- Chân dung nhỏ di động
- Nhỏ/Có thể đeo được
Với rất nhiều khả năng khác nhau, rõ ràng là tại sao cách tiếp cận “một kích thước phù hợp với tất cả” lười biếng lại hấp dẫn đến vậy, nhưng cũng rõ ràng là tại sao có rất nhiều cách để phá hỏng nó.
2. Chế ngự phần chân trang dài dòng đó
Sản phẩm desktop thiết kế bao gồm một trong những chân trang khổng lồ với vô số liên kết nội bộ? Tuyệt vời, điều đó có lẽ sẽ rất hữu ích trên desktop. Trên thiết bị di động, nó trông thật lố bịch và không chỉ gây khó chịu khi chạm vào. Bạn có thể thiết kế chân trang hoàn toàn khác nhau cho từng điểm dừng của thiết bị. Chỉ cần cung cấp các liên kết chân trang đó trong hộp thoại theo chế độ và mọi người đều thắng.
3. Chấp nhận một số lỗi nhỏ trên các thiết bị ít người biết đến
Nếu một thiết bị cụ thể không phổ biến, thì cũng không quá tệ nếu có một vài điểm kỳ quặc trong thiết kế chỉ xuất hiện khi xem trên thiết bị đó. Thiết bị càng phổ biến thì bạn càng phải nỗ lực loại bỏ mọi điểm kỳ quặc xuất hiện trên thiết bị đó.
4. Bạn có thể ẩn nội dung không đóng góp vào thông điệp cốt lõi
Phần quan trọng nhất của một trang web là thông điệp cốt lõi. Đúng, trên một số trang web, phần quan trọng nhất là quảng cáo và chúng chỉ tồn tại để phân phối quảng cáo đó, nhưng nếu bạn phải chọn giữa việc hiển thị thông điệp cốt lõi hoặc hiển thị quảng cáo, hãy chọn thông điệp. Google có nhiều khả năng coi bạn là persona non grata nếu bạn ẩn nội dung cốt lõi và sau đó hiển thị một loạt quảng cáo. Đó là vì nội dung cốt lõi đó là những gì Google lập chỉ mục cho bạn và khi nội dung đó không được hiển thị, Google sẽ coi đó là nội dung lừa đảo.
Ngoài ra, những thứ như hình ảnh chỉ mang tính chất trang trí hoặc thẩm mỹ nhưng không đóng góp đáng kể vào thông điệp cốt lõi, đều có thể bị giảm bớt hoặc che giấu hoàn toàn.
Một số người từng cho rằng ẩn nội dung là “trừng phạt” người dùng di động, nhưng đây là một quan niệm hơi vô lý. Thực tế là bạn đang ẩn nội dung vì nó ở đó để nâng cao desktop kinh nghiệm, nhưng không đóng góp đủ vào thông điệp cốt lõi của trang web đến mức cần thiết
5. Bạn có thể sử dụng hình nền thay thế
Gần đây, tôi được giao một nhiệm vụ buồn cười, trong đó chủ sở hữu trang web đã trả tiền cho một nền tảng cụ thể và muốn tất cả nội dung được điều chỉnh để phù hợp với nền tảng đó. Các mục dấu đầu dòng phải có số lượng ký tự rất chính xác, tổng số dòng phải chính xác, v.v.
Đây chắc chắn là một cách làm không tốt trong thiết kế web, vì bạn nên không bao giờ thiết kế nội dung để phù hợp với một bố cục. Cách bố trí nên luôn luôn được thiết kế để chứa nội dung. Nếu vì lý do nào đó mà bố cục không thể chứa được nội dung thì bố cục đó phải được thiết kế lại chứ không phải nội dung. Hoàn toàn có thể sử dụng các hình nền khác nhau cho các thiết bị khác nhau. Bạn là một nhà thiết kế. Sử dụng trí tưởng tượng của bạn.
Nội dung là huyết mạch của một trang web và việc sửa đổi hoặc hạn chế nội dung đó dựa trên những hạn chế của bố cục là một dấu hiệu rõ ràng về sự nghiệp dư của chủ sở hữu trang web và là dấu hiệu cho thấy bố cục ban đầu được thiết kế kém. địa điểm. Hãy tuân thủ các nguyên tắc của bạn, bởi vì khách hàng đó sẽ gặp rắc rối nếu bạn đồng ý.
Khách hàng luôn đúng, trừ khi khách hàng đó là khách hàng thiết kế web. Khách hàng hiếm khi biết điều gì là tốt nhất cho họ và điều quan trọng là bạn phải khẳng định mình là một nhà thiết kế web biết cách mang lại kết quả phù hợp cho khách hàng. Khácwise bạn có nguy cơ tạo ra một trang web khác gớm ghiếc.
6. Kiểm soát thứ tự thu gọn theo cách thủ công (hoặc tránh tham chiếu không gian trong nội dung)
Đây là một vấn đề phức tạp. Thứ tự thu gọn của một trang web phụ thuộc vào thứ tự các div được xếp chồng lên nhau. Bạn cần xếp các div của mình theo đúng thứ tự để chúng sẽ thu gọn theo đúng thứ tự.
Một trong những vấn đề xảy ra với các công cụ xây dựng trang web WYSIWYG kéo và thả là bạn thường không thể ra lệnh cho các div được xếp chồng lên nhau theo thứ tự nào và trong những trường hợp rất hiếm khi bạn có thể làm điều đó, công việc khó khăn của bạn luôn bị hoàn tác bạn thực hiện chỉnh sửa nhỏ nhất và bạn sẽ phải quay lại và hack lại mã nguồn.
Nếu bạn không kiểm soát thứ tự thu gọn, bức ảnh này giải thích rõ ràng những gì có thể sai. Ngoài ra, bạn nên tránh tạo các tham chiếu không gian (như “trong cột bên trái”) vì trên thiết bị di động, bất kỳ thứ gì ở bên trái hoặc bên phải đều có thể được chuyển lên trên hoặc dưới, thêm nếu bạn khiến người đọc nghĩ rằng việc cuộn xuống để xem là đủ quan trọng thì họ sẽ phải cuộn lại lần nữa và điều đó không hay chút nào.
7. Bạn có thể cần các cỡ chữ khác nhau cho các bố cục khác nhau
Thật dễ dàng để kiểm soát kích thước phông chữ bằng CSS và bạn có thể đặt các kích thước phông chữ khác nhau và thậm chí các kiểu phông chữ khác nhau (nếu chúng trông đẹp hơn) cho các kích thước hiển thị cụ thể. Bạn có thể tìm thấy kích thước hiển thị bằng các truy vấn phương tiện CSS, sau đó bạn sửa đổi kích thước phông chữ hoặc kiểu phông chữ thành các giá trị hiển thị nội dung để có lợi thế tối đa trên loại thiết bị bạn đang nhắm mục tiêu.
8. Tốt nhất nên sử dụng responsive hình ảnh
Tất cả các hình ảnh phải được responsive bất cứ khi nào có thể. Điều này dẫn đến đôi khi chi tiết của hình ảnh có thể bị mất nếu thu nhỏ quá nhiều. Giải pháp cho vấn đề này là làm cho hình ảnh có thể nhấp vào được để người dùng có thể xem phiên bản phóng to của hình ảnh tách biệt với nội dung. Cách thông thường để thực hiện việc này là thông qua hộp thoại phương thức.
hình ảnh tiêu đề lịch sự của
Ưu tiên thiết bị di động chỉ có nghĩa là trong cơ sở mã, css "mặc định" dành cho thiết bị di động và bạn xây dựng các thay đổi cho phạm vi rộng hơn formats từ đó. Tôi thực sự không hiểu điểm đầu tiên của bạn