Duyarlı Web Tasarımının En İyi Uygulamaları

Bradley Nice, ClickHelp.com İçerik Yöneticisi - yazılım dokümantasyon aracı

Google, mobil web siteleri oluşturmak için tercih edilen yöntem olarak Responsive Web Tasarım'ı resmi olarak tavsiye etti. Bir web siteniz veya blogunuz varsa, mobil ve tablet dostu ayrı web siteleri tutmak yerine, duyarlı tasarıma geçmeyi düşünmenin zamanı geldi.

Responsive Web Tasarımı (RWD) kavramında yeniyseniz, bu teknikle ilgili karşılaşabileceğiniz genel sorular burada.

Web sitemi neden RWD'ye değiştirmeliyim?

Web siteniz masaüstü ekranının harika görünmesine rağmen, siteniz bir akıllı telefon veya tablette görüntülendiğinde doğru olmayabilir. Tasarımı duyarlı hale getirdikten sonra, web sitesi tüm ekranlarda iyi görünecek (ve okunabilir).

Responsive Design ile tek bir tasarım yaratabilirsiniz ve mobil cihazın ekran boyutuna göre kendini otomatik olarak uyarlar. Bu yaklaşım birçok avantaj sunar:

  • Masaüstleri ve cep telefonları için ayrı web siteleri bulundurmanız gerekmediğinden zaman ve para tasarrufu sağlar.
  • Responsive Tasarım, web sitenizin SEO'su (arama sıralaması) için iyidir, çünkü sitenizdeki her sayfa tek bir URL’ye sahip olur ve böylece Google suyu korunur. Bazı sitelerin mobil sitenize, diğerlerinin ise masaüstü sitenize bağlanmasına neden olan durumlar hakkında endişelenmenize gerek yoktur.
  • Google Analytics raporlarınız, mobil ve masaüstü kullanıcılarından elde edilen veriler konsolide edileceğinden sitenizin kullanımına ilişkin daha iyi bir resim çizecektir.
  • Aynısı, web sayfalarınızın mobil ve masaüstü sürümleri aynı URL’ye sahip olacağından sosyal paylaşım istatistikleri (Facebook Beğenileri, Tweetler, + 1’ler) için de geçerlidir.
  • Duyarlı Tasarımlar, herhangi bir sunucu tarafı bileşen içermediğinden bakımı kolaydır. Belirli bir cihazdaki görünümünü (veya düzenini) değiştirmek için sayfanın temel CSS'sini değiştirmeniz yeterlidir.

Responsive Design'a başlamak için ne bilmeliyim?

Duyarlı Tasarım saf HTML ve CSS'dir. Kullanıcı cihazının ekran boyutuna göre stilini değiştiren CSS'de kurallar oluşturursunuz.

Örneğin, bir kullanıcının ekran boyutunun 320 pikselden az olması, kenar çubuğunu göstermemesi veya ekran boyutunun 1920 pikselden büyük olması durumunda (geniş ekran masaüstü) gövdesinin yazı tipi boyutunu artıran bir kural yazabilirsiniz. 15px metin.

Belirli bir web sitesinin Duyarlı Tasarım kullanıp kullanmadığını nasıl kontrol ederim?

Bu kolay. Bu web sitesini herhangi bir masaüstü tarayıcısında açın ve tarayıcıyı yeniden boyutlandırın. Sitenin düzeni yeniden boyutlandırıldıkça değişirse, tasarım yanıt verir.

Duyarlı Tasarım yaklaşımına girersem, web sitem eski tarayıcılarla çalışır mı?

Çoğunlukla evet. RWD, IE'nin eski sürümlerinde desteklenmeyen CSS3 ortam sorguları ve HTML5'i (daha iyi anlambilim için) kullanır. Ancak, CSS3 ve HTML5'in gücünü IE6 da dahil olmak üzere eski tarayıcılara getirecek olan JavaScript tabanlı çözümler - reply.js ve örneğin modernizasyonu vardır.

Responsive Tasarım, Google AdSense gibi reklam ağlarında iyi bir performans sergiliyor mu?

Web sitenizde reklam kullanıyorsanız, geniş birimler (728 × 60 piksel büyüklüğündeki afişler gibi) 320 piksellik mobil ekrana sığmayabileceğinden, biçimleri dikkatlice seçmelisiniz. Akıllı telefon ekranlarına ve geniş ekran masaüstlerine kolayca uyduğundan standart dikdörtgen üniteleri (300 × 250 gibi) kullanmayı tercih ederim.

Binlerce mobil cihaz var. Duyarlı web sitem hangi ekran çözünürlüklerini desteklemelidir?

CSS3 Mediaqueries - 320px (iPhone manzara), 480 px (iPhone portre), 600px (Android Tablet), 768px (iPad + ~ Galaxy Tabs) ve 1024px (iPad manzara ve ) masaüstü.

Responsive Web Tasarımına nasıl başlarım? İyi bir ders var mı?

İşte başlamanıza yardımcı olacak çevrimiçi kaynaklar:

Websiteleri: Net Dergisi, Smashing Dergisi, CSS Püf Noktaları ve Web Tasarımcı Duvarı

Video Eğiticileri: YouTube, Net Tuts

Sunumlar: PowerPoint Güverte

Podcast'ler: Shop Talk, 5by5 Web Show ve Endüstri

Twitter: @RWD, @NetMag ve @SmashingMag

Duyarlı Tasarım kullanmanın dezavantajları nelerdir?

  • Web sayfanıza ekstra kilobayt, aksi takdirde gereksiz olan CSS stillerini ve JavaScript dosyalarını indirmeleri gerekecek.
  • Görüntüler. Mobil sitenizde daha yüksek çözünürlüklü görüntüler sunmak istemezsiniz ancak duyarlı tasarımda elde etmek zordur (Uyarlamalı Görüntüler ve Sencha.io gibi bir sunucu tarafı geçici çözümüne başvurmadığınız sürece).
  • Mevcut web sitenize duyarlı bir katman ekleme çabaları. Bazen mevcut sabit genişlikli web sitenizi akışkanlaştırmak yerine sıfırdan başlamak daha mantıklıdır.

Bunları da beğenebilirsin: Duyarlı Düzenler Ücretsiz EBOOK

İyi günler dilerim!

Bradley Nice,
ClickHelp.com'da Content Manager - SaaS satıcıları için en iyi çevrimiçi dokümantasyon aracı