HTML có đáp ứng hay không?

Thị phần cho trình duyệt trên thiết bị di động và máy tính để bàn là khoảng 50/50. Đối với các nhà thiết kế, điều này có nghĩa là thiết kế đáp ứng quan trọng hơn bao giờ hết, vì người dùng mong đợi trải nghiệm liền mạch trên tất cả các nền tảng và kích thước màn hình

Qua

Daniel Schwarz

Daniel là một nhà thiết kế và nhà phát triển theo nền tảng, một tác giả và cộng tác viên với Adobe và InVision

CHIA SẺ

CHIA SẺ

Các trang web đáp ứng là các trang web thích ứng với mọi kích thước và độ phân giải màn hình, không chỉ trên máy tính để bàn mà còn trên thiết bị di động, máy tính bảng và đôi khi là cả TV

Theo Statista, lưu lượng di động chịu trách nhiệm cho 52. 64% tổng lưu lượng truy cập toàn cầu trong năm 2017, nghĩa là một trang web không được tối ưu hóa tốt cho thiết bị di động sẽ mất khoảng một nửa lưu lượng truy cập. Đến cuối năm 2018, dự kiến ​​tỷ lệ lưu lượng truy cập toàn cầu dành cho thiết bị di động sẽ tăng lên 79%, đây là mức tăng vượt trội

Các doanh nghiệp không có trang web dành cho thiết bị di động đang bị tụt lại phía sau với tốc độ đáng báo động, bởi vì cứ 10 khách truy cập thì có 8 người sẽ ngừng tương tác với một trang web không hiển thị tốt trên thiết bị của họ. Thay vào đó, quá dễ dàng để người dùng nhấn nút quay lại và thử một doanh nghiệp đối thủ và Google thậm chí còn xếp hạng các trang web không phản hồi thấp hơn trong tìm kiếm của họ

Bạn có thể thực hiện bài kiểm tra thân thiện với thiết bị di động của Google tại đây

Điều này có nghĩa là thiết bị di động quan trọng hơn máy tính để bàn không? . 83% người dùng di động nói rằng họ có thể tiếp tục trải nghiệm trên máy tính để bàn nếu muốn

Hãy xem phiên bản eBay được tối ưu hóa cho thiết bị di động này so với. nó sẽ trông như thế nào nếu nó không được tối ưu hóa cho thiết bị di động. Bạn thậm chí sẽ xem xét phiên bản không được tối ưu hóa?

Trình duyệt web nào phổ biến hiện nay?

Thiết kế web đáp ứng là cung cấp trải nghiệm liền mạch trên mọi thiết bị và vì các trình duyệt web khác nhau hiển thị các trang web theo những cách khác nhau nên các trang web phải được kiểm tra để đảm bảo rằng chúng tương thích với nhiều trình duyệt web trên thiết bị di động và máy tính để bàn

Mặc dù việc tạo quy mô trang web theo các điểm ngắt phản hồi chính xác chủ yếu là trách nhiệm của nhà phát triển web, nhưng chính nhà thiết kế web quyết định chính xác cách trang web phản hồi sẽ thích ứng với các kích thước màn hình khác nhau để tạo trải nghiệm người dùng tối ưu

Đây là bảng phân tích thị phần trình duyệt web trên toàn thế giới dành cho thiết bị di động và máy tính để bàn

• Trình duyệt Chrome. 55. 04%
• Cuộc đi săn. 14. 86%
• trình duyệt UC. số 8. 69%
• firefox. 5. 72%
• Ô-pê-ra. 4. 03%
• trình duyệt web IE. 3. 35%

Thiết kế đáp ứng không chỉ là “làm cho mọi thứ phù hợp”—mà còn là thích ứng với khả năng của phần cứng thiết bị và trình duyệt web cũng như độ phân giải của thiết bị. Một ví dụ về điều này có thể là, trong khi Google Chrome hỗ trợ thuộc tính CSS overscroll-behavior: (xác định điều gì sẽ xảy ra khi người dùng cuộn quá mạnh về phía mép của chế độ xem), thì đó là

Thực tiễn tốt nhất về thiết kế đáp ứng

loại bỏ ma sát

Như đã đề cập trước đó, cách tiếp cận ưu tiên thiết bị di động đối với thiết kế web đáp ứng sẽ giúp các nhà thiết kế đánh giá những gì thực sự cần thiết để người dùng đạt được mục tiêu chính của họ

