Duyarlı web tasarımı, girdiği kabın şeklini alan su gibi davranan tek bir web sitesi kurma sanatıdır. Bir telefon, bir tablet, bir dizüstü bilgisayar, duvar boyutunda bir monitör: aynı sayfa, sığmak için sessizce kendini yeniden düzenler.
Teknik bir ayrıntı gibi görünür ama aslında bir nezaket meselesidir. Ziyaretçi, sizin seçmediğiniz bir cihazla, göremediğiniz bir yerden gelir. Siteniz ya onlara yer açar ya da onları zorlar. Bu rehber yer açmakla ilgili.
İçindekiler
Duyarlı web tasarımı gerçekte ne demek?
Fikri söylemek kolay, iyi yapmak zordur. Her cihaz için ayrı bir site kurmak yerine, düzeni, görselleri ve metni mevcut alana uyum sağlayan tek bir site kurarsınız. İçerik aynı kalır; yerleşim değişir.
Tarihi seviyorsanız, duyarlı web tasarımına genel bakış, ekranlar çoğaldıkça yaklaşımın nasıl büyüdüğünü izler. Bizim için önemli olan arkasındaki ilkedir: cihaz için değil, insan için tasarlayın.
Kumaşı, giyecek kişiye küçülmesini söylemek yerine ona göre kesen bir terzi düşünün. Duyarlı web tasarımının ruhu budur: iş bir kez, özenle yapılır; böylece her ziyaretçi giysinin kendisi için dikildiğini hisseder.
Tek site, her ekran
Bir şirketin masaüstü bir site ile sadeleştirilmiş bir mobil ikiz tuttuğu bir dönem vardı. Her güncelleme iki kez yapılmak zorundaydı ve iki sürüm küstüğü akrabalar gibi yavaş yavaş birbirinden uzaklaşıyordu. Ziyaretçiler ellerinde ne tuttuklarına göre farklı bilgilerle karşılaşıyordu.
Uyum sağlayan tek bir site bu kavgayı bitirir. Bir kez yazarsınız, bir kez bakımını yaparsınız ve her ziyaretçi aynı gerçeği kendine uygun bir biçimde görür. Küçük bir ekip için bu zaman ve dikkat tasarrufu her zekice numaradan daha değerlidir.
Arama motorları ve bağlantılarınızı paylaşan insanlar için de sessiz bir fayda vardır. Her yerde çalışan tek bir adres anlaşılması, hatırlanması ve güvenilmesi daha kolaydır. Duyarlı web tasarımı itibarınızı kopyalara dağıtmak yerine tek bir yerde tutar.
İyi bir düzen ziyaretçiden uyum sağlamasını istemez. Ziyaretçiye uyum sağlar ve bunu o kadar nazikçe yapar ki kimse fark etmez.
Duyarlı web tasarımının üç sütunu
Yüzeyin altında duyarlı web tasarımı birlikte çalışan üç fikre dayanır. Onları anlarsanız her tasarım kararını yargılamak kolaylaşır.
- Akışkan ızgaralar: genişlikler sabit pikseller değil, ekranın oranlarıdır.
- Esnek görseller ve medya: sayfayı bozmadan kapsayıcılarının içinde küçülür ve büyür.
- Kesme noktaları: içeriğin kendisi istediği için düzenin yeniden dizildiği anlar.
Bu fikirlerin hiçbiri tek başına yeni değil. Zanaat, onların işbirliği yapmasına izin vermekte yatar; öyle ki birindeki bir değişiklik diğerlerini asla bozmasın. Duyarlı web tasarımında deneyim, sabır ve iyi bir göz ekmeğini burada kazanır.
Akışkan ızgaralar: bir nehir olarak sayfa
Sabit bir düzen tuğla bir duvardır. Akışkan ızgara ise akışı dondurmadan şekillendiren bir nehir yatağıdır. Sütunlar ekranın izin verdiği kadar genişler ve daralır, göz de her zaman düzenli bir yol bulur.
İçeriği izleyen kesme noktaları
Yeni başlayanlar çoğunlukla ünlü cihazlar için kesme noktaları belirler. Daha bilge bir alışkanlık, düzeni beceriksiz görünene kadar esnetmek ve değişikliği tam orada eklemektir. Karar vermesi gereken içeriktir, gelecek yıl eskiyecek bir ürün kataloğu değil.
Duyarlı web tasarımı en küçük ekranla başlar
Genellikle telefonla başlarız. Bu bir moda değil, disiplindir. Küçük ekran gerçekten neyin önemli olduğunu sormaya zorlar ve yanıt daha büyük düzenleri de şekillendirir.
Önce dar sürümü tasarladığınızda başlık kısa, eylem net ve gezinme dürüst olmak zorundadır. Sonra ekran büyüdükçe nefes alanı ve destekleyici ayrıntı eklersiniz. Bu sırayla yapılan duyarlı web tasarımı her yerde sakin hissettirir, çünkü başından beri aşırı yüklenmemiştir.
Su kaynarken telefonundan hediye sipariş eden meşgul bir anneyi düşünün. Doksan saniyesi ve boş bir başparmağı var. Duyarlı web tasarımıyla kurulmuş bir sayfa işini bitirmesine izin verir; bir masa için kurulmuş sayfa ise çaydanlık öterken onu kaybeder.
Dokunma, başparmaklar ve parmak ucunun biçimi
Fare bir iğnedir; başparmak bir boya fırçasıdır. Pek çok ziyaretçi asla üzerine gelmez, asla sağ tıklamaz ve asla bir ipucu balonu görmez. Başka bir şey yaparken tek elle dokunur, kaydırır ve gezinir.
Bu ayrıntıları değiştirir. Düğmeler cömert bir boyuta ve çevrelerinde boşluğa ihtiyaç duyar. Menülere akrobasi yapmadan ulaşılabilmeli. Formlar az şey istemeli ve her alan için doğru klavyeyi sunmalı. Dokunmaya saygı, duyarlı web tasarımının gerçekten insani olduğu yerdir.
İçerik de aynı kuralı izler. Masaüstünde zarifçe okunan uzun bir paragraf telefonda bir duvara dönüşebilir; bu yüzden kısa bloklar yazın ve başlıkların gözü yönlendirmesine izin verin. Listeler, duraklamalar ve yalın sözcükler okuru süsün asla götüremeyeceği kadar uzağa taşır.
Görseller de bir düşünceyi hak eder. Bir fotoğraf dar bir çerçeve için farklı kırpılabilir ki konusu görünür kalsın; süsleyici ayrıntılar da yer daraldığında sessizce kaybolabilir. Önemli hiçbir şey kaybolmaz; yalnızca fazlalık kenara konur.
Performans, duyarlı web tasarımının bir parçasıdır
Güzelce yeniden düzenlenen ama görünmesi on saniye süren bir düzen ilk sınavı geçememiştir. Telefonlar çoğu zaman masanızdaki makineden daha zayıf bağlantılar ve daha küçük işlemcilerle yolculuk eder; bu yüzden her gereksiz bayt ziyaretçinin üzerinde bir yük olur.
Görselleri ekrana uyan boyutlarda sunun. Yalnızca bir sayfanın gerçekten ihtiyaç duyduğu betikleri yükleyin. Yazı tiplerini ölçülü tutun. Hız, duyarlı web tasarımından ayrı bir bölüm değildir; aynı sözdür: siteniz insanlarla bulundukları yerde buluşacak.
Bir mağaza kuruyorsanız, bu iki kat önemlidir, çünkü sabır ve ödeme uzun süre birlikte yaşamaz. e-ticaret web sitesi geliştirme yazımız hız ile güvenin ödeme sayfasında nasıl buluştuğunu inceliyor.
Gezinme de aynı özeni hak eder. Geniş bir ekrana yayılan zengin bir menü, önemli hedefler tek dokunuş uzakta kaldığı sürece dar bir ekranda yalın ve dürüst bir düğmeye katlanabilir. Her şeyi zekice simgelerin ardına saklamak duyarlı web tasarımı değildir; daha küçük boyutta karışıklıktır.
Yazı, renk ve okunabilir sayfaların nezaketi
Metin çoğu sitenin gövdesidir ve şefkati hak eder. Çok uzun satırlar masaüstünde gözü yorar; çok küçük yazı telefonda gözü yenik düşürür. Rahat boyutları, sakin satır uzunluklarını ve paragraflar arasında cömert aralığı hedefleyin.
Renk, parlak güneş ışığında ve karanlık bir odada kontrastını korumalıdır. Görseller özenle seçilip kırpılmalıdır, çünkü geniş bir fotoğraf dar bir ekranda konusunu kaybedebilir. Burada grafik tasarımcı ile web tasarımcı tek bir bütün olarak çalışmalıdır; web hizmetleri ve tasarım ekiplerimizin aynı masada oturmasının nedeni budur. Görselleri şekillendiren yeni araçlar bile grafik tasarımda yapay zekâ yazımızda tartıştığımız gibi düşünceli bir bakışı hak eder.
Gerçek cihazlarda test etmek ve gerçek insanlardan öğrenmek
Yeniden boyutlandırılmış bir tarayıcı penceresi yararlı bir eskizdir, hüküm değil. Gerçek telefonlarda çentikler, yuvarlak köşeler, yansıma ve kalın parmaklar vardır. Hedef kitlenizin gerçekten sahip olduğu cihazlarda, gerçekten oturdukları odalarda test edin.
Sonra dinleyin. Birinin siteyi kullanmasını ona yardım etmeden izleyin. Tereddüt ettikleri yerde tasarımın yanıtlaması gereken bir soru vardır. İlk sitesini açan bir işletme için küçük işletmeler için web sitesi tasarımı rehberimiz bu testi net bir planla nasıl eşleştireceğinizi gösteriyor.
Sakar anları da test edin: yan çevrilmiş bir telefon, yorgun gözler için yakınlaştırılmış bir tarayıcı, asansörde zayıf bir sinyal. İyi duyarlı web tasarımı bunları dramasız atlatır, çünkü kırılmak için değil bükülmek için kurulmuştur.
İlerledikçe not alın. İlk gün kaydettiğiniz küçük sıkıntılar, ziyaretçilerin yüzüncü günde teşekkür edeceği iyileştirmelerdir; sitenin neden bu kadar kolay hissettirdiğini hiç bilmeseler bile.
Lansmandan önce kısa bir kontrol listesi
Her sayfa yakınlaştırmadan okunabiliyor mu? Her düğmeye hatasız dokunulabiliyor mu? Sayfa mütevazı bir bağlantıda hızlı görünüyor mu? Yüklenirken hiçbir şey sıçramıyor mu? Dört kez evet diyebiliyorsanız, duyarlı web tasarımınız kamuyla buluşmaya hazırdır.
Duyarlı web tasarımı üzerine son sözler
Duyarlı web tasarımı sonradan eklenen bir özellik değildir. İlk eskizden itibaren bir düşünme biçimidir: insanlar sayısız şekil ve ruh halinde gelir ve bir web sitesi her birini nazikçe karşılamalıdır.
Media Five Stars olarak Suriye’deki başlangıcımızdan Arap dünyası, Avrupa ve ABD’deki projelere uzanan yirmi yılı aşkın ekip deneyimini bu zanaata getiriyoruz. Her proje sabit bir takvimle resmî bir sözleşme altında yürür ve fiyatlarımız ucuz değil, rekabetçi ve adildir. Her ekranı ve her ziyaretçiyi karşılayan duyarlı web tasarımı istiyorsanız, bize ulaşın ve başlayalım.
