Duyarlı Web Tasarımı İçin Eksiksiz Başlangıç ​​Kılavuzu

Duyarlı web tasarımı kılavuzumuzda, mobil uyumlu yaklaşımın en önemli noktalarını tartışacağız ve sitenizi tamamen duyarlı hale getirmenin temel sürecinde size eşlik edeceğiz.

İnternete erişimi olan cep telefonlarının ve diğer taşınabilir cihazların sayısının hızla artmasıyla, duyarlı bir web sitesi oluşturmak ve çalıştırmak bir zorunluluk haline geldi.

Duyarlı web tasarımı nedir?

Responsive web tasarımı, web sayfalarının olası tüm boyut, cihaz ve ekran çözünürlüklerinde mükemmel bir kullanıcı deneyimi sağlayacak şekilde tasarlanmasıdır. Bu tasarım stratejisi, sitenizin tamamında üstün kaliteli görünümü ve hissi adına herhangi bir sitenin kendisini herhangi bir hedef mobil veya cihaz çözünürlüğüne göre otomatik olarak ayarlamasına izin verecektir.

Duyarlı web tasarımına yönelik bu kılavuzun arkasındaki ilke, herhangi bir modern ve profesyonel web sitesinin, herhangi bir ekran boyutuna ve çözünürlüğe uyacak şekilde belirli değişikliklere uğrayacak kadar esnek olması gerektiğidir. Sonuç olarak, bir web sitesini farklı ekranlarda doğru ve doğru bir şekilde görüntülemek için mükemmel bir çözümdür.

Neden önemli?

Akıllı telefonunuzun ekranında gördüğünüz piksel mükemmelliğindeki görüntüleri, katlanabilir menüleri veya yeniden düzenlenmiş renk yapılarını hatırlıyor musunuz? Bunların hepsi, modern ve çok talep edilen mobil uyumlu veya duyarlı web tasarımının örnekleridir.

Ancak size emsalsiz bir mobil kullanıcı deneyimi yaşatmak için ellerinden gelenin en iyisini yapan sitenin yazarlarını övmediğinizi itiraf edebilirsiniz, çünkü sitenin mobil versiyonunun kusursuz performansının keyfini çıkarmanız oldukça doğaldır.

Ancak, kullanım açısından uygun ve akıllı telefonunuzdan veya tabletinizden erişildiğinde tamamen okunaklı değilse, kesinlikle rahatsız hissedeceksiniz ve muhtemelen birkaç saniye sonra bu web sitesini terk edeceksiniz.

Aynı şey kendi kitleniz için de geçerli. Web ziyaretçilerinizin hiçbiri, sitenizin mobil sürümünün küçük bir kusurunu veya eşitsizliğini bile tolere etmeyecektir. Bu nedenle, web sitenizi mobil optimize hale getirmek ve sorunsuz bir şekilde çalışmasını sağlamak. Müşterilerinizi web sitenizde tutmaya ve aynı anda daha fazlasını davet etmeye yönelik en iyi stratejilerden biridir.

Ancak, sitenizin duyarlı tasarımından elde edebileceğiniz tek avantaj bu değildir. Çağdaş web siteleri için Google'ın güzel tasarım çözümlerinden biridir. Bu, duyarlı sitelerin bu harika işlevsellikten yoksun olanlardan daha yüksek sıralarda yer alacağı anlamına gelir.

Duyarlı web tasarımının avantajlarını sayarken, bunun sadece farklı cihazlarda düzenlendiğinde iyi çalışan bir web sitesi oluşturmakla ilgili olmadığını da unutmamalısınız. Aynı zamanda, herhangi bir bozulma olmadan bir web sitesinin gerçek yapısını oluşturacak kadar esnek ve uyarlanabilir bir web sitesi oluşturmakla da ilgilidir.

Duyarlı web tasarımı kılavuzumuzda mobil uyumluluğun önemli noktalarını vurguladığımıza göre, şimdi bunun teknik kısmına geçelim, böylece duyarlı bir tasarımı anlamak sizin için daha az göz korkutucu bir görev olacaktır.

Şimdi responsive web tasarımın ana bileşenlerinin neler olduğunu görelim. Üç tane var.

