Bir web sayfasının olmazsa olmaz özelliği Responsive Tasarım (Mobil Uyumlu) tasarımdır. Peki, responsive tasarım nedir? Hep duyuyoruz ama aslında ne olduğu tam olarak biliyor muyuz?
Responsive Tasarım (Mobil Uyumlu) Nedir?
Mobil cihazlar iyi bir internet deneyimi yaşamak adına sitelerin ekrana göre ölçü alması durumudur. Yani tek başına bunu cihazlar tabii ki yapamıyor. Siteniz tasarlanırken belirli ölçülere özel hangi nesnenin görünüp görünmemesini veya yazıların fontlarını dahi farklı gösterebileceğimiz bir yapıdan bahsediyoruz. Bir mobil web sitesi size hız, estetik, kalite, imaj ve performans sunar.
Bir web sitesi yaptırdığınızda; bu site tablet, cep telefonu, notebook ve masaüstü bilgisayarlara özel şekil almalıdır. Bu tasarım bütün web sitelerine büyük bir kolaylık sağlıyor.
Responsive Tasarım (Mobil Uyumlu) Nerelerde Kullanılır?
Responsive tasarım sayesinde masaüstü, tablet ve akıllı telefonlarda platformdan bağımsız birbirinden tamamen farklı tasarımlar yapılabilmektedir. Siteye mobil cihazlardan girildiğinde tasarım farklılaşır, menüler telefonlara uyum sağlayacak şekilde küçülerek üzerine dokunulduğunda açılacak hale gelir, fontlar ekranı büyütmeden okunacak hale gelirken, resimler de ekran çözünürlüğüne göre esneyerek uygun şekilde görüntülenir. Gerekirse daha büyük ekranda görünen bir nesne olarak modüller gizlenebilir.
Örneğin; site yaptıracak herhangi biri sadece telefon üzerinde turuncu renkli başvur butonu istemiş olsun. Ama tablet kullanıcılarına ise mavi renkli görünmesini istiyor. Masaüstü versiyonda ise bu butonu kaldırmak ve üst menüye taşımak istiyor. Bunların hepsi responsive tasarımda mümkün.
Mobil Web Sitesi İçin Cihaz Ekran Ölçüleri
Masaüstü, Notebook için: 1024px ve üzeri
Tabletler için: 768px – 1023px
Akıllı telefonların yatay tasarımları ve bazı tabletler için: 480px – 767px
Akıllı telefonlar için: 479px ve altı
Bu çözünürlüklere göre css dosyasında örneğin 480px ve daha düşük ekranlar için;
@media screen and (max-width: 480px)
Kodu yazılarak css dosyası bu çözünürlük için düzenlenir.
Ayrıca sayfanın responsive olması için
<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>
kodunun mutlaka head tagları arasında olmalı.
Sizin de bir mobil web siteniz olsun istiyorsanız hemen bize ulaşabilirsiniz.