Esnek (Responsive) Sayfa Tasarımının Önemi
Günümüzde akıllı telefon, tablet gibi mobil cihazların sayısı hızlar artmış olup, web sayfalarının mobil ziyaretçi oranı da önemli rakamlara ulaşmış bulunmaktadır.
Ancak eski yöntemlerle tasarlanan ve geniş ekranlarda güzel görünen web sayfalarının büyük çoğunluğu mobil cihazların ekranları için kullanışlı değildir. Bilgisayar ekranlarına göre hazırlanmış web sayfaları küçük ekranlarda tam görünmeyecek, linklere ve diğer nesnelere dokunmak çok zor olacaktır.
Yani günümüzde bir web sayfası yapacaksak, mutlaka mobil cihazların ekranlarına da uyumlu olmalıdır. Mobil uyumlu web sayfaları geliştirmek için birçok yol kullanılabilir. Bunlardan ilk akla gelenleri şu şekilde sayabiliriz.
-
BootStrap veya benzeri bir JS-CSS kütüphanesi kullanmak: İleriki konularımızda da bahsedilen, içerisinde hazır sınıflar ve metotlar barındıran, herkesin kullanabileceği bir JavaScript ve JQuery kütüphanesidir.
-
Farklı ekranlar için farklı ve duyarlı-responsive stiller hazırlamak: Hangi ekran genişliklerinde hangi stillerin geçerli olacağı belirlenebilir.
-
Farklı ekranlar için sitenin farklı versiyonlarını hazırlamak: Örneğin www.btdersleri.com sitesi için ayrıca m.btdersleri.com adresinde farklı tasarımlı ama aynı içerikli, birbiriyle bağlantılı subdomainler oluşturulabilir.
Günümüzde BootStrap popüler olarak kullanılmakta ve işlerimizi önemli ölçüde kolaylaştırmaktadır. (Bootstrap derslerimizi incelemek isterseniz tıklayın.)
Burada, ikinci maddede bahsettiğimiz farklı ekran boyutlarında farklı stillerin geçerli olmasını nasıl sağlarız, ondan bahsedelim.
Px Yerine % Kullanmak
Css ile html elemanlarının genişlik ve yüksekliklerini belirlerken çeşitli birimler kullanılabilmektedir. Yakın zamana kadar sadece bilgisayar ekranları düşünülerek tasarım yapılırdı ve çoğunlukla px birimi kullanılırdı.
Ama artık mümkün olduğunca az px kullanmak, onun yerine % cinsinden genişlikler belirlemek tercih ediliyor.
Örneğin bir resmin genişliği 200px olarak ayarlandığında, o resim her türlü ekranda 200 piksel yer kaplayacaktır.
Oysa geniliği 50% gibi ayarlanırsa, o an içinde bulunduğu yerin yüzde 50'sini kaplayacak demektir ve ekranın genişliğine göre kaplayacağı yer de değişecektir.
Sayfa yapını oluştururken tablo yerine mutlaka div elemanları hatta html5 etiketleri (section, article, header...) kullanıp, bunların genişliklerini de % cinsinden belirlemeliyiz.
Bu elemanların farklı ekranlarda farklı genişlik ve tasarımlarla görünmesini de sağlayınca, işlem tamamdır.
Ekran Çözünürlüğüne Göre Farklı Stiller Uygulama
@media kuralları oluşturarak bazı stillerin uygulanması için ekran genişliğinin en fazla ya da en az kaç olması gerektiğini belirleyebiliriz.
@media not|only ortamTürü and (ortamÖzelliği) {
Css özellikleri...
}
Yukarıda gösterilen yapıda ortamTürü ve ortamÖzelliği yazan yerlere gelebilecek çeşitli parametreler olmakla beraber, en çok aşağıdaki örneklere benzer biçimde kullanılırlar. İhtiyacınız durumunda diğer parametreleri internette araştırabilirsiniz.
@media only screen and (max-width: 600px){
.reklam{
display:none;
}
}
Yukarıdaki örnekte genişliği 600px'e kadar olan ekranlarda reklam class'ı uygulanan elemanların gizlenmesi sağlanmıştır.
#kutu1 {
background-color: gray;
}
@media screen and (min-width: 800px) {
#kutu1 {
background-color: white;
}
}
Yukarıdaki örnekte ise kutu1 id'li elemanın 800px'den geniş ekranlarda beyaz arkaplana, daha küçük ekranlarda ise gri arkaplana sahip olması sağlanmıştır.
Bu ve benzer şekillerde çok sayıda birbirinden farklı kural belirlenebilir. Aynı eleman için de çok sayıda kural oluşturulabilir.
Aşağıdaki örneği inceleyelim. kutuResim class'ı uygulanan 4 tane div elemanının farklı ekran boyutlarında, farklı yerleşmeleri sağlanmıştır.
Bu örneğin çalışan tam halini, Konu Örnekleri kısmında inceleyebilirsiniz. Tarayıcı penceresini daraltıp genişleterek, farklı genişliklerdeki durumları test edebilirsiniz.
.kutuResim{
display:inline-block; width: 23%;
box-shadow: 0 4px 8px 0 gray, 0 6px 20px 0 gray;
text-align: center; padding-bottom:10px;
}
@media only screen and (max-width: 800px){
.kutuResim {
width: 48%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.kutuResim {
width: 95%;
}
}
Ekran Genişliğine Göre Farklı Stil Sayfaları Oluşturma
<link rel="stylesheet" media="ortamTürü and|not|only (ortamÖzelliği)" href="stilDosyasi.css" />
Yukarıdaki gibi bir kullanım ile hangi ekran genişliklerinde hangi stil dosyasının geçerli olacağını belirleyebiliriz.
Örnek:
<link rel="stylesheet" media="screen and (min-width: 1000px)" href="stilDosyasi.css" />
* Responsive Images - Ekrana göre daralan veya genişleyen resimler için sonraki konumuzu inceleyiniz.
@media kuralı kullanarak farklı ekran boyutları için farklı stiller oluşturma, css responsive sayfa tasarımı, her ekran genişline uygun sayfa tasarımı yapma, web sayfasının her türlü ekranda düzgün görünmesi
KONU İLE İLGİLİ ÖRNEKLER
|
Ekran genişliğine göre farklı genişlikte görünüp farklı şekillerde yerleşen div elemanları oluşturma
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak kodları görebilir, düzenleyebilir ve sonucu test edebilirsiniz.
21118 kez okundu.