Mobil Uyumlu Web Tasarımı

Mobil Uyumlu Web Tasarımı​

Mobil uyumlu web tasarımı, bir internet sitesinin telefon, tablet ve masaüstü ekranlarında düzgün şekilde görüntülenmesini sağlayan tasarım yaklaşımıdır.

Günümüzde kullanıcıların önemli bir bölümü web sitelerine mobil cihazlardan eriştiği için yalnızca masaüstüne göre hazırlanmış siteler yeterli değildir.

Bu konuda özellikle:

• Responsive tasarım
• Esnek görseller
• Mobil menü
• Okunabilir yazı boyutları
• Dokunmatik kullanıma uygun butonlar
• Sayfa hızı

önemlidir.

Amaç sadece sitenin telefonda açılması değil, kullanıcının yakınlaştırma yapmadan ve yatay kaydırmadan siteyi rahatça kullanabilmesidir.

Mobil Uyumlu Web Tasarımı Nedir?​

Mobil uyumlu web tasarımı, web sayfasının farklı ekran boyutlarına otomatik olarak uyum sağlamasıdır.

Örneğin masaüstünde:

• Sol menü
• Ana içerik
• Sağ sidebar

olabilir.

Aynı site telefonda:

• Mobil menü
• Tek sütun içerik
• Alt alta yerleşen bölümler

şeklinde gösterilebilir.

Bu yaklaşım genellikle responsive web design olarak adlandırılır.

Responsive Tasarım Nedir?​

Responsive tasarım, ekran genişliğine göre sayfa düzeninin değişmesini sağlayan yöntemdir.

Örneğin:

Masaüstünde üç sütun bulunan bir alan,

tablette iki sütuna,

telefonda ise tek sütuna

dönüşebilir.

Bu dönüşüm CSS media query ve esnek grid sistemleriyle yapılabilir.

Mobil Uyum Neden Önemlidir?​

Mobil uyum özellikle:

• Kullanıcı deneyimi
• Okunabilirlik
• Dönüşüm oranı
• Site kullanım süresi
• SEO

açısından önemlidir.

Telefon ekranında düzgün çalışmayan bir site kullanıcıların hızlı şekilde çıkmasına neden olabilir.

Örneğin kullanıcı:

• Menüye basamıyorsa
• Yazıları okuyamıyorsa
• Form dolduramıyorsa
• Sağ tarafa kaydırmak zorunda kalıyorsa

site mobil açısından sorunludur.

Mobil Uyumlu Site Nasıl Olmalı?​

İyi bir mobil tasarımda:

• İçerik ekrana sığmalı
• Yatay kaydırma olmamalı
• Yazılar okunabilir olmalı
• Butonlar kolay tıklanabilmeli
• Menü sade olmalı
• Görseller ekran genişliğine uyum sağlamalı

Kullanıcının masaüstü sürümünü zorla küçültülmüş şekilde görmesi doğru mobil tasarım değildir.

Viewport Nedir?​

Viewport, mobil tarayıcıya sayfanın ekran genişliğine göre nasıl ölçekleneceğini anlatır.

HTML içerisinde genellikle:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

kullanılır.

Viewport etiketi eksik olduğunda mobil cihaz tarayıcısı sayfayı masaüstü genişliğinde yorumlayabilir.

Bu da:

• Çok küçük yazılar
• Yanlış ölçekleme
• Yatay kaydırma

gibi sorunlara neden olabilir.

Sabit Genişlik mi Esnek Genişlik mi?​

Eski web sitelerinde örneğin:

width: 1200px

gibi sabit genişlikler sık kullanılırdı.

Bu yapı küçük ekranlarda sorun çıkarabilir.

Mobil uyumlu tasarımlarda:

• yüzde değerleri
• max-width
• flexbox
• grid

gibi esnek yöntemler daha kullanışlıdır.

Örneğin:

width: 100%

ile bir öğe mevcut alanın genişliğine uyarlanabilir.

max-width Ne İşe Yarar?​

max-width, bir öğenin büyüyebileceği maksimum genişliği belirler.

