Mobil Öncelikli Tasarım Nedir? Mobile First'ün SEO Sıralamasına Etkisi

Mobil öncelikli tasarım nedir?

Mobil öncelikli tasarım, bir web sitesini önce en küçük ekran için planlayıp ardından tablet ve masaüstüne doğru genişleten tasarım yaklaşımıdır. Yani içerik sırası, menü, butonlar ve hız hedeflerini telefon kullanıcısına göre koyarsınız; büyük ekran sonradan eklenen bir katman olarak ele alınır.

Bu yazıda mobil öncelikli tasarım yaklaşımını iki açıdan ele alacağım. İlki tasarım tarafı: içeriği nasıl sıralarsınız, neyi kesersiniz, hangi bileşeni nasıl kurarsınız. İkincisi Google tarafı: arama motoru sitenizi hangi sürümüyle okur ve bu durum sıralamanıza nasıl yansır. 2012'den beri kurumsal sitelerle ve e-ticaret mağazalarıyla çalışıyorum. Bu süreçte gördüğüm en pahalı hatalar, masaüstünde kusursuz duran ama telefonda yarım kalan sitelerden çıktı.

Kısacası mesele sadece "site telefonda açılıyor mu" sorusu değil. Asıl soru şu: telefondaki sürüm, işinizi anlatan içeriğin tamamını taşıyor mu? Çünkü Google artık sitenizi büyük ölçüde telefondan bakan bir ziyaretçi gibi görüyor.

Mobile first yaklaşımı nereden çıktı?

"Mobile first" ifadesini tasarım dünyasına tasarımcı Luke Wroblewski kazandırdı. Wroblewski bu fikri 2009'da yazdığı bir blog yazısında ortaya attı, 2011'de ise aynı adla bir kitaba dönüştürdü. Temel önermesi basitti: küçük ekran sizi zorlar, bu zorlama da neyin gerçekten önemli olduğuna karar vermenizi sağlar.

Aynı dönemde Ethan Marcotte, 2010'da "Responsive Web Design" kavramını tanıttı. Bu yaklaşım tek bir HTML sayfasının ekran genişliğine göre yeniden düzenlenmesini öneriyordu. İki fikir birbirini tamamladı; biri düşünme sırasını, diğeri teknik uygulamayı tarif etti.

O yıllarda çoğu ajans önce masaüstü tasarımı hazırlıyor, sonra "mobil sürüm" adıyla bir şeyleri gizliyordu. Ben de ilk projelerimde benzer bir yol izledim. Sonuç genellikle aynıydı: telefonda sıkışmış bir menü, okunmayan tablolar ve ağır görseller. Mobile first bu alışkanlığı tersine çevirdi. Önce en dar alanda çalışan bir sayfa kurarsınız, ardından ekran büyüdükçe öğe eklersiniz.

Bu tersine çevirme bugün hâlâ geçerli. Üstelik artık yalnızca bir tasarım tercihi değil; arama motorunun sitenizi okuma biçimiyle de doğrudan bağlantılı.

Mobil öncelikli tasarım ile duyarlı tasarım arasındaki fark nedir?

Birçok işletme sahibi bu iki kavramı karıştırıyor. Duyarlı (responsive) tasarım bir tekniktir: aynı HTML'i farklı ekranlara CSS kuralları ile uyarlar. Mobil öncelikli tasarım ise bir düşünme sırasıdır: hangi ekranı önce tasarladığınızı ve önceliği kime verdiğinizi anlatır.

Dolayısıyla duyarlı bir site mobil öncelikli olmayabilir. Masaüstü için tasarladığınız bir sayfayı telefonda alt alta dizmek teknik olarak duyarlıdır. Ancak içerik sırası hâlâ masaüstü mantığını taşır. Aşağıdaki tablo farkı özetliyor.

Kendi projelerimde CSS'i min-width ile yazmayı tercih ederim. Böylece temel stil telefona gider; masaüstü ek kuralları yalnızca geniş ekranda devreye girer.

Mobil öncelikli dizine ekleme (mobile-first indexing) ne anlama geliyor?

Mobil öncelikli dizine ekleme, Google'ın bir sayfayı dizine alırken ve sıralarken o sayfanın mobil sürümünü esas almasıdır. Google'ın mobil öncelikli dizine ekleme en iyi uygulamaları belgesine göre Google, akıllı telefon tarayıcısıyla taradığı mobil içeriği dizine ekleme ve sıralama için kullanıyor.

