Görüntülendikleri cihazın ihtiyaçlarına ve özelliklerine uygun siteler nasıl oluşturulur?
Mobil cihazların web'de sörf yapmak için kullanılması astronomik bir hızda büyümeye devam etmektedir. Bu cihazlar genellikle ekran boyutuyla sınırlıdır ve içeriğin ekrana nasıl yerleştirileceğine dair farklı bir yaklaşım gerektirir.
İlk olarak A List Apart'ta Ethan Marcotte tarafından tanımlanan, duyarlı web tasarımı, kullanıcıların ve kullandıkları cihazların gereksinimlerine yanıt verir. Düzen, cihazın boyutuna ve özelliklerine göre değişir. Örneğin, kullanıcılar telefonda içerikleri tek sütun olarak görürken tablette aynı içerik iki sütunda görüntülenebilir.
Telefonlar, telefonlar, tabletler, masaüstü bilgisayarlar, oyun konsolları, TV'ler ve hatta giyilebilir cihazlarda birbirinden farklı çok sayıda ekran boyutu bulunur. Ekran boyutları sürekli değişmektedir. Bu nedenle, sitenizin bugün veya gelecekte her ekran boyutuna uyum sağlaması önemlidir. Ayrıca, cihazlar etkileşimde bulunduğumuz farklı özelliklere sahiptir. Örneğin, ziyaretçilerinizden bazıları dokunmatik ekran kullanır. Modern duyarlı tasarım, deneyimi herkes için optimize etmek amacıyla tüm bunları dikkate alır.
Görüntü alanını ayarlama
Çeşitli cihazlar için optimize edilmiş sayfaların, dokümanın başlığında bir meta görüntü alanı etiketi içermesi gerekir. Bir meta görüntü alanı etiketi tarayıcıya, sayfanın boyutlarını ve ölçeklemesini nasıl kontrol edeceği hakkında talimatlar verir.
Mobil tarayıcılar, en iyi deneyimi sunmak için sayfayı masaüstü ekran genişliğinde oluşturur (ancak bu değer tüm cihazlarda değişir, ancak genellikle yaklaşık 980px) daha sonra yazı tipi boyutlarını büyüterek ve içeriği ekrana uyacak şekilde ölçeklendirerek içeriğin daha iyi görünmesini sağlamaya çalışırlar.
Bu da, yazı tipi boyutlarının kullanıcılara tutarsız görünebileceği anlamına gelir. Kullanıcılar, içeriği görmek ve içerikle etkileşimde bulunmak için
iki kez dokunmaları veya yakınlaştırmak için parmaklarını birleştirmeleri gerekebilir.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
width=device-width meta görüntü alanı değerinin kullanılması, sayfaya ekranın genişliğini cihazdan bağımsız piksellerle eşleştirmesi talimatını verir. Yüksek yoğunluklu ekranda çok sayıda fiziksel pikselden oluşabilen tek bir pikselin temsili olan cihazdan (veya yoğunluktan) bağımsız bir piksel. Bu, sayfanın küçük bir cep telefonunda veya büyük bir masaüstü monitöründe oluşturulmuş olması fark etmeksizin, sayfanın farklı ekran boyutlarına uyacak şekilde yeniden düzenlenmesine olanak tanır.
Bazı tarayıcılar, yatay moda döndürürken sayfanın genişliğini sabit tutar ve ekranı doldurmak için yeniden düzenlemek yerine yakınlaştırır. initial-scale=1 değerinin eklenmesi, cihaz yönü ne olursa olsun tarayıcılara CSS pikselleri ile cihazdan bağımsız pikseller arasında 1:1 bir ilişki kurma talimatı verir ve sayfanın tam yatay genişlikten yararlanabilmesini sağlar.
width veya initial-scale içeren bir <meta name="viewport"> etiketi yok
Lighthouse denetimi, HTML belgelerinizin görüntü alanı meta etiketini doğru şekilde kullandığından emin olma sürecini otomatikleştirmenize yardımcı olabilir.
Erişilebilir bir görüntü alanı sağlama
initial-scale ayarlamanın yanı sıra görüntü alanında şu özellikleri de ayarlayabilirsiniz:
minimum-scalemaximum-scaleuser-scalable
Bu ayarlar ayarlandığında kullanıcının görüntü alanını yakınlaştırma özelliğini devre dışı bırakabilir ve erişilebilirlik sorunlarına neden olabilir. Bu nedenle bu özellikleri kullanmanızı önermeyiz.
İçeriği görüntü alanına göre boyutlandırma
Hem masaüstü hem de mobil cihazlarda kullanıcılar, web sitelerini yatay yönde değil dikey olarak kaydırmaya alışkındır. Sayfadaki sonuçların tamamını görmek için kullanıcıyı yatay yönde kaydırmaya veya uzaklaştırmaya zorlamak kötü bir kullanıcı deneyimine yol açar.
Meta görüntü alanı etiketine sahip bir mobil site geliştirirken, yanlışlıkla belirtilen görüntü alanına tam olarak sığmayan bir sayfa içeriği oluşturmak çok kolaydır. Örneğin, görüntü alanından daha geniş bir genişlikte görüntülenen bir resim, görüntü alanının yatay olarak kaymasına neden olabilir. Kullanıcının yatay olarak kaydırma yapmak zorunda kalmaması için bu içeriği görüntü alanının genişliğine sığacak şekilde ayarlamanız gerekir.
İçerik, görüntü alanı için doğru boyutlandırılmamış Lighthouse denetimi, taşan içeriği algılama sürecini otomatikleştirmenize yardımcı olabilir.
Resimler
Bir resmin boyutları sabittir ve görüntü alanından daha büyük olursa kaydırma çubuğuna neden olur.
Bu sorunu gidermenin yaygın bir yolu, tüm görsellere max-width 100% vermektir.
Bu, görüntü alanı boyutunun resimden daha küçük olması durumunda, resmin bulunduğu alana sığacak şekilde küçülmesine neden olur.
Bununla birlikte, width yerine max-width öğesi 100% olduğundan, resim doğal boyutundan daha büyük olarak genişletilmez.
Aşağıdakileri stil sayfanıza eklemek genellikle güvenlidir, böylece kaydırma çubuğuna neden olan resimlerle ilgili hiçbir sorun yaşamazsınız.
img {
max-width: 100%;
display: block;
}
Resmin boyutlarını img öğesine ekleyin
max-width: 100% kullanırken resmin doğal boyutlarını geçersiz kılarsınız, ancak <img> etiketinizde width ve height özelliklerini kullanmaya devam etmeniz gerekir.
Bunun nedeni, modern tarayıcıların bu bilgileri resim yüklenmeden önce resim için yer ayırmak üzere kullanmasıdır. Bu, içerik yüklenirken düzen kaymalarının önlenmesine yardımcı olur.
Düzen
CSS piksel cinsinden ekran boyutları ve genişliği, cihazlar arasında (örneğin, telefonlar ve tabletler ve hatta farklı telefonlar arasında) büyük ölçüde farklılık gösterdiğinden, içeriğin iyi oluşturulması için belirli bir görüntü alanı genişliğine dayanmamalıdır.
Geçmişte, bu gerekli ayar öğeleri yüzde cinsinden düzen oluşturmak için kullanılıyordu. Aşağıdaki örnekte, piksel kullanılarak boyutlandırılan kayan öğeler içeren iki sütunlu bir düzen görebilirsiniz. Görüntü alanı, sütunların toplam genişliğinden küçüldükten sonra, içeriği görebilmek için yatay olarak kaydırmamız gerekir.
Genişlikler için yüzde değerleri kullanıldığında sütunlar her zaman kapsayıcının belirli bir yüzdesini korur. Bu durumda, sütunlar kaydırma çubuğu oluşturmak yerine daralır.
Flexbox, Grid Layout ve Multicol gibi modern CSS düzen teknikleri, bu esnek ızgaraların oluşturulmasını çok daha kolay hale getirir.
Flexbox
Bu düzen yöntemi, farklı boyutlarda bir dizi öğeniz olduğunda ve bunların bir satıra veya satırlara rahat bir şekilde sığmasını, küçük öğelerin daha az yer kaplamasını ve büyük öğelerin daha fazla yer kaplamasını istediğinizde idealdir.
.items {
display: flex;
justify-content: space-between;
}
Duyarlı tasarımda, öğeleri tek bir satır olarak görüntülemek veya kullanılabilir alan azaldıkça birden çok satıra sarmalamak için Flexbox'ı kullanabilirsiniz.
Flexbox hakkında daha fazla bilgi edinin.
CSS Izgara Düzeni
CSS Izgara Düzeni, esnek ızgaraların kolayca oluşturulmasına olanak tanır.
Önceki kayan reklam örneğini dikkate alırsak, sütunlarımızı yüzde değerleriyle oluşturmak yerine ızgara düzenini ve kapsayıcıdaki kullanılabilir alanın bir kısmını temsil eden fr birimini kullanabiliriz.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Izgara, mümkün olduğunca çok sayıda öğeyle normal ızgara düzenleri oluşturmak için de kullanılabilir.
Ekran boyutu küçüldükçe, kullanılabilir parçaların sayısı da azalır.
Aşağıdaki demoda, en az 200px boyutunda olmak üzere her satıra sığabilecek sayıda kartımız bulunmaktadır.
CSS Izgara Düzeni hakkında daha fazla bilgi edinin.
Çok sütunlu düzen
Bazı düzen türlerinde, Çok Sütunlu Düzen (Çoklu Sütun) özelliğini kullanabilirsiniz. Bu yöntem, column-width özelliğiyle duyarlı sayıda sütun oluşturabilir.
Aşağıdaki demoda, başka bir 200px sütunu için yer varsa sütunların eklendiğini görebilirsiniz.
Çoklu Kol hakkında daha fazla bilgi
Duyarlılık için CSS medya sorguları kullanma
Bazen belirli bir ekran boyutunu desteklemek için düzeninizde yukarıda gösterilen tekniklerin olanaklarından daha kapsamlı değişiklikler yapmanız gerekir. Medya sorguları tam da burada yararlı hale gelir.
Medya sorguları, CSS stillerine uygulanabilecek basit filtrelerdir. İçeriği oluşturan cihazın türüne veya ilgili cihazın özelliklerine (ör. genişlik, yükseklik, yön, fareyle üzerine gelme yeteneği ve cihazın dokunmatik ekran olarak kullanılıp kullanılmadığı) göre stillerin değiştirilmesi kolaylaşır.
Yazdırma için farklı stiller sağlamak üzere bir çıkış türünü hedeflemeniz gerekir. Böylece, aşağıdaki gibi baskı stillerine sahip bir stil sayfası ekleyebilirsiniz:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Alternatif olarak, bir medya sorgusu kullanarak yazdırma stillerini ana stil sayfanıza ekleyebilirsiniz:
@media print {
/* print styles go here */
}
Esnek web tasarımında, daha küçük ekranlar için farklı bir düzen sağlamak amacıyla veya ziyaretçimizin dokunmatik ekran kullandığını tespit ettiğimizde genellikle cihazın özelliklerini sorgularız.
Görüntü alanı boyutuna göre medya sorguları
Medya sorguları, belirli stillerin küçük ekranlara, büyük ekranlara ve bunların arasındaki herhangi bir yere uygulandığı duyarlı bir deneyim oluşturmamızı sağlar. Bu nedenle, burada tespit ettiğimiz özellik ekran boyutudur ve aşağıdakileri test edebiliriz.
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Tüm bu özellikler mükemmel tarayıcı desteğine sahiptir. Tarayıcı desteği bilgileri dahil olmak üzere daha fazla ayrıntı için MDN'de width, height, orientation ve en boy oranı bölümlerine bakın.
Cihaz yeteneğine bağlı medya sorguları
Mevcut cihazların çeşitliliği göz önünde bulundurulduğunda, her büyük cihazın normal bir masaüstü veya dizüstü bilgisayar olduğunu ya da kullanıcıların yalnızca küçük bir cihazdaki dokunmatik ekranı kullandığını varsayamayız. Medya sorguları spesifikasyonuna yapılan bazı yeni eklemelerle, cihazla etkileşim kurmak için kullanılan işaretçi türü ve kullanıcının fareyle öğelerin üzerine gelip gelemeyeceği gibi özellikleri test edebiliriz.
hoverpointerany-hoverany-pointer
Bu demoyu normal bir masaüstü bilgisayar ve telefon ya da 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 için MDN sayfaları hakkında daha fazla bilgi edinin.
any-hover ve any-pointer kullanılıyor
any-hover ve any-pointer özellikleri, kullanıcının cihazıyla etkileşimde bulunduğu birincil yol olmasa bile fareyle üzerine gelme veya bu tür işaretçileri kullanma yeteneğinin olup olmadığını test eder.
Bunları kullanırken çok dikkatli olun.
Dokunmatik ekran kullanan bir kullanıcıyı fare kullanmaya zorlamak pek hoş bir davranış değildir.
Ancak, bir 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 dokunmatik yüzeye sahip bir dizüstü bilgisayar, fareyle üzerine gelme yeteneğinin yanı sıra genel ve hassas işaretçilerle de eşleşmelidir.
Kesme noktaları nasıl seçilir?
Cihaz sınıflarına göre ayrılma noktaları tanımlamayın. Günümüzde kullanımda olan belirli cihazlara, ürünlere, marka adlarına veya işletim sistemlerine göre ayrılma noktaları tanımlamak bakım kabuslarına yol açabilir. Bunun yerine, düzenin kapsayıcısına nasıl uyum sağlayacağını içeriğin kendisi belirlemelidir.
Küçük adımlarla başlayıp daha sonra üzerinde çalışarak önemli ayrılma noktalarını seçin.
İçeriği önce küçük bir ekran boyutuna sığacak şekilde tasarlayın, ardından bir ayrılma noktası gerekene kadar ekranı genişletin. Bu, içeriğe göre ayrılma noktalarını optimize etmenizi ve mümkün olan en az sayıda ayrılma noktasını korumanızı sağlar.
Başta gördüğümüz örneği ele alalım: hava durumu tahmini. İlk adım, tahminin küçük ekranda iyi görünmesini sağlamaktır.
Daha sonra, öğeler arasında çok fazla boşluk kalana kadar tarayıcıyı yeniden boyutlandırın. Bunu yaptığınızda tahmin pek iyi görünmez.
Karar biraz öznel, ancak 600px değerinin üstünde kesinlikle çok geniş kapsamlı.
600px noktasına bir ayrılma noktası eklemek için bileşen için CSS'nizin sonunda iki medya sorgusu oluşturun. Bu sorgulardan biri tarayıcı 600px ve daha düşük olduğunda, diğeri ise 600px değerinden geniş olduğunda kullanılır.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Son olarak, CSS'yi yeniden düzenleyin. 600px öğesinin max-width için medya sorgusunun içine yalnızca küçük ekranlara yönelik CSS'yi ekleyin. 601px öğesinin min-width için medya sorgusunun içine daha büyük ekranlar için CSS ekleyin.
Gerektiğinde küçük kesme noktalarını seçin
Düzen önemli ölçüde değiştiğinde önemli ayrılma noktalarını seçmenin yanı sıra küçük değişikliklere uyum sağlamak da yararlıdır. Örneğin, önemli ayrılma noktaları arasında bir öğedeki kenar boşluklarını veya dolguyu ayarlamak ya da düzende daha doğal görünmesi için yazı tipi boyutunu büyütmek faydalı olabilir.
Küçük ekran düzenini optimize ederek başlayalım.
Bu örnekte, görüntü alanı genişliği 360px değerinden büyük olduğunda yazı tipini büyütelim.
İkinci olarak, yeterli alan olduğunda, yüksek ve düşük sıcaklıkları birbirinin üstünde değil, aynı çizgide olacak şekilde ayırabiliriz.
Hava durumu simgelerini biraz daha büyütelim.
@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;
}
}
Benzer şekilde, büyük ekranlarda tüm ekran genişliğini kullanmaması için tahmin panelinin maksimum genişliğini sınırlandırmak en iyi yöntemdir.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Metni okuma için optimize et
Klasik okunabilirlik teorisi, ideal bir sütunun her satıra 70 ila 80 karakter (İngilizcede yaklaşık 8 ila 10 kelime) içermesi gerektiğini önerir. Bu nedenle, bir metin blokunun genişliği yaklaşık 10 kelimeyi aştığında bir ayrılma noktası eklemeyi düşünün.
Yukarıdaki blog yayını örneğini daha ayrıntılı bir şekilde inceleyelim.
Daha küçük ekranlarda 1em adresindeki Roboto yazı tipi, her satıra 10 kelime verecek şekilde mükemmel bir şekilde çalışır ancak büyük ekranlarda bir ayrılma noktası gerekir.
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 gizlemekten kaçının
Ekran boyutuna bağlı olarak gizlenecek veya gösterilecek içeriği seçerken dikkatli olun. İçeriği yalnızca ekrana sığdıramayacağınız için gizlemeyin. Ekran boyutu, kullanıcının ne isteyebileceğini kesin bir şekilde göstermez. Örneğin, polen sayımının hava durumu tahmininden çıkarılması, baharda dışarı çıkıp çıkmayacaklarına karar vermek için bilgilere ihtiyaç duyan alerji hastaları için ciddi bir sorun olabilir.
Chrome Geliştirici Araçları'nda medya sorgusu kesme noktalarını görüntüleme
Medya sorgusu ayrılma noktalarınızı ayarladıktan sonra sitenizin bunlarla nasıl göründüğünü görmek istersiniz. Kesme noktalarını tetiklemek için tarayıcı pencerenizi yeniden boyutlandırabilirsiniz, ancak Chrome Geliştirici Araçları, bir sayfanın farklı kesme noktalarında nasıl göründüğünü kolayca görmenizi sağlayan yerleşik bir özelliğe sahiptir.
Sayfanızı farklı ayrılma noktaları altında görüntülemek için:
Geliştirici Araçları'nı açın ve ardından Cihaz Modu'nu etkinleştirin. Bu düğme, varsayılan olarak duyarlı modda açılır.
Medya sorgularınızı görmek için Cihaz Modu menüsünü açın ve ayrılma noktalarınızı sayfanızın üzerinde renkli çubuklar olarak görüntülemek için Medya sorgularını göster'i seçin.
Medya sorgusu etkinken sayfanızı görüntülemek için çubuklardan birini tıklayın. Medya sorgusunun tanımına gitmek için bir çubuğu sağ tıklayın.