Mobil Uyumlu Siteler Nasıl Oluşturulur? (Kapsamlı Kılavuz)

Mobil cihazların gittikçe daha çok kullanılması internet alışkanlıklarını da yeniden şekillendiriyor. Artık daha çok kullanıcı mobil deneyimleri tercih ediyor. Web sitelerine daha çok bilgisayar yerine mobil cihazlardan erişiliyor. Google gibi büyük arama motorları da mobil cihazlara öncelik veren arama ortamlarını benimsemeye başladı.

İster web sitesi kurmaya yeni başlamış olun ister mevcut mobil sitenizi iyileştirmeyi amaçlayın, bu makale mobil kullanıcılara öncelik vermek için bilmeniz gereken tüm konuları ele alıyor. Mobil web sitesi tasarımı hakkında bilgi alabilir, buradaki avantajları görebilir ve web tasarımında en iyi uygulamaları öğrenerek web sitenizi mobil uyumlu hale getirebilirsiniz. Türkiye'de kullanıcıların %84'ünün internete mobil cihazlardan eriştiğini düşünürsek bu ipuçları, erişiminizi artırmanıza yardımcı olacaktır.

İşte bu yazıda incelediğimiz konular:

• Mobil Uyumlu Web Sitesi Ne Demek

• Mobil Uyumlu Web Sitesi Nasıl Yapılır

• Mobil Uyumlu Siteler - Sıkça Sorulan Sorular

Mobil Uyumlu Web Sitesi Ne Demek?

Mobil uyumlu siteler akıllı telefon veya tabletlerle erişimin ve gezintinin kolay olduğu web siteleridir. Bu sitelerde büyük ekranlı masaüstü veya dizüstü bilgisayarlara kıyasla daha kolay erişilebilen, küçük ekranlara uyumlu basitleştirilmiş mobil uyumlu tasarım kullanılır. Ayrıca mobil uyumlu siteler daha hızlı yüklenir ve yavaş internet bağlantısıyla da yüksek performans sunar.

Bunu başarmak için duyarlı ve uyarlanabilir tasarım arasındaki farkı anlamak gerekir. Duyarlı (responsive) tasarımda cihazın ekran boyutuna akışkan bir şekilde uyum sağlayan tek bir web sitesi formatıyla esnekliğe odaklanılır. Uyarlanabilir (adaptive) tasarımda ise özel bir mobil web sitesi yaratılır. Mobil cihazlara göre özelleştirilmiş bu siteye m.ornek.com gibi mobile özel bir URL ile erişilebilir.

Mobil uyumlu (mobile friendly) tasarım nedir?

Mobil uyumlu tasarım, web sitelerinin ve uygulamaların farklı mobil cihazlarda rahatça görüntülenmesini sağlayan bir tasarım yaklaşımıdır. Bu, içeriğin ve düzenin ekran boyutuna göre otomatik olarak ayarlanmasını içerir.

İşte mobil ziyaretçileriniz için de masaüstü kullanıcılarınız için olduğu kadar iyi çalışan bir web sitesi oluşturmak için uygulayabileceğiniz 18 ipucu.

Mobil Uyumlu Web Sitesi Nasıl Yapılır?

1. Mobile öncelik veren yaklaşımla başlayın

2. Mobil duyarlı bir şablon seçin

3. Flash kullanmayın

4. Site hızını iyileştirin

5. Kolay okunan yazı tipleri kullanın

6. Görselleri mobil görünüm için optimize edin

7. Bağlantılar arasında boşluk bırakın

8. Görüş alanı meta etiketi kullanın

9. Formları kısaltın ve otomatik düzeltmeyi kapatın

10. Uzun metinlerden kaçının

11. CTA düğmelerini stratejik kullanın

12. Arama işlevi ekleyin

13. Kalabalık web tasarımından kaçının

14. Web sitesini her iki yönlendirmeye uygun hale getirin

15. Gezintiyi basitleştirin

16. Metni kapatan reklamları ve açılır pencereleri kaldırın

