Bir internet sitesinin tablet, bilgisayar veya telefon gibi farklı ekran büyüklüklerine sahip cihazlarda çalışması farklılık gösteriyor. Gönderinin veya görselin boyutlanması işletim sistemlerine ve ekran büyüklüklerine göre değişebiliyor. Tasarımcılar ve geliştiriciler farklı çözünürlüğe sahip ekranlarda aynı performansı almak için farklı varyasyonları deniyor ve siteden optimum verim almaya çalışıyor. Bunun için farklı ekran büyüklüğüne sahip ekranlarda sitenin nasıl gözüktüğüne tek tek bakmaları gerekiyor. Bu süreç de tasarımcılar için vakit kaybı yaratabiliyor. Açık kaynaklı olarak hazırlanan Sizzy, tasarımcıların ve geliştiricilerin internet sitesini hazırladığı aşamada yaşadığı zaman kaybını azaltmayı hedefliyor. Sizzy, sitelerin farklı cihazlarda nasıl gözüktüğünü tek bir sayfada gösteriyor. Program bir günlük çalışmanın ardından GitHub üzerinden geliştirilen proje ile ortaya çıktı.

Sizzy geliştiricinin hissettiği eksiklik üzerine bir günde hazırlanıyor

UI/UX tasarımı ile ilgilenen program geliştiricisi 2017 yılında kurduğu siteyi bir gün içerisinde kodlayarak bitiriyor. Kitze adlı Twitter kullanıcısı müşterisi için hazırlayacağı internet sitesinin her cihazda nasıl görüneceğini tek bir sayfa üzerinden görmenin tüm işini kolaylaştıracağını fark ediyor. Tablet ya da telefon için sitede bulunan yazının büyüklüğünü resmin nasıl gözüktüğünü her cihazda optimum verimi nasıl olabileceğini görmek isteyen geliştirici kolları sıvayıp işe girişiyor.

Alrighty, zoom is done!
But, why stop at debugging React apps in storybook? ?

Here's the @vuejs website in all shapes and sizes ? ? pic.twitter.com/sVa7ZpfVqs

— Kitze (@thekitze) April 27, 2017

Prototipi hazırladıktan sonra üzerine yaptığı eklemelerle Sizzy’nin kullanıcı deneyimini geliştirmeye yönelik çalışmalar sürdürmeye devam ediyor. Farklı telefon modellerinde yazının ve görsellerin farklı boyutlarda görünümleri için yakınlaştırma ve uzaklaştırma butonunu koyuyor. Android ve iOS işletim sistemlerine sahip farklı türde telefon ve tabletleri kategoriye ayırarak ayrı ayrı gözükmesini sağlayan Aşamaları bir bir kaydeden Kitze, kullanıcı arayüzünü geliştirip farklı temalar ekleyerek Sizzy projesini 10 saatlik bir süreç içerisinde tamamlıyor.

It's 4 AM, so finally wrapping up work on Sizzy today:

? open sourced https://t.co/KvStC4ByUe
? added Flow types
? improved UI pic.twitter.com/ZcZ8opg0L2

— Kitze (@thekitze) April 28, 2017

Chrome eklentisi kullanımı kolaylaştırıyor

Sizzy üzerinden hazırlanan sayfanın her türlü ekranda nasıl gözükeceğini görmek mümkün. Bu sayede site sahipleri içeriklerini ve görsellerini her kullanıcıya uygun gelecek şekilde optimum ayarı gerçekleştirebiliyor. Sizzy’nin avantajlarından birisi de Chrome tarayıcısında eklentisinin bulunması. Eklentinin kurulumu  yapıldıktan sonra direkt olarak kullanıma geçilebiliyor.

Görsel: Youtube