"Enter"a basıp içeriğe geçin

Responsive Design – Esnek Tasarım’a Geçiş İçin 10 İpucu

Esnek Tasarım

Yakın Tarihli bir çalışmaya göre yaklaşık olarak Türkiye’de 4 kişiden biri internete erişim için sadece mobil cihazları kullanıyor. Dünyada ise her 5 kişiden biri akıllı telefona sahip ve bu kişilerin yarısından fazlası internette surf yapmak için mobil cihazları kullanıyor.
Eğer websiteniz bu cihazlarda kolaylıkla okunamıyorsa, mobil kullanıcılarının büyük bir çoğunluğunu kaybediyorsunuz demektir ve Responsive Design – Esnek Tasarım ile tanışma vaktiniz çoktan gelmiş ve hatta geçmekte. Başlangıçta karmaşık gelebilir ama korkmayın ve işinizi kolaylaştıracak 10 ipucu ile Responsive Design’a merhaba deyin.

 

1- İlk olarak Mobil’i düşünün !

Mobil Tasarım

Masaüstü veya laptop ekran tasarımlarını planlamadan önce, mobil cihazlar üzerindeki kullanıcı deneyimi hakkında düşünün. Günümüzde bir çok tasarımcı mobil’i öncelikli olarak değerlendirmektedir. Çünkü mobil cihazlar, masaüstü veya dizüstü cihazlardan ön planda yer almaktadır.

 

2- Medya Sorgularına (Media Query) alışın !

Medya Queries

Medya sorguları, belirli bir cihaz üzerindeki farklı koşullara yanıt vererek içeriğin görünümünü özelleştirmenize izin veren bir CSS3 özelliğidir. Medya sorguları cihazların ekran çözünürlüklerini, yüksekliklerini, genişliklerini ve oranlarını kontrol eder.Ve daha sonra bu bilgileri hangi CSS kurallarının kabul edileceğini belirlemek için kullanır. Medya sorguları Esnek Tasarım’ın arkasındaki itici güçtür ve en önemli silahıdır.

 

3- Kullanıcılarınızın Mobil’i ne amaçla kullandığını anlayın !

Mobil Kullanıcı İhtiyaçları

İnsanlar websitelere mobil cihazlar üzerinden eriştiklerinde masaüstü cihazlara göre farklı etkileşimlerde bulunuyorlar. Kullanıcıların web sitenizi neden akıllı telefonları üzerinden ziyaret ettiğini anlamak için mantıksal analizleri kullanın. Arama kutusunu kullanarak hızlı bilgi almayı amaçlıyor olabilirler. Eğer kullanıcılarınız arasında bu tarz ortak bir kullanım amacı varsa, arama kutusunu görünürlüğü yüksek ve her an kullanıma hazır şekilde tasarlamanız faydalı olacaktır.

 

4- Yüzde(%)’leri kullanın !

Percentage

Esnek tasarımın en zor parçalarından birisi değişken gridlerin uyarlanmasıdır Değişken gridler medya sorguları ile beraber çalışarak farklı ekranlarda içeriğin görünümünü belirler. Her ekran seçeneği için farklı görünümler tasarlamak yerine, maksimum alan ölçüleri verebilirsiniz. Böylelikle piksel değerleri yerine genişlik ve yükseklik oranları belirleyerek web sitenizi yükdelik dilimlerle tekrar düzenlemenizi sağlar.

 

5- Hız ihtiyacı !

speed
Esnek Tasarım’ın dezavantajlarından birisi yavaş yükleme zamanlarıdır. Aslında yapılan bir araştırmaya göre esnek tasarımların çoğunluğu 4-8 saniye arasında yükleniyor. Bu yükleme uzunluğu 1997’de normal karşılanabilirdi, ama 2015’de akıllı telefon kullanıcınlarının %65’i bir sitenin 4 saniyeden daha kısa sürede yüklenmesini bekliyor.

Yavaş bir sitenin arkasında ki en önemli neden optimize edilmemiş imajların kullanılmasıdır. Bu imajların esnek sisteminizi aşağı çekmesine izin vermeyin. Adaptive Images ve TinyPng gibi araçlar imajlarınızı hızlıca ölçeklendirmenize yardımcı olacaktır.

 

 

6- Gereksiz öğeleri eleyin !

Mobile Design

Fazlalıklardan kurtulmak, sadece kullanıcı deneyimi arttırmak için değil aynı zamanda sitenizin hızlanması içinde fayda sağlar. Gereğinden fazla öğenin etkisiyle ağırlaşan bir web sitenin hoş bir kullanım ve görünüm sunması beklenemez.

 

7- Hamburger sever misin ?

hamburger

 

 

 

 

 

Hamburger ikonu, başka bir ifadeyle menüyü gizlediğimiz yatay 3 çizgi yoğun bir tartışma konusudur. Bazıları çok severken, bazıları ondan nefret ediyor ama en yi kullanım hangisi ?

Esnek tasarım için her zaman en iyi kullanım kolaylığın ön planda tutulmasıdır. Eğer bir kullanıcı menu seçeneklerini görmek için sürekli icona dokunmak zorunda kalırsa bu yorucu olabilir. Kullanıcıların en çok kullandığı menu adımlarını görünür yapabilirseniz kullanıcıyı bu yorgunluktan kurtarmış olursunuz. Az kullanılan menu seçeneklerini hamburger menude tutabilirsin, ama sık kullanılanları her zaman erişilebilir olarak konumlandırarak kullanıcılarınızı mutlu edebilirsiniz.

 

8- İçeriğinizi okunabilir kılın !

font-size-same-g
Kullanıcılarınızı okumaya çalışırken şaşı yapmayın! İçerik metinleriniz, küçük ekranlarda da rahatlıkla okunacak büyüklükte olmalı. Metin boyutlarının 16 px, 1 em yada 12 pt olmasını öneririm. Boyut dönüşümleri için faydalı bir rehbere buraya tıklayarak erişebilirsiniz. Başlık satırları tasarlamanızda ise FitText adlı araç esnek metinler oluşturmanıza yardımcı olacaktır.

 

9- Doğru Buton boyutu kullanın !

buttons
Mobil cihazlarda, yerleşim çok önemlidir. Küçük butonlar ile kullanıcıya işkence etmekten kaçının. Butonlarınızın iyi bir dokunuş deneyimi için 44x44 px’den küçük olmadığından emin olun. Bir diğer ipucu ise iç ve dış boşlukları (Padding , margins) doğru kullanmaya özen gösterin. İçeriden verilen boşluklar dokunulabilir alanı arttırır. Dışarıdan verdiğiniz boşluk değeri ise butonun çevresinde ki beyaz bşluğu arttıracaktır.

 

10- Ekran Yönünü düşünerek tasarlayın !

Agile-Mobile-Design
İstatistiklere bakarsak yatay kullanım, dikey kullanım karşısında %59 ile önde gözüküyor. Sitenizi her iki kullanımda da iyi görünecek şekilde tasarlayın ama yatay kullanıma dikkat çekmeyi de unutmayın.

 

Sonuç olarak; esnek tasarım hangi cihazı kullanırsa kullansınlar web sitenizi görüntülemede ve kullanmalarında kullanıcılarınıza büyük kolaylıklar sunar. Kullanıcılarınızın mobil deneyimini arttırmak için esnek tasarım önemli bir araçtır. Bu yazıda bahsedilen ipuçları ile esnek tasarıma basit bir geçiş yapabilirsiniz.

 

 

İlk Yorumu Siz Yapın

Bir Cevap Yazın

%d blogcu bunu beğendi: