Mobil dostu bir web sitesi, akıllı telefon veya tablet gibi mobil cihazlardan kolayca erişilebilen ve gezilebilen bir sitedir. Bu web siteleri genellikle daha küçük bir ekranda kullanılmak üzere basitleştirilmiş bir tasarımla tasarlanmıştır, bu da onları daha küçük bir cihazda kullanmayı kolaylaştırır. Ayrıca, mobil dostu web siteleri genellikle hızlı bir şekilde yüklenmek ve daha yavaş internet bağlantılarına dayanıklı olmak üzere tasarlanmıştır.

Sağlam mobil dostu web siteleri oluşturma vurgusu, son trendler tarafından yönlendirilmektedir. Birincisi, mobil uygunluk daha geniş bir kitleye ulaşmanızı sağlayacak, çünkü internete erişmek için mobil cihaz kullanan kişilerin sayısı giderek artıyor—yaklaşık %59’u. Benzer şekilde, birçok gelişmekte olan pazar masaüstü web sitelerinin ardından doğrudan mobil uygulamalara geçiyor.

Tasarımı Responsive Hale Getirin

Responsive yani Duyarlı bir web sitesi, herhangi bir ekran boyutuna uyum sağlayabilen bir sitedir. Web sitesi, kullanıcının siteyi masaüstü bilgisayarda veya mobil cihazda görüntüleyip görüntülemediğine ve cihazın dikey veya yatay modda olup olmadığına bakılmaksızın ekran boyutuna otomatik olarak uyum sağlar.

Duyarlı tasarım, kullanıcıların web sitenize nasıl erişirlerse ersinler, mükemmel bir deneyim sunar. İnternette gezinmek için daha fazla insanın mobil cihazlarını kullandığı düşünüldüğünde, web sitenizin tüm cihazlarda iyi çalışması için tasarlanması önemlidir. Aşağıdaki ipuçları, çeşitli ekran boyutlarına ve çözünürlüklerine uyum sağlayabilen bir duyarlı ve mobil dostu site oluşturmanıza yardımcı olacaktır:

CSS medya sorgusu kesme noktalarını seçin. Duyarlı web tasarımı oluşturmanın bir yolu, CSS medya sorgularını kullanarak farklı ekran boyutları için farklı düzenler oluşturmaktır. Düzeni değiştirmek istediğiniz kesme noktalarını veya genişlikleri seçin. İyi bir başlangıç noktası, 320px, 480px, 768px ve 1024px çözünürlükleridir. Sonra, her bir kesme noktası için farklı CSS kuralları oluşturursunuz. Örneğin, 320px genişliğinde olan ekranlar için bir dizi kurallarınız olabilir ve 768px genişliğinde olan ekranlar için başka bir dizi kurallarınız olabilir. Son olarak, her ekran boyutu için kodu optimize etmek için @media kuralını kullanırsınız.

Tipografiyi tanımlayın. Duyarlı tipografi oluşturmak, fontun kullanıcının ekranına uyum sağlamasını sağlar. Örneğin, bu HTML kod satırı, tipografinin gösterildiği ekran boyutuna uyum sağlamasını ve sığmasını sağlar.

Büyük Metin Parçalarından Kaçının

Küçük ekranlarda büyük metin parçaları okunması zor olabilir. Ayrıca, bir web sitesini dağınık ve bunaltıcı hissettirebilirler. Mobil kullanıcılar genellikle hızlı ve kolay sindirilebilir bilgiler ararlar, bu nedenle uzun metin blokları rahatsız edici ve bunaltıcı olabilir. Bunun yerine, kolayca taranabilir ve sindirilebilir kısa ve dikkat çekici içerikler oluşturmaya odaklanın. Web sitenizi oluştururken metni küçük, okunması kolay parçalara bölebilirsiniz. Ayrıca, okuyucuların istedikleri bilgilere daha kolay erişmelerine yardımcı olmak için başlıklar ve alt başlıklar da kullanabilirsiniz. Bu ipuçlarını takip ederek, hem okunması kolay hem de mobil dostu bir site oluşturabilirsiniz.

