8 Optimizasyon Yöntemi-Mobil Site

Ağustos 11, 2016
8 Optimizasyon Yöntemi-Mobil Site

Dünya masa üstü bilgisayardan mobil cihazlara geçince, tasarımcılar UX (Kullanıcı Deneyimi) olgusuna odaklanmaya başladılar.  Mobil dostu web tasarımları oluştururken kullanıcı arayüzünün önemli bir rolü olsa da , farklı türde cihazlar ortaya çıkmasıyla kullanıcı deneyimlerinin değişmesinden dolayı kullanıcı deneyimi önemli hale geldi.

UX (kullanıcı deneyimi grafik ve estetik anlayışın ötesinde birşeydir.  foster.fm sitesinin yaratıcısı Rahul Varshney,  UI (kullanıcı arayüzü) ve UX (kullanıcı deneyimi) kanvasın üstüne düşünmeden boya fırlatan bir ressama benzediğini belirtmiştir.  Rahul yaptığı bu benzetimi yapmakta haklıdır.  Kullanıcı dostu, eşsiz ve fonksiyonel bir web sitesine sahip olabilirsiniz; fakat mobil cihazları ve onları kullananların deneyimlerini dikkate almıyorsunuz, yani düşünmeden tuale boyayı fırlatıyorsunuz.

Öyleyse iyi bir mobil kullanıcı deneyimini kötü olandan ayıran şey nedir? Oldukça etkili, optimize olmuş, kullanıcı odaklı bir tasarımı oluşturan anahtar içeriklerin ayrımını yapmak zor olmasa gerek.  Fakat burada size sunacağımız bir kaç uygulama var ki size rehhberlik edebilir:

1)  “ÖNCE MOBİL” PRENSİBİNİ ATLAMAYIN

Eğer kuracağını web sitesi mobil UX’i yani mobil kullanıcı deneyimini hedefliyorsa, geleneği kırıp “önce mobil” stratejisini takip etmeniz gerekir. Kullanıcıların çoğunluğun sitenize mobil cihazlardan gireceğini ö görerek bu tekniği kucaklamanızda büyük yarar vardır.  Tasarımınızı mobil web uygulamalarına göre ayarlamanız sadece trende uyup görüntü olsun diye yaptığınız bir şey değildir. Aslında 1.2 milyar insanın mobil cihaz kullandığını göz önünde bulundurursak, mobil tasarımın ön planda tutulduğu bir tasarımın ne derece potansiyele sahip olduğunu da ön görebilirsiniz. Bu rakamın düşmenin aksine günden güne artışta olduğunu ve ilerleyen yıllardaki trendlerin de buna göre belirleneceğini de unutmayalım. İlk başta bu konu karmaşık gelebilir, fakat  kullanıcıları merkeze aldığınız bir tasarım oluşturmak istiyorsanız, mobil tasarımı ön planda tutmaya değerdir.

Sade, temiz veya mobil odaklı bir web sitesi kuracak olmanız, tasarımınızın sofistike olamayacağı anlamına gelmemektedir. karimrashid.com sitesi buna en güzel örneklerden birini teşkil etmektedir. Bu site de sadelik ve sofistifikasyonun birbiriyle nasıl uyumlu sunulup klas bir tasarım ortaya konulduğunu görebilirsiniz. Aşağıda sizin için bir ekran görüntüsü veriyoruz.

mobil-web-tasarim-web-seo-antalya-kurumsal-web-sitesi-tasarimlari-seo-uzmani

2) AKICI OTURUM PLANLARI OLUŞTURUN

Piyasadaki cihazların sayısını ver türlerini göz önünde bulundurursak hangi ekrana uyumlu web tasarlayacağımız biraz kafa karıştırıcı olabilir. Oluşturacağınız tasarım bu cihazların hepsinde hatasız açılmalıdır. Şanslısınız ki fluid web yerleşim tasarımlarının (fluid layout: her cihaza uyabilen, görüntülenebilen tasarım) tüm cihazlara uyumluluğu bulunmaktadır.