Örneğin ana içerik alanı:

max-width: 1200px

olarak sınırlandırılabilir.

Böylece geniş monitörlerde içerik gereğinden fazla açılmaz ancak küçük ekranlarda daha dar hale gelebilir.

Görsellerde ise:

max-width: 100%

kullanımı resmin kapsayıcı alanından taşmasını önlemeye yardımcı olabilir.

Media Query Nedir?​

Media Query, belirli ekran boyutlarında farklı CSS kuralları çalıştırmak için kullanılır.

Örneğin masaüstünde yatay olan menü telefonda gizlenip hamburger menüye dönüşebilir.

Basit bir kullanım:

@media (max-width: 768px)

şeklindedir.

Bu kural belirli genişliğin altındaki ekranlar için özel stiller tanımlamak amacıyla kullanılabilir.

Breakpoint Nedir?​

Breakpoint, tasarımın belirli ekran genişliklerinde düzen değiştirdiği noktadır.

Örneğin:

• Mobil
• Tablet
• Laptop
• Geniş ekran

için farklı breakpointler kullanılabilir.

Ancak her cihaz modeli için ayrı breakpoint oluşturmak gerekmez.

Daha doğru yaklaşım, tasarımın bozulduğu noktalara göre breakpoint belirlemektir.

Mobile First Nedir?​

Mobile First, tasarıma önce küçük ekranlardan başlayıp daha büyük ekranlara doğru geliştirme yaklaşımıdır.

Öncelikle mobil sürüm hazırlanır.

Daha sonra:

• Tablet
• Laptop
• Masaüstü

için ek özellikler eklenir.

Bu yöntem özellikle içerik önceliğini doğru belirlemeyi kolaylaştırabilir.

Desktop First Nedir?​

Desktop First yaklaşımında önce masaüstü tasarımı hazırlanır.

Daha sonra küçük ekranlara uyarlanır.

Bu yöntem de kullanılabilir.

Ancak masaüstü tasarımı çok karmaşık hazırlanırsa mobil sürüme dönüştürmek zorlaşabilir.

Yeni projelerde Mobile First yaklaşımı sık tercih edilir.

Flexbox Nedir?​

Flexbox, web sayfasındaki öğeleri satır veya sütun halinde düzenlemeyi kolaylaştıran CSS sistemidir.

Örneğin:

• Menü
• Kartlar
• Buton grupları
• Profil alanları

Flexbox ile kolayca hizalanabilir.

Mobil ekranda yan yana duran iki öğe alt alta geçirilebilir.

CSS Grid Nedir?​

CSS Grid, daha gelişmiş satır ve sütun düzenleri oluşturmak için kullanılan CSS sistemidir.

Örneğin masaüstünde:

3 sütun

telefon ekranında:

1 sütun

şeklinde kart sistemi oluşturulabilir.

Özellikle:

• Blog sayfaları
• Ürün listeleri
• Dashboard
• Galeri

tasarımlarında oldukça kullanışlıdır.

Flexbox mı Grid mi?​

Her ikisi de kullanılabilir.

Flexbox​

Tek boyutlu düzenlerde daha pratiktir.

Örneğin:

• Menü
• Buton sırası
• Kart satırı

Grid​

Satır ve sütunların birlikte kontrol edilmesi gereken yapılarda daha uygundur.

Örneğin:

• Ürün sayfası
• Galeri
• Dashboard

Bir web sitesinde ikisi birlikte de kullanılabilir.

Mobil Menü Nasıl Olmalı?​

Masaüstündeki geniş menü telefon ekranına sığmayabilir.

Bu nedenle mobil cihazlarda genellikle:

Hamburger Menü

kullanılır.

Kullanıcı menü ikonuna bastığında navigasyon açılır.

Mobil menü:

• Kolay açılmalı
• Kolay kapanmalı
• Ana kategorileri göstermeli
• Ekranın dışına taşmamalı

Çok fazla alt menü mobil kullanımda karmaşık olabilir.

Hamburger Menü Nedir?​

Hamburger Menü genellikle üç yatay çizgiden oluşan menü ikonudur.

