Responsive kelime anlamı olarak duyarlı, esnek anlamına gelmektedir. Responsive tasarım sitemizde bulunan yazı, resim gibi elemanların cihaza göre boyutlandırılmasını sağlamaktadır.
Responsive bir siteniz olamadığında veya bir mobil siteniz yoksa insanlar sitenizin içeriğini okuyabilmek için zoom yapmaları gerekmektedir. Ayrıca gitmek istedikleri sayfanın linkine erişim sağlayamayacaklardır. Bu, kullanıcı deneyimi açısından oldukça kötü bir sonuçtur. Böyle bir durumda ziyaretçilerinizi pekte sitenizde tutamayacağınızı belirtmekte fayda var. Ancak responsive sitelerde cihazlara göre değişen menü ve içerik boyutlarından dolayı gitmek istedikleri sayfaya kolayca erişim sağlayabilecekleri gibi zoom yapmadan da yazı ve görsellerinizi rahatlıkla görebileceklerdir.
Önceki zamanla da bildiğiniz üzere m.alanadi.com tarzında siteler vardı. Bunun sebebi responsive tanımının daha duyulmamasından kaynaklıydı. Ancak artık m.alanadi.com sub domainleri yerine tek bir domain üzerinden hem mobil hem de desktop cihazlara uygun bir sitenizin olması mümkün. Arama motorlarınca da responsive siteler desteklenmektedir.
Mobilden site ziyaretleri dünya genelinde gün geçtikçe artmaktadır. Bu sebeple sitenizin yalnızca desktopa uygun değil mobil ve tabletlerin de baz alınarak tasarlanması sizlerin faydasına olacaktır.
Responsive Site Nasıl Yapılır?
HTML etiketlerinden biri olan <head></head> etikleri arasına öncelikle aşağıdaki kodu eklemeniz gerekmektedir.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
Sonrasında oluşturmuş olduğunuz css dosyanızda tercihen en alt kısmına aşağıdaki media kodunu ekleyerek mobil css kodlarınızı aşağıdaki süslü parantezlerinin arasına yazmanız yeterli olacaktır.
768 yerine talep etmiş olduğunuz çözünürlük değerini yazarak media kodlarınızı çoğaltabilirsiniz.
@media only screen and (max-width: 768px) { … }
- Tabletlerin en geniş çözünürlüğü 960px’dir.
- Yatay tutulan telefonların en geniş çözünürlüğü 768px’dir.
- Dikey tutulan telefon çözünürlüğü 479px’dir.
Responsive Faydaları
Kolay Kullanım
En önemli faydalarından birisi kullanım kolaylığıdır. Kullanıcılar birkaç parmak hareketiyle sitenin tamamına erişim sağlayabilirler.
Kolay Bakım
Her çözünürlüğe ait tasarım oluşturmak yerine responsive tasarım yaparak tek site üzerinden tüm düzenlemeleri sağlayabilirsiniz. Ayrıca editörlük zahmetinden kurtulmanıza olanak sağlar. Farklı siteleriniz olduğunda bir içeriği tüm siteler için eklemeniz gerekir. Ancak responsive tasarım ile tek bir içerik eklemeyle bu sorunu ortadan kaldırabilirsiniz.
SEO
Seo için oldukça önemli olan responsive tasarım arama motorlarının istediği kriterlere uyduğunuzdan dolayı arama motorlarında oldukça hızlı bulunmanızı sağlayacaktır.
Düşük Maliyet
Responsive kullanmadığınız taktirde birden fazla site oluşturacağınızdan dolayı daha yüksek bir maliyete sebep olacaktır. Ancak responsive ile maliyet sorununu ortadan kaldırmış olacaksınız. Çünkü domain ve hosting hizmetlerine ek ücret vermenize gerek kalmayacaktır.
Bu alanlarda sizlere yardımcı olmaktan keyif duyarız. Detaylar için Kurumsal Web Tasarım
Hoş çakalın,
Weeb Tasarım Blog Ekibi
