Temeller

Sağlam bir temel

Mükemmel PWA'lar oluşturmanın temel koşulu sağlam bir temeldir. Bu temeli uygulamak için birkaç ilkeden yararlanarak web'in kısıtlamalarına uygun tasarım ve kodlama yapmanız gerekir:

  • Odaklanma kısıtlaması olarak mobil cihazı kullanın. Tasarımınıza dair her görünümün yalnızca temel içeriğe ve etkileşimlere odaklandığından emin olun.
  • Tasarım sürecinde içeriği ve temel işlevleri öne çıkarın.
  • Gerektiğinde aşamalı olarak geliştirin. En basit, en yaygın olarak kullanılan araçlarla bir bileşenin temel içeriğini ve işlevselliğini oluşturarak başlayın. Siteniz erişilebilir olsun. Ardından, kullanmak istediğiniz gelişmiş özellikleri test edin ve bileşeninizi bunlarla geliştirin.
  • Kullanıcı odaklı web performansı metriklerine odaklanan hızlı ve iyi bir kullanıcı deneyimi sunun, gerçek kullanıcı metrikleri elde edin ve ağ bağlantısı, giriş türü, CPU veya GPU gücü ne olursa olsun tüm kullanıcılarınız için push performansı sunun.

Bu ilkeleri uygulayıp modern kalıplar ve web özellikleriyle gelişerek tamamen doğal tasarımlarla harika ve hızlı deneyimler oluşturabilirsiniz. Piksel yerine kısıtlamalarla desteklenen ve her kullanıcının içeriğinize ve temel işlevlerine kendi göz atma bağlamına en uygun şekilde erişmesini sağlayan tasarımlar.

Duyarlı web tasarımı

Ethan Marcotte'un 2010'daki A List Apart makalesinden (Duyarlı Web Tasarımı) bu yana tasarımcılar ve geliştiriciler, farklı ekran boyutları ve cihazlar genelinde çalışan kullanıcı arayüzleri geliştiren esnek deneyimler oluşturmaları için teşvik ediliyor.

Ancak yol boyunca mobil cihaz, tablet ve masaüstü boyutlarına göre kısaltıldı. Genişlikler ise iOS ekran boyutlarından büyük ölçüde etkilendi. Modern CSS ve duyarlı tasarımın asıl amacına yenilenen odak noktasıyla, pelüş web sitelerini yumuşak sitelere koyabiliyoruz.

Duyarlı web tasarımı, üç teknik bileşen içerir:

  • Akışkan ızgaralar
  • Esnek medya
  • Medya sorguları

Ethan bu teknik gereksinimlerin yeterli olmadığı sonucuna varıyor. İlerlemek için farklı bir düşünme biçimi de gerekiyor.

Mobil kullanıcı efsanesi

Duyarlı tasarımın ilk günlerinde, sitelerin tasarımını kolaylaştırmak için varsayımlarda bulunuluyordu. Örneğin, küçük deneyimler telefonlar için, 320 piksel genişliğe, orta deneyimler ise tabletlere yönelikti ve 1024 piksel genişliğe ve masaüstü bilgisayarlardan daha büyük olan her şeye sahipti. Küçük ekranlarda dokunma özelliği varken büyük ekranlarda yoktu. Telefon kullanıcıları aceleye getirildi ve dikkati dağıldı, dolayısıyla "hafif" bir deneyime ihtiyaçları vardı.

Bunların hiçbiri doğru değil. Kullanıcıların ihtiyaçlarının, yalnızca ekran boyutuna veya cihaz türüne bağlı olarak temelde farklı olduğu varsayımından yola çıkarak mobil cihazlara yönelik efsaneler arasındayız. Bu, inceleme yapılmasını gerektirmez.

Örneğin, şu anda mobil ve masaüstü cihazlara yükleyebileceğiniz bir sosyal ağ PWA'sını ele alalım. Masaüstünde birçok kullanıcı, çalışırken ekranın bir tarafında feed içeren dar bir pencereyi açık tutabilir ve kullanılabilir genişliğin yanlış olacağı için bir mobil cihazda olduğunu varsayabilir.

Tarayıcı sekmesinin dışında kalan PWA dünyası, duyarlı tasarım dünyasına mini mod ve katlanabilir cihazlarla çalışma gibi yeni zorluklar da ekliyor.

Mini mod

Masaüstü cihaza PWA yüklü olduğunda, bir pencere gerçekten küçülebilir, yani tarayıcı penceresinden daha küçük, mobil görüntü alanından daha küçük olabilir. Bu, web'de yeni bir özellik: 200x100 CSS pikseli kadar küçük olabilen bir pencere olan mini modu destekleyebiliriz.

Günümüzde bir PWA oluştururken, duyarlı web tasarımı sayesinde mini modda neler sunabileceğinizi düşünmek iyi bir fikirdir. Örneğin, yalnızca müzik çalardaki kontrol düğmeleri, kontrol paneli bilgileri veya hızlı işlemler buna örnek olarak gösterilebilir.

Masaüstünde PWA, tarayıcı için tasarladığınız en küçük pencereden daha küçük bir pencerede oluşturulabilir. Duyarlı web tasarımınız için yeni bir ayrılma noktası ekler: mini mod.

Katlanabilir cihazlar ve hibrit cihazlar

Katlanabilir ve hibrit cihazlar da günümüzde yaygın olarak kullanılıyor:

  • Klasik kapaklı küçük telefonlar.
  • Telefon veya tablet olarak kullanılabilen katlanabilir cihazlar.
  • Tabletlere dönüştürülebilen dizüstü bilgisayarlar.
  • Klavye ve dokunmatik yüzeyle dizüstü bilgisayar olarak çalışabilen tabletler.
  • Daha sonra telefonlar bir hub ile masaüstüne dönüştürülebilir.

Her web sitesi için yarışma mevcut olsa da Progresif Web Uygulamasında uygulama yüklendiği zaman açılan pencerenin kontrolü ve sorumluluğu size aittir. Bu nedenle, tasarımınız tepki vermeli ve her bağlamda en iyi deneyimi sunmalıdır.

Her şey önce

Peki işe nereden başlamanız gerekir? Mobil cihazlara öncelik vermeli, içeriğe öncelik vermeli, çevrimdışına öncelik vermeli mi? Web'in esnekliği için tasarım yaparken hangisi doğrudur? Evet, her şey önce evet. Mobil öncelikli terimi Luke Wroblewski'nin ilk kez 2009'da ortaya çıkmasından bu yana pek çok farklı şekilde yorumlandı: Web'de platforma özgü kullanıcı arayüzü ve kullanıcı deneyimi kalıplarının taklit edilmesinden web uygulamaları geliştirilmeden önce mobil uygulamalar oluşturmaya, yalnızca minimum genişlikteki medya sorgularını kullanıp her gün kullanmaya kadar. Ancak başlangıçtaki amacı şudur: Mobil cihazlar sizi odaklanmaya zorlar. Luke'un dediği gibi:

Mobil cihazlar, yazılım geliştirme ekiplerinin bir uygulamadaki yalnızca en önemli verilere ve işlemlere odaklanmasını gerektirir. 320x480 piksel ekranlarda fazladan, gereksiz öğeler için yer yoktur. Öncelik vermelisiniz. Bu nedenle ekip, Mobil Önceliği tasarlarken, günümüzün masaüstünden erişilen web sitelerine yayılmış arayüz kirleri ve sapmalar olmadan kullanıcıların yapmak istedikleri temel görevlere odaklanan bir deneyim elde etmiş oluyorlar. Bu hem iyi bir kullanıcı deneyimi sağlar hem de işletmeniz için faydalıdır.

Luke Wroblewski

Web sitenizin her görünümünde yalnızca kullanıcının burada yapmak istediği temel görevlere odaklanın, sırf ekranın alanı daha fazla olduğu için fikre başka şeyler eklemeyin.

Duyarlı Web Tasarımı'ndaki ikinci ilkeye de ipucu verilir: "Farklı deneyimlerin gradyanı". Her bir kullanıcı için tek, özdeş ve kusursuz bir deneyim sunmak çalışmanızın hedefi olmamalıdır. Ama imkansızdır.

Web deneyimlerinizi sabit bir şey olarak düşünmek yerine, kullanıcının cihazının mevcut bağlamına göre en iyi deneyimi oluşturmak için kullanacağı bir dizi öneri olarak düşünün. Bunun için aşamalı geliştirmenin benimsenmesi gerekir.

