Bu yazımda Responsive Web Tasarım Nedir? Responsive web tasarım yapabilmek için neleri bilmemiz gerekiyor? gibi sorulara cevap bulacağız.
RESPONSİVE WEB TASARIM NEDİR?
Eskiden bir web sayfası tasarımı yaparken bilgisayardaki görünümüne göre yapardık. Çünkü kullanıcıların ve ziyaretçilerin çok büyük bir kısmı web sayfalarına bilgisayardan ulaşım sağlarlardı. Bu sayfaların tablet veya telefonda nasıl göründüğü ile çok ilgilenmezdik.
Dolayısıyla bu sayfalara telefon veya tabletten giriş yapan kullanıcılar çok zorlanırlardı. Menüler, yazılar, resimler, butonlar vb.. herşey çok küçük göründüğü için zoom yapmak zorunda kalınırdı. O imkan da yoksa kullanmak çok daha zor bir hal alabiliyordu.
Haliyle bu durum çok istenilen bir durum değildir.
İşte responsive web tasarım dediğimiz kavram tam da burada devreye giriyor. Yani yapılan bir web tasarımının bilgisayar, tablet, telefon veya farklı ekran boyutlarındaki cihazlara uygun hale getirilmesi diyebiliriz.
Örneğin bilgisayarda kullanılan yazı boyutu 18pt iken, tablette 16pt telefonda da 14pt yapılabilir.
Yada tasarımda kullandığımız resimleri düşünelim. Ekran genişliği küçüldükçe resmin boyutunun da küçülmesi sağlanabilir. Böylece tasarımlarımız her cihaz ve ekran boyutuna uyumlu hale gelmiş olur.
Özellikle günümüzde artık responsive olmayan tasarımlar çok tercih edilmiyor. Çünkü ziyaretçilerimizin büyük bir kısmı tablet veya telefondan web sayfalarımızı ziyaret ediyorlar.
Peki, Responsive web tasarım yapabilmek için neleri bilmemiz gerekiyor?
► Html
► Css
Evet, sadece Html ve Css bilgilerimizle responsive web tasarımlar yapabiliriz.
Örneğin bu site responsive bir tasarıma sahip. Yani bilgisayar, tablet veya telefondan girdiğinizde içerikler cihazınızın ekran boyutuna göre şekil alacaktır.
Bunu uygulamalı olarak göstermek istiyorum. Şimdi sayfayı açmış olduğum tarayıcının boyutunu yavaş yavaş küçülteceğim. Boyut değiştikçe içeriklerin nasıl yer değiştirip yerleştiğine dikkat edin.
Gördüğünüz gibi ekran genişliğine göre içeriklerin konumuda değişiyor. Böylece siteye hangi cihazdan giriş yapılırsa ona uygun bir görünüm elde edilmiş oluyor.
Responsive web tasarım yapmak için Html ve Css ile ilgili eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE HTML DERSLERİ ve A’DAN Z’YE CSS DERSLERİ yazılarımı inceleyebilirsiniz.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.