Görüntülendikleri cihazın ihtiyaçlarına ve özelliklerine uygun siteler oluşturma.
Web'de sörf yapmak için mobil cihazların kullanımı astronomik bir hızda artmaya devam etmektedir. Bu cihazlar genellikle görüntü boyutuyla sınırlıdır ve içeriğin ekrana nasıl yerleştirileceğine dair farklı bir yaklaşım gerektirir.
Başlangıçta A List Apart'ta Ethan Marcotte tarafından tanımlanan duyarlı web tasarımı, kullanıcıların ve kullandıkları cihazların ihtiyaçlarına cevap verir. Düzen, cihazın boyutuna ve özelliklerine göre değişir. Örneğin, bir telefonda kullanıcılar içeriği tek sütunlu görünümde görürken tablette aynı içerik iki sütunda görüntülenebilir.
Telefonlar, "fabletler", tabletler, masaüstü bilgisayarlar, oyun konsolları, TV'ler, hatta giyilebilir cihazlarda çok sayıda farklı ekran boyutu bulunur. Ekran boyutları sürekli değişmektedir. Bu nedenle, sitenizin bugün veya gelecekte her ekran boyutuna uyum sağlayabilmesi önemlidir. Ayrıca, cihazların etkileşimde bulunduğu farklı özellikleri vardır. Örneğin, ziyaretçilerinizden bazıları dokunmatik ekran kullanıyordur. 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 olmalıdır. Meta görüntü alanı etiketi, tarayıcıya, sayfanın boyutlarını ve ölçeklemesini nasıl kontrol edeceğiyle ilgili talimatlar verir.
Mobil tarayıcılar, en iyi deneyimi sunmak için sayfayı masaüstü ekran genişliğinde oluşturur (ancak genellikle yaklaşık 980px olur), ardından bu değer tüm cihazlarda değişir ve ardından yazı tipi boyutlarını büyüterek ve içeriği ekrana sığacak şekilde ölçeklendirerek içeriğin daha iyi görünmesini sağlamaya çalışırlar.
Bu durum, yazı tipi boyutlarının kullanıcılara tutarsız görünebileceği ve içeriği görmek ve içerikle etkileşimde bulunmak için iki kez dokunmak veya yakınlaştırmak için parmaklarıyla sıkıştırma hareketi yapmak zorunda kalmaları anlamına gelir.
<!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ğerini kullanmak, sayfaya ekranın genişliğini cihazdan bağımsız piksellerle eşleştirmesi talimatını verir. Cihazdan (veya yoğunluktan) bağımsız bir piksel, tek bir pikselin temsilidir ve yüksek yoğunluklu ekranda birçok fiziksel pikselden oluşabilir. 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üzenleme yerine yakınlaştırmayı sağlar. initial-scale=1 değerini eklemek, cihaz yönünden bağımsız olarak tarayıcılara CSS pikselleri ve cihazdan bağımsız pikseller arasında 1:1 bir ilişki kurma talimatı verir ve sayfanın tam yatay genişlikten yararlanmasını sağlar.
width veya initial-scale ile <meta name="viewport"> etiketi yok
Lighthouse denetimi, HTML dokümanlarınızın görüntü alanı meta etiketini doğru bir şekilde kullandığından emin olma işlemini otomatikleştirmenize yardımcı olabilir.
Erişilebilir bir görüntü alanı sağlayın
Bir 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ırakarak erişilebilirlik sorunlarına yol açabilir. 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. Sayfanın tamamını görmek için sayfayı yatay olarak kaydırmaya veya uzaklaştırmaya zorlamak kötü bir kullanıcı deneyimine neden olur.
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 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 şekilde boyutlandırılmadı Lighthouse denetimi, taşan içeriği algılama işlemini otomatikleştirmenize yardımcı olabilir.
Resimler
Bir resmin sabit boyutları vardır ve görüntü alanından daha büyükse 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 küçük olması durumunda resmin bulunduğu alana sığacak şekilde küçülmesine neden olur.
Bununla birlikte, width yerine max-width öğesinin 100% olması nedeniyle resim, doğal boyutundan daha büyük olarak genişletilmez.
Kaydırma çubuğuna neden olan resimlerle ilgili hiçbir sorun yaşamamanız için aşağıdakileri stil sayfanıza eklemeniz genellikle güvenlidir.
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 büyük ölçüde farklılık gösterdiğinden (örneğin, telefonlar ve tabletler ve hatta farklı telefonlar arasında) içerik, iyi bir şekilde oluşturulması için belirli bir görüntü alanı genişliğine dayalı olmamalıdır.
Geçmişte, bu gerekli ayar öğeleri yüzde cinsinden düzen oluşturmak için kullanılırdı. Aşağıdaki örnekte, piksel kullanılarak boyutlandırılan kayan öğelerin bulunduğu iki sütunlu bir düzen görebilirsiniz. Görüntü alanı, sütunların toplam genişliğinden küçülürse, içeriği görmek 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üzdesinde kalır. Bu, sütunların bir kaydırma çubuğu oluşturmak yerine daraldığı anlamına gelir.
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 öğeniz olduğunda ve bunların bir satıra veya satırlara rahatça sığmasını istediğiniz durumlarda idealdir. Küçük öğeler daha az, büyük öğeler ise daha fazla yer kaplar.
.items {
display: flex;
justify-content: space-between;
}
Duyarlı tasarımda, öğeleri tek bir satır olarak 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.
Kayan öğe içeren önceki örneği 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, istediğiniz kadar öğeye sahip 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, her satıra sığabilecek kadar çok kartımız vardır ve en az 200px olmalıdır.
CSS Izgara Düzeni hakkında daha fazla bilgi edinin.
Çok sütunlu düzen
Bazı düzen türleri için Çok Sütunlu Düzen (Çoklu Sütun) 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ını kullanma
Bazen belirli bir ekran boyutunu desteklemek için düzeninizde yukarıda gösterilen tekniklerin izin verdiğinden daha kapsamlı değişiklikler yapmanız gerekebilir. Medya sorguları tam da bu noktada yararlı hale gelir.
Medya sorguları, CSS stillerine uygulanabilecek basit filtrelerdir. İçeriği oluşturan cihazın türüne veya bu cihazın özelliklerine (ör. genişlik, yükseklik, yön, fareyle üzerine gelme özelliği ve cihazın dokunmatik ekran olarak kullanılıp kullanılmadığı) göre stilleri değiştirmeyi kolaylaştırırlar.
Yazdırmada farklı stiller sağlamak için bir çıkış türünü hedeflemeniz gerekir. Böylece, aşağıdaki gibi baskı stilleri içeren 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 */
}
Duyarlı web tasarımı söz konusu olduğunda, genellikle daha küçük ekranlara yönelik farklı bir düzen sağlamak amacıyla veya ziyaretçimizin dokunmatik ekran kullandığını tespit ettiğimizde 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 bu ikisi arasındaki herhangi bir yere uygulandığı, duyarlı bir deneyim oluşturmamızı sağlar. Dolayısıyla, 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 ayrıntılı bilgi için MDN'de genişlik, yükseklik, yön ve en boy oranı konularına bakın.
Cihaz kapasitesine dayalı 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 daha yeni eklemelerle, cihazla etkileşim kurmak için kullanılan işaretçi türü ve kullanıcının öğ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, 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 bulunmanın birincil yolu olmasa bile fareyle üzerine gelme veya o tür işaretçileri kullanma yeteneğini test eder.
Bunları kullanırken çok dikkatli olun.
Dokunmatik ekranı kullanan bir kullanıcıyı fare kullanmaya zorlamak hiç hoş bir davranış değildir.
Ancak, any-hover ve any-pointer, kullanıcının ne tür bir cihaza sahip olduğunu belirlemek açısından faydalı olabilir.
Örneğin, dokunmatik ekran ve dokunmatik yüzeye sahip bir dizüstü bilgisayar, fareyle üzerine gelme kabiliyetinin yanı sıra genel ve hassas işaretçilerle de eşleşmelidir.
Ayrılma noktaları nasıl seçilir?
Cihaz sınıflarına göre kesme noktaları tanımlamayın. Ayrılma noktalarının günümüzde kullanılmakta olan belirli cihazlara, ürünlere, marka adlarına veya işletim sistemlerine göre tanımlanması bakım kabuslarına neden olabilir. 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 öncelikle küçük bir ekran boyutuna sığacak şekilde tasarlayın, ardından bir ayrılma noktası gerekli hale gelene kadar ekranı genişletin. Bu, ayırma noktalarını içeriğe göre optimize etmenizi ve mümkün olan en az sayıda ayrılma noktasını korumanızı sağlar.
En başta gördüğümüz örneği üzerinde çalışalı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 beyaz alan kalana kadar
tarayıcıyı yeniden boyutlandırın. Bu durumda tahmin eskisi kadar iyi görünmez.
Bu karar biraz öznel olsa da 600px değerinin üzerindeki değerler kesinlikle çok geniş kapsamlıdır.
600px noktasına bir ayrılma noktası eklemek için bileşen için CSS'nizin sonunda iki medya sorgusu oluşturun. Biri tarayıcı 600px ve daha eski olduğunda kullanılacak, diğeri ise 600px değerinden geniş olduğunda kullanılacak.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Son olarak, CSS'yi yeniden düzenleyin. 600px öğesinin max-width öğesi için medya sorgusunun içine
yalnızca küçük ekranlar için olan CSS'yi ekleyin. 601px öğesinin min-width değeri için medya sorgusunun içinde, daha büyük ekranlar için CSS ekleyin.
Gerektiğinde küçük kesme noktaları 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 faydalıdır. Örneğin, ana 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 yararlı 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ı ayırabiliriz. Böylece, sıcaklıklar birbirinin üzerinde değil, aynı çizgide olur.
Şimdi 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 tahmin panelinin maksimum genişliğini sınırlandırmak en iyisidir. Böylece, ekran genişliğinin tamamını kaplamaz.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Metni okuma için optimize et
Klasik okunabilirlik teorisi, ideal bir sütunun satır başına 70 ila 80 karakter (İngilizcede yaklaşık 8-10 kelime) içermesi gerektiğini öne sürer. Bu nedenle, bir metin bloğunun 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ı inceleyelim.
Daha küçük ekranlarda 1em konumundaki Roboto yazı tipi, her satıra 10 kelime verecek şekilde sorunsuz çalışır ancak büyük ekranlarda 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 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 isteyebileceğini kesin bir şekilde göstermez. Örneğin, polen sayısının hava tahmininden çıkarılması, baharda alerjiden muzdarip olan ve dışarı çıkıp çıkmayacaklarını belirlemek için bilgiye ihtiyaç duyanlar için ciddi bir sorun olabilir.
Chrome Geliştirici Araçları'nda medya sorgusu kesme noktalarını görüntüle
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 ayar varsayılan olarak duyarlı modda açılır.
Medya sorgularınızı görmek için Cihaz Modu menüsünü açın ve kesme noktalarınızı sayfanızın üstünde renkli çubuklar olarak görüntülemek için Medya sorgularını göster'i seçin.
İlgili medya sorgusu etkin durumdayken sayfanızı görüntülemek için çubuklardan birini tıklayın. Medya sorgusunun tanımına atlamak için bir çubuğu sağ tıklayın.