Mobil web sitesi tasarımı karmaşıktır, çünkü bir sitenin bir mobil sürümü her cihazla uyumlu olmayabilir. Mobil varlığınızı anlamlı ve değerli kılmak için tasarımcıların en iyi tasarım uygulamalarından haberdar olmaları gerekir.
Web geliştiricileri arasında mobil olarak optimize edilmiş bir web sitesi oluşturmanın en iyi yolunun ne olduğu konusunda sürekli bir tartışma var. Mobil web sitesi geliştirmek için üç ana yöntem vardır.
Bunlar:
- Yanıt veren Web tasarımı.
- Özel mobil web siteleri.
- RESS: Sunucu tarafı programlama, cihazın türüne bağlı olarak CSS ve HTML oluşturur.
Her yöntemin avantajları ve dezavantajları vardır. Bir Web geliştiricisi, durum için en iyisini uygulamak için her tekniğin farkında olmalıdır.
Mobil Web Sitesi Tasarlamanın 3 Yolu
Duyarlı Web Tasarımı (RWD)
RWD, bir web sayfasının düzenini bir cihazın görüntüleme alanının boyutuna göre ayarlamak için CSS3 ortam sorgularına güvenir. Aynı HTML kodu, tabletler, mobil cihazlar, masaüstleri ve diğer araçlar için farklı web sayfa düzenleri sunmak için kullanılır.
Yararları:
- Web siteniz benzer içerik ve HTML işaretlemesine sahip olacak, böylece mobil ziyaretçiler ne tür bir cihaz kullanıyorlarsa kullansınlar aynı deneyime sahip olacaklar.
- Tek bir URL, kullanıcıların içeriklere bağlanmasını ve paylaşmasını kolaylaştırır. (Web sayfası birden fazla URL adresinde mevcutsa, kullanıcıların kafası karışabilir.)
Dezavantajları:
Mobil içeriği ayrı ayrı optimize etmek mümkün değildir. Bu nedenle, RWD kullanan bir tasarımcı, mobil kullanıcılar için ayrı olarak içerik uyarlayamaz.
HTTP arşivinden Ocak 2013 verilerine göre, ortalama bir web sayfası yaklaşık 1,3 MB'dir. Ancak, çoğu RWD sitesi nispeten daha büyüktür. Bu daha büyük boyut, mobil sitelerin performansını düşürerek yavaşlatır.
Mobil kullanıcılar, mobil cihazlara özgü kullanıcı arayüzü tasarım modellerine daha çok uymaktadır. Dahası, mobil kullanıcılar çoklu görevlere alışmaktadır. Navigasyon yapısı belirli cihazlar için özelleştirilmediği sürece, kullanıcılar aynı anda birkaç görevi yerine getirmeye çalışırken sorunlarla karşılaşabilirler.
Özel Mobil Siteler
Bu yöntem, tamamen ayrı bir web sitesi oluşturarak mobil kullanıcıların deneyimini geliştirir.
Yararları:
- Yönetim kolaylığı: Mobil ve masaüstü siteler için ayrı değişiklikler yapılması gerekir. Yapılan değişiklikler ilgili versiyonlarla sınırlıdır. Bu, mobil platform için yapılan değişikliklerin masaüstünden erişilemediği anlamına gelir.
- Cep telefonuna özel bir web sitesi geliştirirken, bu kitleye özel olarak web sitenizi düzenlemek ve optimize etmek kolaylaşır.
- İçerik ve gezinme yapısı mobil kullanıcılar için özelleştirilebilir.
Dezavantajları:
Bir web sayfasını sosyal medya aracılığıyla paylaşmak zorlaşır, çünkü özel mobil siteler için sayfalar için birden fazla URL vardır. Masaüstü kullanıcıları sosyal medya platformlarında paylaşılan mobil URL'lere tıkladığında, istemeden masaüstü sürümünden ziyade sitenin mobil sürümünü alabilirler.
Yinelenen içerik sorunlarını önlemek için, Web geliştiricisinin rel = ”alternative” ve rel = ”canonical” meta etiketlerini kullanması gerekir. Bir mobil kullanıcı Google’ı ararsa ve bir masaüstü URL’sini tıklarsa, kullanıcı masaüstü sürümünü görüntüler veya web sayfasının mobil sürümüne yönlendirilir. Mobil versiyon mevcut değilse, kullanıcı bir hata mesajı alır.
Mobil kullanıcılar için tamamen farklı bir web sitesi oluşturmak, sitenin özellikle mobil kullanıcılar için uyarlanacağı anlamına gelir. Bununla birlikte, bu amacı yerine getirmek için Web geliştiricileri, kendileri için bir kabus haline gelen işlevselliği ve içeriği kesmek zorundadır.
Duyarlı Web Tasarımı+ Sunucu Tarafı Bileşenleri (RESS)
Bu yöntem, farklı cihazlar için özel HTML ve CSS sağlamak için sunucu tarafı programlamaya bağlıdır. Mobil kullanıcılar için kod, masaüstü kullanıcılarınınkinden farklı olacaktır.
Bu uygulamanın arkasındaki asıl amaç web sitesinin performansını artırmaktır. Bu yöntem, duyarlı Web tasarımıyla birleştirildiğinde iyi çalışır. Bu nedenle, bu uygulamaya Duyarlı Web Tasarım + sunucu tarafı bileşenleri (RESS) denebilir.
Yararları:
- Gezinme yapısı, masaüstü ve mobil kullanıcılar tarafından gerçekleştirilen farklı görevler için özelleştirilebilir.
- Geliştiriciler, istenen görüntüyü elde etmek için sayfa öğelerini HTML ve CSS'den kaldırabilir.
- Gereksiz JavaScript'i HTML'den kaldırmak mümkündür, bu da CPU kaynaklarını, hafızasını ve mobil cihazların önbelleğini boşaltır.
Dezavantajları:
- Dinamik HTML, sunucudaki yükü artırır.
- Cihaz tespiti güvenilemez.
- HTML ve CSS mobil performans için optimize edilmiştir. Masaüstü sürümü daha fazla HTTP isteği ve Java Komut Dosyası kullanır.
Hangi Yöntem Seçilsin?
Mobil kullanım için optimize edilmiş bir site tasarlama kararı, sattığınız ürünlere, hedef kitlenize, gereken yatırımlara, rekabetinize, dönüşüm oranlarınıza vb. Bağlıdır. En iyi çalışacak tasarım yöntemi, büyük ölçüde ekran biçimlerine, işletim sistemlerine, tarayıcılara ve çözünürlükleri.
Yanıt veren Web tasarım sitelerinin çoğu en iyi şekilde uygulanmamıştır ve sonuç olarak bu sitelerin yüklenmesi daha fazla zaman almaktadır. Rekabet şiddetli olduğu için siteniz daha yavaş performans gösterirse müşterileri kaybedebilirsiniz. Bir kullanıcı açmak için daha az zaman alan başka bir web sitesine geçecektir. Özel mobil sitelerle daha kısa yükleme sürelerine sahip web siteleri oluşturmak mümkün olsa da, bu uygulamaya ek olarak çeşitli sakıncalar da vardır.
RESS, RWD'nin iki ana dezavantajının üstesinden gelmenin faydalarını sağlar. RESS'in en büyük dezavantajı, cihazın algılanmasının güvenilmez olmasıdır. Sürecin doğru çalışmaya devam etmesini sağlamak için yeni aygıtlar için sık sık test etmeniz gerekir.
DeviceAtlas, WURFL ve yeni cihazları tespit edebilen diğerleri gibi servisler var. Veritabanınızdaki yeni cihazları güncellemek çok yardımcı olacaktır.
Mobil Web tasarımı yalnızca bir web sitesi mobil cihazda düzgün görüntülendiğinde başarılı olur. Tasarımcıların masaüstü sitenin tüm önemli parçalarını küçük, mobil bir pencerede temsil etmeleri zor bir iş olsa da, mobil web sitelerini daha iyi, daha hızlı ve daha tam özellikli hale getirmek için her gün yeni teknikler ortaya çıkıyor.
Shutterstock ile mobil web sitesi fotoğrafı
15 Yorumlar ▼
