İnternetteki cep telefonu kullanıcılarının sayısı arttıkça web tasarımcılarının içeriği çeşitli ekran boyutlarında iyi çalışacak şekilde düzenlemesi daha da önemli hale geldi. Başlangıçta Ethan Marcotte tarafından A List Apart'ta tanımlanan duyarlı web tasarımı, kullanılan cihaza uygun olacak şekilde bir sitenin düzenini değiştirerek kullanıcıların ihtiyaçlarına ve cihazlarının özelliklerine yanıt veren bir tasarım stratejisidir. Örneğin, duyarlı bir site telefonda içeriği tek sütun görünümünde, tablette iki sütun görünümünde, masaüstü bilgisayarda ise üç veya dört sütun görünümünde gösterebilir.
İnternet özellikli cihazların çok sayıda olası ekran boyutu olduğundan sitenizin mevcut veya gelecekteki tüm ekran boyutlarına uyum sağlaması önemlidir. Modern duyarlı tasarım, dokunmatik ekranlar gibi etkileşim modlarını da hesaba katar. Amaç, deneyimi herkes için optimize etmektir.
Görüntü alanını ayarlama
Çeşitli cihazlar için optimize edilmiş sayfalar, dokümanın baş kısmında bir meta viewport etiketi içermelidir. Bu etiket, tarayıcıya sayfanın boyutlarının ve ölçeklemesinin nasıl kontrol edileceğini bildirir.
Mobil tarayıcılar, en iyi deneyimi sunmak için sayfayı masaüstü ekranı genişliğinde (cihazlara göre değişmekle birlikte, genellikle yaklaşık 980px) oluşturur. Ardından, yazı tipi boyutlarını büyüterek ve içeriği ekrana uyacak biçimde ölçekleyerek daha iyi görünmesini sağlamaya çalışır. Bu durum, yazı tiplerinin tutarsız görünmesine ve kullanıcıların içeriği görüp onunla etkileşimde bulunmak için yakınlaştırma yapmasına neden olabilir.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
width=device-width meta viewport değerini kullanmak, sayfaya cihazdan bağımsız pikseller (DIP) cinsinden ekran genişliğiyle eşleşmesini söyler. DIP, standart bir görsel piksel birimidir (yüksek yoğunluklu bir ekranda birçok fiziksel pikselden oluşabilir). Bu, sayfanın içeriği farklı ekran boyutlarına uyacak şekilde yeniden akıtmasına olanak tanır.
Bazı tarayıcılar, yatay moda döndürülürken sayfanın genişliğini sabit tutar ve yeniden akıtmak yerine ekranı dolduracak şekilde yakınlaştırır. initial-scale=1 değerini eklediğinizde tarayıcılara, cihaz yönünden bağımsız olarak CSS pikselleri ile cihazdan bağımsız pikseller arasında 1:1 ilişki kurulması talimatı verilir. Böylece sayfa, tam yatay genişlikten yararlanabilir.
width veya initial-scale ile <meta name="viewport"> etiketi yok
Lighthouse denetimi, HTML dokümanlarınızın görünüm alanı meta etiketini doğru şekilde kullandığından emin olma sürecini otomatikleştirmenize yardımcı olabilir.
İçeriği görüntü alanına göre boyutlandırma
Hem masaüstü hem de mobil cihazlarda kullanıcılar web sitelerini dikey olarak kaydırmaya alışkındır ancak yatay olarak kaydırmaya alışkın değildir. Kullanıcıyı tüm sayfayı görmek için yatay olarak kaydırmaya veya uzaklaştırmaya zorlamak kötü bir kullanıcı deneyimine neden olur.
Meta viewport etiketi içeren bir mobil site geliştirirken, belirtilen görüntü alanına tam olarak sığmayan sayfa içeriği oluşturmak yaygın bir hatadır. Örneğin, görüntü alanından daha geniş gösterilen bir resim yatay kaydırmaya neden olabilir. Bunu önlemek için içeriğinizi görüntü alanına sığacak şekilde ayarlayın.
İçerik, görüntü alanı için doğru şekilde boyutlandırılmamış Lighthouse denetimi, taşan içeriği tespit etme sürecini otomatikleştirmenize yardımcı olabilir.
Resimler
Boyutları sabit olan bir resim, görünüm alanından büyükse sayfanın kaydırılmasına neden olur. Tüm resimlere max-width 100% değeri vermenizi öneririz. Bu değer, resimleri mevcut alana sığacak şekilde küçültürken ilk boyutlarının ötesine uzamalarını engeller.
Çoğu durumda, stil sayfanıza aşağıdakileri ekleyerek bunu yapabilirsiniz:
img {
max-width: 100%;
display: block;
}
Resmin boyutlarını img öğesine ekleyin.
max-width: 100% ayarını yaptığınızda bile, tarayıcının resimler yüklenmeden önce yer ayırabilmesi için width ve height özelliklerini <img> etiketlerinize eklemenizi öneririz. Bu, düzen kaymalarını önlemeye yardımcı olur.
Düzen
Ekran boyutları ve CSS piksellerindeki genişlik cihazlar arasında (ör. telefonlar ve tabletler arasında, hatta farklı telefonlar arasında) büyük ölçüde değiştiğinden içeriğin iyi şekilde oluşturulması için belirli bir görüntü alanı genişliğine bağlı olmaması gerekir.
Geçmişte bu işlem için düzen öğelerinin yüzdelik olarak ayarlanması gerekiyordu. Piksel ölçüleri kullanıldığında, kullanıcının küçük ekranlarda yatay olarak kaydırması gerekir:
Bunun yerine yüzdeleri kullanmak, her sütun her zaman ekran genişliğinin aynı yüzdesini kapladığı için sütunları daha küçük ekranlarda daraltır:
Flexbox, ızgara düzeni ve çok sütunlu düzen gibi modern CSS düzen teknikleri, bu esnek ızgaraları oluşturmayı çok daha kolay hale getirir.
Flexbox
Farklı boyutlarda bir dizi öğeniz varsa ve bu öğelerin satıra veya birden fazla satıra rahatça sığmasını istiyorsanız (küçük öğeler daha az, büyük öğeler daha fazla yer kaplayacak şekilde) Flexbox'ı kullanın.
.items {
display: flex;
justify-content: space-between;
}
Öğeleri tek bir satırda veya kullanılabilir alan azaldıkça birden fazla satırda sarmalanmış şekilde göstermek için Flexbox'ı kullanabilirsiniz.
Flexbox hakkında daha fazla bilgi edinin.
CSS ızgara düzeni
CSS Grid Layout, esnek ızgaralar oluşturur. Konteynerdeki kullanılabilir alanın bir bölümünü temsil eden fr birimini ve ızgara düzenini kullanarak daha önce belirtilen örneği iyileştirebilirsiniz.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Ayrıca, ızgarayı kullanarak mümkün olduğunca çok öğe içeren düzenli ızgara düzenleri oluşturabilirsiniz. Ekran boyutu küçüldükçe kullanılabilir parçaların sayısı azalır. Aşağıdaki demoda, her satıra sığan sayıda kart içeren ve minimum boyutu 200px olan bir ızgara gösterilmektedir.
CSS Grid Layout hakkında daha fazla bilgi edinin.
Çok sütunlu düzen
Bazı düzen türlerinde, column-width özelliğiyle duyarlı sütun sayıları oluşturan Çok Sütunlu Düzen'i (Multicol) kullanabilirsiniz.
Aşağıdaki demoda, sayfada başka bir 200px sütunu için yer olduğunda sütunlar ekleniyor.
Multicol hakkında daha fazla bilgi
Duyarlılık için CSS medya sorgularını kullanma
Bazen, daha önce açıklanan tekniklerin izin verdiğinden daha kapsamlı değişiklikler yapmanız gerekebilir. Medya sorguları bu noktada faydalı olur.
Medya sorguları, içeriği oluşturmak için kullanılan cihaz türlerine göre CSS stillerini değiştirmek üzere bu stillere uygulayabileceğiniz basit filtrelerdir. Ayrıca, genişlik, yükseklik, yön ve cihazın dokunmatik ekran olarak kullanılıp kullanılmadığı gibi cihaz özelliklerine göre stili de değiştirebilirler.
Yazdırma için farklı stiller sağlamak üzere bir çıkış türünü hedefleyebilir ve yazdırma stilleri için bir stil sayfası ekleyebilirsiniz:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Ayrıca, yazdırma stillerini ana stil sayfanıza eklemek için bir medya sorgusu da kullanabilirsiniz:
@media print {
/* print styles go here */
}
Duyarlı web tasarımında en sık kullanılan sorgular cihaz özellikleriyle ilgilidir. Bu nedenle, düzeninizi dokunmatik ekranlar veya daha küçük ekranlar için özelleştirebilirsiniz.
Görüntü alanı boyutuna dayalı medya sorguları
Medya sorguları, belirli ekran boyutlarına belirli stiller uygulayan duyarlı bir deneyim oluşturmanıza olanak tanır. Ekran boyutuyla ilgili sorgular aşağıdaki durumları test edebilir:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Cihaz özelliğine dayalı medya sorguları
Piyasada çok çeşitli cihazlar bulunduğundan geliştiriciler, her büyük cihazın normal bir masaüstü veya dizüstü bilgisayar olduğunu ya da her küçük cihazın dokunmatik ekran kullandığını varsayamaz. Medya sorguları spesifikasyonuna yeni eklenen bazı özellikler, cihazla etkileşim kurmak için kullanılan işaretçi türü ve kullanıcının işaretçiyi öğelerin üzerinde tutabilmesi gibi özellikleri test etmenize olanak tanır.
hoverpointerany-hoverany-pointer
Bu demoyu normal bir masaüstü bilgisayar, telefon veya tablet gibi farklı cihazlarda görüntülemeyi deneyin.
Bu yeni özellikler, tüm modern tarayıcılarda iyi bir şekilde desteklenir. hover, any-hover, pointer ve any-pointer ile ilgili daha fazla bilgiyi MDN sayfalarında bulabilirsiniz.
any-hover ve any-pointer özelliğini kullanın
any-hover ve any-pointer özellikleri, kullanıcının bir işaretçiyi öğelerin üzerinde tutabildiğini (genellikle fareyle üzerine gelme olarak adlandırılır) veya cihazıyla etkileşim kurmanın birincil yolu olmasa bile işaretçiyi kullanabildiğini test eder. Örneğin, dokunmatik ekran kullanan bir kullanıcının fareye geçmesini zorlamamak için bunları kullanırken çok dikkatli olun.
Ancak, kullanıcının ne tür bir cihaza sahip olduğunu belirlemek önemliyse any-hover ve any-pointer yararlı olabilir. Örneğin, dokunmatik ekranı ve izleme paneli olan bir dizüstü bilgisayar, üzerine gelme özelliğinin yanı sıra kaba ve ince işaretçilerle eşleşmelidir.
Ayrılma noktalarını seçme
Cihaz sınıflarına veya herhangi bir ürüne, marka adına ya da işletim sistemine göre kesme noktaları tanımlamayın. Bu durum, kodunuzun bakımını zorlaştırır. Bunun yerine, içeriğin kapsayıcıya sığacak şekilde düzeninin nasıl değişeceğini belirlemesine izin verin.
Önce küçük başlayıp sonra büyüyerek önemli kesme noktalarını belirleyin.
İçeriği önce küçük bir ekran boyutuna uyacak şekilde tasarlayın, ardından bir kesme noktası gerekli olana kadar ekranı genişletin. Bu sayede sayfanızdaki kesme noktalarının sayısını en aza indirebilir ve bunları içeriğe göre optimize edebilirsiniz.
Aşağıdaki örnekte, bu sayfanın başındaki hava durumu tahmini widget'ı örneği açıklanmaktadır. İlk adım, öngörünün küçük ekranda iyi görünmesini sağlamaktır:
Ardından, tarayıcıyı öğeler arasında çok fazla boşluk kalmayacak şekilde yeniden boyutlandırın. Karar özneldir ancak 600px
kesinlikle çok geniştir.
600px konumuna kesme noktası eklemek için bileşenin CSS'sinin sonuna iki medya sorgusu oluşturun: biri tarayıcı 600px veya daha dar olduğunda, diğeri ise 600px'dan daha geniş olduğunda kullanılacak.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Son olarak, CSS'yi yeniden düzenleyin. max-width 600px için medya sorgusunun içine yalnızca küçük ekranlara yönelik CSS'yi ekleyin. min-width 601px için medya sorgusunun içine daha büyük ekranlara yönelik CSS ekleyin.
Gerekirse küçük ayrılma noktaları seçin
Düzen önemli ölçüde değiştiğinde büyük kesme noktaları seçmenin yanı sıra küçük değişikliklere göre ayarlama yapmak da faydalıdır. Örneğin, önemli kesme noktaları arasında bir öğenin kenar boşluklarını veya dolgusunu ayarlamak ya da yazı tipi boyutunu artırarak düzende daha doğal görünmesini sağlamak faydalı olabilir.
Bu örnek, öncekiyle aynı kalıbı izleyerek daha küçük ekran düzenlerini optimize etmekle başlar. Öncelikle, görünüm alanı genişliği 360px değerinden büyük olduğunda yazı tipini büyütün. Ardından, yeterli alan olduğunda yüksek ve düşük sıcaklıkları aynı satırda olacak şekilde ayırabilir ve hava durumu simgelerini büyütebilirsiniz.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
Büyük ekranlarda, tahmin panelinin maksimum genişliğini tüm ekran genişliğini kullanmayacak şekilde sınırlamanızı öneririz.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Metni okuma için optimize etme
Klasik okunabilirlik teorisine göre ideal bir sütun, satır başına 70-80 karakter (İngilizce'de yaklaşık 8-10 kelime) içermelidir. Bir metin bloğunun genişliği yaklaşık 10 kelimeyi aştığında kesme noktası eklemeyi düşünebilirsiniz.
Bu örnekte, 1em konumundaki Roboto yazı tipi, daha küçük ekranda satır başına 10 kelime oluşturuyor ancak daha büyük ekranlar için bir kesme noktası gerekiyor. Bu durumda, tarayıcı genişliği 575px değerinden büyükse ideal içerik genişliği 550px olur.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
İçeriği gizlemeyin (:#avoid-hiding-content)
Ekran boyutuna bağlı olarak hangi içeriğin gizleneceğini veya gösterileceğini seçerken dikkatli olun. İçeriği ekrana sığdıramadığınız için gizlemeyin. Ekran boyutu, kullanıcının ne görmek isteyebileceğini tahmin etmez. Örneğin, hava durumu tahmininden polen sayısının kaldırılması, dışarı çıkıp çıkamayacaklarına karar vermek için bu bilgiye ihtiyaç duyan ve bahar alerjilerinden muzdarip kişiler için ciddi bir sorun olabilir.
Chrome Geliştirici Araçları'nda medya sorgusu kesme noktalarını görüntüleme
Medya sorgusu kesme noktalarınızı ayarladıktan sonra, bunların sitenizin görünümünü nasıl etkilediğini kontrol edin. Tarayıcı pencerenizi yeniden boyutlandırarak kesme noktalarını tetikleyebilirsiniz ancak Chrome Geliştirici Araçları'nda bir sayfanın farklı kesme noktalarında nasıl göründüğünü gösteren yerleşik bir özellik bulunur.
Sayfanızı farklı kesme noktalarında görüntülemek için:
- Geliştirici Araçları'nı açın.
- Cihaz Modu'nu açın. Bu işlem varsayılan olarak duyarlı modda açılır.
- Medya sorgularınızı görmek için Cihaz Modu menüsünü açıp Medya sorgularını göster'i seçin. Bu seçenek, kesme noktalarınızı sayfanızın üstünde renkli çubuklar olarak gösterir.
- Medya sorgusu etkin durumdayken sayfanızı görüntülemek için çubuklardan birini tıklayın. Bir medya sorgusunun tanımına gitmek için çubuğu sağ tıklayın.