17. Masaüstü görünümüne geçme seçeneği sunun

18. Web sitesini gerçek mobil cihazlarda test edin

01. Mobile öncelik veren yaklaşımla başlayın

Mobile öncelik veren tasarımda kullanıcı deneyimi önce mobil cihazlar için tasarlanır, ardından masaüstüne uyarlanır. Tasarım ve geliştirmeyi başlangıçta mobile göre yaparak web sitenizin küçük ekranlar için optimize edilmesini ve ekran boyutu arttıkça duyarlı kalmasını sağlarsınız. Bu yaklaşımla muhtemelen kitlenizin çoğunluğunu oluşturan mobil kullanıcıların ihtiyaçlarına öncelik vermiş olursunuz.

Wix Editor'de masaüstü ve mobil olarak ayrı bir şekilde sitenizi oluşturma şansınız bulunur. Aşağıdaki resimde "Sayfa: Anasayfa" yazısının yanında bulunan masaüstü ve telefon butonları sayesinde görüntüler arası geçiş yapmanız mümkün olur.

02. Mobil duyarlı bir şablon seçin

Duyarlı yani responsive tasarım düzeninde web sitenizin boyutu, kullanıcının cihazına göre ayarlanır. Ekran boyutları arasında geçiş yapılır, tasarım uyarlanarak alakalı içerikler gösterilir. Örneğin, bilgisayarda iki sütunlu web sitesi düzeninden telefonda tek sütunlu düzene geçilebilir. Duyarlı tasarım kullanıyorsanız farklı ekranlara geçiş sırasında yükleme süreleri uzamaz.

Google, arama sonuçlarında mobil uyumlu sitelere avantaj sağladığından duyarlı tasarıma sahip bir web sitesiyle arama motoru optimizasyonunu (SEO) güçlendirebilirsiniz. Google algoritması, mobile göre düzenlenmiş web sayfalarını sıralamada yukarılara taşıyarak bu web sitelerinin değerini artırır. Web sitesi oluşturma konusunda henüz yeni olanlar veya teknolojiyle pek içli dışlı olmayanlar için Wix'te yerleşik mobil uyumlu özellikler sunan özelleştirilebilir hazır site şablonları mevcut.

SEO ile ilgili detaylı bilgi için SEO Nedir ve SEO Geliştirmek İçin İpuçları yazılarımıza göz atabilirsiniz.

03. Flash kullanmayın

Animasyonlarda sıklıkla kullanılan Flash, mobil cihazlarda desteklenmez. Bu nedenle Flash kullanımından kaçınmak en iyisi. Daha duyarlı ve mobil uyumlu bir site için HTML5 ve CSS daha iyi seçenekler. HTML5 ile online eylemleri tarayıcı eklentileri olmadan yapabilir, medya yerleştirebilir ve mobil cihazlarda desteklenen animasyonlar oluşturabilirsiniz.

04. Site hızını iyileştirin

Web sitesinin sayfa açılış hızı, ziyaretçi siteye girdiğinde bir sayfanın tamamen yüklenmesi için geçen süreyi ifade eder. Yükleme hızını optimize etmek, kullanıcı deneyimini iyileştirmek için kritik önem taşır. Çünkü sayfanın yavaş yüklenmesi ziyaretçileri kaçırabilir ve dönüşüm oranlarını düşürebilir. Yüksek yükleme hızı sıralamanızı etkileyebilir, bu nedenle web sitenizin hızını artırmak için gerekli adımları atmanız önemli. Google PageSpeed Insights gibi ücretsiz araçları kullanarak web sitesi yükleme süresini kontrol edebilirsiniz. Sayfalar yavaş yükleniyorsa hızlandırmaya yardımcı olacak önerilerimize göz atın:

