"Mobil Uyumlu" İçerik Nasıl Oluşturulur?

Bu makale, Website mi Daha Önemli, Mobil site mi? makalesinin devamıdır. Eğer diğer makalemizi henüz okumadıysanız öncelikle mobil sitenin ve mobil tasarımın neden bu kadar önemli olduğunu öğrenmeniz için diğer makalemize göz atmanızı kesinlikle tavsiye ederim.

Artık mobil uyumlu bir web sitesine sahip olmanın neden bu kadar önemli olduğunu anladığımıza göre, şimdi websitenizdeki sayfaların içeriklerini hem metinsel hem de görsel olarak en uygun şekilde geliştirebileceğiniz ve biçimlendirebileceğiniz beş yöntemi açıklayabiliriz.

İster basit değişiklikler ister kompleks teknik düzenlemeler olsun, web sitenizin içeriğini geliştirmenin ve mobil cihazlarda olabildiğince düzgün şekilde görünmesini sağlamanın beş yolunu inceleyeceğiz.

Mobil optimizasyonu önemsememek, sadece SEO açısından değil, aynı zamanda siteniz için satış ve ziyaretçi kaybına da neden olabilir. Yine de bazı geliştirmeleri yapmak aslında o kadar da zor değil.

1. Pop-Up'ları azaltın (mümkünse tamamen kaldırın)

Mobil cihaz kullanıcıları, masaüstü kullanıcılarına göre daha "seçici" dir. Mobil kullanıcıların genelde aceleleri vardır ve aradıkları şeyi mümkün oldukça çabuk ve en kestirme yoldan bulmak isterler. Bunu kendi "mobil kullanım" şeklinizde de muhakkak görebilirsiniz. Mobil sitelerde, doğru ayarlanmadığı taktirde pop-up'lar ziyaretçileriniz açısından büyük bir kayıp oluşturabilir.

Masaüstünde tarayıcılar için genellikle bir pop-up'on nasıl kapatılacağı nettir, ancak bu mobil cihazlarda her zaman geçerli değildir. Google, yapmış olduğu resmi bir duyurusunda, "geçiş reklamları" (interstitials) olarak bilinen mobil reklamların, ziyaretçi kullanımına ve website deneyimine zarar verdiğini tespit ettiği takdirde cezalandırılacağını bildirdi.

2. Genişlik için yüzdelik değerler kullanın

Mobil uyumlu bir tasarıma sahipseniz, bunun özellik zaten temanızda mevcuttur. Ancak yinede bu işlemin yapılış şeklini bilmeniz de gerekebilir. Bir sayfa için CSS stil kodlamaları yapılırken, sütun veya resim gibi öğelerin genişliğini iki şeye göre belirtebilirsiniz: piksel veya yüzdelik.

Genişliği piksel ölçüye göre ayarlamayı seçerseniz, öğelerin genişliği ekran boyutuyla değişmeyecek; bu durumda, belirli cihazlarda öğelerin bir kısmı ekrandan taşacak veya görünmeyecek şekilde yanlış boyutlanmış olacaktır. Eğer mobil için ayrıca medya sorguları kullanıyorsanız piksel kullanabilirsiniz.

3. Sitenizi medya sorguları kullanarak responsive hale getirin

Web sitenizi mobil cihazlara duyarlı (responsive) hale getirmek için medya sorguları kullanılabilir, ancak bu kodlamalar profesyoneller tarafından yapılmalıdır. Bu kodlamalar, sadece genişlik gibi tasarım elemanlarını değil, aynı zamanda içeriğin ve çevresindeki öğelerin şeklini değiştirmenize de izin veren CSS kodlamalarıdır.

Bu sorgular aynı zamanda sayfadaki metinlerin ne kadar büyük veya küçük olacağını belirlemek (font büyüklüğü) için de kullanılabilir. Bu da size, ziyaretçilerinize sunacağınız mobil deneyimi açısından yüksek bir kontrol gücü sağlayacaktır.

4. Dikkat dağıtan öğeleri kaldırın

Ziyaretçilerin, sitenizdeki önemli içeriklere hızlı ve kolay yoldan erişmesini sağlamalısınız. Bu hedefe ulaşmak için, aynı anda çok fazla öğe tarafından kişinin dikkati dağılmamış olması gerekmektedir. Özellikle bu öğelerin farklı hızlarda ve zamanlarda yüklenmesi ve sayfanın mobil cihazlarda titreme yapmasına (flickr) neden olması durumunda daha da önemlidir.

Bu içeriklere en güzel örnek, hemen hemen tüm mobil sitelerde bulunan mobil menülerdir. Mobil tasarım ayarlarında bu menü ve içeriği sayfanın "en altında" (gizli olarak) bulunmaktadır. Medya sorguları aracılığıyla sadece ziyaretçi menü ile etkileşime geçtiğinde aktifleşmektedir.

5. Mobil tasarımların geleceği

Hızlandırılmış Mobil Sayfalar (Accelerated Mobile Pages - AMP), Google'ın sunmuş olduğu güncel bir teknolojidir Google'a göre mobil içeriğin geleceği olarak görünmektedir. Bu sayfalar, mobil için sayfa yüklenme hızını artıran ve genel olarak daha akıcı bir kullanıcı deneyimi sağlayan özel bir çerçeveye (framework) sahiptir.

Alternatif olarak çok fazla ilgi ve optimizasyon yaparak benzer sonuçları kendiniz de elde edebilirsiniz, ancak AMP web sayfanızın içeriğini Google altyapısını kullanarak çok hızlı ve sonunsuz bir şekilde sunmak için kolay ve erişilebilir bir çözüm sunmaktadır.

Bu konu hakkında daha önce paylaşmış olduğumuz Google AMP Nedir? makalesinden daha detaylı bilgi edinebilirsiniz.