Burada iki kavramı ayırmanız gerekiyor. Mobil öncelikli tasarım sizin tasarım kararınızdır. Mobil öncelikli dizine ekleme ise Google'ın tarama ve dizine ekleme davranışıdır. Birincisi sizin elinizde, ikincisi değil. Ancak birincisini doğru yaparsanız ikincisinden doğal olarak kazançlı çıkarsınız.

Önemli bir ayrıntı daha var: Google'ın ayrı bir "mobil dizini" yok. Google bunu 2018 duyurusunda açıkça belirtti; tek bir dizin var ve bu dizine giren sürüm artık mobil sürüm. Yani masaüstü sayfanızda yer alıp mobilde görünmeyen bir paragraf, Google açısından büyük ihtimalle yok hükmündedir.

Bu nedenle "masaüstünde her şey tam" demek artık yeterli bir savunma olmuyor. Telefonda ne varsa Google da onu görüyor.

Google mobil öncelikli dizine eklemeye nasıl geçti?

Geçiş bir gecede olmadı; yaklaşık sekiz yıl sürdü. Google Search Central blogundaki resmi duyurulara göre süreç şu adımlarla ilerledi:

• 2015: Google, mobil uyumlu sayfaları mobil aramada öne çıkaran güncellemeyi yayınladı.
• 2016: Mobil öncelikli tarama ve dizine ekleme deneyleri başladı.
• Mart 2018: En iyi uygulamalara uyan sitelerin mobil öncelikli dizine eklemeye taşınması başladı.
• 1 Temmuz 2019: Google'ın daha önce tanımadığı tüm yeni siteler için mobil öncelikli dizine ekleme varsayılan hale geldi.
• Mart 2020: Google, tüm web için mobil öncelikli dizine eklemeye geçeceğini duyurdu; takvimi sonra uzattı.
• 31 Ekim 2023: Google, geçişin tamamlandığını açıkladı.

Son duyuruda Google, mobil cihazlarda hiç çalışmayan çok küçük bir site grubundan söz ediyor. Örneğin tüm mobil kullanıcılara hata gösteren, mobil sürümü robots.txt ile engelleyen ya da tüm mobil sayfaları ana sayfaya yönlendiren siteler bu grupta. Google ayrıca eski masaüstü Googlebot ile taramayı mümkün olduğunca azaltacağını belirtiyor.

Pratikte bunun anlamı açık: bugün yayındaki sitelerin neredeyse tamamı için Google'ın gördüğü sürüm mobil sürüm.

Mobil öncelikli tasarım SEO sıralamasını doğrudan etkiler mi?

Dürüst cevap şu: doğrudan bir "mobil öncelikli tasarım puanı" yok. Google, 2018'deki duyurusunda mobil öncelikli dizine eklemenin içeriği nasıl topladığıyla ilgili olduğunu, nasıl sıraladığıyla ilgili olmadığını yazdı. Yani bu yöntemle dizine girmek tek başına bir sıralama avantajı sağlamıyor.

Ancak dolaylı etki çok güçlü. Google sıralamayı mobil sürümdeki içeriğe göre yaptığına göre, mobilde eksik kalan her bilgi sıralama şansınızı zayıflatır. Başlık, açıklama, yapısal veri, iç linkler ve metin mobilde yoksa, Google'ın değerlendirdiği sayfa da o eksik sayfadır.

Öte yandan sayfa deneyimi tarafı var. Google, Core Web Vitals gibi deneyim ölçütlerini sıralama sistemlerinde kullandığını belgelerinde söylüyor. Bu ölçütlerin saha verisi büyük ölçüde gerçek kullanıcılardan geliyor; kullanıcılarınızın çoğu telefondaysa skorunuzu da telefon deneyimi belirler.

Kısacası mobil öncelikli tasarım sıralamayı bir düğme gibi yükseltmez. Buna karşılık Google'ın gördüğü sayfayı eksiksiz, hızlı ve kullanılabilir hale getirir. Sıralamada fark yaratan da genellikle bu temeldir.

Mobil sürümde eksik kalan içerik sıralamayı nasıl düşürür?