• Yönlendirme sayısını azaltın: Bir URL'ye tıkladığınızda genellikle sunucu sizi istenen sayfaya yönlendirir. Her yönlendirme sayfa yükleme hızını azaltır çünkü tarayıcının her bir yönlendirme için sunucuya istek göndermesi gerekir. Hızı artırmak istiyorsanız yönlendirme sayısını azaltın. URL kısaltıcı kullanarak veya doğrudan istediğiniz sayfaya bağlantı vererek web sitenizi sadeleştirin.

• Web hosting planınızı kontrol edin: Hosting ve sunucu kalitesi web sitenizin performansını önemli ölçüde etkiler. Web sitenizin en yüksek hızda çalışması için hızlı ve güvenilir bir web hosting sağlayıcı tercih edin.

05. Kolay okunan yazı tipleri kullanın

Net, sade yazı tipleri seçtiğinizde ziyaretçiler içeriğinizi daha kolay anlar ve sitenizle etkileşim artar. Ayrıca iyi bir yazı tipi sitenizin görünümünü de iyileştirir, profesyonel ve güvenilir bir his uyandırır.

En iyi web sitesi yazı tipini seçmenize yardımcı olacak önerilerimiz:

• Standart yazı tiplerine sadık kalın: Ziyaretçilerin tarayıcılarına yazı tipi indirmesinden kaynaklanan gecikmeleri önleyin. Bu, özellikle mobilde web sitenizin yüklenmesini yavaşlatabilir.

• Yazı tipini mobile uyarlayın: Masaüstü için önerilen en az 14 piksellik yazı tipi, küçük ekranlar için yeterli olmayabilir. Yazıların okunaklı olup olmadığı bir mobil cihazda test edin.

• Farklı renkler üzerinde siyah metin tercih edin: Yazıların çeşitli arka planlarda veya dış mekanlardaki ışık yansımalarında göründüğünden emin olun.

• Sınırlı alanı etkili şekilde kullanın: Bazı durumlarda yazılar veya görseller arasında masaüstündeki gibi boşluklar bırakmak mümkün olmayabilir. Mobilde yazıların birbirine girmesini önlemek için kalın karakterler veya büyük harfler kullanın.

Yazı stilleri ile ilgili detaylı bilgi için Popüler Yazı Fontları ve Logo Fontları yazılarımıza göz atabilirsiniz.

06. Görselleri mobil görünüm için optimize edin

Mobil görünüm, bir web sitesinin veya uygulamanın mobil cihazlarda nasıl göründüğü ve kullanıldığıdır. Mobil görünüm, web sitesinin veya uygulamanın ekran boyutu, düzeni, menüleri ve içeriği gibi unsurlarını içerir ve genellikle daha küçük ekranlı cihazlara uyumlu olacak şekilde optimize edilir. Bu, kullanıcıların mobil cihazlarında kolayca gezinebilmelerini ve içeriği okuyabilmelerini sağlar.

Mobil cihazların masaüstüne kıyasla bant genişliği sınırlıdır. Bu nedenle büyük resim dosyaları, yükleme sürelerini uzatabilir. Ayrıca çoğu mobil kullanıcının kullandığı veri paketleri de sınırlıdır. Resim boyutlarını küçülttüğünüzde harcanan veriden de tasarruf edersiniz. Mobil sitelerde amaç kaliteden ödün vermeden resim boyutlarını olabildiğince küçük tutmaktır.

Bu konuda size yardımcı olacak önerilerimiz:

• Resimleri boyutlandırın: Yüksek çözünürlüklü resimler çok fazla alan kapladığından yükleme süresini uzatır. Wix sitelerinde resimler web performansı için optimum seçenek olan webp formatına sıkıştırılır. Ayrıca resim boyutlandırma araçları kullanarak dosya boyutunu küçültebilir ve kullanıcıların sitede gördüğü kaliteyi bozmadan daha hızlı yükleme süreleri elde edebilirsiniz.
  