Görsel bir hiyerarşi oluşturun. Amacınız, içeriğinize uygun başlıklar ekleyerek okuyucuların ana noktaları veya bölümleri bir bakışta tanımasına yardımcı olmaktır. Web sitesi kopyaları için, her bir bloğu bir başlık ve kısa bir açıklama ile geliştirebilirsiniz.

Her fikir için bir metin bloğu kullanın. Anasayfa veya blog makale sayfası oluştururken, bir fikir için bir blok kullanarak uzun metinlerden kaçının. Blog yazıları için paragrafları kısa tutun ve içeriği bölmek için başlıklar kullanın.

Beyaz alan ve negatif boşluk kullanın. Beyaz alan, bir sayfadaki öğeler arasındaki boşluktur ve negatif boşluk, bu öğelerin içindeki açık alandır. Bu boşlukları tasarım unsurları olarak kullanmak, daha mobil dostu bir web sitesi oluşturmanıza yardımcı olur. Beyaz boşluğu önemli noktaları vurgulamak, metni kalabalıklaştırmamak ve kelime ve ardışık satırlar arasında yeterli boşluk vermek için kullanın.

Düğme Boyutuna ve Yerleşimine Dikkata Edin

Düğmeler, özellikle bir çağrıya yanıt verme (CTA) gerektiğinde, temel web sitesi tasarım unsurlarıdır. Kullanıcılara bir ürün hakkında daha fazla bilgi edinmek, ürünleri sepetlerine eklemek veya satın almalarını tamamlamak için bir web sayfasında hareket etme yolu sağlarlar. Bu düğmeler, bulunması kolay olmalı, ziyaretçinin dikkatini çekecek kadar çekici olmalı ve mobil ve masaüstü kullanıcıları için tıklanabilir olmalıdır.

İnsanlar genellikle bir web sayfasının belirli bölgelerine odaklanırlar. Çeşitli tasarım unsurları ayrıca görsel desenleri etkiler. Bu kavram, göz öngörülebilirliği olarak bilinir. Genel olarak duyarlı bir tasarım oluştururken, düğmeleri insanların onları görmeyi bekleyebilecekleri yerlere yerleştirin. Nielsen Norman Group’tan gelen bilgiler, insanların daha fazla bilgi veren resimlerin yanındaki metne ve daha büyük fontlara veya başlıklara yanındaki metne odaklandıklarını göstermektedir.

Butonlar Sayfa İle Uyumlu Olmalı

Sayfanın yönelimine bağlı olarak, sayfanın etkileşim modelini de tahmin edebilirsiniz — F, Zigzag veya çim biçme desenleri gibi. Düğmeleri sayfa modeliyle uyumlu bir şekilde tutarak en fazla dikkat çekmeyi sağlayın. Duyarlı bir web sitesi için düğmeler tasarlarken düşünülmesi gereken bazı ipuçları:

• Kontrast uygulayın. Web sitesi arka planı ile düğme ve bağlantı metni arasında kontrast renkler uygulamak, düğmeyi daha okunaklı ve dikkat çekici hale getirir. Örneğin, düğme metni için açık renk, düğme kendisi için koyu renk ve düğmenin etrafındaki alan için kontrast renk kullanabilirsiniz. Kontrast uygulamanın başka bir yolu da düğmenin kenarı için farklı bir renk kullanmaktır.
• Bir çağrıya yanıt ekleyin. Bir çağrıya yanıt eklemek, ziyaretçilere bir yön duygusu verir. Örneğin, “Gönder” veya “Buradan Başlayın” gibi kısa başlıklar eklemek, kullanıcının bağlantının diğer ucunda ne beklediğini bildirir.
• Düğme boyutunu optimize edin. Web sitesi düğmeleri oluştururken boyut önemlidir. Çok küçük düğmeler zor olabilirken, çok büyük düğmeler küçük bir ekranda çok fazla yer kaplayabilir. Boyutları genellikle 10 milimetrelik 10 milimetrelik boyutlarda tutarak düğmenin okunaklı ve mobil kullanıcılar için optimize edilmiş olmasını sağlayın ve parmak uçlarındaki değişken boyutlarını dikkate alın.
• Düğme konumunu optimize edin. Çoğu insan etkileşimli olarak dokunmak için dominant başparmaklarını kullanır, bu nedenle düğmeleri genellikle ekrandaki sağ alt kısmında kolayca başparmak erişimine yerleştirin.