En sık gördüğüm senaryo şudur: tasarımcı telefonda sayfayı kısa tutmak için bazı bölümleri kaldırır. Örneğin hizmet açıklamasının ikinci yarısı, müşteri yorumları ya da sık sorulan sorular mobilde hiç yüklenmez. Masaüstünde her şey yerindedir, bu yüzden kimse fark etmez.

Oysa Google'ın belgesi net: mobil sitenizde masaüstünden daha az içerik varsa, ana içeriği masaüstüyle eşdeğer olacak şekilde güncellemeyi düşünmelisiniz. Aksi halde o içeriğe bağlı aramalarda görünürlüğünüz azalabilir.

Eksiklik yalnızca metinle sınırlı değil. Şu öğeler de mobilde sık kayboluyor:

• Title etiketi ve meta açıklama; bazı temalar mobil şablonda farklı değerler üretiyor.
• Yapısal veri; Google özellikle Breadcrumb, Product ve VideoObject işaretlemesinin iki sürümde de bulunmasını öneriyor.
• İç linkler; masaüstü kenar çubuğundaki bağlantılar mobilde tamamen silinebiliyor.
• Görsellerin alt metinleri ve robots meta etiketleri.

Bu yüzden bir site devraldığımda ilk işlerimden biri mobil ve masaüstü kaynak kodunu yan yana koymaktır. Başlıkları, metin uzunluğunu ve bağlantı sayısını karşılaştırırım. Farkı gördüğümde nedenini çoğu zaman temanın mobil şablonunda bulurum.

Hangi mobil site yapılandırmasını seçmelisiniz?

Google, mobil uyumlu bir site için üç yapılandırma tanımlıyor. Seçiminiz hem geliştirme maliyetini hem de SEO riskini belirliyor.

1. Duyarlı tasarım: Her cihaza aynı URL'de aynı HTML'i sunar, görünümü ekran boyutuna göre değiştirir.
2. Dinamik sunum: URL aynı kalır, ancak sunucu kullanıcı aracısına bakarak farklı HTML gönderir. Vary: User-Agent başlığı gerekir.
3. Ayrı URL'ler: Mobil ve masaüstü için ayrı adresler kullanır, çoğunlukla m. alt alan adıyla.

Google, duyarlı tasarımı uygulaması ve bakımı en kolay desen olduğu için öneriyor. Ayrıca belgede önemli bir not var: içerik eşitliği uyarılarının çoğu yalnızca dinamik sunum ve ayrı URL kurulumları için geçerli. Duyarlı tasarımda içerik ve meta veriler iki sürümde zaten aynıdır.

Bu nedenle yeni bir web tasarım projesinde duyarlı yapı dışında bir seçeneği nadiren öneririm. Dinamik sunum ya da ayrı URL, genellikle eski bir altyapının mirası olarak karşıma çıkıyor. Bütçe planlarken bu kararın maliyete etkisini web sitesi yaptırma fiyatları rehberimde ayrıca anlattım.

Ayrı mobil URL (m.) kullanan siteler neye dikkat etmeli?

Hâlâ m.orneksite.com gibi ayrı bir mobil alan adı kullanıyorsanız, iş yükünüz iki katına çıkar. Google bu yapı için ek en iyi uygulamalar listeliyor ve bunları atladığınızda sayfalar dizinden düşebiliyor.

• Masaüstü URL her zaman kanonik adrestir; mobil sayfa rel="canonical" ile masaüstünü gösterir.
• Masaüstü sayfa rel="alternate" ile mobil karşılığını işaret eder.
• Hata sayfalarının durum kodu iki sürümde aynı olmalı; masaüstü normal içerik sunarken mobil hata veriyorsa sayfa dizinden eksik kalır.
• Hreflang bağlantıları sürüm içinde kalmalı: mobil sayfalar mobil karşılıklara, masaüstü sayfalar masaüstü karşılıklara bağlanır.
• İki sürümü de Search Console'da doğrulamanız gerekir.

Çok dilli sitelerde bu hreflang kuralı sık gözden kaçıyor. Ayrıntısını hreflang etiketi yazımda anlattım.