Progresif geliştirme

Progresif Geliştirme, standart HTML, CSS ve JavaScript'ten başlayarak her yerde çalışan bir kod yazmamızı ve API kullanılamadığında uygun yedeklerle bunun üzerine yetenek katmanları eklememizi sağlayan bir kalıptır.

Nasıl geliştirirsiniz? Özellik algılama, destek için bir test gerçekleştirdiğiniz ve bu test sonuçlarına göre tepki verdiğiniz bir kalıptır. Bunu yapmak için çeşitli yerleşik web platformu araçları ve uygulamaları vardır.

@supports kullanarak bir CSS özelliğinin tarayıcı desteğini kontrol edin ve sonuca göre kurallar uygulayın. Bu, hem CSS mülkleri hem de değerler için geçerlidir. Bir mülk desteklendiği halde bir değer desteklenmiyorsa desteklenmeyen bir mülk gibi başarısız olur. JavaScript kodu buna CSSSupportsRule üzerinden erişebilir

Yeni web platformu özelliklerinin çoğu mevcut nesnelere bağlıdır. Bu nedenle, öğeler üzerindeki özellikleri veya yöntemleri kontrol etmek gibi diğer benzer aramalarda olduğu gibi nesne stili algılamadaki "özellik" de JavaScript'te iyi çalışır.

Modern JavaScript'i göndermek için, daha modern tarayıcılara daha küçük yük ile daha güçlü özellikler ve eski tarayıcılar için yedek deneyim sağlamak üzere modül/modülsüz kalıbını kullanabilirsiniz. Böylece vaatler, sınıflar, ok işlevleri ve ES Modüllerini destekleyen tarayıcılarda const ve let gibi JavaScript özelliklerinin yeni bir temele oturtulacağını garanti ederler.

Geliştirilmiş temelinizi oluşturmak için birden fazla özellik algılama biçimini birleştirebilirsiniz. BBC News ekibi tarafından geliştirilen bu oyun, Hardal Kesimi adını alıyor ve temel bir deneyimi herkese sunmanıza ve yalnızca özellik tespit edilen belirli bir çubuğa ulaşıldığında deneyimi geliştirmeye başlamanıza olanak tanıyor.

Cihaz algılamayı önleme

User-Agent dizesine dayalı destek varsayımları yapmak yerine özellik desteğini doğrudan test etmeniz gerekir.

Kullanıcı aracısı dizeleri hiç bu kadar güvenilir olmamıştı. "Doğru tahminde bulunmak" için her tarayıcı, işletim sistemi ve cihaz kombinasyonuna ilişkin neredeyse mükemmel bilgiye sahip olmaları gerekir. Böyle durumlarda bile kullanıcı adres sahteciliğine maruz kalsalar bile, örneğin, mobil tarayıcılardaki masaüstü site yönlendirmeleri genellikle masaüstü kullanıcı aracısı dizesinde adres sahteciliği yapmak kadar basittir.

Dahası, tarayıcılar Kullanıcı Aracısı dizelerini dondurmaya çalışıyor. Kullanımdan kaldırma nedeni olarak özellikle belirtilen özellik algılamaya yönelik kullanıcı aracısı dizeleri, kullanıcıları ve cihazları tanımlama konusunda eskisinden daha da güvenilmez hale geliyor.

İçerik öncelikli

Web için tasarım yapmanın diğer bir ilkesi de öncelikle içeriğinizle başlamaktır. Örneğin, hisse senedi fiyatlarının grafiğini içeren gerçek zamanlı bir hisse senedi şeridi, temelde, belli bir süre boyunca hisse senetleri içeren ve siteyi yenileyebileceğiniz bir bağlantı içeren bir hisse senedi tablosudur.

Bu durum, daha sonra tablonun değerlerini bir zamanlayıcıda güncellemek için JavaScript ve getirme istekleriyle veya gerçek zamanlı push tabanlı güncellemeler sağlamak için yuvalarla geliştirilebilir. Sonuçların grafiğini oluşturmak için CSS, belki SVG veya Tuval gibi özellikler tekrar geliştirilebilir. Ancak esas, içerikle başlar.

