Günümüz internet dünyasının önemli kavramlarından olan mobil uyumluluk, tasarım, kodlama, kullanılan teknolojiler gibi farklı disiplinleri kapsıyor. Bu yazıda, mobil uyumlu kavramı hakkında giriş seviyesinde, genel bir bilgi bulacaksınız.
Mobil uyumlu ne demektir?
Mobil uyumluluk, bir internet sitesinin cep telefonunda (ve tabletlerde) ekranı büyütüp küçültmeden görüntülenmesi ve bu cihazların kısıtlamalarından etkilenmeden eksiksiz bir şekilde kullanılabilmesi olarak tanımlanabilir. Bu genel amaca yönelik olarak responsive tasarım, adaptive tasarım veya mobil site (m-dot) gibi farklı tasarım ve geliştirme yöntemleri kullanılmaktadır.
Neden mobil?
Mobil uyumlu sitelerle ilgili ayrıntılara geçmeden önce mobil internetin neden önemli olduğunu hatırlamakta fayda var. Kısaca özetlemek gerekirse:
- Internet kullanımı gittikçe artan bir hızla mobil cihazlara kayıyor. 2015 yılı tahminlerine göre Google’ın arama trafiğinin yarısı mobil cihazlardan geliyor.
- Yalnız arama ve okuma değil, alışveriş gibi masaüstüne daha çok yakıştırdığımız etkinlikler de mobil cihazlara kayıyor. Ağustos 2015 ‘te Forrester tarafından yapılan bir çalışmaya göre akıllı telefonlar, internetten alışveriş için kullanılan başlıca cihaz haline geldi.
- Sitenizin internet arama sonuçlarının üst sıralarda çıkmasını istiyorsanız, yani SEO sizin için önemliyse, yine mobil uyumlu bir sisteme geçmeniz gerekiyor. Google, 2015 baharında, algoritmasını mobil uyumlu siteleri daha üst sıralarda listeleyecek şekilde değiştirdi.
- Gelecek mobil cihazlarda. Mobil internet trafiğinin masaüstü internet trafiğine olan mevcut üstünlüğü artarak devam edecek gibi görünüyor. Morgen Stanley’in Eylül 2015’te hazırladığı bir rapora göre, Mobil internet trafiği, uygulama kullanımından iki kat fazla ve 1.2 kat daha hızlı gelişiyor.
Mobil uyumlu olmayan sitelerin dezavantajları
İnternet tüketimi açısından ele aldığımızda, mobil cihazların masaüstü bilgisayarlardan daha önemli bir konuma geçtiği anlaşılıyor. Peki, mobil uyumlu olmayan siteler mobil cihazlarda ziyaret edildiğinde ne gibi problemleri ortaya çıkıyor? Bu problemleri çözmek için neyi ve neden değiştirmemiz gerekiyor?
Görüntülenme problemleri
Mobil uyumlu olmayan bir siteyi cep telefonunda açtığımızda, ya koca bir sayfayı minik bir ekrana sığmış olarak, ya da büyük bir sayfanın yalnızca ekranımıza sığan kısmını görürüz. Birinci durumda sayfayı yakınlaştırarak, ikincisinde de sağa-sola, yukarı aşağı kaydırarak işimizi görmeye çalışırız. Her ikisi de sıkıntılı bir kullanımdır.
Kullanım problemleri
Bir site sadece geniş bir ekranda görüntülenecek ve fare ile kullanılacak düşüncesi ile yapılmışsa, etkileşimli öğeler de (menüler, düğmeler, bağlantılar, formlar) ona göre tasarlanıyor. Ancak masaüstünde son derece hassas bir fare imleci ile çalışırken, mobil cihazlarda imlece göre çok daha tombul olan parmaklarımızı kullanıyoruz. Bu, kullanılabilirlik bakımından önemli bir fark.
Menü/arayüz problemleri
Bazı menü tasarım şablonları, masaüstünde başarılı olsalar da, mobil cihazlarda problemler yaratabiliyorlar. Yatay yerleşimli (yan yana dizilmiş) menü başlıkları, görsellerle desteklenmiş zengin menüler ve fare imleci üzerine gelince açılan (hover) alt menüler bunların ilk akla gelenleri. Yatay menüler mobil cihazların ekranlarına sığmıyor. Bu cihazların internet erişimleri sınırlı olduğu için, zengin menüler için kullanılan her görsel hem internet kotasını tüketiyor, hem de sayfa yükleme süresini uzatıyor. Arayüz olarak dokunmatık ekranları kullanan bu cihazlarda hover olayının bir karşılığı zaten bulunmuyor.
Ayrıca Fare imleci ile çok hassas tıklamalar yapabilmemize rağmen, parmaklarımızı kullandığımızda istediğimiz öğeye isabet ettirebilmemiz için daha geniş bir yüzey gerekiyor. Bu faktörü göz önünde bulundurmayan bir arayüzde, kullanıcı yanlış bağlantılara, düğmelere tıklayabiliyor.
Kullanıcı etkileşimini güçleştiren bu problemler, kimi sitelerin mobil cihazlarda kullanılamaz hale gelmesine sebep olabiliyor.
Kaynak kullanımı problemleri
Günümüzde masaüstü ve dizüstü bilgisayarlarımızda oldukça hızlı internet bağlantıları kullanıyoruz. Bu yüzden, artık çoğu kullanıcının sahip olduğu geniş ekranları hakkıyla doldurabilmek için büyük görsel kullanımı neredeyse standart bir uygulama oldu. Hızlı (ve nispeten ucuz) bir internet bağlantınız varsa bu bir problem oluşturmuyor. Ancak genellikle sınırlı ve daha yüksek ücretli internet bağlantılarına sahip mobil cihazlar söz konusu olduğunda, bazı problemler ortaya çıkıyor. Mobil cihazların, hele ki telefonların ekranının bazen on katı boyutlarda olabilen büyük görseller, mobil uyumlu olmayan bir site tarafından sorgusuz sualsiz kullanıcıya gönderiliyor. Tamamen gereksiz olan bu veri trafiği kullanıcıya hem kaybedilen zaman, hem de boşa harcanan internet kotası olarak yansıyor.
Mobil uyumlu tasarımın getirdiği çözümler
Mobil uyumlu bir site, yukarıda bahsedilen problemlere ve onlarla bağlantılı bazı güçlüklere aşağıdaki çözümleri getirmektedir.
Küçük ekrana uyumlu sayfa yerleşimi
Masaüstünün geniş ekranlarında gözümüzün alıştığı 2-3 sütunlu yerleşimler, mobil uyumlu sitelerde yerlerini tek sütunluk, uzun sayfalara bırakmaktadır. Dikey kaydırma mobil cihazlarda başparmak ile kolaylıkla yapıldığı için, uzun bir sayfa kullanıcı deneyimini olumsuz bir şekilde etkilememektedir.
Dokunarak kullanıma uygun menü/arayüz çözümleri
Yukarıda da kısaca bahsettiğimiz gibi, mobil cihazların etkileşim yöntemi dokunma ağırlıklı olduğu için, kullanıcı arayüzleri de bu şekilde tasarlanmaktadır. Tıklanacak öğeler uygun ebatlarda ve aralarında yeterli mesafe olacak şekilde yerleştirilmektedir.
Mobil uyumlu sitelerin menüleri, sınırlı ekran alanını en iyi şekilde değerlendirebilmek için genellikle açılır kapanır olarak yapılmaktadır. Menü, kullanılmadığı zaman saklanmakta ve böylece ekranda içerik için yer açılmaktadır.
Mobil menülerde, menü başlıkları dikey olarak kullanılmakta ve böylece genellikle ince uzun olan telefon ekranlarından verimli bir şekilde yararlanılabilmektedir.
Okumayı kolaylaştıran tasarım
Fikrimce, mobil cihazların bize belki de en büyük faydası, internet sayfalarındaki gereksiz kalabalığı azaltmaları olmuştur. Küçük ekranların kısıtladığı alan bizleri, tasarım kararlarını verirken daha seçici olmak ve gerçekten o sayfaya ait olmayan öğeleri atmak zorunda bırakıyor. Sayfanın gereksiz kalabalıktan temizlenmesi, zaten tek sütuna inmiş sayfa yerleşimi ile birlikte, rahat bir okuma deneyimini güçlendiriyor.
Okumaya yönelik bir başka değişiklik de, genel olarak yazı boyutunun büyümesi şeklinde ortaya çıkıyor. Masaüstü sitelerde ‘daha güzel’ göründüğü için kullanılan küçük boyutlu metinler, mobil cihazların kısıtlamaları karşısında yerlerini rahat okunan, satır araları düzenlenmiş güzel metinlere bırakıyorlar.
Kaynak kullanımında optimizasyon
Mobil uyumlu sitelerde görseller mobil cihazlar göz önünde bulunarak kullanılıyor. Bu, cihazların küçük ekranlarına göre optimize edilmiş görsellerin, sadece gerekli olduklarında kullanılmaları anlamına geliyor. Böylece kullanıcı ancak ihtiyacı olan/yararını görebileceği görselleri indiriyor. Zaman ve internet kotasından tasarruf etmiş oluyor.
Mobil uyumlu site çeşitleri
M-dot site
M-dot site sadece belirli cihazlara (yani telefonlara, belki tabletlere) göre hazırlanır ve ‘asıl’ siteden ayrı, kendi başına bir sitedir. Yani iki farklı site vardır. Sunucu, kendisinden sayfa talebinde bulunan cihazı koklayarak(1) tanımaya çalışır. Mobil bir cihaz olduğuna karar verirse m-dot siteye, aksi takdirde masaüstü siteye yönlendirir. Böylece telefondan baktığınızda mobil siteyi, masaüstünden ya da dizüstü bilgisayardan baktığınızda ise masaüstü siteyi görürsünüz. Mobil sitenin adresi, masaüstü sitenin alan adının önüne “m” harfi getirilerek oluşturulduğu için m-dot (me-nokta, mesela m.alanadi.com) site denilmektedir.
Adaptive site
Adaptive site, kendisini görüntüleyen cihazın ve tarayıcının özelliklerini tespit ettikten sonra, önceden belirlenmiş yerleşimlerden birini seçer ve onu görüntüler. M-dot siteden farkı, ziyaretçinin tarayıcısını belirlemeye çalışmak yerine onun hangi özelliklere sahip olduğunu belirlemeyi çalışmasıdır. ‘Özellik belirleme’ ismi verilen bu yöntem, tarayıcı koklamaya göre daha isabetli ve ayrıntılı sonuçlar verebilir.
Responsive site
Responsive site, görüntülendiği cihazın özelliklerini tespit eder ve kendisini o cihaza uyumlu hale getirir. Böylece telefondan masaüstü bilgisayara, tabletten televizyona tüm cihazlarda, kullanım ve görünüm bakımından sanki o cihaz için tasarlanmış gibi bir kullanıcı deneyimi sağlar. Adaptive siteler gibi, responsive siteler de özellik belirleme yöntemini kullanır. Adaptive site ile en önemli farkı adaptive siteler esnek olmayan, kademeli bir yapıya sahipken, responsive sitelerin esnek ve akışkan bir yapı ile üretilmesidir.
Özetlersek
2016 itibarı ile mobil internet trafiği masaüstü internet trafiğini geçmiş olup artışını da sürdürmektedir. İnternette yer alan herhangi bir sitenin bu gerçeği mutlaka göz önünde bulundurması gerekmektedir.
Mobil uyumlu olmayan siteler kullanıcılara görüntüleme ve kullanım zorlukları yaratabilmekte veya tamamen kullanılamaz olabilmektedir.
Küçük ekran, dokunmatik etkileşim gibi etkenleri göz önünde bulundurarak, mobil cihazlarda problemsizce görüntülenecek ve kullanılabilecek şekilde yapılan sitelere mobil uyumlu site denilmektedir.
Mobil uyumluluk genel bir kavramdır. Bu hedefe ulaşmak için m-dot site, adaptive tasarım veya responsive tasarım yöntemlerinden biri kullanılabilir.
Dipnotlar
- Tarayıcı koklama: Tarayıcıya özel sayfalar, kodlar, görseller ya da içerikler sunmak için web sayfasını ziyaret eden kişinin tarayıcısını belirleme işi. Bu teknik, 90’ların sonu ve 2000’lerin başında, internet standartları henüz oturmamışken daha popülerdi.