Benim önerim ise genellikle net: fırsat bulduğunuz ilk yenilemede ayrı mobil sürümü kaldırıp duyarlı yapıya geçin. Ancak bu geçiş bir taşıma projesidir; yönlendirme haritası olmadan başlamayın. Yeniden tasarım sırasında sıralamayı korumak için izlediğim adımları web sitesi yenilerken SEO nasıl korunur yazısında bulabilirsiniz.

Mobil öncelikli tasarımda içerik önceliği nasıl belirlenir?

Mobil öncelikli tasarımın en zor kısmı teknik değil, editoryal. Telefon ekranında aynı anda az şey görünür; bu yüzden neyin önce geleceğine karar vermeniz gerekir. Ben bu kararı şu sırayla veririm:

1. Sayfanın tek bir ana amacını yazarım: teklif formu, arama, satın alma ya da bilgi.
2. Ziyaretçinin o amaca ulaşmak için bilmesi gereken üç bilgiyi seçerim.
3. Bu üç bilgiyi ve ana eylemi ilk iki kaydırmanın içine yerleştiririm.
4. Kalan içeriği silmem; aşağıya, okunaklı başlıklarla sıralarım.
5. Son olarak masaüstü görünümünde boşluk kalan yerleri ek içerikle değil, düzenle doldururum.

Dördüncü madde SEO açısından kritik. Mobil öncelikli düşünmek, içeriği kesmek anlamına gelmez; içeriği sıralamak anlamına gelir. Telefonda uzun bir sayfa sorun değildir, dağınık bir sayfa sorundur.

Örneğin bir hizmet sayfasında fiyat bilgisi, süreç ve iletişim düğmesi üstte olur. Referanslar, ayrıntılı açıklama ve sık sorulan sorular ise aşağıda yer alır. Böylece hem acelesi olan ziyaretçi hem de her şeyi okumak isteyen ziyaretçi aradığını bulur. Google da sayfanın tamamını görür.

Menü, sekme ve akordeonlar mobilde SEO'ya zarar verir mi?

Kısa cevap: içerik HTML'de varsa genellikle zarar vermez. Akordeon ya da sekme içinde duran metin, sayfa yüklendiğinde kaynak kodunda bulunuyorsa Google onu okuyabilir. Telefonda yer kazanmak için bu bileşenleri kullanmak meşru bir tasarım tercihidir.

Sorun, içeriğin kullanıcı etkileşimiyle sonradan yüklenmesinde başlıyor. Google'ın belgesi açıkça şunu söylüyor: kaydırma, tıklama ya da yazma gibi kullanıcı etkileşimi gerektiren içeriği Google yüklemez. Dolayısıyla "Devamını oku" düğmesine basınca sunucudan gelen bir metin, Google için büyük ihtimalle görünmez kalır.

Aynı mantık tembel yüklemede (lazy loading) de geçerli. Görselleri ve alt bölümleri ekrana yaklaştıkça yüklemek hız açısından doğrudur. Ancak ana içeriği tıklamaya bağlarsanız Google o içeriği atlayabilir.

Menüler için de benzer bir kuralım var. Hamburger menü kullanabilirsiniz; ancak menü bağlantılarının HTML'de gerçek bağlantı olarak durmasına dikkat edin. JavaScript ile sonradan oluşan ve href taşımayan menü öğeleri, iç link yapınızı zayıflatır. Bu tür ayrıntıları yapay zeka sonrası teknik SEO yazımda daha geniş ele aldım.

Dokunma hedefleri, yazı boyutu ve viewport için hangi kurallar geçerli?

Mobil öncelikli bir sayfanın ilk teknik şartı viewport etiketidir. web.dev'in duyarlı tasarım temelleri rehberine göre bu etiket yoksa mobil tarayıcı sayfayı genellikle yaklaşık 980 piksel genişliğinde çizer ve kullanıcı yakınlaştırmak zorunda kalır. Çözüm tek satırdır: width=device-width ve initial-scale=1 değerlerini içeren meta viewport etiketi.

İkinci konu dokunma hedefleri. web.dev, önerilen asgari dokunma hedefini yaklaşık 48 cihazdan bağımsız piksel olarak veriyor ve hedefler arasında yaklaşık 8 piksel boşluk bırakmayı öneriyor. 24 piksellik bir ikon kullanıyorsanız, dolgu ekleyerek dokunma alanını 48 piksele çıkarabilirsiniz.