Telefon ekranında ana navigasyonu gizleyerek daha fazla alan kazanmayı sağlar.

Kullanıcı ikona bastığında menü açılır.

Özellikle çok sayıda menü seçeneği bulunan sitelerde kullanışlıdır.

Mobilde Yazı Boyutu Nasıl Olmalı?​

Mobil kullanıcı yazıyı okuyabilmek için sürekli yakınlaştırma yapmak zorunda kalmamalıdır.

Ana içerik metni rahat okunabilecek büyüklükte kullanılmalıdır.

Örneğin gövde metinlerinde:

16 px

civarı birçok tasarımda iyi bir başlangıç noktasıdır.

Ancak kullanılan font ve tasarıma göre farklı değerler kullanılabilir.

Başlık Boyutları Nasıl Olmalı?​

Masaüstünde çok büyük görünen başlıklar telefon ekranında taşabilir.

Bu nedenle başlıklar mobilde küçültülebilir.

Örneğin:

Masaüstü H1:

48 px

Mobil H1:

30-34 px

şeklinde değişebilir.

Kesin değer tasarıma bağlıdır.

Satır Uzunluğu Önemli mi?​

Evet.

Çok uzun satırlar okumayı zorlaştırabilir.

Geniş masaüstü ekranlarda içerik alanını belirli maksimum genişlikte tutmak daha rahat okuma sağlayabilir.

Mobilde ise ekran zaten daha dar olduğu için metin otomatik olarak daha kısa satırlara bölünür.

Butonlar Mobilde Nasıl Olmalı?​

Butonlar parmakla rahat şekilde tıklanabilecek büyüklükte olmalıdır.

Çok küçük:

• Menü ikonları
• Linkler
• Kapatma butonları

kullanıcıların yanlış yere basmasına neden olabilir.

Butonların arasında da yeterli boşluk bulunmalıdır.

Dokunmatik Kullanım Neden Farklıdır?​

Masaüstünde kullanıcı mouse ile oldukça hassas seçim yapabilir.

Mobilde ise parmak kullanılır.

Bu nedenle tıklama alanları daha büyük olmalıdır.

Örneğin küçük bir metin bağlantısı yerine daha geniş bir buton mobil cihazda daha kullanışlı olabilir.

Hover Efektlerine Dikkat Edilmeli mi?​

Evet.

Masaüstünde mouse ile:

hover

kullanılabilir.

Ancak telefonlarda klasik mouse hover hareketi bulunmaz.

Bu nedenle önemli özellikler sadece hover üzerine kurulmamaldır.

Örneğin bir menü yalnızca mouse üzerine gelindiğinde açılıyorsa mobil kullanıcı için sorun oluşturabilir.

Görseller Mobil Uyumlu Nasıl Yapılır?​

Görseller kapsayıcı alanından taşmamalıdır.

CSS içerisinde:

max-width: 100%;

ve uygun yükseklik ayarları kullanılabilir.

Böylece görsel ekran küçüldükçe otomatik küçülebilir.

Ancak yalnızca görseli küçültmek yeterli değildir.

Dosya boyutu da optimize edilmelidir.

Mobilde Büyük Görseller Neden Sorun Olur?​

Telefon ekranında küçük gösterilecek bir görselin çok yüksek çözünürlükte yüklenmesi gereksiz veri kullanımına neden olabilir.

Örneğin:

400 px genişliğinde gösterilen bir görselin 6000 px olarak yüklenmesi sayfanın gereksiz yere ağırlaşmasına neden olabilir.

Mobil internet kullanıcıları için dosya boyutu özellikle önemlidir.

Responsive Images Nedir?​

Responsive Images, cihazın ekranına göre farklı görsel boyutlarının yüklenmesini sağlayan yöntemdir.

HTML içerisinde:

• srcset
• sizes
• picture

gibi yapılar kullanılabilir.

Bu sayede küçük telefon ekranına gereksiz yere çok büyük görsel gönderilmez.

Lazy Loading Nedir?​

Lazy Loading, görsellerin kullanıcı sayfada ilgili bölüme yaklaştığında yüklenmesini sağlar.

