Bizim Paul Lewis tarafından şirket içinde oluşturulan CDS web sitesinde, konferans ziyaretçileri için nasıl mükemmel bir mobil web deneyiminin nasıl oluşturulacağı gösteriliyordu.
Sahne arkası videoları
Dikkate değer, sitenin çeşitli mobil tarayıcılarda sorunsuz çalışmasıdır. Tarayıcının düzenini ve boyama döngülerini mümkün olan en iyi şekilde kullanmaktır.
Kullanılan yeni web platformu özellikleri
- Hizmet Çalışanı
- Manifest
- Tema Rengi
Kalıplar
- Harcama kartları
- Duyarlı ızgara
- Materyal Tasarım
Kaynak Kodu
Röportaj
Geliştirme
Paul, siteyi oluşturmak için yola çıktığında temel önceliklerden biri Progresif İlerleme'yi benimsemekti. Masaüstü için tasarlamak yerine, uygulamayı önce küçük ekranlara yönelik olarak geliştirdi ve daha sonra, büyük ekranlara yayarak ustaca bozulmak yerine kademeli olarak iyileştirdi. Bu yöntem çok sayıda medya sorgusu gerektiriyordu ama aynı zamanda önemli ayrılma noktaları arasında küçük değişikliklere göz atma özgürlüğü de olması gerekiyordu. Ekran boyutları arasında gidip gelmek, içeriğin nerede kırılacağına dair bir fikir edindi ve bu sorunu hızla düzeltmesine olanak tanıyordu.
PE'nin bir diğer önemli özelliği de geriye dönük olarak mümkün olduğunca uyumlu olmasıdır. Paul, sitenin çalışacağı tarayıcı sayısını artıracağını düşündüğü için Flexbox üzerinde kayan öğeleri kullanmayı seçti. Sitenin özel düzeni açısından bu, hiç sorun olmadı. Flexbox'a ihtiyaç duysaydı ürünü eklemek için PE'yi kullanırdı.
Sitedeki en büyük zorluklardan biri, animasyonların çalışması için yepyeni bir yol geliştirmeyi gerektiren kart genişletme ve daraltma özelliğiydi. Paul, FLIP dediği bir strateji geliştirdi. Bu stratejide, animasyon öğeleri son durumlarına ayarlanır. Buradan, değişiklikleri tersine çevirmek ve öğeyi başlangıç konumuna döndürmek için dönüştürmeler ve opaklık gibi birleştirici özellikleri uygularsınız. Son olarak da, dönüşümler ve opaklıktaki geçişleri etkinleştirin ve bu değişiklikleri kaldırın. Bu, öğelerin bir kez daha son konumlarına taşınmasına neden olur! Paul, bunun biraz beklenmedik bir durum olduğunu kabul ediyor, ancak oldukça iyi çalışıyor ve performans artışı sağlıyor.
Performans
Paul Lewis'i performans gurusu olarak tanıdığımda, siteyi oluştururken powerformans'ın çok önemli bir konu olduğunu görmek beni şaşırtmadı. Hız Endeksi değerini olabildiğince düşük tutmak için WebPageTest'ten yoğun şekilde yararlandı. Paul, YouTube'u yerleştirmeden videonun kablolu bağlantıyla 1.000'in altında izleyiciye ulaşmayı başardı. Bu da kullanıcıların çoğunun ilk oluşturma işlemini bir saniyeden kısa sürede gerçekleştireceği anlamına geliyordu.
Bunu başarmaya yönelik işlerin çoğu, resimleri mümkün olduğunca birleştirmek, küçültmek ve sıkıştırmak amacıyla Grunt görevlerinde yapıldı. Site ayrıca, gerçek içeriğin ekranda daha hızlı bir şekilde gösterilmesi için gerekli olmayan resimleri sayfa yükleme işleminden sonraya erteler.
Paul, sayfa yüklenme süresini daha da iyileştirmek için bir hizmet çalışanı kullanmaya başladı. Bu teknoloji sayesinde, ister çevrimiçi olun ister çevrimiçi olun, sayfa ziyareti önbellekten sunulabilir. Böylece, bağlantınız yavaşken bile içeriğe ulaşılır (konferans kablosuz ağa bağlıyken çok önemlidir!). CDS sitesinin, yeni özelliği kullanan ilk üretim sitelerinden biri olması. Bunun sonucunda Paul, çok sayıda "erken geçiş yapan kullanıcılar" sorunuyla karşılaştı. Ama büyük performans artışının bunu kapattığını söyledi. Aslında, bu siteyi oluşturduğu her siteye götürmektedir.
Elbette performans, bir sitenin ne kadar iyi yüklendiğinin yanı sıra ne kadar iyi çalıştığıyla da ilgilidir. Paul animasyonların zor olacağını biliyordu bu yüzden FLIP'i seçti. Bunun yanı sıra, dokunmatik girişi veya kaydırmayı engelleyebilecek bir şey olmadığından emin olmak için inisiyatif aldı. Site çok karmaşık olmasa da, derleme için değiştirilmiş bir RAIL metodolojisi benimsedi (Boşta kalma süresini pek fazla düşünmüyordu) ve çok yardımcı oldu.
Tasarım
Site tek bir kişi tarafından tasarladığı için bu, Paul'ün projede hem tasarımcı hem de geliştirici olduğu anlamına geliyordu. Bu da, birbirlerinin iki "ekip"teki endişeleri hakkında benzersiz bir anlayışa yol açtı. Masaüstü tasarımını (geliştirme sırasında kullandığı progresif geliştirmenin zıttı) seviyor çünkü bu ona projede neyin kullanılması gerektiğine dair bir fikir veriyor. Daha sonra Paul, mobil görünüme geçer. Bu, öğeleri önemli ölçüde hassaslaştırmasına ve en önemli şeylerin en çok ilgiyi çekmesine olanak tanır. Bu da Masaüstü sürümü için bilgi sağlar, çünkü bilgi mimarisinin ve önceliğinin her zaman güncellenmesi gerekir.
Her şey yolunda gitmedi. O zamanlar Materyal Tasarım yönergeleri bir içerik sitesinin nasıl yapılacağı konusunda net değildi, bu nedenle başarısız olduğu alanlar vardı. Tasarım aynı zamanda program ve oturum bilgilerinin ilgili olduğunu da hesaba katamadı ve nihayetinde kullanıcı deneyimi, insanların programa gitmesi ve doğrudan oturum bilgilerine ulaşamayacaklarından sinirlenmesi anlamına geliyordu.
Bununla birlikte, bence Paul, Materyal Tasarım spesifikasyonunu bir içerik sitesine taşımakta büyük işler başarmış ve ben de görsellerden ve hareketten çok memnunum. Benzersiz bir Materyal Tasarım hissine sahip, bilgi ve görünüm ise etkileşimi ve hiyerarşiyi teşvik ediyor.
Başarılı
- Tüm site, web geliştiricileri için ortak bir metin ve ilham kaynağı olarak sunulmak üzere GitHub'da (> 200 yıldız) başarıyla yayınlandı.
- Web platformunun en yeni ve en iyi özellikleri kullanıldı: Service Worker, web manifesti ve dinamik tema renkleri. Bunun net etkisi ise Android cihazlarda çalıştırıldığında platformla gerçekten entegre olduğu hissini veren bir şey. Kullanıcının ana ekranına eklenirse, kullandığı bir uygulamaya benziyor ve bu etkileyici bir özellik.
- ~73.7k sayfa görüntüleme, site alt bölümlerine yönelik ~73.7k tıklama, kullanıcıların beklenenden çok daha fazla sayıda reklamı gerçekten kullanmış ve onunla etkileşimde bulunmuş olması anlamına geliyordu.
Sonuç olarak, günümüzün web geliştiricileri için büyük bir ilham ve çok başarılı bir konferans web sitesi.