5 THÁCH THỨC KHI THIẾT KẾ GIAO DIỆN DI ĐỘNG CHO WEBSITE

 

Quay trở lại năm 2012, thiết kế responsive là việc sử dụng các truy vấn phương tiện CSS3 và tạo các điểm dừng ở các thiết bị truy câp khác nhay. Có một số kích thước thiết bị tiêu chuẩn và là một nhà thiết kế, bạn phải tạo ra thiết kế của mình để trông thật hoàn hảo trên các thiết bị tiêu chuẩn này. Chuyển nhanh đến năm 2018 và bạn phải tự hỏi liệu bạn có nên xem xét sử dụng các phương thức truy vấn này hay không.

Thiết bị di động chiếm khoảng 52% tổng lưu lượng truy cập internet trên toàn thế giới theo Statista. Theo con số đó, bạn nên tập trung hơn vào cách tiếp cận di động đầu tiên để xây dựng các ứng dụng responsive. Các thiết kế responsive hiện đại được xây dựng dựa trên Flexbox và Grid Layout, cùng với bố cục Nhiều cột. Mặc dù các thông số kỹ thuật này làm mất đi sự phức tạp trong việc tạo ra sự phát triển responsive, luôn có những thách thức cản trở bạn. Vì vậy, đây là 5 thách thức hàng đầu mà bạn có thể gặp phải và các giải pháp tốt nhất có thể để khắc phục chúng.

Làm cho hình ảnh và biểu tượng đáp ứng

Hình ảnh và biểu tượng là rất quan trọng cho bất kỳ ứng dụng. Hình ảnh cần được thu nhỏ lại tùy thuộc vào chiều rộng của thiết bị. Bạn cũng cần xem xét hiển thị trên các thiết bị của Apple để các chi tiết hình ảnh không bị mất trong khi thu nhỏ. Thiết kế responsive kém có xu hướng làm cho hình ảnh lớn hơn so với dự kiến ​​hoặc bị mờ - cả hai trường hợp mà chúng tôi muốn tránh. Một điều nữa mà các nhà thiết kế cần chú ý là hình ảnh phải được tối ưu hóa để người dùng có kết nối dữ liệu hạn chế không phải đợi lâu để tải hình ảnh đó.

Giải pháp

Một giải pháp cho hình ảnh responsive là sử dụng các thuộc tính CSS như chiều rộng tối đa để thu nhỏ chiều rộng hình ảnh. Đây là một ví dụ hoạt động.

<img src="[image link]" style='width:100%; max-width: 400px' border="0" alt="">

Đây là một trong những cách dễ nhất để thực hiện. Ngoài ra, bạn có thể sử dụng một thư viện như bootstrap hỗ trợ responsive hình ảnh bằng cách sử dụng .img-fluid với max-width: 100%; và height: auto;.

Có một số cách mới để thêm khả năng responsive cho hình ảnh. Chẳng hạn, bạn có thể sử dụng srcset và sizes thuộc tính cho   và thẻ . Đây là một bản demo về nó:

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width: auto;">
</picture>

Bạn có thể sử dụng thẻ hình ảnh để sử dụng nhiều hình ảnh nguồn và trình duyệt đưa ra lựa chọn về hình ảnh sẽ được hiển thị dựa trên kích thước thiết bị. Để biết thêm về srcset, tôi khuyên bạn nên đọc bài viết về thủ thuật CSS .

Hiển thị dữ liệu trên màn hình nhỏ hơn

Khi bạn có một lượng lớn dữ liệu cần được hiển thị lại cho người dùng, các nhà phát triển sử dụng các bảng. Các bảng thường có ý nghĩa trên một màn hình lớn hơn, nhưng nó không hoạt động tốt trên các thiết bị di động, đặc biệt là khi các bảng phức tạp. Để làm cho nội dung dễ đọc hơn, bạn sẽ muốn tránh các thanh cuộn ngang bất cứ nơi nào có thể.

Giải pháp

Các thư viện responsive có hỗ trợ các bảng có thể giúp bạn. Tuy nhiên, bảng sẽ có một thanh cuộn ngang mà bạn thường nên cố gắng tránh. Các phương pháp phổ biến khác bao gồm: bỏ các cột không cần thiết và giảm thiểu lượng dữ liệu ngang, xây dựng biểu đồ hình tròn nhỏ gọn thay vì bảng, vuốt / cuộn qua các cột trong khi giữ cột đầu tiên cố định, v.v.

Một cách khác là biến mỗi hàng thành một bảng riêng. Khi kích thước cửa sổ hẹp, bạn có thể sử dụng truy vấn @media để định dạng lại cấu trúc của bảng để biến mỗi hàng thành bảng riêng biệt mà bạn có thể cuộn qua theo chiều dọc.

