Trang web của CDS do Paul Lewis xây dựng trong công ty của chúng tôi đã cho thấy cách xây dựng trải nghiệm web tuyệt vời dành cho thiết bị di động cho khách tham dự hội nghị.
Video hậu trường
Đáng chú ý là độ mượt mà khi đó trang web chạy trong nhiều trình duyệt cho thiết bị di động. Nó sử dụng bố cục và chu kỳ vẽ của trình duyệt theo cách tốt nhất có thể.
Các tính năng mới trên nền tảng web đã được sử dụng
- Trình chạy dịch vụ
- Tệp kê khai
- Màu giao diện
Mẫu
- Thẻ đang chi tiêu
- Lưới thích ứng
- Material Design
Mã nguồn
Video phỏng vấn
Quá trình phát triển
Khi Paul bắt đầu xây dựng trang web, ưu tiên chính là sử dụng Cải tiến tiến bộ. Thay vì thiết kế cho máy tính để bàn, trước tiên, ông thiết kế phiên bản này cho màn hình nhỏ, sau đó xây dựng lên những màn hình lớn hơn – cải thiện dần thay vì xuống cấp nhẹ. Điều đó đòi hỏi một loạt các truy vấn nội dung đa phương tiện, nhưng cũng khá thoải mái để xem những thay đổi nhỏ giữa các điểm ngắt chính. Việc theo dõi qua lại giữa các kích thước màn hình giúp anh biết khi nào nội dung sẽ bị hỏng để có thể nhanh chóng khắc phục.
Một khía cạnh quan trọng khác của Chuyên gia sản phẩm là phải có khả năng tương thích ngược tối đa. Paul chọn sử dụng số thực trên Flexbox vì anh cảm thấy điều này sẽ tăng số lượng trình duyệt mà trang web hoạt động. Đối với bố cục cụ thể của trang web, điều này hoá ra không phải là vấn đề gì. Nếu cần dùng Flexbox, anh ấy có thể dùng Chuyên gia sản phẩm để thêm ứng dụng này.
Một thách thức lớn của trang web là tính năng mở rộng và thu gọn thẻ. Điều này đòi hỏi bạn phải nghĩ ra một cách hoàn toàn mới để hoạt động cho ảnh động. Paul đã nghĩ ra một chiến lược mà anh gọi là FLIP, trong đó liên quan đến việc đặt ảnh động cho các phần tử về trạng thái cuối cùng. Từ đó, bạn áp dụng các thuộc tính thân thiện với trình kết hợp như biến đổi và độ mờ để đảo ngược các thay đổi và trả phần tử về vị trí bắt đầu. Cuối cùng, khi làm xong, hãy bật tính năng chuyển đổi trên ảnh biến đổi và độ mờ rồi xoá những thay đổi đó. Điều này khiến các phần tử chuyển đến vị trí cuối cùng một lần nữa! Paul thừa nhận rằng điều này hơi bất ngờ, nhưng nó hoạt động rất tốt và giúp bạn tăng hiệu suất.
Hiệu suất
Khi biết Paul Lewis là chuyên gia hiệu suất, tôi không ngạc nhiên khi biết rằng hiệu suất là một yếu tố cực kỳ quan trọng cần cân nhắc khi xây dựng trang web. Anh ấy dựa nhiều vào WebPageTest để lấy giá trị Chỉ số tốc độ ở mức thấp nhất có thể. Nếu không có video nhúng trên YouTube, Paul đã cố gắng đạt được dưới 1.000 lượt kết nối qua cáp, nghĩa là hầu hết người dùng sẽ thấy lượt kết xuất đầu tiên trong chưa đầy một giây.
Hầu hết nỗ lực để đạt được điều này đều nằm trong các nhiệm vụ của Grunt nhằm nối, giảm kích thước và nén hình ảnh nhiều nhất có thể. Trang web cũng trì hoãn các hình ảnh không cần thiết cho đến sau khi tải trang để nội dung thực tế được hiển thị trên màn hình nhanh hơn.
Để tăng thời gian tải trang hơn nữa, Paul đã triển khai một trình chạy dịch vụ. Nhờ tính năng này, cho dù bạn có kết nối mạng hay không, một lượt truy cập trang đều có thể được phân phát từ bộ nhớ đệm, đảm bảo bạn truy cập được nội dung ngay cả khi kết nối không ổn định (cực kỳ quan trọng khi dùng Wi-Fi hội nghị!). Trang web CDS là một trong những trang web sản xuất đầu tiên sử dụng tính năng mới này. Điều này đã khiến Paul gặp phải một loạt "vấn đề về người sử dụng sớm", nhưng theo ông thì hiệu suất đã tăng lên đáng kể đã được bù đắp. Trên thực tế, anh ấy đang đưa nó vào mọi trang web mà anh ấy xây dựng!
Tất nhiên, hiệu suất không chỉ là mức độ tải hiệu quả của trang web mà còn là mức độ hoạt động hiệu quả của trang web đó. Paul biết các ảnh động sẽ là một thách thức, đó là lý do anh tìm ra công cụ FLIP. Bên cạnh đó, anh cũng rất nỗ lực để đảm bảo rằng không có gì gây cản trở cho thao tác nhập hoặc cuộn bằng cách chạm. Mặc dù thực tế trang web không phải là một trang web cực kỳ phức tạp, nhưng anh ấy đã áp dụng phương pháp RAIL được sửa đổi để xây dựng (mà anh ấy không thực sự cần nhiều thời gian rảnh) và điều này đã giúp ích rất nhiều!
Thiết kế
Vì trang web bị một người giả mạo, điều đó có nghĩa là Paul vừa là nhà thiết kế vừa là nhà phát triển của dự án, vừa tạo ra mức độ hiểu biết chưa từng có về mối lo ngại của nhau trong cả hai "nhóm". Anh thích thiết kế màn hình trên máy tính (trái ngược với tính năng nâng cao tăng dần mà anh đã sử dụng trong quá trình phát triển), vì điều này giúp anh hiểu được những gì cần thực hiện trong dự án. Sau đó, Paul chuyển sang chế độ xem trên thiết bị di động để tinh chỉnh mọi thứ một cách đáng kể và đảm bảo rằng những nội dung quan trọng nhất đang được chú ý nhiều nhất. Sau đó, thông tin đó sẽ thông báo cho phiên bản dành cho Máy tính, vì kiến trúc và mức độ ưu tiên của thông tin sẽ luôn cần cập nhật.
Không phải mọi việc đều diễn ra suôn sẻ. Nguyên tắc Material Design tại thời điểm đó không rõ ràng về cách tạo trang web nội dung, vì vậy, có những lĩnh vực mà anh chưa đạt được mục tiêu. Thiết kế này cũng không tính đến lịch biểu và thông tin về phiên có liên quan, và cuối cùng, trải nghiệm người dùng có nghĩa là mọi người sẽ đi đến lịch biểu và thất vọng vì không thể truy cập thẳng vào thông tin về phiên.
Dù vậy, tôi nghĩ Paul đã làm rất tốt trong việc truyền tải thông số kỹ thuật của Material Design đến trang web nội dung. Tôi thực sự hài lòng với hình ảnh và chuyển động. Giao diện này mang lại cảm nhận Material Design độc đáo, thông tin và hình thức khuyến khích tương tác và phân cấp.
Thành công
- Đã phát hành thành công toàn bộ trang web trên GitHub (> 200 sao) để đóng vai trò là mẫu và nguồn cảm hứng cho nhà phát triển web.
- Tích hợp nền tảng web mới nhất và tốt nhất: trình chạy dịch vụ, tệp kê khai web và màu giao diện động. Hiệu ứng ròng là một thứ gì đó thực sự tích hợp được với nền tảng khi chạy trên thiết bị Android. Nếu được thêm vào màn hình chính của người dùng, nó sẽ rất giống với một ứng dụng mà họ sẽ sử dụng và điều đó thực sự thú vị.
- ~73.7k lượt xem trang, ~73.7k lượt nhấp vào tiểu mục trang web nghĩa là mọi người thực sự đã sử dụng và tương tác với trang, nhiều hơn so với dự kiến.
Tóm lại, đây là nguồn cảm hứng tuyệt vời cho các nhà phát triển web ngày nay và một trang web hội nghị rất thành công.