@hakancamoglu

RESPONSIVEWEB DESIGN

İÇERİK SU GİBİDİR

Responsive Design’da tam olarak; İçeriklerimizin her türlü ekrana uyumlu olmasını sağlamaktır.

RESPONSIVE WEB DESIGN NEDİR?

Responsive yani duyarlı tasarım;tek bir HTML sayfasının CSS kodları ile farklı ekran boyutlarında farklı şekilde gösterilmesidir.

NEDEN RESPONSIVE WEB DESIGN?

Aslında bunun bir çok nedeni var! Ancak en büyük sebebi hazırladığımızweb sitesinin tüm cihazlarda sorunsuz şekilde görünmesini sağlamaktı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.

Bunun yanı sıra daha etkili bir SEO performansı almak da var diyebiliriz.Google başta olmak üzere bir çok arama motoru artık web sitelerinde mobil uyumluluğu aramaktadır.

Responsive web siteleri hazırlamak aslında tahmin edildiği kadar zordeğildir. Hazırladığınız web sitelerinden tek farkı CSS kodlarıdır.

Ekran boyutuna göre değişen CSS kodları ile; tek adres, tek içerik, tek kod ile tüm cihazlarda farklı görüntü elde edersiniz.

RESPONSIVE WEB DESIGN NASIL YAPILIR?

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

CSS MEDIA QUERIES

Hazırladığımız web sayfalarının hangi ekranda nasıl görünmesini istediğimiziCSS kodları ile belirtiriz. Burada ilk olarak yapılması gereken @media screentanımlamasıdır. İkinci tanımlama ise ekran ile ilgilidir. Ekran tanımlarken min-width, max-width ve orientation özelliklerini kullanabilirsiniz.

@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

CSS media queries ile ilgili tanımlamaları yaptıktan sonra responsiveweb sitemizi tamamlamak için son aşama meta tagların tanımlanmasıdır.Bu tanımlamayı yaparak içeriğimizin kullanılan cihazın boyutlarını algılamasını sağlarız. Eğer bu tanımlamayı yapmazsak farklı bir cihazda daiçerik bilgisayardaki gibi görünmeye devam edecektir.

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

RESPONSIVE DESIGN’DA GÖRSEL KULLANIMI

Responsive olarak hazırladığımız web sayfalarında ölçü birimi olarak% değerler kullanmamız gerekmektedir.

Örneğin sayfanın tamamını kaplayan bir görsel oluşturmak için;width:100%; height:auto; css tanımlaması yapılmalıdır.

RESPONSIVE DESIGN’DA FONT KULLANIMI

Metin boyutunu ayarlamak için dört farklı birimi kullanabiliriz: Bunlar, piksel (px), nokta (pt), Ems (em) ve yüzdelik oran (%).

“px” ve “pt” ölçü birimleri sabit, “em” ve “%” ölçü birimleri ise değişken ölçü birimleridir.

ÖNCE WEB Mİ MOBİL Mİ?

Responsive web siteleri tasarlarken sıralama:1. Mobil, 2. Tablet, 3. Desktop şeklinde olmalıdır.

HANGİ FRAMEWORK TERCİH EDİLMELİ?

Google Mobile-Friendly Test

Hazırladığınız responsive web sitesiarama motorları için de mobil uyumlu bir web sitesi olmuş mu?

Google PageSpeed Insights

Google için en iyi web sitesi;mobil uyumlu ve performansı iyi olan web sitesidir.

TEŞEKKÜRLER

Hakan Çamoğlu

@hakancamogluwww.camoglu.net