Hội nghị Nhà phát triển Chrome đã kết thúc vài tuần trước và đây là báo cáo đầu tiên trong chuỗi báo cáo về sự kiện này. Chúng tôi đặc biệt chú trọng vào việc phát triển Thiết bị di động và Trên nhiều thiết bị nên chúng ta sẽ bắt đầu với mục tiêu này!
Mẫu trải nghiệm người dùng tốt nhất cho ứng dụng web di động của Paul Kinlan
Sau khi phân tích mức độ thân thiện với thiết bị di động của 1.000 trang web hàng đầu, chúng tôi nhận thấy có một số vấn đề: 53% vẫn chỉ cung cấp trải nghiệm chỉ dành cho máy tính để bàn, 82% trang web có vấn đề với tính tương tác trên thiết bị di động và 64% trang web có văn bản mà người dùng sẽ gặp vấn đề khi đọc.
Truy cập nhanh để cải thiện đáng kể trải nghiệm web dành cho thiết bị di động của bạn
- Luôn xác định một khung nhìn
- Điều chỉnh nội dung vừa với khung nhìn
- Giữ kích thước phông chữ ở mức dễ đọc
- Giới hạn việc sử dụng phông chữ trên web
- Định kích thước và giãn cách các mục tiêu nhấn thích hợp
- Dùng các loại ngữ nghĩa cho phần tử đầu vào
PageSpeed Insights vừa cho ra mắt bản phân tích trải nghiệm người dùng để xác định mức độ thân thiện với thiết bị di động của trang web. Công cụ này sẽ giúp bạn tìm ra các vấn đề thường gặp về trải nghiệm người dùng trên thiết bị di động của trang web. Hãy dùng thử ngay!
Trang trình bày: Các mẫu trải nghiệm người dùng tốt nhất cho ứng dụng web dành cho thiết bị di động
Khả năng hỗ trợ tiếp cận trên nhiều thiết bị của Alice Boxhall
Người dùng sẽ truy cập vào các trang web và dịch vụ của bạn từ vô số thiết bị với nhiều yêu cầu về khả năng hỗ trợ tiếp cận. Khi sử dụng đúng phần tử ngữ nghĩa và vai trò ARIA chính xác, bạn sẽ giúp trình duyệt và công nghệ hỗ trợ hiểu rõ hơn rất nhiều về trang của bạn.
Trang trình bày: Hỗ trợ tiếp cận trên nhiều thiết bị
Các phương pháp chính để tìm hiểu và giải quyết vấn đề về a11
- Đảm bảo bạn có trải nghiệm người dùng tốt khi chỉ sử dụng bàn phím
- Thể hiện ngữ nghĩa của giao diện bằng việc chọn đúng phần tử và ARIA
- Sử dụng ChromeVox trên máy tính để bàn và TalkBack trên Android để kiểm thử.
- Dùng thử tiện ích của Chrome cho Công cụ hỗ trợ tiếp cận dành cho nhà phát triển
- Đối tượng đa dạng hơn đang truy cập trực tuyến, điều này càng làm tăng nhu cầu tạo trang web dễ tiếp cận cho người dùng
Xây dựng ứng dụng dành cho thiết bị di động bằng WebView của Chrome của Matt Guant
Chúng ta đều biết những vấn đề mà các nhà phát triển gặp phải trong quá trình xây dựng WebView: Các tính năng HTML5 bị hạn chế, không có công cụ gỡ lỗi, không có công cụ bản dựng. Nhờ có WebView hỗ trợ Chromium trong Android 4.4 (KitKat), nhà phát triển giờ đây có thể tuỳ ý sử dụng nhiều công cụ mới để xây dựng các ứng dụng gốc tuyệt vời bằng WebView.
WebView hỗ trợ gỡ lỗi từ xa đầy đủ bằng các công cụ mà bạn dùng cho Chrome. Bạn cũng có thể sử dụng quy trình phát triển web đáng tin cậy với Grunt và tích hợp quy trình đó vào công cụ ngăn xếp gốc thông qua Gradle. Ngoài ra, để hợp nhất các thế giới, có một thủ thuật thông minh để sử dụng Công cụ của Chrome cho nhà phát triển nhằm kiểm tra mã gốc của bạn từ JavaScript.
Trang trình bày: Xây dựng ứng dụng dành cho thiết bị di động bằng WebView của Chrome
Những điểm cần ghi nhớ về việc phát triển WebView hiệu quả
- Đó không phải là các tính năng mới quan trọng, mà là công cụ mà giờ đây bạn có thể sử dụng để tăng tốc quy trình làm việc
- Đừng cố gắng mô phỏng giao diện người dùng gốc. Nhưng hãy nhớ xoá một số thông báo cho biết đó là Nội dung web.
- Sử dụng phương pháp triển khai gốc các tính năng khi thích hợp. Ví dụ: sử dụng DownloadManager thay vì XHR cho các tệp lớn.
Tối ưu hoá quy trình làm việc cho một thế giới trên nhiều thiết bị bởi Matt Gaunt
Nếu chúng tôi phải phát triển cho Máy tính, Thiết bị di động, Máy tính bảng, Thiết bị đeo và các kiểu dáng khác, làm cách nào để bạn tối ưu hoá quy trình làm việc và giúp cuộc sống của mình bớt căng thẳng? Có một cách tiếp cận vững chắc trên nhiều thiết bị để lặp lại nhanh chóng với LiveReload, Grunt, Yeoman và Phòng thí nghiệm về thiết bị di động thu nhỏ mới vừa được công bố. Cuối cùng, nếu bạn không có phần cứng vật lý muốn kiểm thử, một số nhà cung cấp sẽ cung cấp phần cứng đó qua đám mây.
Trang trình bày: Tối ưu hoá quy trình công việc cho một thế giới sử dụng nhiều thiết bị
Điểm chính
- Số lượng thiết bị mà chúng tôi phải phục vụ sẽ chỉ tăng lên
- Xử lý quy trình làm việc phù hợp với Grunt và Yeoman
- Đơn giản hoá việc thử nghiệm trên nhiều trình duyệt và thiết bị với Phòng thí nghiệm về thiết bị di động mini
- Thông minh khi lựa chọn mô phỏng bằng cách sử dụng công cụ Mô phỏng Chrome Công cụ cho nhà phát triển, Trình mô phỏng chứng khoán, Trình mô phỏng dựa trên đám mây như Saucelabs, Browserstack và appexperience và trình mô phỏng bên thứ ba Genymotion
- Kiểm thử trên thiết bị di động không chỉ có nghĩa là kiểm tra kết nối Wi-Fi, mà hãy sử dụng proxy để mô phỏng tốc độ mạng chậm hơn
Kết nối mạng: không bắt buộc bằng Jake Archibald
Chúng tôi học được nhiều điều từ buổi trò chuyện này: Jake không đi giày khi thuyết trình; Business Kinlan sắp ra mắt một cuốn sách mới; Ngoại tuyến đang được các nhà cung cấp trình duyệt xem trọng và bạn sẽ sớm có các công cụ giúp bạn tạo ra trải nghiệm tuyệt vời để hoạt động tốt khi không có mạng.
ServiceWorker sẽ mang đến cho chúng ta sự linh hoạt cần thiết để dễ dàng xây dựng trải nghiệm ngoại tuyến hấp dẫn và không phải chịu những phiền toái do AppCache gây ra. Bạn thậm chí có thể thử nghiệm với API bằng Polyfill.
Trang trình bày: Khả năng kết nối mạng: không bắt buộc
ServiceWorker đến giải cứu
- Trong thế hệ tiếp theo của tính năng nâng cao tăng dần, chúng tôi coi mạng là một điểm nâng cao tiềm năng
- ServiceWorker cung cấp cho bạn quyền kiểm soát đầy đủ, có thể tập lệnh và có thể gỡ lỗi đối với các yêu cầu mạng
- Nếu bạn có trải nghiệm ngoại tuyến, đừng đợi đến khi mạng ngừng hoạt động rồi bạn mới hiển thị trải nghiệm vì việc này có thể mất nhiều thời gian