Üçüncü konu okunabilirlik. Kullanıcı metni okumak için yakınlaştırmak zorunda kalıyorsa tasarım başarısız demektir. Ben gövde metnini telefonda rahat okunacak bir boyutta tutar, satır aralığını geniş bırakırım. Ayrıca yatay kaydırma gerektiren tabloları ya kendi kapsayıcısı içinde kaydırırım ya da kart düzenine çeviririm.

Bu üç kural basit bir liste gibi duruyor. Yine de denetlediğim sitelerde en sık rastladığım sorunlar tam olarak bunlar: birbirine yapışık bağlantılar, sayfadan taşan tablolar ve küçük metin.

Mobilde hız neden masaüstünden daha kritik?

Telefon kullanıcısı çoğu zaman daha zayıf bir işlemciye ve daha değişken bir bağlantıya sahiptir. Aynı sayfa masaüstünde hızlı açılırken telefonda belirgin biçimde yavaşlayabilir. Bu yüzden hız hedeflerini masaüstüne göre değil, orta seviye bir telefona göre koyarım.

Google'ın Core Web Vitals eşikleri iyi bir çerçeve sunuyor: Largest Contentful Paint için 2,5 saniye, Interaction to Next Paint için 200 milisaniye ve Cumulative Layout Shift için 0,1 değeri "iyi" sınırı kabul ediliyor. Bu ölçütlerin nasıl test edildiğine burada girmeyeceğim; önemli olan tasarım kararlarının bu değerleri nasıl etkilediği.

• Büyük kahraman görseli LCP'yi doğrudan uzatır; telefona daha küçük bir sürüm gönderin.
• Boyutu belirtilmemiş görseller ve geç yüklenen reklam alanları CLS'yi bozar.
• Ağır JavaScript kaydırıcıları ve sohbet eklentileri etkileşim gecikmesini artırır.

Görsel ağırlığı çoğu sitede en hızlı kazanç getiren alandır. Dosyaları yüklemeden önce resim küçültme aracı ile boyutlandırmak bile belirgin fark yaratır. Mobil öncelikli tasarımda temel kural şudur: telefona yalnızca ihtiyacı olanı gönderin.

Görseller, videolar ve yapısal veri mobilde nasıl eşitlenir?

Google, mobil sürümdeki görsellerin masaüstündekiyle aynı kalite ve açıklamaya sahip olmasını istiyor. Belgede birkaç net öneri var: düşük çözünürlüklü ya da çok küçük görsel kullanmayın, desteklenen biçimleri kullanın ve mobilde de masaüstündeki kadar açıklayıcı alt metin yazın.

Görsel URL'leri de önemli. Mobil ve masaüstü sürüm farklı görsel adresleri kullanıyorsa, geçiş sırasında görsel arama trafiğinde geçici bir kayıp yaşayabilirsiniz. Mümkünse iki sürümde aynı görsel URL'lerini koruyun. Ayrıca her yüklemede değişen görsel ve video adresleri kullanmayın; Google bu kaynakları düzgün işleyemez.

Videolar için Google ek bir uyarı yapıyor: videoyu mobil sayfada kolay bulunacak bir konuma koyun. Kullanıcının videoya ulaşmak için çok aşağı kaydırması gerekiyorsa videonun sıralaması zarar görebilir.

Yapısal veri tarafında kural basit: iki sürümde de aynı işaretleme bulunmalı. Duyarlı tasarım bunu kendiliğinden sağlar. Ayrı şablonlar kullanıyorsanız ise mobil şablonun JSON-LD bloğunu ayrıca kontrol edin. Temel işaretlemeyi hızlıca hazırlamak için schema oluşturucu aracını kullanabilirsiniz. Böylece mobil ve masaüstü şablona aynı bloğu ekleyebilirsiniz.

Mobil öncelikli tasarım dönüşüm oranına nasıl yansır?

SEO ziyaretçiyi getirir; ancak ziyaretçiyi müşteriye çeviren şey telefondaki deneyimdir. Mobil öncelikli tasarım bu noktada SEO ile dönüşümü aynı masaya oturtur. Burada size uydurma bir yüzde vermeyeceğim; bunun yerine sahada tekrar tekrar gördüğüm sürtünme noktalarını paylaşacağım.