Örneğin 30 görsel bulunan uzun bir sayfada tüm görseller ilk anda yüklenmek zorunda kalmaz.

Bu yöntem:

• İlk açılış süresini
• Veri kullanımını
• Sunucu yükünü

azaltmaya yardımcı olabilir.

Mobil Site Hızı Neden Önemlidir?​

Mobil kullanıcıların bağlantısı masaüstü kadar hızlı olmayabilir.

Özellikle mobil internet bağlantılarında ağır siteler daha geç açılabilir.

Site hızını etkileyen başlıca unsurlar:

• Büyük görseller
• Fazla JavaScript
• Ağır CSS
• Çok fazla üçüncü taraf script
• Yavaş hosting
• Cache eksikliği

şeklinde sıralanabilir.

JavaScript Mobil Performansı Etkiler mi?​

Evet.

Çok fazla JavaScript kullanımı özellikle düşük veya orta seviye telefonlarda siteyi yavaşlatabilir.

Tarayıcının kodu:

• İndirmesi
• İşlemesi
• Çalıştırması

gerekir.

Bu nedenle kullanılmayan JavaScript dosyalarının yüklenmemesi faydalıdır.

CSS Dosyaları Optimize Edilmeli mi?​

Evet.

Çok büyük ve kullanılmayan CSS dosyaları sayfanın yüklenmesini etkileyebilir.

Özellikle:

• Kullanılmayan stiller
• Tekrarlanan kodlar
• Gereksiz framework parçaları

temizlenebilir.

CSS dosyaları sıkıştırılarak dosya boyutu azaltılabilir.

Mobil Formlar Nasıl Olmalı?​

Formlar telefonda kolay doldurulmalıdır.

Örneğin:

• Ad Soyad
• E-posta
• Telefon
• Şifre

alanları yeterli genişlikte olmalıdır.

Form alanları yan yana sıkıştırılmak yerine mobilde alt alta gösterilebilir.

Mobil Klavye Türü Kullanılabilir mi?​

Evet.

Doğru HTML input türleri kullanıldığında telefon uygun klavyeyi gösterebilir.

Örneğin:

Telefon numarası alanında sayı ağırlıklı klavye,

e-posta alanında e-posta yazımını kolaylaştıran klavye

açılabilir.

Bu küçük detay kullanıcı deneyimini iyileştirir.

Mobilde Pop-up Kullanılmalı mı?​

Kullanılabilir ancak dikkatli olunmalıdır.

Tam ekranı kaplayan pop-up kullanıcı deneyimini ciddi şekilde bozabilir.

Özellikle:

• Kapatma düğmesi çok küçükse
• Sayfa açılır açılmaz gösteriliyorsa
• İçeriği tamamen engelliyorsa

kullanıcı siteyi terk edebilir.

Mobil pop-up mümkün olduğunca sade ve kolay kapatılabilir olmalıdır.

Sticky Menü Nedir?​

Sticky Menü, kullanıcı sayfayı aşağı kaydırırken ekranın üstünde kalan navigasyondur.

Mobil cihazlarda kullanışlı olabilir.

Ancak ekranın büyük bölümünü kaplayacak kadar yüksek olmamalıdır.

Telefon ekranları zaten küçük olduğu için sticky alanlar dikkatli kullanılmalıdır.

Mobilde Sidebar Kullanılmalı mı?​

Masaüstünde sağ veya sol sidebar kullanılabilir.

Ancak telefon ekranında sidebar genellikle ana içeriğin altına taşınır.

Örneğin:

Ana İçerik

ardından:

Benzer Yazılar

Reklam

Kategoriler

gösterilebilir.

Mobil ekranda iki dar sütun kullanmak genellikle okunabilirliği bozar.

Tablo Kullanımı Mobilde Sorun Olur mu?​

Geniş tablolar telefon ekranına sığmayabilir.

Bu durumda:

• Yatay kaydırma
• Kart yapısına dönüştürme
• Bazı sütunları gizleme

gibi yöntemler kullanılabilir.