• Tembel yüklemeden yararlanın: Bir sayfadaki tüm resimlerin aynı anda yüklenmesi, özellikle çok resimli sayfalarda ilk sayfa yükleme hızını düşürebilir. Wix sitelerinde kullandığımız tembel yükleme (lazy loading) sayesinde resimler yalnızca görüntülenmeden hemen önce yüklenir. Yani kullanıcı kaydırarak resmin bulunduğu yere gelmeden resimler yüklenmez.
  

• Piksel yerine yüzde kullanın: Resimlerde sabit piksel boyutları olması, farklı mobil çözünürlüklerdeki küçük ekranlarda bazı sorunlara yol açabilir. Resimler doğru şekilde ölçeklenmediğinde ekran genişliğini aştığından ziyaretçiler ekranı yatay kullanmak zorunda kalabilir.

07. Bağlantılar arasında boşluk bırakın,

Mobil site tasarlarken dokunmatik cihazları ve fareyi kullanma şeklimizi düşünün. Parmaklarımız masaüstü imleçlerden daha kalın olduğu için mobil sitelerde bağlantılar arasında boşluk bırakarak yanlışlıkla tıklamaları önlemek gerekir. Sorunsuz bir deneyim sağlamak istiyorsanız sayfalara eklediğiniz bağlantıların yalnızca mobil uyumlu web sayfalarına gittiğinden emin olun.

08. Görüş alanı meta etiketi kullanın

Sayfanız telefonunuzun küçük ekranında da masaüstündeki genişliğiyle görünürse kullanıcılar, metin satırlarını okumak ve sayfanın farklı bölümlerini görmek için bir sağa bir sola kaydırmak zorunda kalır.

Görüş alanı meta etiketi kullanarak görüş alanının genişliğini ve ölçeğini yönetebilir, web sitenizin tüm cihazlarda doğru görünmesini sağlayabilirsiniz. Wix şu meta etiketi kullanır: <meta id="wixMobileViewport" name="viewport" content="width=320, user-scalable=yes">. Bu etiket tarayıcının, mobil cihazdan erişildiğinde sayfayı 320px bir tuvalde göstermesini sağlar. Çoğu mobil cihaz 320px'de iyi görüntü sunduğundan tarayıcının ölçekleme yapmasına gerek kalmaz, bu da sayfayı mobil uyumlu hale getirir.

09. Formları kısaltın ve otomatik düzeltmeyi kapatın

Mobil cihazlarda yazı yazmak uğraştırıcı bir iştir. Bu nedenle sitenizdeki formları kısa ve net tutmak en iyisi. Formu tamamlamak için gerekli alan sayısını sınırlayın, isim ve e-posta adresi gibi genellikle gerekli olan bilgiler için otomatik doldurma seçeneklerinden yararlanın. Web sitenizde isim ve adres isteyen formlar varsa otomatik düzeltmeyi kapatarak mobil kullanıcılara yardımcı olabilirsiniz. Bu sayede form doldurma sırasında karşılaşılan sinir bozucu düzeltmelerle sürecin yavaşlamasını önleyebilirsiniz.

10. Uzun metinlerden kaçının

Mobil cihazda uzun metinler okumak yorucu olabilir. Kullanıcılar bu içerikleri okumaktan hoşlanmayabilir veya ilgilerini kaybedebilir. Sitenizi mobil uyumlu yapmak için metni kısa, kolay okunan paragraflara bölün. Metin içinde taramayı kolaylaştıracak maddeler ve sıralamalardan yararlanın. Okuyucuların temel konuları veya bölümleri hızlıca tespit etmesine yardımcı olan başlıklar ekleyin. Ana fikirleri vurgulayacak boşluklar kullanın, kelimeler ve satırlar arasında yeterli aralık bırakarak metnin kalabalık görünmesini önleyin.

11. CTA düğmelerini stratejik kullanın

Düğmeler özellikle eylem çağrılarında (CTA) yararlanılan temel web sitesi tasarımı öğelerindendir. Büyük düğmeleri tercih ettiğinizde kullanıcılar ekrana kolaylıkla dokunabilir ve sitenizdeki sayfalar arasında gezinebilir. Çoğu mobil kullanıcı telefonu başparmağıyla kullandığından düğmeler de başparmakla basılacak kadar büyük olmalıdır.

