Günümüzde internet kullanıcılarının büyük bir çoğunluğu, web sitelerine masaüstü bilgisayarların yanı sıra akıllı telefonlar, tabletler ve hatta akıllı TV'ler gibi farklı cihazlar üzerinden erişiyor. Bu çeşitlilik, web tasarımcılarını ve geliştiricilerini, tasarladıkları web sitelerinin tüm bu cihazlarda sorunsuz ve kullanıcı dostu bir şekilde görüntülenmesini sağlamak zorunda bırakıyor. İşte tam bu noktada "duyarlı tasarım" (responsive design) kavramı devreye giriyor.
Duyarlı tasarım, bir web sitesinin içeriğinin ve düzeninin, ziyaretçinin kullandığı cihazın ekran boyutuna ve çözünürlüğüne otomatik olarak uyum sağlaması anlamına gelir. Bu, kullanıcıların herhangi bir cihazda aynı derecede iyi bir deneyim yaşamasını sağlar. Duyarlı tasarım, kullanıcı deneyimini iyileştirmenin yanı sıra SEO (Arama Motoru Optimizasyonu) açısından da büyük önem taşır. Google ve diğer arama motorları, mobil uyumlu web sitelerine öncelik verirler.
Günümüzde birçok CSS framework'ü (örneğin Bootstrap, Foundation) duyarlı tasarım için hazır çözümler sunsa da, normal CSS ile duyarlı tasarım yapmanın da önemli avantajları vardır:
Normal CSS ile duyarlı tasarım yaparken kullanabileceğiniz başlıca teknikler şunlardır:
Esnek grid sistemi, web sayfasının düzenini yüzdelik değerler kullanarak oluşturmanızı sağlar. Bu sayede, elementler ekran boyutuna göre otomatik olarak yeniden boyutlanır. Sabit pikseller yerine yüzde (%) birimleri kullanmak, içeriğin farklı ekran boyutlarına uyum sağlamasına yardımcı olur.
Örnek:
css.container { width: 90%; /* Ekranın %90'ını kapla */ margin: 0 auto; /* Ortala */}.column { width: 30%; /* Container'ın %30'unu kapla */ float: left; margin-right: 5%; /* Sağdan boşluk bırak */}.column:last-child { margin-right: 0; /* Son sütunun sağdan boşluğu olmasın */}Görsellerin de ekran boyutuna göre yeniden boyutlanması gerekir. Bunun için max-width özelliğini kullanabilirsiniz.
Örnek:
cssimg { max-width: 100%; /* Görselin genişliği konteynerin genişliğini aşmasın */ height: auto; /* Yüksekliği otomatik ayarla (oranı koru) */}Media queries, CSS kurallarını belirli ekran boyutlarına veya cihaz özelliklerine göre uygulamak için kullanılır. Bu sayede, web sitenizin farklı cihazlarda farklı şekilde görünmesini sağlayabilirsiniz.
Örnek:
css/* Varsayılan stil (masaüstü) */body { font-size: 16px;}/* 768 pikselden küçük ekranlar (tabletler) için */@media (max-width: 768px) { body { font-size: 14px; }}/* 480 pikselden küçük ekranlar (akıllı telefonlar) için */@media (max-width: 480px) { body { font-size: 12px; }}Media Query Kullanım Alanları:
viewport meta etiketi, tarayıcıya sayfanın nasıl ölçeklenmesi gerektiğini bildirir. Bu etiket, özellikle mobil cihazlarda web sitenizin doğru şekilde görüntülenmesi için önemlidir.
Örnek:
html<meta name="viewport" content="width=device-width, initial-scale=1.0">Bu etiket, tarayıcıya sayfanın genişliğinin cihazın genişliğine eşit olmasını ve başlangıç ölçeğinin 1.0 olmasını söyler.
Aşağıdaki örnek, normal CSS ile nasıl basit bir duyarlı web sayfası oluşturabileceğinizi göstermektedir.
html <title>Duyarlı Web Sayfası</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: sans-serif; margin: 0; } .container { width: 90%; margin: 0 auto; } .header { background-color: #333; color: white; padding: 20px; text-align: center; } .content { padding: 20px; } .column { width: 100%; /* Varsayılan olarak %100 genişlik */ margin-bottom: 20px; } @media (min-width: 768px) { .column { width: 48%; /* Tablet ve üzeri için %48 genişlik */ float: left; margin-right: 4%; } .column:last-child { margin-right: 0; } } </style> <div class="header"> <h1>Duyarlı Web Sayfası</h1> </div> <div class="container"> <div class="content"> <div class="column"> <h2>Sütun 1</h2> <p>Bu sütun içeriği.</p> </div> <div class="column"> <h2>Sütun 2</h2> <p>Bu sütun içeriği.</p> </div> </div> </div>Bu örnekte, iki sütunlu bir düzen oluşturulmuştur. Mobil cihazlarda sütunlar alt alta sıralanırken, tablet ve üzeri cihazlarda yan yana görüntülenir.
Normal CSS ile duyarlı tasarım yapmak, web sitenizin farklı cihazlarda mükemmel görünmesini sağlamanın güçlü ve esnek bir yoludur. Bu makalede sunulan teknikleri ve ipuçlarını kullanarak, kullanıcı dostu ve SEO uyumlu web siteleri oluşturabilirsiniz. Framework'lerin sunduğu kolaylıklara rağmen, normal CSS ile duyarlı tasarımın temellerini öğrenmek, size daha fazla kontrol ve esneklik sağlayacaktır. Unutmayın, pratik yaparak ve deneyerek bu konuda daha da ustalaşabilirsiniz.