Tabloyu zorla küçültmek yazıların okunmasını zorlaştırabilir.

Mobilde Reklam Yerleşimi​

Reklamlar ana içeriği kapatmamalıdır.

Özellikle ekran genişliğinden büyük reklamlar yatay kaydırma oluşturabilir.

Reklam alanları responsive hazırlanmalıdır.

Ayrıca yanlışlıkla tıklamaya neden olacak şekilde butonlara çok yakın yerleştirilmemelidir.

Mobil Uyumluluk SEO'yu Etkiler mi?​

Mobil kullanım modern arama motorları açısından oldukça önemlidir.

Arama motorlarının sitenin mobil sürümünü rahat şekilde tarayabilmesi gerekir.

Ancak mobil uyum yalnızca SEO için yapılmamalıdır.

Asıl amaç mobil ziyaretçinin siteyi sorunsuz kullanmasını sağlamaktır.

Responsive Tasarım ile Ayrı Mobil Site Arasındaki Fark​

Responsive Tasarım​

Tek site ve tek URL kullanılır.

Tasarım ekran boyutuna göre değişir.

Örneğin:

siteadi.com

hem telefon hem masaüstünde kullanılır.

Ayrı Mobil Site​

Mobil kullanıcı farklı bir adrese yönlendirilebilir.

Örneğin:

m.siteadi.com

Eski sistemlerde daha yaygındı.

Günümüzde çoğu proje için responsive yapı daha basit ve yönetilebilir bir çözümdür.

Mobil Tasarım Nasıl Test Edilir?​

Tarayıcıların geliştirici araçları kullanılabilir.

Google Chrome üzerinde:

F12

açılarak mobil cihaz görünümüne geçilebilir.

Buradan farklı:

• Ekran genişlikleri
• Telefonlar
• Tabletler

test edilebilir.

Ancak gerçek telefon üzerinden de test yapmak önemlidir.

Sadece Chrome Testi Yeterli mi?​

Hayır.

Site mümkünse farklı tarayıcılarda kontrol edilmelidir.

Örneğin:

• Chrome
• Safari
• Firefox
• Edge

kullanılabilir.

Özellikle iPhone Safari bazı CSS veya mobil davranışlarda farklı sonuç gösterebilir.

Gerçek Cihaz Testi Neden Önemlidir?​

Tarayıcıdaki mobil simülasyon yararlıdır ancak gerçek cihazın birebir karşılığı değildir.

Gerçek telefonda:

• Dokunma alanları
• Mobil klavye
• Kaydırma
• Performans
• Safari davranışı

daha doğru şekilde test edilebilir.

Bu nedenle site yayına alınmadan önce gerçek Android ve iOS cihazlarda kontrol edilmesi faydalıdır.

Farklı Telefon Boyutları Test Edilmeli mi?​

Evet.

Sadece en yeni büyük telefon ekranını test etmek yeterli değildir.

Daha küçük ekranlarda:

• Başlık taşabilir
• Menü bozulabilir
• Butonlar yan yana sığmayabilir

Bu nedenle farklı ekran genişliklerinde test yapılmalıdır.

Mobil Tasarımda En Sık Yapılan Hatalar​

Sabit Genişlik Kullanmak​

Sayfa telefon ekranından taşabilir.

Çok Küçük Yazı Kullanmak​

Kullanıcı sürekli yakınlaştırmak zorunda kalır.

Butonları Birbirine Çok Yakın Yerleştirmek​

Yanlış dokunmalar artar.

Masaüstü Menüsünü Olduğu Gibi Kullanmak​

Telefon ekranında menü karmaşık hale gelir.

Çok Büyük Görseller Kullanmak​

Sayfanın açılış süresi artar.

Sadece Tek Telefon Boyutunda Test Yapmak​

Farklı ekranlarda tasarım bozulabilir.

Hover'a Bağımlı Özellik Kullanmak​

Dokunmatik cihazlarda bazı fonksiyonlar kullanılamaz.

E-Ticaret Sitelerinde Mobil Tasarım​

E-ticaret sitelerinde mobil kullanım özellikle önemlidir.

