Temeller

Sağlam bir temel

Sağlam bir temel, mükemmel PWA'lar oluşturmanın temel şartıdır. Bu temeli uygulamak için birkaç ilke kullanarak web'in kısıtlamalarına göre tasarım ve kodlama yapmanız gerekir:

  • Odaklanma kısıtlaması olarak mobil cihazı kullanın. Tasarımınızın her görünümünde yalnızca temel içeriklere ve etkileşimlere odaklanıldığından emin olun.
  • Tasarım sürecinde içeriğe ve temel işlevlere vurgu yapın.
  • Gerekirse aşamalı olarak geliştirin. En basit ve en yaygın olarak kullanılan araçlarla bir bileşenin temel içeriğini ve işlevini oluşturarak başlayın. Erişilebilir hale getirin. Ardından, kullanmak istediğiniz gelişmiş özellikleri test edin ve bu özelliklerle bileşeninizi geliştirin.
  • Ağ bağlantısı, giriş türü, CPU veya GPU gücü ne olursa olsun tüm kullanıcılarınız için kullanıcı odaklı web performansı metriklerine odaklanan hızlı ve iyi bir kullanıcı deneyimi sunun, gerçek kullanıcı metrikleri elde edin ve push performansı elde edin.

Bu ilkeleri uygulayıp modern kalıplar ve web özellikleriyle geliştirerek gerçekten özgün tasarımlarla mükemmel ve hızlı deneyimler oluşturabilirsiniz. Piksel yerine kısıtlamalarla desteklenen, her kullanıcının içeriğinize ve temel işlevlerine kendi göz atma bağlamına en uygun şekilde erişmesine olanak tanıyan tasarımlar.

Duyarlı web tasarımı

Ethan Marcotte'un 2010 yılında A List Apart'ta yayınlanan Duyarlı Web Tasarımı makalesinden bu yana, tasarımcılar ve geliştiriciler esnek deneyimler oluşturmaya ve çeşitli ekran boyutları ve cihazlarda çalışan kullanıcı arayüzleri tasarlamaya teşvik ediliyor.

Ancak bu süreç içinde, genişlikleri iOS ekran boyutlarından büyük ölçüde etkilenen mobil, tablet ve masaüstü boyutları olarak kısaltıldı. Modern CSS ve duyarlı tasarımın asıl amacına yeniden odaklanmamız sayesinde, esnek sitelere esneklik kazandırabiliriz.

Duyarlı web tasarımı üç teknik bileşen sunar:

  • Sıvı ızgaralar
  • Esnek medya
  • Medya sorguları

Ethan bu teknik gereksinimlerin yeterli olmadığı sonucuna varıyor, ileriye ulaşmak için farklı bir düşünme tarzı gerekiyor.

Mobil kullanıcı efsanesi

Duyarlı tasarımın ilk günlerinde, sitelerin tasarımını kolaylaştırmak adına bazı varsayımlar yapılmıştı. Örneğin, küçük deneyimler telefonlar içindi ve 320 piksel genişliğindeydi, orta deneyimler tabletler içindi ve 1024 piksel genişliğindeydi, bundan daha büyük deneyimler ise masaüstü bilgisayarlar içindi. Küçük ekranlar dokunmatik ekran özelliğine sahipti, büyük ekranlar ise bu özelliğe sahip değildi. Telefon kullanıcıları aceleci ve dikkati dağılmış olduğundan "hafif" bir deneyime ihtiyaç duyuyordu.

Bunların hiçbiri doğru değildir. Bu, kullanıcıların ihtiyaçlarının yalnızca ekran boyutuna veya cihaz türüne göre temelde farklı olduğu varsayımı nedeniyle sürdürülen mobil efsanelerdir. Bu durum çok da titizlikle ele alınmamalıdır.

Örneğin, mobil cihazlara ve masaüstü bilgisayarlara hemen 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'in bulunduğu dar bir pencere tutabilir. Bu durumda, mevcut genişlik nedeniyle kullanıcının mobil cihaz kullandığı varsayılması yanlış olur.

Tarayıcının 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 yüklenen bir PWA ile pencere çok küçük olabilir; tarayıcı penceresinden ve mobil görüntü alanından daha küçük olabilir. Web'de yeni bir özellik sunuyoruz: 200x100 CSS piksele 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 sunacağınızı düşünmek iyi bir fikirdir. Örneğin, müzik çalardaki kontrol düğmeleri, kontrol paneli bilgileri veya hızlı işlemler gibi.

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

Katlanabilir cihazlar ve hibrit

Katlanabilir ve hibrit cihazlar da günümüzde yaygındır:

  • Küçük kapaklı telefonlar.
  • Telefon veya tablet olarak kullanılabilen katlanabilir cihazlar
  • Tabletlere dönüştürülebilen dizüstü bilgisayarlar.
  • Klavye ve dokunmatik yüzeyi olan, dizüstü bilgisayar gibi kullanılabilen tabletler.
  • Telefonlar, bir hub ile masaüstüne dönüştürülebilir.