Thêm khả năng đáp ứng cho bố cục chiều rộng cố định

Bố cục chiều rộng cố định đã từng là một điều trong quá khứ, nhưng do sự phụ thuộc vào điện thoại thông minh ngày càng tăng, nên việc chuyển đổi sang bố cục responsive  là rất quan trọng nếu bạn muốn giữ chân khách hàng của mình. Số liệu thống kê nói rằng 74% khách truy cập trên thiết bị di động của bạn sẽ rời khỏi ứng dụng của bạn nếu nó tối ưu giao diện responsive. Nhưng từ quan điểm của một nhà phát triển, đây cũng là một trong những điều khó khăn nhất để làm.

Giải pháp

Có nhiều lựa chọn ở đây tùy thuộc vào mức độ phức tạp của nhiệm vụ liên quan. Nếu đó là một trang web tĩnh, bạn nên xem xét một khung để thêm tính lưu loát cho bố cục chiều rộng cố định của bạn. Khung phổ biến như Bootstrap và Foundation giúp bạn chuyển đổi bố cục có chiều rộng cố định thành bố cục đáp ứng.

Mặt khác, nếu ứng dụng có giao diện người dùng phức tạp, nhiều khả năng ứng dụng sẽ dễ bị hỏng và sẽ không dễ dàng phù hợp với thiết kế responsive. Nếu đó là trường hợp của bạn, bạn nên xem xét rời khỏi phiên bản máy tính để bàn. Thay vào đó, hãy tạo một bố cục mới từ đầu cho màn hình nhỏ hơn. Nếu khách hàng của bạn thích nó, bạn có thể gặp may mắn trong việc thuyết phục anh ấy / cô ấy cải tiến phiên bản máy tính để bàn.

Xây dựng menu điều hướng phức tạp

Menu điều hướng là một phần không thể thiếu của UI hiện đại. Các menu điều hướng có nghĩa là làm cho việc điều hướng của người dùng dễ dàng hơn bằng cách có tất cả các liên kết có liên quan tại một nơi. Trên phiên bản máy tính để bàn, menu thả xuống nhiều lớp hoạt động. Nhưng để làm cho nó phản hồi, bạn phải dùng đến ba thanh ở góc trên cùng bên trái của trang.

Giải pháp

Thư viện Responsive tự động tạo các menu điều hướng có thể chứa tên thương hiệu, liên kết điều hướng và thậm chí cả danh sách thả xuống. Theo tôi, bạn nên giữ thanh điều hướng khá đơn giản và thẩm mỹ.

Nếu bạn cần liệt kê một số danh mục nhất định trong menu thả xuống, hãy tạo một trang dành riêng cho điều đó. Tóm tắt tất cả các chi tiết không cần thiết từ thanh điều hướng.

Hỗ trợ các trình duyệt cũ hơn

Các phiên bản cũ hơn của trình duyệt là một nguyên nhân gây đau đầu cho nhà phát triển. Chẳng hạn, Internet Explorer phiên bản 8 trở xuống không nhận ra các truy vấn phương tiện và hầu hết các tính năng HTML5 / CSS3 khác. Hỗ trợ các trình duyệt này trong khi xây dựng bố cục đáp ứng đồng nghĩa với việc giết thời gian và sự sáng tạo của nhà phát triển.

Hỗ trợ các phiên bản cũ hơn của các trình duyệt phổ biến khác như Firefox và Chrome cũng là một vấn đề khi các trình duyệt không hỗ trợ thông số kỹ thuật mà bạn sẽ sử dụng.

Giải pháp

Đó là năm 2018 và bạn không cần hỗ trợ bất cứ điều gì trong IE11 trừ khi bạn có một lượng người dùng khá lớn sử dụng chúng. Có thể là một ý tưởng tốt để xem tỷ lệ sử dụng trình duyệt của từng phiên bản trình duyệt riêng lẻ trên StatsCorer, Đây có thể là điểm khởi đầu tốt để quyết định xem bạn có muốn hỗ trợ một trình duyệt cụ thể hay không.

Ngay cả khi bạn đưa IE ra khỏi hình ảnh, có một vài thách thức được đặt ra bởi các phiên bản cũ không hỗ trợ thông số kỹ thuật mới. Trong trường hợp đó, bạn nên xem xét các tiền tố dành riêng cho trình duyệt.

Phần kết luận

Phát triển bố cục đáp ứng không phải là thách thức của riêng nó, nhưng vẫn còn những câu hỏi chưa được trả lời. Trong bài viết này, chúng tôi đã đề cập đến một số thách thức phổ biến mà bạn có thể gặp phải khi làm việc với thiết kế đáp ứng.