Doğal tasarım

  • Kullanıcı deneyimi açısından odak noktası olarak mobil cihazlar.
  • Tasarım sürecinde içeriğe ve temel işlevi öne çıkarma
  • Mevcut olduğu durumlarda gelişmiş işlevlerle kademeli olarak gelişmeye devam eder.

Bu ilkeler bir araya gelerek bize yeni bir şey sunuyor: içeriğe dayalı tasarım. Jen Simmons, Tasarım İçi Düzenler başlıklı konuşmasında kullanıcı arayüzleri tasarlamak ve oluşturmak için Grid, Flexbox, akış düzeni ve yazma modları gibi modern CSS araçlarının kullanımından bahsediyor. Bu araçlarla şunları söylüyor:

Düzenin elimizdeki içeriğe ve yapmak istediğimiz tasarıma doğal gelmesini sağlayabilirsiniz.

Jen Simmons

Bu yeni CSS, tasarımcıların düzen üzerinde bir miktar kontrole sahip olmasını sağlar ancak bunu en yeni web tasarımı ilkelerine uygun şekilde yapar. Sabit ekran boyutlarına göre sabit formlar oluşturmak yerine, düzenin içeriğin ne kadar küçük veya büyük olabileceği, metnin boyutu ve kullanılabilir alan gibi doğal özelliklerinden aynı anda yararlanılmasını sağlayan içeriğe dayalı kurallar tanımlarsınız. Her pikselin yerleşimini kontrol etmenize gerek kalmadan içeriğinizle etkileşimde bulunurken tasarımınızı hayata geçirmenizi sağlarlar.

İçsel düzenler, web'de denetim hakkındaki görüşmelerin tam dairesinde olmasını sağlayarak bu kavramı tanımlar. Web'de denetim, sitenize gelen her bir ziyaretçi için cihazları, ekran boyutlarını, renkleri, yazı tiplerini, düzenleri veya özellikleri belirlemek değildir. Web'de kontrol, bir tarayıcının deneyiminizi bir araya getirmek üzere kullanacağı kuralları yazmak ve bunu, Progresif Web Uygulamanızdaki her kullanıcı için benzersiz bir şekilde oluşturmakla ilgilidir.

Web performansı

PWA'mız için önemli olan son temel ise Web Performansı'dır. Kullanıcılara iyi bir deneyim sunmak zorunludur. Bu sayede, mümkün olan her şekilde daha fazla dönüşüm elde edilebilir.

Web performansı birkaç adımdan oluşur:

  • Mevcut kullanıcı merkezli temel metrikleri anlayın.
  • Her metrik için hedefler belirleyin.
  • PWA'mızı ölçün.
  • Teknikleri ve en iyi uygulamaları kodumuzda veya sunucumuzda statik olarak uygulayarak metriklerimizi iyileştirin.
  • Tekrar ölçüm yapın.
  • Her kullanıcının bağlamına göre canlı bir deneyim sunun.

Günümüzde web performansı metrikleri, içeriğinizin ekranda ne kadar hızlı göründüğünün yanı sıra web sitenizin ne kadar etkileşimli olduğunu ve kullanıcıların deneyimi nasıl algıladığını da ölçmektedir.

Web Verileri

Geçtiğimiz on yıl boyunca, web performansındaki başarıyı ölçmek için farklı metrikler üzerinde çalıştık. Şu anda, önerilen bir dizi metrik projesi Web Verileri altında gruplandırılmaktadır. Web Verileri, metrikleri web performansını ve algıyı etkileyen üç temel alana odaklar:

  • Yükleniyor
  • Interactive
  • Görsel Kararlılık

Önemli Web Verileri'nden bir web sitesinin performans sonuçlarını gösteren metrikler grubu.

Core Web Vitals sayesinde, web performansı ve kullanıcı deneyimi açısından PWA'nızın ne kadar iyi veya kötü olduğunu bir bakışta görebilirsiniz.

PWA'nın temelleri

Tüm kullanıcılarınıza harika bir deneyim sunulabilmesi için PWA'nızın duyarlı tasarım, mobil ve önce her şey, doğal tasarım ve web performansı konularında sağlam bir temeli olması önemlidir.

Kaynaklar