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