Duyarlı Web Tasarımının En İyi Uygulamaları
Html5Sorumlu tasarımWeb TasarımWeb Geliştirme
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ı?
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?
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
Çeviride Edebiyatı Teşvik Etmenin En İyi Yolu Nedir?Django kullanmanın en iyi yolu - REST APIBazen, Meme En İyi Değildir (Gerçekten)2017'nin En İyi 13 Kitabı, Artı Dinler, Saatler ve Dahası!Neden Progressive Adecentralization blockchain’in en iyi umudu?