1. Esnek düzenler

Ekran boyutuna ve boyutlarına göre yeniden düzenlenecek ve yeniden boyutlandırılacak esnek bir ızgaraya sahip bir site oluşturma.

Bu, duyarlı bir düzen oluşturmaya yönelik ilk adımdır. Böyle bir düzen ile genişlik veya yükseklikler sabit değildir. Her şey, şu veya bu cihaz gereksinimlerine uyması için orantılı yüzdelerde dağıtılır. Örneğin, tarayıcı büyütülürse, düzeniniz buna göre yanıt verecek ve gerekli genişliğe yayılacaktır.

Herhangi bir sabit düzeni ızgara düzenine dönüştürmek istiyorsanız, hedefi bağlama göre bölmek için matematik becerilerinizi kullanmanız veya alternatif olarak duyarlı tasarım hesaplayıcı kullanmanız gerekir.

2. Esnek Görüntüler

Her şeyden önce, web sitenize entegre edilen diğer medya dosyalarının yanı sıra görüntülerin de cihaz veya çözünürlüğü değiştikçe buna göre yeniden boyutlandırılması gerekir.

Web sitenizde esnek veya duyarlı medya dosyalarına sahip olmak, dikkat edilmesi gereken bir sonraki önemli noktadır. Örneğin, akıcı bir düzeniniz varsa ve sitenizin resimleri duyarlı değilse, gelecekte bazı tutarsızlıklar yaşayacaksınız.

Görüntüleri duyarlı hale getirmek için kullanabileceğiniz üretken yöntemlerden biri de Uyarlanabilir Görüntülerdir. Bir resme %100 genişlik vermek için aşağıdaki CSS'yi kullanın, böylece tarayıcı yeniden boyutlandırıldığında uyarlanabilir:

resim {
 maksimum genişlik: %100;
 genişlik: %100;
}

3. Medya Sorguları

Esnek medya dosyalarıyla birlikte esnek bir düzenimiz olur olmaz, medya sorgularının yardımıyla hepsini birbirine bağlamanın zamanı geldi. Bunlar, belirli bir cihaz ekran boyutu tanımlandığında web tarayıcısının hangi web bölümlerinin yükleneceğini sağlayan harika CSS ayarlarıdır.

Temel olarak telefon, masaüstü ve tablet ekran çözünürlüklerine ait üç medya sorgusu bulunmaktadır. Bu ekran çözünürlüklerine uyması için en yaygın olarak kullanılan ekran genişliği ayarları 320px, 600px, 768px ve 1280px'dir.

İşte size çok yardımcı olacak pratik CSS medya sorgusu kesme noktalarından bazıları:

/* Özel, iPhone Retina */ 
@media yalnızca ekran ve (min-width : 320px) {
/* özel stiller */
}
/* Ekstra Küçük Cihazlar, Telefonlar */ 
@media yalnızca ekran ve (min-width : 480px) {
/* özel stiller */
}
/* Küçük Cihazlar, Tabletler */
@media yalnızca ekran ve (min-width: 768px) {
/* özel stiller */
}
/* Orta Boy Cihazlar, Masaüstü Bilgisayarlar */
@media yalnızca ekran ve (min-width: 992px) {
/* özel stiller */
}
/* Büyük Cihazlar, Geniş Ekranlar */
@media only screen ve (min-width : 1200px) {
/* özel stiller */
}

Ek olarak, medya sorguları, kullanıcılarının yukarıdan aşağıya sitenizin keyfini çıkarabilmeleri için her belirli cihaz için içerik eklemekten, taşımaktan veya gizlemekten sorumludur. Örneğin, sitenizde belirli bir düğmeniz var ve bunun akıllı telefon kullanıcılarınız için gizlenmesini istiyorsunuz. Yalnızca akıllı telefon sahiplerinden gizlemek için aşağıdaki CSS'yi kullanabilirsiniz:

/* Akıllı telefonlar (dikey ve yatay) ----------- */
@media only screen ve (min-device-width : 320px) ve (max-device-width : 480px) {
/* Stiller */
.button {ekran:yok}
}