HTML Responsive Nasıl Yapılır?
Bazı sitelerin mobil, tablet gibi cihazlardan girildiği zaman uyumsuz olduğu ya da masaüstünde ekranı küçülttüğünüz vakit uyum sağlamadığı ve yazıların vs. uyum sağlamadığını görürüz. Bunun sebebi responsive tasarımın doğru bir şekilde yapılmamasıdır. HTML Responsive sayesinde siteler mobil, tablet, masaüstü tüm cihazlarda ekran boyutu fark etmeksizin uyumlu çalışacaktır. Bu sayede siteler arama motorlarında daha üst sıralarda yer alacaktır.
- Bunun için HTML dosyasını açıp birtakım düzenlemeler yapmak gerekecektir. HTML editör olarak ne kullandığınızın herhangi bir önemi bulunmamaktadır. Buna girerek container kısmını bularak bu kısmın altındaki width değerini en az 96% olarak ayarlamalısınız. Yine width'in altındaki max-width kısmını 1200px olarak ayarlayacaksınız.
- İçerik tarafı için content kısmını bulun ve width kısmını 65% olarak ayarlayın. Content kısmının altında bulunan sidebar bölümündeki width kısmını da %32 olarak ayarlayın. Bu sayede sayfa küçüldükçe içerik de küçülecek ve daha etkili ve düzenli bir görünüme kavuşmuş olacaktır. Bu zamana kadar anlattığımız işlemleri default.css kısmında halledebilirsiniz.
- İçeriklerin bazı web sitelerinin mobil versiyonunda alt alta düzenli bir şekilde görüldüğünü görmüşsünüzdür. Bunun ayarı da oldukça basittir. index.html kısmına girin ve meta name description bölümünün altına <meta name="viewport" content="width=device-width, initial-scale=1.0" /> yazın. Bu işlemden sonra default.css'e gelerek @media screen and (max-widht:768px) yazın. Bunu yazdıktan sonra content width %100, sidebar widht %100, box1, box2 ve box3'ü de %100 şeklinde ayarlamanız durumunda tablet ve telefonlarda web sitesine girildiği vakit yazılar alt alta olacaktır.
Görüldüğü gibi siteyi kullanışlı hale getirmek bu kadar kolay olmaktadır. Ayarların birçoğu sitenin başlangıcında piksel şeklindedir fakat daha net çözümler almak için önerimiz yüzde şeklinde çalışmanız olacaktır. HTML responsive'nin birçok avantajı bulunmaktadır. Bu sayede siteyi ziyaret edenler tek bir cihazdan girme durumunda kalmayacaklardır. Böyle bir durum olması durumunda ziyaretçiler de siteyi ziyaret etmekten sıkılacak ve sitenin tanınırlığı azalacaktır. Bu sebeple her site sahibi zor gibi gözüken fakat gayet basit olan HTML Responsive işlemini yaparak her cihaz ve her ekran boyutuna uygun siteler tasarlamalıdır.