Kelime olarak responsive; duyarlı, uyumlu ve esnek gibi anlamları karşılamaktadır.
Responsive (duyarlı - uyumlu) web sayfası nedir?
Kelime olarak responsive; duyarlı, uyumlu ve esnek gibi anlamları karşılamaktadır. Peki bu kelime bir web sayfası için kullanıldığında neyi ifade eder? Hemen söyleyeyim; bir web sayfasını ziyaret ettiğinizde hangi cihazı kullanıyorsanız, (bilgisayar, tablet veya bir telefon gibi.) web sayfasının o cihazın ekran çözünürlüğüne uyum sağlayarak görünüm sunmasıdır diyebiliriz. Responsive tasarımlı sayfalar, hayatımıza tablet ve mobil cihazların girmesiyle birlikte önem kazanmaya başladı. Mobilden web sayfalarının ziyaret oranı 4/1'den daha yüksek ve muhtemelen kısa süre içerisinde bu oranın da üzerine çıkacaktır. Sayfanızın responsive özellikte olması arama motorları için de oldukça önemli. Ayrıca daha okunaklı ve anlaşılır bir site ziyaretçilerinizin sitenizde daha fazla zaman geçirmesini ve sitenizde gezinmesini sağlayacaktır, buda reklam gelirlerinizin artması ve arama motoru sıralamanızın yükselmesi demek. Bir web sayfasını duyarlı hale getirirken önemsemeniz gereken bazı noktalar var. Bu noktaları bir sıralamaya koyacak olursak elbetteki ilk adım sayfanızdaki fontları ve imajları ziyaretçinin cihazına göre ölçeklendirmeniz olacaktır ki ziyaretçi ekranda zoom yapmadan kolayca içeriklerinizi görüntüleyebilsin. Ayrıca görüntülenmesi o kadar da mühim olmayan elementleri gizleyebilirsiniz, sayfanızın mobil sürümü ne kadar yalın olursa o kadar iyi olur. Sayfa navigasyonunu yani menüyü dokunmatik ve üstten açılır bir şekilde hazırlamanız kullanımı kolaylaştıracak ikinci adım olabilir. Üçüncü adım olarak da daha fazla paylaşım daha fazla ziyaretçi mantığıyla mobil cihazların hemen hemen hepsinde bulunan popüler mesajlaşma ve sosyal medya uygulamaları (whatsapp, twitter, facebook gibi.) için paylaşım butonu ekleyebilirsiniz. Şimdi CSS kullanarak sayfamızı responsive hale nasıl getiririz buna değinelim.
Web sayfasını CSS kullanarak responsive hale getirmek
Sayfaları hangi cihazlara uygun hale getirmek istiyorsak o cihazların ekran boyutlarını bilmemiz gerekmekte. Genelde en çok kullanılan tablet ve telefon ekran çözünürlükleri aşağıdaki gibidir.| Tablet | 960px |
|---|---|
| Yatay Telefon | 480px ve 768px |
| Dikey Telefon | 479px ve Aşağısı |
<meta name="viewport" content="width=device-width, initial-scale=1.0">kodlarını eklememiz gerekmekte. Daha sonra css kodlarını ekran boyutlarına göre sıralayıp nasıl kullanıldığına dair bir örnek gösterelim.
@media only screen
and (max-width: 960px) {
/* CSS kodları buraya gelecek. */
}
@media only screen
and (min-width: 480px)
and (max-width: 768px) {
/* CSS kodları buraya gelecek. */
}
@media only screen
and (max-width: 479px) {
/* CSS kodları buraya gelecek. */
}
CSS kodlarımızı bu şekilde düzenleyerek çeşitli boyutlara göre sayfamızda değişiklikler yapabiliriz. Hemen bir örnek üzerinde görerek pekiştirelim. Yukarıda da dediğimiz gibi mobil sayfamızı yalınlaştırmak adına herhangi bir ögeyi mesela class adı tahacetiner olan bir div'i telefonlar için kaldıralım.
@media only screen
and (max-width: 479px) {
/* CSS kodları buraya gelecek. */
.tahacetiner{display:none;}
}
CSS kodunu bu şekilde düzenlediğimiz için artık web sayfamız bir telefonla ziyaret edildiğinde class adı tahacetiner olan div görüntülenmeyecektir.