Hiçbir piksel ölçümüne bağlı kalmaksızın yüzdelik oranlardan ayarlananan fluid web yerleşim planı şu sıralar web tasarımcıları arasında trendi yükselen bir teknik olarak karşımıza çıkmaktadır.  Kafa karıştırıcı olabilir ama sonucunda milyonlarca kişiye cihaz farkı gözetmeksizin hatasız bir şekilde ulaştırabileceğiniz bir web tasarımı oluşturabileceksiniz.

3) FONKSİYONELLİĞİ HEDEFLEYİN!

Fonksiyonellik nedir?  Fonksiyonellik, ziyaretçilerinize kullanım kolaylığı sağlamak ya da onların işlem gerçekleştirmede web sitenizde kolay hareket etmelerini sağlamaktır.  Bu anlayış üzerinde amaçlarımızı oluşturup, kur araçları, ürün arama, en yakın mağaza, ürün değerlendir gibi araçları ziyaretçileriniz kullanırken, web sitenizin düşünülen fonksiyonları yerine getirmede iyi ve hızlı çalışması gerekir.

Hayvan yemi ve benzer ürünleri satan Purinastore.com, bir web sayfasında fonksiyonların nasıl daha kolay işlediğine örnek olarak gösterilebilir.  Aşağıdaki görselde iki kolum halinde ne tür hayvan yemi sattıklarına ilişkin bir ekran görüntüsü verilmiştir.  Hangi hayvan yemi satın alacağınıza karar verirken, web sitesinin tasarımında kullanılmış olan kolon, buton, araçlar ve tasarım öğelerinin tümünün bir uyum içinde fonksiyonelliğe sahip olduğunu göreceksiniz.

hayvan-yemi-web-sitesi-zirai-web-sitesi-tarim-ürünleri-web-sitesi

4) KULLANICI PROFİLİNİZİ VE HEDEFLERİNİZİ İYİ BELİRLEYİN

Bütün ticari sektörlerin adresi olmaya kalkmayın, çünkü bu size ürün ve hizmetlerinizi satın alacak kullanıcıları değil sadece rastgele kullanıcıları getirir. Öncelikle hedef kitlenizin kim olduğunu belirleyin. Bu aşamadan sonra onların hangi tarayıcı ya da cihazları kullanabileceğini tahmin edin.  Bunları belirledikten sonra onların tıklama yapmasına sebeb olan faktörleri inceleyiniz. Modern kullanıcıları iki ana başlıkta ele alabilirsiniz. Birinci grupta yer alanlar bir amacı olmadan sadece internetde sörf yapmak için gezinenler, ikinci grup ise belli bir amaçla internete girip ihtiyaçlarını karşılamaya çalışan kullanıcılardır.

5) WEB GELİŞTİRİCİNİN KÜTÜPHANESİNİ VE REHBER DÖKÜMANLARI HER ZAMAN TAKİP EDİNİZ

Kullandığınız platforma bağlı olarak UI (kullanıcı ara yüzü) rehber dökümanlarını yakından incelemek gerekir. Bu platformlar diğerlerinden daha fazla esneklik sağlar.  Durum ne olursa olsun, markanın bazı anahtar içerikleri veya imzalarının kalması gerekir.

Söz konusu temel öğeleri, stratejileri, UI elemanları, ikon ve imgeleri  tasarlamak ise, Apple uygulama geliştiricileri iOS İnsan Kullanıcı Ara Yüzü Rehber Dökümanlarına bakmaları ve Apple standartlarını takip etmeleri gerekir. Diğer tarafdan Android geliştirici ise tüm içerikler, stiller, kullanışlılık, tipik Android uygulamalarının oturum planı gibi durumları Android Geliştirici Rehberinden öğrenmesi gerekir.

