Dünya’da mobil kullanımın yükselişi ve arama motorlarının mobil uyumluluğa önem vermesinden sonra tüm siteler mobil çalışmalara hız verdi. Bu aşamada ise bana en çok sorulan sorulardan bir tanesi mobil site hazırlamak için en doğru seçimin ne olduğudur.
Bu konuda 3 farklı alternatif var.
- Bağımsız Mobil Site
- Responsive (Duyarlı) Web Design
- Adaptive (Uyarlanabilir) Web Design
Bağımsız mobil site oluşturmak ilk başlarda tercih edilen ancak tamamen bağımsız tasarım ve kodlar ile en zor seçenek olduğu için artık fazla tercih edilmiyor. Üstelik yapılan güncellemelerin sürekli olarak 2 farklı yerde de yapılıyor olması da çok ciddi bir iş gücü gerektiriyor.
Bunu göz önüne aldığımızda, Adaptive ve Responsive tasarımın artılarını ve eksilerini inceleyelim.
İlk olarak responsive ve adaptive tasarım arasındaki temel farklılıklar nedir?
Basitçe söylemek gerekirse, responsive web sitesi ne olursa olsun hedef cihaz ekranının boyutuna uyum sağlar. Her boyuta göre sürekli değişen bir yapıya sahiptir. Responsive tasarım; ekran tipi, genişlik, yükseklik olarak hedef aygıta dayalı stilleri değiştirmek için CSS medya sorguları kullanır ve sitenin farklı ekranlara uyumu için sadece bu yeterlidir.
Adaptive tasarım ise, başlangıçta yüklendikten sonra yanıt vermeyen belirli ölçülere göre statik düzenleri kullanılmaktadır. Adaptive bunun için ekran boyutunu algılar ve uygun css dosyasını yüklemek için sayfa yüklenirken çalışır.Sadece belirlenen sayıda değişim gösterir. Adaptive tasarım için genellikle kullanılan 6 farklı ekran genişliği bulunuyor:
- 320px
- 480px
- 760px
- 960px
- 1200px
- 1600px
Dilerseniz bu 6 farklı boyut yerine, ilk 4 boyutu kullanarak iş gücünü azaltabilir ve daha hızlı bir geliştirme süreci ortaya çıkartabilirsiniz.
Responsive Design ve Adaptive Design arasındaki farklı anlamak için aşağıdaki görsele bakabilirsiniz. Üst sıradaki responsive design tüm boyutlara uyum sağlarken, alt sıradaki adaptive design boyut değişimine sadece 1 kez değişerek uyum sağlamaktadır.
Neden Adaptive Design?
Adaptive design daha mobil dostu siteler yapmak için idealdir. Her ölçüdeki tasarımı ayrı ayrı kontrol altına alabilirsiniz. Tasarımın kontrol altına almak ve farklı cihazlara özel görünümler yapmaya olanak sağlar. Tercih edilen görünüm sayısı, tamamen tercihe ve bütçeye bağlıdır. Her bir ekran boyutu için farklı bir tasarım yapılması gerektiği için, daha fazla zaman ve iş gücü gerektirmektedir. Adaptive tasarımda sabit ölçüler yani “px” değerlern kullanarak tasarım yapılır.
Daha önce de belirttiğim gibi, bu 6 ekran boyutu adaptive tasarım için standart. Ancak, yapacağınız sitenin ziyaretçilerinin hangi ekran boyutunu kullandığını Google Analytics gibi araçlar kullanarak tespit edebilir ve buna göre kendi kırılımlarınızı oluşturabilirsiniz. Bu şekilde daha bilinçli karar verebilirsiniz.
Neden Responsive Design?
Responsive tasarım, adaptive kadar kontrol sunmamaktadır. Aynı elementlerin sadece farklı boyutlara uyum sağlamasıyla mobil uyumluluk sağlanır. Bu da genişlik değerlerinin sabit değerler değil, göreceli yani “%” değerler kullanılmasıyla elde edilir. Responsive bir web sayfasında pencere yeniden boyutlandırıldığında, tüm nesneler de de sıvı gibi hareket ederek o boyuta uyum sağlar. Responsive tasarımın, adaptive tasarıma göre avantajı ise çok daha hızlı yapılabilmesidir.
Adaptive Design ve Responsive Design Performans Farklılığı
Her iki tasarım da performans olarak incelendiğinde, responsive tasarım sınıfta kalabilir.
Çünkü responsive sitelerin her ekrana uygun olmasını sağlamak amacıyla kodlama tarafında fazla yük taşır. Adaptive tasarımda ise her düzen için ayrı HTML ve CSS kodu kullanılır. Bu da ekstra çalıştırma gerektirse de performans olarak çok daha iyidir. Özetle; adaptive web siteleri, responsive web sitelerine oranla en az 2 kat daha performanslıdır.
Tabii ki mobil site hazırlarken kullanılan içeriğin sadece mobilde düzgün görünmesi yetmez, ay zamanda kullanıcı deneyimi de göz önünde bulundurmalıdır.
Mobil sayfalarda elemanları sadece sayfaya sığdırabilmek yeterli değildir. Bir mobil tasarım başarılı olması için, tasarım aynı zamanda tüm ekran çözünürlükleri ve boyutlarda kullanılabilir olması gerekir.
Sonuçta karar tamamen size bağlı! Eğer performansı ve tüm ekranlarda kullanıcı deneyimi iyi bir site hazırlamak istiyorsanız, adaptive design tercih etmelisiniz. Ancak çok fazla vakit veya bütçe yok dediğiniz noktada hızlı ve daha kolay bir çözüm için responsive design tercih edebilirsiniz.