Khi chúng tôi xây dựng phiên bản máy tính bảng (và sau này là phiên bản máy tính để bàn), chúng tôi có thể bắt đầu nghĩ về các mục tiêu phụ và các tương tác vi mô, luồng người dùng và CTA (kêu gọi hành động) giúp đạt được các mục tiêu người dùng đó. Điều quan trọng hơn là chúng tôi tập trung vào các mục tiêu chính của người dùng trước tiên và loại bỏ mọi xung đột không cần thiết không hỗ trợ mục tiêu chính và mục tiêu phụ

Mục tiêu chính có thể là mua sản phẩm, trong khi mục tiêu phụ có thể là đăng ký nhận bản tin (có thể dẫn đến mua hàng sau này)

Đây là một ví dụ tuyệt vời về việc loại bỏ ma sát. Vì giao diện người dùng trên thiết bị di động thường khó điều hướng hơn nên tốt nhất bạn nên chuyển sang thanh toán một trang cho cửa hàng Thương mại điện tử trên thiết bị di động và chỉ bật tính năng thanh toán nhiều bước cho cửa hàng Thương mại điện tử trên máy tính để bàn

Thiết kế cho ngón tay cái

Thiết kế web đáp ứng phức tạp theo nghĩa là người dùng sẽ tương tác với trang web trên máy tính để bàn thông qua các lần nhấp nhưng phiên bản di động thông qua các lần nhấn và vuốt. Có sự khác biệt về thể chất là tốt. Người dùng máy tính để bàn thường có máy tính trên bề mặt, trong khi người dùng di động cầm thiết bị của họ trên tay. Những khác biệt này thay đổi đáng kể cách các nhà thiết kế giao diện người dùng di động thiết kế các mục tiêu nhấn và các yếu tố giao diện người dùng quan trọng khác mà người dùng tương tác

Hãy xem xét một số ví dụ

• Mọi người thường mong đợi điều hướng màn hình chính ở trên cùng; . Ngón tay cái không đạt đến đỉnh một cách thoải mái
• Các yếu tố tương tác khác cũng phải dễ tiếp cận. Điều này có nghĩa là giữ chúng ở giữa màn hình vì ngón tay cái sẽ khó tiếp cận các cạnh và góc của màn hình thiết bị hơn
• Để chúng có thể được khai thác một cách dễ dàng, các liên kết và CTA quan trọng phải có chiều cao ít nhất là 44px (các mục tiêu khai thác nhỏ hơn sẽ không tốt cho khả năng sử dụng)

đề nghị đọc. Hướng dẫn cơ bản về khả năng sử dụng di động

Tận dụng phần cứng gốc của thiết bị di động

Phần cứng di động (như máy ảnh của thiết bị hoặc dịch vụ GPS) không dành riêng cho các ứng dụng gốc và như đã đề cập trước đó, thiết kế web đáp ứng không chỉ là “làm cho mọi thứ phù hợp. ” Đó cũng là về việc thích ứng với khả năng của thiết bị. Trong trường hợp thiết kế web di động, vì thiết bị di động có camera dễ sử dụng, nên một số tương tác vi mô—chẳng hạn như nhập dữ liệu—thực sự dễ dàng hơn trên màn hình nhỏ hơn miễn là các trang web đang tận dụng lợi thế của phần cứng gốc có sẵn

Hãy xem xét một số ví dụ

• Quét thẻ tín dụng/nạp tiền (vì các biểu mẫu thường phức tạp trên thiết bị di động)
• Chia sẻ ảnh trên mạng xã hội vì phương tiện đã có trên thiết bị của bạn
• Xác thực hai yếu tố (vì bạn đã sử dụng thiết bị di động của mình)
• Kiểm tra nhanh cổ phiếu/phân tích (vì ứng dụng di động đơn giản hóa thông tin)
• Thực hiện tìm kiếm trên web bằng giọng nói (vì rảnh tay dễ hơn gõ)

Làm cho bố cục linh hoạt/thích ứng theo mặc định

Không phải mọi người dùng sẽ tối đa hóa trình duyệt máy tính để bàn của họ. Điều này có nghĩa là mặc dù các nhà thiết kế cần xem xét các điểm dừng đáp ứng của các thiết bị mà người dùng đang sử dụng ngày nay, nhưng họ cũng cần tính đến những gì xảy ra giữa các điểm dừng đó.