Mobil uyumlu web siteniz için düğme tasarlarken size yardımcı olacak önerilerimiz:

• Kontrast uygulayın: Düğme görünürlüğünü artırmak için kontrast web sitesi renk paletleri kullanmayı düşünebilirsiniz. Örneğin, düğme metni rengini açık, düğmenin kendisini koyu seçin ve etrafındaki alanda kontrast renk kullanın. Etkili yöntemlerden biri de düğme çerçevesinde farklı bir renk kullanmaktır.

• Düğme boyutunu optimize edin: Çok küçük düğmelere basmak zor olabilir. Diğer yandan aşırı büyük düğmeler de küçük bir ekranda çok yer kaplar. Mobil kullanıcılar ve çeşitli büyüklükte parmaklar için optimize bir boyut olan 10x10 mm düğmelerde okunaklılığı da kolay sağlarsınız.

• Düğme konumunu doğru seçin: Çoğu kullanıcı interaktif dokunuşlar için baskın elinin başparmağını kullanır. Deneyimi kullanıcı dostu hale getirmek için düğmeleri başparmakla kolay erişilebilecek bir yere yerleştirin. Bu alan genellikle ekranın sağ alt köşesidir.

Detaylı bilgi ve örnekler için CTA Nedir yazımıza göz atabilirsiniz.

12. Arama işlevi ekleyin

Ekran alanı sınırlı olduğundan web sitenizin mobil versiyonunda gerekli tüm bilgileri ekrana sığdırmak zordur. Arama işlevi ekleyerek kullanıcıların çeşitli sayfalara gitmeden aradığını kolaylıkla bulmasını sağlayabilirsiniz. Böylece sürekli kaydırmaktan veya birçok bağlantıya tıklamaktan kaynaklanan sıkıntıyı ortadan kaldırarak kullanıcı deneyimini iyileştirebilirsiniz.

Kullanıcı deneyimi ile ilgili detaylı bilgi arıyorsanız UX Nedir yazımıza göz atmanızı öneririz.

13. Kalabalık web tasarımından kaçının

Mobil web sitesi tasarımında sadeliği tercih edin. Çok fazla bilgi barındıran karmaşık siteler her türlü ekranda kafa karıştırır fakat küçük ekranlarda gezinti özellikle zordur. Minimum metin ve görselle kolay bir gezinti deneyimi sunmayı amaçlayın.

Mobil sitenizin tasarımını sadeleştirmek için önerilerimiz:

• Kritik işlevlere öncelik verin: Yalnızca kullanıcıların aktif olarak aradığı temel işlevleri önden sunun. Tek bir sayfada çok sayıda eylem çağrısıyla web sitenizi kalabalık hale getirmekten kaçının. İletişim formu gibi kullanıcıların aktif olarak arayacağı temel işlevlere odaklanın.

• Menü tasarımını optimize edin: Menülerde uzun seçenek ve özellik listelerine yer vermeyin. Bunun yerine tıklandığında açılan hamburger menülerden faydalanın. Böylece özellikler küçük ekranlarda alan kazanır ve kalabalığı önlersiniz.
  

14. Web sitesini her iki yönlendirmeye uygun hale getirin

Mobil cihazların avantajlarından biri de yatay ve dikey yönlendirme arasında geçiş yapılabilmesidir. Mobil sitenizi her iki yönlendirmede de doğru çalışacak şekilde tasarlayın. Böylece kullanıcı cihazı nasıl tutarsa tutsun sitenizde rahatlıkla gezinebilir.

15. Gezintiyi basitleştirin