• Formda gereğinden fazla alan: telefonda her alan ayrı bir dokunma ve klavye açılışı demektir.
• Yanlış klavye tipi: telefon numarası alanında harf klavyesi açılması.
• Ekranı kaplayan açılır pencereler: kapatma düğmesi küçük ya da ekran dışında kalıyor.
• Ulaşılamayan iletişim düğmesi: arama ya da WhatsApp düğmesinin sayfanın en altında kalması.
• Sepette sürpriz maliyet: kargo ve ek ücretlerin son adımda ortaya çıkması.

E-ticaret projelerinde bu listeyi ödeme adımından geriye doğru incelerim. Çünkü mobil kullanıcı en çok son adımlarda vazgeçer. Mağaza tarafındaki bu denetimi e-ticaret danışmanlığı kapsamında ayrıntılı yapıyorum.

Kurumsal sitelerde ise en büyük kazancı genellikle tek bir değişiklik getirir: ana eylemi her ekranda erişilebilir tutmak. Yani telefon ziyaretçisi aradığı bilgiyi okuduğu anda, iletişim düğmesi başparmağının ulaşabileceği yerde durmalı.

Mevcut siteyi mobile first mantığına nasıl taşırsınız?

Her site sıfırdan tasarlanmak zorunda değil. Ancak masaüstü mantığıyla tasarladığınız bir siteyi mobile first yaklaşımına çevirmek plan ister. Benim izlediğim adımlar şöyle:

1. Analitikte cihaz dağılımına ve en çok trafik alan sayfalara bakarım.
2. Bu sayfaların mobil ve masaüstü sürümlerini içerik, başlık, bağlantı ve yapısal veri açısından karşılaştırırım.
3. Eksik içeriği mobil sürüme geri getiririm; gizlemek yerine yeniden sıralarım.
4. Şablon düzeyinde CSS'i min-width mantığına çeviririm.
5. Görselleri ve üçüncü taraf betikleri telefona göre hafifletirim.
6. Yayından sonra Search Console'da dizine ekleme ve sayfa deneyimi raporlarını izlerim.

Ayrı mobil URL'den duyarlı yapıya geçiyorsanız bu liste bir taşıma projesine dönüşür. O durumda her m. adresini masaüstü karşılığına kalıcı olarak yönlendirmeniz gerekir.

Böyle bir geçişi tek başına yönetmek istemiyorsanız, SEO danışmanlığı sürecinde bu adımları sizinle birlikte planlayabilirim. Kendi ekibiniz uyguluyorsa, en azından ikinci adımdaki karşılaştırmayı atlamayın.

Mobil uyumu kısa yoldan nasıl kontrol edersiniz?

Test yöntemlerini ayrı bir yazıda ayrıntılı anlatacağım; burada yalnızca kısa bir yol haritası vereyim. Önce bir hatırlatma: Google'ın eski Mobil Uyumluluk Testi aracı 2023 sonunda kullanımdan kaldırıldı. Dolayısıyla bu aracı öneren eski rehberlere güvenmeyin.

• Search Console'daki URL Denetleme aracı, Google'ın sayfayı akıllı telefon tarayıcısıyla nasıl gördüğünü gösterir.
• Chrome Geliştirici Araçları'ndaki cihaz modu, farklı ekran genişliklerinde düzeni kontrol etmenizi sağlar.
• Lighthouse, performans ve erişilebilirlik tarafında mobil öncelikli bir rapor verir.

Bunlara ek olarak basit bir alışkanlık öneririm: sitenizi haftada bir kez kendi telefonunuzdan, mobil veriyle açın. Formu doldurun, menüyü açın, bir ürünü sepete ekleyin. Araçların yakalayamadığı birçok sorunu bu beş dakikalık denemede görürsünüz.

Arama sonucundaki görünümünüzü de unutmayın. Title ve meta açıklamanızın telefonda nasıl kesildiğini görmek için Google SERP önizleme aracını kullanabilirsiniz.

En sık gördüğüm mobil öncelikli tasarım hataları nelerdir?

Denetim yaptığım sitelerde aynı hatalar tekrar tekrar karşıma çıkıyor. Bu listeyi saha tecrübemden derledim; her sitede hepsi olmayabilir, ancak biri bile varsa önceliklendirmeye değer.

