Situs CDS yang dibangun secara internal oleh Paul Lewis kami sendiri menunjukkan cara membangun pengalaman web seluler yang memuaskan bagi pengunjung konferensi.
Video di balik layar
Yang luar biasa adalah kelancaran saat situs berjalan di berbagai browser seluler. Mode ini menggunakan tata letak dan siklus menggambar browser dengan cara terbaik.
Fitur platform web baru yang digunakan
- Pekerja Layanan
- Manifes
- Warna Tema
Pola
- Kartu yang dibelanjakan
- Petak responsif
- Desain Material
Kode Sumber
Wawancara
Pengembangan
Saat Paul memutuskan untuk membuat situs, prioritas utamanya adalah menerapkan Peningkatan Progresif. Alih-alih mendesain untuk desktop, ia mem-build-nya untuk layar kecil terlebih dahulu, lalu mem-build ke layar yang lebih besar – meningkatkan secara progresif, bukan menurunkannya secara halus. Hal itu memerlukan banyak kueri media, tetapi juga ada kebebasan untuk mengamati perubahan kecil di antara titik henti sementara utama. Melacak bolak-balik di antara ukuran layar memberinya gambaran tentang di mana konten akan rusak, sehingga dia dapat dengan cepat memperbaikinya.
Aspek penting lainnya dari PP adalah sebisa mungkin kompatibel dengan versi sebelumnya. Paul memilih menggunakan {i>float<i} di atas Flexbox karena ia merasa hal itu akan meningkatkan jumlah browser yang akan digunakan oleh situs tersebut. Untuk tata letak spesifik situs, ini ternyata tidak masalah sama sekali. Jika dia membutuhkan Flexbox, dia akan menggunakan PE untuk menambahkannya.
Tantangan utama situs ini adalah fitur luaskan dan ciutkan kartu, yang mengharuskan untuk memikirkan cara baru untuk melakukan pekerjaan animasi. Paul membuat strategi yang disebut FLIP, yang melibatkan penetapan elemen animasi ke kondisi akhirnya. Dari sana, Anda akan menerapkan properti yang cocok dengan compositor, seperti transformasi dan opasitas untuk membalik perubahan dan menampilkan elemen ke posisi awalnya. Terakhir, setelah selesai, aktifkan transisi pada transformasi dan opasitas, lalu hapus perubahan tersebut. Hal ini menyebabkan elemen berpindah ke posisi akhir sekali lagi! Paul mengakui hal ini sedikit tidak terduga, tetapi bekerja dengan sangat baik dan memberi Anda peningkatan kinerja.
Performa
Setelah mengetahui Paul Lewis sebagai pakar kinerja, saya tidak terkejut mengetahui bahwa {i>powerformance<i} adalah pertimbangan yang sangat penting saat membangun situs. Dia sangat mengandalkan WebPageTest untuk mendapatkan nilai Indeks Kecepatan serendah mungkin. Tanpa sematan YouTube, Paul berhasil membuatnya menjadi kurang dari 1.000 melalui koneksi kabel, yang berarti sebagian besar pengguna akan mendapatkan render awal dalam waktu kurang dari satu detik.
Sebagian besar pekerjaan untuk mencapai hal ini dilakukan dalam tugas Grunt untuk menyambungkan, memperkecil, dan mengompresi gambar sebanyak mungkin. Situs juga menunda gambar yang tidak penting hingga setelah halaman dimuat sehingga konten yang sebenarnya dirender ke layar dengan lebih cepat.
Untuk membuat waktu muat halaman lebih baik, Paul menghentikan pekerja layanan. Dengan layanan ini, baik Anda sedang online atau tidak, kunjungan halaman dapat disajikan dari cache, sehingga memastikan Anda mendapatkan konten meskipun koneksi internet yang buruk (sangat penting saat menggunakan Wi-Fi konferensi). Situs CDS adalah salah satu situs produksi pertama yang menggunakan fitur baru ini, yang membuat Paul mengalami banyak "masalah pengguna awal", tetapi peningkatan performa yang besar itu, katanya, telah diatasi. Bahkan, kini dia membawanya ke setiap situs yang dia buat.
Performa, tentu saja, bukan hanya seberapa baik pemuatan situs, tetapi juga seberapa baik berjalannya situs. Paul tahu animasinya akan menjadi tantangan, itulah sebabnya dia menggunakan FLIP. Selain itu, ia berusaha keras untuk memastikan tidak ada yang menghalangi input sentuh atau scroll. Terlepas dari kenyataan bahwa situsnya tidak terlalu rumit, ia mengadopsi metodologi RAIL yang dimodifikasi untuk build (dia tidak benar-benar membutuhkan banyak waktu Tidak ada aktivitas), dan hal itu sangat membantu.
Desain
Karena situs tersebut dipalsukan oleh satu orang, itu berarti bahwa Paul adalah desainer sekaligus developer proyek tersebut, sehingga menghasilkan tingkat pemahaman yang belum pernah ada sebelumnya mengenai kekhawatiran satu sama lain di kedua 'tim'. Ia suka mendesain desktop down (kebalikan dari {i>progressive enhancement<i}, yang ia gunakan selama pengembangan), karena memberinya gambaran tentang apa yang perlu dilakukan dalam project. Setelah itu, Paul membuka tampilan seluler, yang memungkinkannya untuk memperbaiki segalanya secara signifikan, dan memastikan bahwa hal-hal yang paling penting paling banyak mendapat perhatian. Hal tersebut kemudian memberi tahu versi Desktop, karena arsitektur informasi dan prioritas selalu memerlukan pembaruan.
Tidak semuanya berjalan dengan lancar. Pedoman Desain Material saat ini tidak mengetahui cara membuat situs konten dengan jelas, jadi ada beberapa bidang yang kurang tepat. Desain juga gagal memperhitungkan informasi jadwal dan sesi yang terkait, dan pada akhirnya, UX berarti bahwa orang-orang akan mengikuti jadwal dan frustrasi karena mereka tidak bisa langsung ke informasi sesi.
Meskipun demikian, menurut saya Paul melakukan pekerjaan yang luar biasa dalam memindahkan spesifikasi Desain Material ke sebuah situs konten, dan saya sangat senang dengan visual dan gerakannya. Tampilan ini memiliki nuansa Desain Material yang unik, dan informasi serta tampilannya mendorong interaksi dan hierarki.
Berhasil
- Berhasil merilis seluruh situs di GitHub (> 200 bintang) untuk berfungsi sebagai boilerplate dan inspirasi bagi developer web.
- Menggabungkan platform web terbaru dan tercanggih: pekerja layanan, warna manifes web, dan warna tema dinamis. Efek akhirnya adalah sesuatu yang terasa benar-benar terintegrasi dengan platform saat dijalankan di perangkat Android. Jika ditambahkan ke layar utama pengguna, akan terasa sangat seperti aplikasi yang akan mereka gunakan, dan itu sangat keren.
- ~73.7k kunjungan halaman, ~73.7k klik ke subbagian situs berarti orang-orang benar-benar menggunakan dan berinteraksi dengannya, jauh lebih banyak dari yang diharapkan.
Secara keseluruhan, ini menjadi inspirasi besar bagi developer web saat ini dan situs konferensi yang sangat sukses.