Web Geliştirme

Responsive Web Tasarımı

Web Tasarımı






Responsive Web Tasarımı Eğitimi


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;
}
Öğe 1
Öğe 2
Öğe 3

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;
}
Öğe 1
Öğe 2
Öğe 3
Öğe 4
Öğe 5
Öğe 6

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">

Ö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ç.


İlgili Makaleler

Başa dön tuşu