• Mobilde gizlenen içerik: masaüstündeki metnin, yorumların ya da sık sorulan soruların telefonda yüklenmemesi.
• Farklı meta veriler: mobil şablonda boş ya da genel bir title etiketi.
• Tıklamayla yüklenen ana içerik: "Devamını oku" arkasında sunucudan gelen metin.
• robots.txt ile engellenen kaynaklar: CSS ya da JavaScript dosyalarının taranamaması.
• Her şeyi ana sayfaya yönlendiren mobil sürüm.
• Yapışık bağlantılar ve küçük düğmeler.
• Telefona gönderilen masaüstü boyutunda görseller.
• Ekranı kaplayan kampanya açılır pencereleri.

Listenin ilk dört maddesi doğrudan SEO sorunudur, çünkü Google'ın gördüğü sayfayı değiştirir. Son dört madde ise önce kullanıcıyı etkiler; ancak kullanıcı deneyimi zayıfladığında dönüşüm de düşer.

Bu hataların çoğu tek bir kaynaktan doğuyor: tasarımın masaüstünde onaylanıp telefonda hiç test edilmemesi. Bu yüzden tasarım onayını her zaman telefon ekranında isterim.

Mobil öncelikli tasarım yatırımı kimler için daha acil?

Her işletme için önemli, ancak bazıları için daha acil. Önceliği belirlerken şu sorulara bakarım: trafiğin çoğu telefondan mı geliyor, satış ya da teklif doğrudan sitede mi gerçekleşiyor, site eski bir altyapıda mı çalışıyor?

Örneğin yerel hizmet veren işletmelerde arama çoğunlukla telefondan ve acil bir ihtiyaçla yapılıyor. Tesisatçı, klinik ya da restoran arayan kişi büyük ekranda uzun uzun karşılaştırma yapmaz. Bu tür işletmelerde telefondaki ilk ekran, işin kendisi kadar önemlidir.

E-ticaret siteleri de benzer durumda. Ürün listesi, filtreler ve ödeme adımı telefonda rahat çalışmıyorsa, reklam bütçesi ne kadar yüksek olursa olsun kayıp büyür. Üstelik ücretli trafikte her tıklamanın bir maliyeti vardır; bu yüzden mobil sürtünme doğrudan paraya dönüşür.

B2B sitelerde ise tablo biraz farklı. Karar süreci masaüstünde ilerleyebilir; buna rağmen ilk temas çoğu zaman telefonda olur. Dolayısıyla ilk izlenim yine mobil sürümle oluşur. Kendi sitenizin durumunu merak ediyorsanız, iletişim sayfasından ulaşabilirsiniz.

Sonuç: mobil öncelikli tasarıma nereden başlamalısınız?

Mobile first, 2009'da bir tasarım fikri olarak doğdu. Bugün ise Google'ın sitenizi okuma biçiminin ta kendisi. Google, 2023'te mobil öncelikli dizine eklemeye geçişin tamamlandığını açıkladı. Dolayısıyla telefondaki sayfanız, arama motoru için sitenizin asıl sürümü.

Başlamak için büyük bir yeniden tasarım projesine gerek yok. İlk adım olarak en çok trafik alan beş sayfanızı seçin ve mobil ile masaüstü sürümünü yan yana koyun. İçerik, başlık, bağlantı ve yapısal veri farklarını not edin. Ardından eksikleri kapatın ve telefondaki hız sorunlarını ele alın.

Uzun vadede ise yeni her sayfayı önce telefon ekranında tasarlayın. Böylece içerik eşitliği sonradan düzeltmeniz gereken bir sorun olmaktan çıkar, sürecin doğal bir parçası olur. Benim deneyimim şunu gösteriyor: telefonda net olan bir site, masaüstünde de nettir. Tersi ise her zaman geçerli değil.

Son bir not: mobil öncelikli tasarımı bir kerelik proje olarak görmeyin. Yeni eklediğiniz her kampanya sayfası, her eklenti ve her açılır pencere telefondaki dengeyi değiştirebilir. Bu yüzden içerik ekibinizle basit bir kural koyun: kimse bir sayfayı telefonda kontrol etmeden yayına almasın. Küçük bir alışkanlık gibi duruyor; ancak yıllar içinde sitenizi büyük bir yeniden tasarım ihtiyacından korur.