Her web sitesinde karşılaşılan bir zorluk olsa da Progresif Web Uygulaması (pwa) ile kontrol sizde olur ve uygulama yüklendiğinde gösterilen pencereden siz sorumlu olursunuz. Bu nedenle, tasarımınız her bağlamda tepki vermeli ve en iyi deneyimi sunmalıdır.

Önce her şey

Peki nereden başlamanız gerekiyor? Mobil öncelikli, içerik öncelikli, çevrimdışı öncelikli mi? Web'in esnekliğine göre tasarım yaparken neyi kastediyoruz? Cevabımız evet, her şeyden önce. Mobil öncelikli terimi, Luke Wroblewski tarafından 2009'da ilk kez kullanıldığı günden bu yana birçok şekilde yorumlandı: web'de platforma özgü kullanıcı arayüzü ve kullanıcı deneyimi kalıplarını taklit etmekten, web uygulamalarını oluşturmadan önce mobil uygulamalar oluşturmaya, minimum genişlik medya sorgularını kullanarak işleri tamamlamaya kadar. Ancak asıl amacı şudur: Mobil cihazlar sizi odaklanmaya zorlar. Levent'in dediği gibi:

Mobil cihazlar, yazılım geliştirme ekiplerinin yalnızca bir uygulamadaki en önemli verilere ve işlemlere odaklanmasını gerektirir. 320x480 piksellik bir ekranda gereksiz öğelere yer yoktur. Öncelik vermeniz gerekir. Bu nedenle, bir ekip mobil cihazları öncelikli olarak tasarladığında, kullanıcıların tamamlamak istediği temel görevlere odaklanan bir deneyim elde edilir. Bu deneyimde, günümüzde masaüstünden erişilen web sitelerinde bulunan dolambaçlar ve arayüz kirliliği yoktur. Bu, hem kullanıcılar hem de işletme için iyi bir deneyimdir.

Luke Wroblewski

Web sitenizin her görünümünde, kullanıcının burada gerçekleştirmek istediği temel görevlere odaklanın ve ekranda daha fazla yer olduğu için fikre daha fazla öğe eklemeyin.

Duyarlı Web Tasarımı'nda ikinci ilkeye değinilir: "Farklı deneyimlerin gradyanı". Her kullanıcı için tek, aynı, piksel mükemmelliğinde bir deneyim sunmak çalışmanızın hedefi olmamalıdır. Bu neredeyse imkansızdır.

Web deneyimlerinizi sabit bir şey olarak düşünmek yerine, kullanıcının cihazının mevcut bağlamına en uygun deneyimi oluşturmak için kullanacağı bir öneriler grubu olarak düşünün. Bunun için aşamalı iyileştirmenin benimsenmesi gerekir.

Progresif geliştirme

Kademeli Geliştirme, standart HTML, CSS ve JavaScript'den başlayarak her yerde çalışacak kod yazmamıza ve bir API kullanılamadığında uygun yedeklerle bunun üzerine özellik katmanları eklememize olanak tanıyan bir modeldir.

Nasıl iyileştiriyorsunuz? Özellik algılama, destek için test yaptığınız 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ği olup olmadığını kontrol edin ve sonuca göre kuralları uygulayın. Bu durum hem CSS özellikleri hem de değerleri için geçerlidir. Bir özellik destekleniyorsa ve değer desteklenmiyorsa, desteklenmeyen bir özellikte olduğu gibi işlem başarısız olur. JavaScript kodu, CSSSupportsRule aracılığıyla buna erişebilir.

Yeni web platformu özelliklerinin çoğu mevcut nesnelere eklenir. Bu nedenle, nesne stili algılamadaki "özellik", öğelerdeki özellikleri veya yöntemleri kontrol etme gibi diğer benzer aramalar gibi JavaScript'de iyi çalışır.

Modern JavaScript göndermek için module/nomodule kalıbını kullanarak daha modern tarayıcılara daha küçük bir yük ve eski tarayıcılar için yedek deneyim sunan daha sağlam özellikler sunabilirsiniz. Bu sayede, taahhütler, sınıflar, ok işlevleri ve const gibi yeni JavaScript özelliklerinin temelini garanti edersiniz. let, ES modüllerini destekleyen tarayıcılarda kullanılabilir.

Gelişmiş temel çizginizi oluşturmak için birden fazla özellik algılama biçimini bile birleştirebilirsiniz. BBC News ekibi tarafından ortaya atılan bu yaklaşıma "Cutting the Mustard" (Başarı Sağlama) adı verilir. Bu yaklaşım, herkese temel bir deneyim sunmanıza ve deneyimi yalnızca belirli bir özellik algılama eşiğine ulaşıldığında iyileştirmeye başlamanıza olanak tanır.

Cihaz algılamasını önleme

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

