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.
