Web siteleriniz tüm ekranlara uyum sağlasın.

1. @hakancamoglu
RESPONSIVE
WEB DESIGN

2. İÇERİK SU GİBİDİR
Responsive Design’da tam olarak;
İçeriklerimizin her türlü ekrana uyumlu olmasını sağlamaktır.

3. 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.

4. NEDEN RESPONSIVE WEB DESIGN?
Aslında bunun bir çok nedeni var!
Ancak en büyük sebebi hazırladığımız
web 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.

5. Responsive web siteleri hazırlamak aslında tahmin edildiği kadar zor
değ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?

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

7. CSS MEDIA QUERIES
Hazırladığımız web sayfalarının hangi ekranda nasıl görünmesini istediğimizi
CSS kodları ile belirtiriz. Burada ilk olarak yapılması gereken @media screen
tanı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ı
}

8. RESPONSIVE DESIGN İÇİN GEREKLİ META TAGLAR
CSS media queries ile ilgili tanımlamaları yaptıktan sonra responsive
web 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 da
içerik bilgisayardaki gibi görünmeye devam edecektir.
<meta name="viewport"
content="width=device-width, initial-scale=1.0">

9. 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.

10. 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.

11. ÖNCE WEB Mİ MOBİL Mİ?
Responsive web siteleri tasarlarken sıralama:
1. Mobil, 2. Tablet, 3. Desktop şeklinde olmalıdır.

12. HANGİ FRAMEWORK TERCİH EDİLMELİ?

13. Google Mobile-Friendly Test
Hazırladığınız responsive web sitesi
arama motorları için de mobil uyumlu bir web sitesi olmuş mu?

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

15. TEŞEKKÜRLER
Hakan Çamoğlu
@hakancamoglu
www.camoglu.net