6)  İÇERİĞİNİZ TÜM KULLANICILARA AÇIK OLMALIDIR.

Bazı tasarımcılar, içeriği her cihazda görüntülenebilir şekilde ayarlamak yerine web sitelerinin bazı özelliklerini mobil kullanıcıların kullanımına sunmamaktadır.  Bunu, tasarımın bazan kafa karıştırıcı olmasından ya da yerleştirdikleri ya da görüntülenen içeriğin yeterli olduğunu düşündüklerinden yapmaktadırlar.  Bu yanlış bir yaklaşımdır.

Web sitenizin ya da uygulamanızın ayıklanmış versiyonunu sunmanız mobil kullanıcılara bir haksızlık olduğu gibi site ya da uygulamanızın ziyaretçi sayısında bir düşüşe de sebebiyet verebilir.  Web sitenizde ya da uygulamanızda içeriği düzenli bir şekilde ayarlayıp karmaşıklığa yol vermeden bir tasarım oluşturun fakat içeriğiniz orada kalsın!

BBC’nin web sitesinin mobil ve masa üstü versiyonlarını karşılaştırınız. Önceki sürümlerinden sade dursa da her türlü bilginin ekranda görüntülenebildiğini görüyorsunuz. Karşılaştırmak gerekirse, mobil versiyonda imge sayılarının düştüğünü (ama makalelere yayılmaktadır) ama telefon ölçüsündeki ekranlarda başlıkların hepsinin yerli yerinde olduğunu görürsünüz.

haber-sitesi-web-tasarimi-antalya-web-tasarim-antalya-seo-uzmani-alanya

 

7) MOBİL KULLANICILARI DİKKATE ALIN!

Mobil cihaz kullanıcılarının mouse yerine parmak ve ellerini kullandığını dikkate almak gerekir.  Mobil cihazların dokunmatik ekranlı olduğunu dikkate alırsak, tasarımınız parmaklarla ya da avuç içiyle rahatlıkla takip edilebilir, kullanılabilir olmalıdır.  Kullanıcılar, bir form doldururken ya da birşeyler okurken zoom yapmak zorunda kalmamalıdırlar. Mobil kullanıcıların, web sitenize girdiğinde yapacağı hareketleri ve kısacası kullanıcılarınızın ihtiyaçlarını kesinlikle dikkate almanız gerekir.

Size yardımcı olması açısından Peter-Paul Koch’un hazırladığı dokunma tablosuna göz atabilirsiniz. Tabloya baktığınızdan  dokunmatik ekranlarda kullanıcıların hareketlerinin ne kadar değişiklik gösterdiğini farkedeceksiniz.

8)  SIKIŞTIRMA ARAÇLARINI KULLANIN!

Günümüzde tasarımcıların kullanabildiği çok geniş bir araç yelpazesi bulunmaktadır.  Otomatik olarak gereksiz öğeleri ortadan kaldıran HTML ve Gzip sıkıştırıcıları gibi birçok sıkıştırma aracı bulmak mümkündür. Diğer taraftan CSS kodlarını sıkıştırıp performansı artırabilmek için ise CSS minifier ve CSS Sıkıştırıcı gibi birçok aracı kullanabilmeniz mümkünmdür.  İmgelerin sıkıştırılması da oldukça önemlidir.  Örneğin, EWWW Image Optimizer, smush.it, optiPNG, ve jpegtran gibi araçlar jpeg ve png dosyalarını sıkıştırırken kalitelerini koruyabilmektedir.

Aşağıda, oldukça duyarlı bir portföy sitesi örneğinin ekran görüntüsünü veriyoruz.  Bu web sitesi, masa üstü versiyonundan farksız bir şekilde mükemmel imgeler sunmaktadır. Hızlı açılmasının sırrı ise imge optimizasyonunda yatmaktadır.

ticari-web-tasarimi-işletme-web-uzman-tasarim-alanya-web-tasarim-seo-uzmani

 

Bir Cevap Yazın