Akıllı telefonumuz elimizde internette gezinti yaparken genellikle spesifik bir şeyin, hızlı bir yanıtın peşindeyizdir. Bir restoranın adresini veya bankanın müşteri hizmetleri numarasını arıyor olabiliriz. Böyle durumlarda aradığımız bilgiyi en hızlı ve kolay şekilde bulmak isteriz. Mobil ziyaretçilerinizin ne aradığını düşünün ve mobil ana sayfanızda bunu kolaylıkla bulabilmelerini sağlayın. Mobil ziyaretçilerinizin arama yaptığı konuları analizlerinizden bulabilirsiniz. Google Analytics'te Davranış bölümüne Mobil Trafik başlığını Segment olarak ekleyin. Böylece mobil ziyaretçilerin web sitenizle etkileşimlerini görebilirsiniz.

16. Metni kapatan reklamları ve açılır pencereleri kaldırın

Mobil kullanıcıların ekran alanı sınırlıdır; üstüne bir de web sayfası içeriğinin reklamlarla kapatılması can sıkıcı olabilir. Metni kapatan reklamlar ve açılır pencereler gezinti deneyimine de zarar vererek kullanıcıların aradığını bulmasını zorlaştırır. Çoğu ziyaretçi açılır pencereyi kapatmak için minik X düğmesini bulmakla uğraşmaz; sayfadan çıkıp direkt başka bir siteye gider. Mobil web sitenizde daha iyi bir kullanıcı deneyimi tasarımı için minimal reklamları tercih edin veya sitede reklam kullanmayın.

Tanıtım amaçlı reklam kullanmanız şartsa stratejik davranın. Açılır pencereler kullanıcı sayfaya gelir gelmez değil sayfanın en altına kaydırınca açılsın. Buna ek olarak kapatma düğmesi kolay bulunur ve tıklanabilir olsun. Tanıtımlarınızda alternatif olarak sayfayı daha az engelleyen üst banner gibi diğer web sitesi öğelerini kullanabilir, yine buralara da uygun boyutta bir kapatma düğmesi ekleyebilirsiniz.

17. Masaüstü görünümüne geçme seçeneği sunun

Bazen mobil ziyaretçiler sitenizi geleneksel masaüstü düzeninde görüntülemek isteyebilir. Bu isteğe yanıt vermek için gerektiğinde standart görünüme geçme seçeneği sunun. Sayfanın en altına basit bir bağlantı veya menüye geçiş düğmesi ekleyebilirsiniz.

18. Web sitesini gerçek mobil cihazlarda test edin

Ziyaretçilerinizin deneyimini kötüleştiren küçük sorunları tespit etmenin en iyi yolu düzenli test yapmaktır. Dönem dönem web sitenizi telefonunuzda veya tabletinizde açıp bir gezinti yapın. Net görünmeyen bir yer veya zor kullanılan bir özellik var mı, bakın. Hem Android hem iOS cihazlarda test yapmayı unutmayın. Wix sitelerinde Editor üzerinden mobil ve masaüstü görünümlerin önizlemesini yapabilirsiniz. Ayrıca web sitenizde ücretsiz mobil uyumluluk testi Google Lighthouse'u da kullanabilirsiniz.

Mobil Uyumlu Siteler - Sıkça Sorulan Sorular

Web sitem mobil uyumlu mu?

Web sitenizin mobil uyumlu olup olmadığını kontrol etmek için farklı yöntemler bulunmaktadır. Bunlardan biri, web sitenizin URL'sini Google'ın "Mobil Uyumlu Test" aracına yapıştırmak ve sonucu gözlemlemektir. Bu test, sitenizin mobil cihazlarda nasıl görüneceğini ve kullanılabilirliğini değerlendirir. Ayrıca, web sitenizi farklı mobil cihazlarda deneyerek ve kullanıcı deneyimini kontrol ederek de mobil uyumluluğunu kontrol edebilirsiniz.

Mobil uyumluluk testi nedir?

W3C uyumluluk testi nedir?

Web sitesi ile mobil web sitesi arasındaki fark nedir?

Bir uygulama geliştirmek, mobil web sitesinden daha iyi bir seçenek midir?

Rami Mert Kandiyoti

SEO and Content Marketing Specialist