Ürün sayfasında:

• Ürün fotoğrafı
• Fiyat
• Sepete Ekle
• Stok bilgisi
• Varyasyon seçenekleri

kolay erişilebilir olmalıdır.

Sepete Ekle butonunun sayfanın çok altında veya küçük şekilde bulunması dönüşümü olumsuz etkileyebilir.

Blog Sitelerinde Mobil Tasarım​

Bloglarda temel amaç rahat okumadır.

Bu nedenle:

• Okunabilir font
• Yeterli satır aralığı
• Büyük görseller
• Sade menü
• Gereksiz sidebar öğelerinin azaltılması

önemlidir.

İçeriğin kendisi ön planda olmalıdır.

Forum Sitelerinde Mobil Tasarım​

Forumlarda telefon ekranında çok fazla bilgi aynı anda gösterilmeye çalışılırsa sayfa karmaşık hale gelebilir.

Özellikle:

• Kullanıcı avatarı
• Kullanıcı bilgileri
• Mesaj
• İmza
• Rank
• Tarih

gibi alanların mobilde doğru sıralanması gerekir.

Masaüstünde yan yana bulunan kullanıcı bilgileri telefonda mesajın üstüne taşınabilir.

Kurumsal Sitelerde Mobil Tasarım​

Kurumsal sitelerde mobil kullanıcı genellikle hızlı şekilde:

• Telefon numarası
• Hizmetler
• İletişim
• Konum
• Teklif formu

aramaktadır.

Bu nedenle önemli iletişim öğeleri kolay erişilebilir olmalıdır.

Örneğin mobilde:

Ara

veya

WhatsApp

butonu kullanılabilir.

Başlangıç Seviyesi İçin​

Mobil uyumlu site hazırlamaya yeni başlayan biri öncelikle:

• Viewport
• Yüzde genişlik
• max-width
• Media Query
• Flexbox

konularını öğrenebilir.

Basit bir sayfada masaüstü ve mobil düzen oluşturmak iyi bir başlangıçtır.

Orta Seviye İçin​

Biraz deneyim kazanıldıktan sonra:

• CSS Grid
• Responsive Images
• Mobile First
• Responsive Typography
• Mobil navigasyon

öğrenilebilir.

Bu aşamada farklı ekran genişliklerinde tasarım test edilmeye başlanmalıdır.

İleri Seviye İçin​

Daha gelişmiş mobil projelerde:

• Performans optimizasyonu
• Responsive image sistemi
• Touch interaction
• Core Web Vitals
• Accessibility
• Progressive Web App

gibi konular önem kazanabilir.

Özellikle yüksek ziyaretçili sitelerde mobil performans düzenli olarak takip edilmelidir.

Pratik Bir Mobil Tasarım Yapısı​

Basit bir kurumsal sayfa düşünüldüğünde masaüstü yapı:

1. Header
2. Menü
3. Hero alanı
4. Üç hizmet kartı
5. Hakkımızda
6. İletişim
7. Footer

şeklinde olabilir.

Mobilde ise:

1. Logo ve hamburger menü
2. Hero alanı
3. Hizmet kartları alt alta
4. Hakkımızda
5. Büyük iletişim butonu
6. Footer

şeklinde düzenlenebilir.

İçerik aynı kalır ancak yerleşim ekran genişliğine göre değiştirilir.

Sonuç​

Mobil uyumlu web tasarımı, bir web sitesinin yalnızca küçük ekrana sığdırılması değildir.

İyi bir mobil tasarımda:

• İçerik rahat okunur
• Menü kolay kullanılır
• Butonlara rahat basılır
• Görseller ekrana uyum sağlar
• Formlar kolay doldurulur
• Site hızlı açılır
• Yatay kaydırma oluşmaz

Responsive tasarım sayesinde tek bir web sitesi telefon, tablet ve masaüstünde farklı ekran boyutlarına uyum sağlayabilir.

Yeni bir web sitesi hazırlanırken mobil tasarım sonradan eklenecek bir özellik olarak değil, projenin temel parçalarından biri olarak düşünülmelidir.