Virgo Blog
Responsive vs adaptive web tasarımıWeb sitelerinin mobil uyumluluğu son derece önemli hale geldi çünkü internete mobil cihazlar üzerinden erişimin pastadaki payı günden güne artıyor. Google da bir süredir (şimdilik sadece mobil aramalarla sınırlı olsa da) mobil uyumluluğu arama sonuçlarını sıralarken bir kriter olarak kullanıyor. Bu konuyla ilgili detaylı bilgiye Virgo Blog'un 1 Haziran 2015 tarihli makalesinden ulaşılabilir. Kısaca mobil uyumluluğun sağlanması web sitelerinden verim alabilmek için zorunlu haline geldi diyebiliriz.

Web sitelerinin mobil cihazların ekranında düzgün görüntülenebilmesi için iki temel web tasarım modeli var;

Responsive web tasarımı

Responsive web tasarım modelinde CSS Media Query'ler kullanılarak web sitesine gelen ziyaretçinin kullandığı ekran tipi, genişliği ya da yüksekliğine göre şekil değiştirebilen web sayfaları hazırlanır. Bu türden tasarımlara "fluid" tasarımlar da denir, çünkü tasarım tıpkı içinde bulunduğu kabın şeklini alan sıvılar gibi davranarak görüntülendiği ekrana göre şekil değiştirir. Responsive tasarımların düzgün çalışabilmesi için web geliştiricinin CSS Media Query'lere hakim olması ve farklı ekran çözünürlüklerinde sorunsuz sonuçlar verecek CSS kuralları yazabilmesi gerekir.

Responsive web tasarımı sıfırdan geliştirilen web siteleri için bana göre ideal mobil uyumluluk çözümüdür. Responsive çalışmalar, tek tasarım şablonu üzerinden çok farklı ekran çözünürlükleri ile çalışabilecek yapıda olduklarından, daha ileride tasarımda yapılacak değişiklikler açısından da web geliştiriciye büyük kolaylık ve zamandan tasarruf sağlar. Elbette bunun web sitesi sahibi için de daha düşük maliyet anlamı taşıdığını söyleyebiliriz.

Responsive tasarımların problemi, Cascading Style Sheet'lere hakim olmayan web geliştiricilerin elinde görüntüleme ve yükleme performansı açısından sorunlu olabilmeleridir. Responsive tasarımlar hazırlanırken CSS kodlaması sırasında web geliştiricinin hem çapraz tarayıcı uyumluluğunu, hem de farklı ekran çözünürlüklerine uyumu sağlayabilmek için çok yüksek sayıda kombinasyon ile denemeler yapması ve CSS'leri buna göre yazması gerekir.

Adaptive web tasarımı

Adaptive web tasarım modeli sıfırdan geliştirilecek web siteleri için kullanılabilir olsa da, çoğunlukla mevcut bir web sitesinin mobil uyumlu hale getirilmesi amacıyla uygulanır. Adaptive tasarımlarda, daha önceden belirlenmiş ekran çözünürlükleri için ayrı ayrı HTML ve CSS kodlaması yapılarak farklı viewport'lar için alternatif şablonlar geliştirilir. Başarılı bir adaptive tasarımdan söz edebilmek için 320, 480, 760, 960, 1200 ve 1600 piksel genişliğe göre optimize edilmiş en az 6 adet şablon oluşturulmalıdır.

Adaptive web tasarımında, sitenin mobil tasarım şablonlarının oluşturma aşamasında her biri için ayrı ayrı kodlama yapılması gerektiği için, harcanacak zaman ve ortaya çıkacak olan maliyet, seçilecek viewport sayısına oranlı olarak artar. Site tasarımına daha sonradan yapılacak müdahalelerde de, her viewport için hazırlanan şablonun ayrı ayrı ele alınması gerektiği için adaptive tasarımlar hızlı tasarım güncelleme imkanı sunmaz.

Mobil uyumluluk, ekran çözünürlüğüne uyumdan ibaret değildir

Yapılacak çalışma için hangi tasarım modeli seçilirse seçilsin, web sitelerinde mobil uyumluluğun ekran çözünürlüğüne uyumdan ibaret olmadığı akıldan çıkarılmamalıdır. Sitede kullanılacak font büyüklüklerinden tutun, menülerin farklı çözünürlüklerde yerleşimine ve hatta hangi site öğelerinin hangi mobil versiyonda ziyaretçiye gösterilmeyeceğine kadar çok sayıda faktör dikkate alınmalı ve tüm ziyaretçiler için verimli bir kullanıcı deneyimi sağlanmalıdır.

Sevgiyle kalın...
Mustafa Odabaşı

This email address is being protected from spambots. You need JavaScript enabled to view it.

Mustafa Odabaşı

Virgo'nun kurucu ortaklarından Mustafa Odabaşı, bundan 20 küsür sene önce, bilişim sektörüne profesyonel olarak ADA NET'de adım atmıştır. Cyberspace ile Türkiye'ye internetin gelmesinden çok önce BBS'ler vasıtasıyla tanışan Mustafa Odabaşı, Türkiye'nin ilk ve en geniş mesaj ağı HiTNeT'in de eski SysOp'larındandır. Halen bilgi ve tecrübelerini Virgo'da hizmet üreterek değerlendirmektedir.

REFERANSLARIMIZDAN BAZILARI

canova-construction.pngtestform.pngkronospor.pngarma-yatcilik.pngmarge-hotel.pngintermak.pngcekar-insaat.pngesbelli-evi.pngsevgi-goz-merkezi.pngdolfen.pngyalcinkaya-mermer.pngesmaksan.pngerkut-aldeniz.pnguz-ay-insaat.pngozyurek.pngilbe-mineral.pngcanbensan.pngtubay-danismanlik.pngalser-teknik.pngnaka.pngdesen-ofset.pngermer-marble.pngdeniz-peyzaj.pngar-metal.pngozel-ankara-umut-hastanesi.pngarmin-yalitim.pngatlas-sondaj.pngmint-fuarcilik.pngheraeus-electro-nite.pngsada-fuarcilik.pnggelibolu-memorial.pngozel-cankaya-hastanesi.pngmetron-insaat.pngcankaya-ortopedi.pngpm-teknoloji.pngdr-smile.pngsevgi-optik.pngatr-saglik-teknolojileri.pngnereids-dive-center.pngortoklinik.pngocb-sigorta.pngkalca-cerrahi-dernegi.pngocy-rent-a-car.pngmikropor.pngankara-model-ucak-kulubu.pngsunrider.pngvilla-mahal.png6k-medikal.pngdez-kuafor.pngbernus-tourism.pngturna-ahsap.pngmaser-insaat.png