займкредиты онлайн

RESPONSİVE WEB TASARIM NEDİR ?

Responsive web tasarım, farklı ekran boyutlarına göre farklı görünüm alabilen tasarımlar için kullanılır. Yani tüm cihazlar (Akıllı telefonlar, tabletler, masaüstü ve dizüstü) için uyumlu şeklinde kısaca özetlenebilir. Bu kavram internete girmemizi sağlayan araçların çeşitliliğinin artmasıyla ortaya çıkmıştır. Neden responsive (uyumlu) tasarım diyecek olursak;

Responsive Web TasarımNeden responsive (uyumlu) tasarım: Web siteniz masaüstü veya dizüstü bilgisayar üzerinde gayet sorunsuz görünebilir ancak son dönemde kullanımı oldukça yaygınlaşan cep telefonu veya tabletten sitenize girildiği zaman da ziyaretçinizi memnun edecek bir görüntüyle karşılaşmayabilir. Responsive yani uyumlu bir tasarımınız olursa farklı cihazlara göre değişebilen ve düzgün bir görünüm elde etmiş olursunuz. 

Bir web sitesinin responsive (uyumlu) olduğunu nasıl anlarım: Web sitesini herhangi bir tarayıcıda açıp küçültün. Sonra da boyutunu azaltıp arttırın. Sitenin görünümü farklılaşıyorsa o site responsive yani uyumludur.

Responsive (uyumlu) tasarımın faydaları nelerdir : Şu sıralarda web sitelerinin bazılarında mobil site kavramını görüyoruz. Büyük siteler için çok sorun olmayabilir, belki de özellikle masaüstünden farklı özellikleri olan mobil site yapmak istemiş de olabilirler. Küçük ve orta ölçekli bir sitenin mobil şeklinde ayrı bir yaptıracak ekonomisi ve buna harcayacak zamanı olmayabilir. Bu durumda temanıza responsive özellik ekleyerek bu dertten kolayca kurtulabilirsiniz.

SEO içinde çok önemlidir. Artık arama motorları sitenizin cihazlarla uyumluluğunada bakacaktır.

Artık mobil ve tablet cihaz trafiği günümüzde %50 seviyesine çıkmış, bazı web sitelerinde %80 seviyelerine ulaşmıştır.


RESPONSIVE DESIGN İÇİN EKRAN ÖLÇÜLERİ NELERDİR ?

Genel olarak responsive web siteleri 3 farklı ana boyut baz alınarak hazırlanmaktadır. Bu 3 ana kırılımda; desktop 1024px, tablet 768px ve mobil 480px olarak kullanılır.

Eğer daha detaylı bir tasarım yapmak isterdeniz; mobil için 320px, tablet için 720px, yatay tabletler için 900px olan ara kırılımları da kullanabilirsiniz.

Önemli bir nokta da hangi ölçüleri kullanırsanız kullanın, sitenizin maksimum 1024px olmasını sağlayın! Bu tüm ekranlarda düzgün bir görüntü elde etmeniz için çok önemlidir. Düşünün ki 4000px’den büyük çözünürlükte siteniz açıldı. Bu ekranın tamamını kaplaması hiç hoş bir görüntü oluşturmayacaktır.

 

@media screen and (max-width: 480px) {

//mobil cihazlar için css tanımlamaları

}

@media screen and (min-width: 480px) {

//tablet cihazlar için css tanımlamaları

}

@media screen and (min-width: 768px) {

//desktop cihazlar için css tanımlamaları

 

RESPONSIVE DESIGN İÇİN GEREKLİ META TAGLAR

Kod içerisinde yer alan width=device-width bölümü site genişliğini, cihazın genişliği ile eşitler.

 

<meta name="viewport" content="width=device-width, initial 

 

Bu kod bloğu içerisinde yer alan initial-scale=1.0 bölümü ise sayfanın zoom değerini belirlemektedir. Bu değer ile birlikte sayfanın zoom değeri belirlenir ve kullanıcı tarafından zoom yapılması engellenmiş olur.

      

 

  

Copyright © Ankara 2015 - Aslan ÖZGÜL


Yandex.Metrica