Các điểm ngắt đáp ứng nên được sử dụng để “chỉnh lại dòng” bố cục và nội dung sang một thiết bị mới, nhưng để tính đến tất cả các kích thước ở giữa (chỉ trong trường hợp), bố cục cần phải linh hoạt (nghĩa là chúng thích ứng/kéo dài một cách tự nhiên khi

Hãy ghi nhớ những mẹo này khi thiết kế bố cục linh hoạt/thích ứng

• Đơn vị tỷ lệ phần trăm sẽ cho phép các yếu tố linh hoạt
• Đặt chiều rộng tối thiểu và tối đa có thể kích hoạt tình huống “nhưng không nhỏ hơn/lớn hơn mức này”
• Các định dạng hình ảnh SVG có thể được phóng to và thu nhỏ mà không làm giảm chất lượng và không phụ thuộc vào độ phân giải (trái ngược với JPG và PNG thì không)

Đừng quên định hướng cảnh quan

Chúng tôi đã nói về các điểm ngắt phản hồi cụ thể trước đó, nhưng chúng tôi cũng cần xem xét rằng các chế độ xem trên thiết bị di động đó cũng có thể được hiển thị theo hướng ngang. Mặc dù việc triển khai bố cục linh hoạt về mặt kỹ thuật sẽ làm cho nội dung thích ứng, nhưng việc mất đi một phần hợp lý của chế độ xem dọc có thể là một trở ngại đối với khả năng sử dụng và khả năng truy cập

Điều hướng thường an toàn (đôi khi chúng thực sự tốt hơn, vì người dùng thường điều hướng theo hướng ngang bằng hai ngón tay cái), nhưng việc cuộn trở nên khó khăn hơn đáng kể, điều này không tối ưu vì người dùng bắt buộc phải cuộn nhiều hơn theo hướng ngang

Các nhà thiết kế cũng có thể muốn xem xét thiết kế cho các điểm ngắt cảnh quan;

Hãy nhớ rằng, kiểu chữ cũng có thể đáp ứng

Mặc dù các nhà thiết kế UX thường sử dụng các đơn vị pixel để thiết kế trang web, nhưng trên web thực tế, một điểm không nhất thiết phải bằng pixel nữa, bởi vì các thiết bị khác nhau có độ phân giải khác nhau. Ví dụ: iPhone X có 458 PPI (Pixels Per Inch), do đó, khi kích thước pixel ngày càng nhỏ hơn, chúng tôi có thể đạt được đồ họa sắc nét hơn trong cùng một không gian vật lý (Apple gọi đây là công nghệ “Retina” và Android gọi nó là

Điều này có nghĩa là kích thước phông chữ 16px, chẳng hạn, sẽ trông lớn hơn hoặc nhỏ hơn trên một số thiết bị tùy thuộc vào độ phân giải của nó. Các nhà phát triển web thường sẽ sử dụng các đơn vị em để xác định kích thước phông chữ, đây là một loại đơn vị đáp ứng trong đó 1em bằng 1 điểm

Các công cụ chuyển giao thiết kế như Zeplin, Sympli, Marvel và InVision có thể giúp các nhà thiết kế cộng tác với các nhà phát triển về các vấn đề thuộc trách nhiệm chung. Trong khi các nhà thiết kế thực hiện thiết kế và các nhà phát triển thực thi mã, thì toàn bộ quy trình thiết kế sản phẩm là một nỗ lực của nhóm đòi hỏi sự giao tiếp chặt chẽ

Mẹo tối ưu hóa hiệu suất thiết kế đáp ứng và các phương pháp hay nhất

Thiết kế web đáp ứng không chỉ về hình thức mà còn về cách nó hoạt động và cảm nhận. Điều chỉnh các trang web để chúng tải nhanh hơn trên thiết bị mong muốn cũng quan trọng không kém

Lazy Load hình ảnh và video không quan trọng

Hình ảnh và video chiếm một phần lớn trong tổng kích thước tải xuống của một trang web, nhưng bạn không cần phải tải tất cả chúng cùng một lúc. Có hai tình huống khiến quá trình hiển thị phương tiện có thể bị trì hoãn. Nội dung dưới màn hình đầu tiên có thể được tải khi người dùng cuộn bên dưới màn hình đầu tiên và phương tiện chặn kết xuất chỉ được tải xuống sau khi bố cục và nội dung đã được tải xuống. Phương pháp này được gọi là tải lười biếng, trong đó quá trình tải các phần tử nặng, không quan trọng bị trì hoãn để cải thiện hiệu suất trang

tải có điều kiện

Một số yếu tố trang web không dành cho người dùng di động hoặc ít nhất là không đáng để tải thêm nhận thức. Chúng tôi muốn các trang web dành cho thiết bị di động của mình trở nên đơn giản, do đó, việc ẩn các thành phần trong các tình huống nhất định là điều hợp lý. Điều đó đang được nói, chúng tôi phải đảm bảo rằng chúng tôi không lãng phí tài nguyên và băng thông của trình duyệt bằng cách tải các phần tử này ngay cả khi chúng bị ẩn;

Một lần nữa, nhà phát triển có thể đạt được điều này bằng mã;

Hình ảnh phản hồi

Như đã đề cập trước đó, một số thiết bị hiển thị nhiều pixel hơn trên mỗi inch, điều này có thể khiến hình ảnh bị mờ nếu chúng không được xuất ở độ phân giải chính xác. Tùy thuộc vào độ phân giải của thiết bị, một số sẽ yêu cầu hình ảnh có kích thước gấp đôi (@2x), gấp ba (@3x) và thậm chí gấp bốn lần (@4x). Các trình duyệt web hiện hỗ trợ phần tử , giúp chọn độ phân giải hình ảnh chính xác tùy thuộc vào thiết bị

Các nhà thiết kế tạo trang web đáp ứng có thể điều chỉnh hình ảnh cho phù hợp với thiết bị bằng cách đảm bảo xuất ở tất cả các độ phân giải được sử dụng trên các thiết bị ngày nay (nếu bạn không chắc chắn, hãy hỏi nhà phát triển của bạn—giao tiếp là chìa khóa khi nói đến thiết kế web đáp ứng)

Phần kết luận

Wireframing có thể giúp giải quyết sớm các nếp gấp trong quá trình thiết kế và điều này hoạt động tốt khi áp dụng cách tiếp cận ưu tiên thiết bị di động cho thiết kế web đáp ứng. Có lẽ có một điểm ngắt phản hồi cần được chú ý thêm hoặc có thể có một khái niệm không hiệu quả về mặt phản hồi trên thiết bị di động. Tốt hơn hết là tìm ra những khúc cua trên đường càng sớm càng tốt (tôi. e. , trước khi thêm thẩm mỹ hình ảnh)

Các công cụ thiết kế hiện đại như Adobe XD, Marvel và InVision cho phép các nhóm thử nghiệm nguyên mẫu trên thiết bị thực, thảo luận phản hồi theo ngữ cảnh và thường cộng tác theo nhóm cho đến khi bố cục hoạt động trong mọi tình huống

Sử dụng quy trình làm việc UX tinh gọn trong đó thiết kế đáp ứng được thúc đẩy bởi thử nghiệm và phản hồi nội bộ sẽ đảm bảo rằng trải nghiệm người dùng hoạt động trơn tru trên tất cả các nền tảng và độ phân giải màn hình trước khi lần đầu tiên được trình bày cho người dùng thực

• • •

Đọc thêm trên Blog thiết kế Toptal

• Thiết kế đáp ứng là không đủ, chúng tôi cần hiệu suất đáp ứng
• Giới thiệu về thiết kế web đáp ứng. Phần tử giả, Truy vấn phương tiện và hơn thế nữa
• Một kích thước phù hợp với một số. Hướng dẫn về giải pháp hình ảnh thiết kế web đáp ứng
• Các ràng buộc thiết kế UX trên thiết bị di động, các phương pháp hay nhất và làm việc với các nhà phát triển
• Các phương pháp hay nhất về thiết kế giao diện người dùng để có khả năng quét tốt hơn

Hiểu những điều cơ bản

Điểm ngắt trong thiết kế đáp ứng là gì?

Điểm ngắt là thời điểm quan trọng khi một thiết kế được điều chỉnh cho phù hợp với kích thước màn hình mới;

Thiết kế web đáp ứng là gì?

Thiết kế web đáp ứng đòi hỏi quá trình thiết kế các trang web thích ứng với tất cả các thiết bị, nền tảng và kích thước màn hình về cả hình thức và chức năng

Thân thiện với thiết bị di động có nghĩa là gì?

Thiết kế trang web thân thiện với thiết bị di động có nghĩa là điều chỉnh trang web cho thiết bị di động. Google xác định tính thân thiện với thiết bị di động bằng cách các mục tiêu nhấn có đáp ứng các yêu cầu tối thiểu là ít nhất 44x44px hay không, phông chữ có đủ lớn để đọc hay không và liệu nội dung có bị cắt bởi chế độ xem hay không, trong số những thứ khác

HTML đáp ứng là gì?

HTML5 có phản hồi trên thiết bị di động không?

HTML5 có đáp ứng không?

Một ví dụ về một trang web đáp ứng là gì?