Responsive Web Tasarımı Eğitimi
Responsive web tasarımının temellerini ve örneklerini öğrenin.
Temel Kavramlar
Responsive web tasarımı, farklı cihazlarda ve ekran boyutlarında optimal bir görüntüleme sağlar. İşte bazı temel kavramlar:
- Media Queries: Cihazların özelliklerine göre stil uygulamaları değiştiren CSS kuralları.
- Flexbox ve Grid: Modern CSS düzenleme yöntemleri.
- Viewport ve Breakpoints: Viewport, tarayıcının görünür alanıdır; breakpoints ise tasarımın değiştiği belirli ekran genişlikleridir.
- Responsive Images: Farklı cihazlarda farklı çözünürlükteki görüntüler.
- Mobile-First Yaklaşımı: Tasarıma mobil cihazlar için başlayıp daha büyük ekranlara genişletme stratejisi.
Örnekler
Media Queries
Media queries kullanarak, farklı ekran boyutlarına göre CSS kuralları tanımlayabiliriz.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}Bu örnekte, ekran genişliği 600px veya daha az olduğunda arka plan rengi açık mavi olur.
Flexbox Kullanımı
Flexbox, öğeleri esnek ve duyarlı bir şekilde hizalamak için kullanılır.
.container {
display: flex;
flex-direction: column;
}
.item {
background: lightgrey;
padding: 20px;
margin: 10px;
}Bu örnekte, container sınıfı esnek bir düzen kullanır ve içindeki öğeleri sütun halinde hizalar.
Grid Düzeni
Grid düzeni, sayfa öğelerini iki boyutlu bir ızgara yapısında hizalamak için kullanılır.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background: #ccc;
padding: 20px;
text-align: center;
}Bu örnekte, grid-container sınıfı 3 sütundan oluşan bir ızgara düzeni oluşturur. Ekran boyutu küçüldükçe, sütun sayısı da azalarak daha duyarlı bir düzen sağlar.
Responsive Images
Farklı cihazlar için uygun çözünürlükteki görüntüleri kullanarak performansı artırabilirsiniz.
<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 1200px) 768px,
1200px"
src="large.jpg" alt="Örnek Görsel">
Bu örnekte, cihazın ekran genişliğine göre farklı çözünürlüklerde görüntüler kullanılır.
İyi Uygulamalar
- Test ve Optimizasyon: Çeşitli cihazlarda ve tarayıcılarda test ederek tutarlı bir deneyim sağlama.
- Performans: Görsellerin ve kaynakların optimize edilmesi, hızlı yükleme süreleri.
- Kullanıcı Deneyimi: Kolay gezinme ve erişilebilirlik.
Araçlar ve Teknolojiler
- Bootstrap: Hızlı ve kolay responsive web geliştirme için popüler bir CSS framework’ü.
- Figma ve Adobe XD: Prototipleme ve tasarım araçları, responsive tasarım süreçlerini kolaylaştırır.
- Google Chrome DevTools: Responsive tasarımı test etmek ve hata ayıklamak için güçlü bir araç.