Kullanıcı aracısı dizeleri hiçbir zaman gerçekten güvenilir olmamıştır. "Doğru tahminde" bulunmak için mevcut her tarayıcı, işletim sistemi ve cihaz kombinasyonu hakkında neredeyse mükemmel bir bilgiye sahip olmaları gerekir. Bu durumda bile kullanıcı kimliğine bürünme saldırılarına karşı savunmasızdırlar. Örneğin, mobil tarayıcılarda masaüstü sitesi yönlendirmeleri genellikle bir masaüstü kullanıcı aracısı dizesini taklit etmek kadar basittir.

Ayrıca tarayıcılar, kullanıcı aracısı dizelerini dondurmak için çalışıyor. Özellik algılamaya yönelik kullanıcı aracısı dizeleri, özellikle desteğin sonlandırılmasının nedeni olarak belirtiliyor. Bu da dizeleri, önceden bir kullanıcıyı ve cihazı tanımlamak için kullandıklarından daha da güvenilmez hale getiriyor.

İçerik öncelikli

Web için tasarım yaparken dikkate almanız gereken bir diğer nokta da içeriğinizle başlamaktır. Örneğin, bir hissenin fiyatlarının grafiğini içeren anlık hisse senedi takibi, temelde bir süre boyunca hisselerin fiyatlarını içeren bir tablodur (belki de siteyi yenileme bağlantısı içerir).

Bu, JavaScript ile geliştirilebilir ve tablonun değerlerini zamanlayıcıyla güncellemek için getirme istekleriyle veya gerçek zamanlı push tabanlı güncellemeler sağlamak için soketlerle geliştirilebilir. Sonuçları grafik haline getirmek için CSS, SVG veya Canvas ile tekrar geliştirilebilir. Ancak asıl mesele içerikle başlar.

Öz tasarım

  • Kullanıcı deneyimi için odaklanma kısıtlaması olarak mobil cihazlar.
  • Tasarım sürecinde içeriği ve temel işlevi vurgulama.
  • Kullanılabilir olduğunda gelişmiş işlevlerle kademeli olarak geliştirilir.

Bu ilkeler bir araya gelerek bize yeni bir şey sunuyor: içsel tasarım. Jen Simmons, Doğası gereği yerleşik düzenler tasarlama konulu konuşmasında kullanıcı arayüzlerini tasarlamak ve oluşturmak için Grid, Flexbox, akış düzeni ve yazma modları gibi modern CSS araçlarını kullanma hakkında bilgi veriyor. Bu araçlar sayesinde şunları söylüyor:

Düzenin, sahip olduğumuz içeriğe ve yapmak istediğimiz tasarıma uygun olmasını sağlayabilirsiniz.

Jen Simmons

Bu yeni CSS, tasarımcıların düzen üzerinde yeniden kontrol sahibi olmasına olanak tanır ancak bunu en son web tasarımı ilkelerine uygun bir şekilde yapar. Sabit ekran boyutlarına göre sabit formlar oluşturmak yerine, içeriğin doğal özelliklerinden (ör. ne kadar küçük veya büyük olabileceği, metnin boyutu ve kullanılabilir alan) yararlanarak içeriğe dayalı kurallar tanımlarsınız. Her pikselin yerleşimini kontrol etmek zorunda kalmadan, tasarımınızı içeriğinizle etkileşime geçerken gerçekleştirmenize olanak tanır.

Yerleşik düzenler, web'deki kontrol tartışmasını tanımlayarak tam daire içinde yapar. Web'de kontrol, sitenizin her ziyaretçisinin kullanacağı cihazı, ekran boyutunu, rengi, yazı tipini, düzeni veya özellikleri dikte etmek değildir. Web'de kontrol, bir tarayıcının deneyiminizi oluşturmak için kullanacağı kuralları yazmak ve bu deneyimi, progresif web uygulamanızdaki her kullanıcı için benzersiz bir şekilde oluşturmaktır.

Web performansı

PWA'mız için en önemli temel unsur, web performansıdır. Kullanıcılara mükemmel bir deneyim sunmak zorunludur. Bu, mümkün olan her şekilde daha fazla dönüşüm elde etmenizi sağlar.

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

  • Mevcut kullanıcı odaklı temel metrikleri anlayın.
  • Her metrik için hedefler belirleyin.
  • PWA'mızı ölçün.
  • Kodumuza veya sunucumuza statik olarak teknikler ve en iyi uygulamalar uygulayarak metriklerimizi iyileştirin.
  • Tekrar ölçün.
  • Kullanıcının bağlamına göre her kullanıcının deneyimini anında iyileştirin.

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çer.

Önemli Web Verileri

Son on yıl içinde, web performansındaki başarıyı ölçmek için farklı metriklerle ilgilendik. Bugün Core Web Vitals olarak bilinen bir dizi önerilen metrik, performansı ve kullanıcı deneyimini etkileyen üç temel alana odaklanıyor:

Core Web Vitals'tan bir web sitesinin performans sonuçlarını gösteren bir dizi metrik.

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

PWA ile ilgili temeller

PWA'nızın tüm kullanıcılarınıza mükemmel bir deneyim sunması için duyarlı tasarım, mobil öncelikli yaklaşım, doğal tasarım ve web performansı konularında sağlam bir temele sahip olması önemlidir.

Kaynaklar