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ımı astronomik bir hızda artmaya devam etmektedir. Bu cihazlar genellikle görüntü boyutuyla sınırlıdır ve içeriğin ekranda nasıl yerleştirildiği konusunda farklı bir yaklaşım gerektirir.
Aslen A List Apart'ta Ethan Marcotte tarafından tanımlanan duyarlı web tasarımı, kullanıcıların ihtiyaçlarına ve kullandıkları cihazlara 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 tablet aynı içeriği iki sütunda gösterebilir.
Telefonlar, "fabletler", tabletler, masaüstü bilgisayarlar, oyun konsolları, TV'ler ve hatta giyilebilir cihazlarda çok sayıda farklı ekran boyutu vardır. Ekran boyutları sürekli değişmektedir. Bu nedenle, sitenizin bugün veya gelecekte her ekran boyutuna uyum sağlaması önemlidir. Ayrıca, cihazların etkileşimde bulunduğu farklı özellikleri vardır. Ö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ünüm etiketi olmalıdır. 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 genellikle yaklaşık 980px boyutundadır, ancak bu değer tüm cihazlarda değişir) ve ardından yazı tipi boyutlarını büyütüp 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 dokunmak veya yakınlaştırmak için parmaklarıyla sıkıştırma hareketi yapmak zorunda kalabilir.
<!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 piksel içerebilir. Bu sayede sayfa, ister küçük bir cep telefonunda ister büyük bir masaüstü monitörde oluşturulmuş olsun, içeriği farklı ekran boyutlarına uyacak şekilde yeniden düzenleyebilir.
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ırma yapar. initial-scale=1 değerini eklemek, cihaz yönü ne olursa olsun tarayıcılara CSS pikselleri ile cihazdan bağımsız pikseller arasında bir 1:1 ilişki oluşturma talimatı verir ve sayfanın tam yatay genişliği kullanmasına olanak 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 bir ş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
Bunlar ayarlandığında, kullanıcının görüntü alanını yakınlaştırmasını devre dışı bırakarak 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 olarak değil dikey olarak kaydırmaya alışkındır. Kullanıcıyı sayfanın tamamını görmek için sayfayı yatay olarak kaydırmaya veya uzaklaştırmaya zorlamak kötü bir kullanıcı deneyimine yol açar.
Meta görünüm etiketine sahip bir mobil site geliştirirken yanlışlıkla, belirtilen görünüme 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ılmadı Lighthouse denetimi, taşan içeriği algılama işlemini otomatikleştirmenize yardımcı olabilir.
Resimler
Bir resmin boyutları sabittir ve görüntü alanından daha büyükse kaydırma çubuğuna neden olur.
Bu sorunla başa çıkmanın yaygın bir yolu, tüm görsellere max-width 100% vermektir.
Bu, görüntü alanı boyutu resimden küçük olduğunda resmin bulunduğu alana sığması için küçülmesine neden olur.
Bununla birlikte, width yerine max-width 100% olduğu için 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 eklemek 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 resim yüklenmeden önce resim için yer ayırmak üzere bu bilgileri kullanmasıdır. Bu, içerik yüklenirken düzen kaymalarının önlenmesine yardımcı olur.
Düzen
CSS piksellerindeki ekran boyutları ve genişliği cihazlar arasında büyük farklılık gösterdiğinden (örneğin, telefonlar ve tabletler ve hatta farklı telefonlar arasında) içerik, iyi oluşturulabilmesi 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üçük hale geldiğinde, 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üzdesini korur. 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 grup öğeniz varsa ve bunların bir satıra veya satırlara rahat bir şekilde sığmasını ve daha küçük öğelerin daha az yer, büyük öğelerin daha fazla yer kaplamasını istediğinizde idealdir.
.items {
display: flex;
justify-content: space-between;
}
Duyarlı bir tasarımda, öğeleri tek bir satır olarak veya kullanılabilir alan azaldıkça birden fazla 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 doğrudan oluşturulmasına olanak tanır.
Kayan reklam örneğini göz önünde bulundurursak, 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 öğenin sığacağı normal ızgara düzenleri oluşturmak için de kullanılabilir.
Ekran boyutu küçüldikçe kullanılabilir parçaların sayısı da azalır.
Aşağıdaki demoda, her satıra sığabilecek kadar çok sayıda kartımız vardır ve minimum boyut 200px olmalıdır.
CSS Izgara Düzeni hakkında daha fazla bilgi edinin.
Çok sütunlu düzen
Bazı düzen türlerinde, column-width özelliğiyle duyarlı sayıda sütun oluşturabilen Çok Sütunlu Düzen (Çoklu Sütun) özelliğini kullanabilirsiniz.
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 izin verdiğinden daha kapsamlı değişiklikler yapmanız gerekir. Medya sorguları bu noktada yararlı hale gelir.
Medya sorguları, CSS stillerine uygulanabilecek basit filtrelerdir. Bu reklamlar, içeriği oluşturan cihazın türüne veya 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ığı) bağlı olarak stillerin değiştirilmesini kolaylaştırır.
Yazdırma için farklı stiller sağlamak üzere 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 baskı stillerini ana stil sayfanıza ekleyebilirsiniz:
@media print {
/* print styles go here */
}
Esnek web tasarımı söz konusu olduğunda, daha küçük ekranlara farklı bir düzen sunmak 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. Dolayısıyla, burada algıladığımız özellik ekran boyutudur ve aşağıdaki öğeleri 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ı destek bilgileri hakkında daha fazla ayrıntı için MDN'de width, height, orientation ve en boy oranı bölümlerine bakın.
Cihaz kapasitesine göre 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 cihazda 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 gelemediği gibi özellikleri test edebiliyoruz.
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 destek sunar. 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 fareyle üzerine gelme yeteneğinin olup olmadığını veya bu tür işaretçileri, cihazıyla etkileşimde bulunmak için birincil yol olmasa bile kullanıp kullanmadığını test eder.
Bunları kullanırken çok dikkatli olun.
Dokunmatik ekranını kullanırken bir kullanıcıyı fareye geçmeye zorlamak hiç hoş değil!
Ancak, kullanıcının ne tür bir cihaza sahip olduğunu anlamak istiyorsanız any-hover ve any-pointer verileri faydalı olabilir.
Örneğin, dokunmatik ekran ve dokunmatik yüzeye sahip bir dizüstü bilgisayar, fareyle üzerine gelme seçeneğinin yanı sıra genel ve hassas işaretçilerle de eşleşmelidir.
Kesme noktalarını seçme
Cihaz sınıflarına göre ayrılma noktaları tanımlamayın. Ayrılma noktalarının şu anda kullanımda olan belirli cihazlara, ürünlere, marka adlarına veya işletim sistemlerine göre tanımlanması 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üçükten 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, daha sonra bir ayrılma noktası gerekene kadar ekranı genişletin. Böylece, ayrılma noktalarını içeriğe göre optimize edebilir ve mümkün olan en az sayıda ayrılma noktasını koruyabilirsiniz.
Başta gördüğümüz örneği inceleyelim: hava durumu tahmini. İlk adım, tahminin küçük bir ekranda iyi görünmesini sağlamaktır.
Daha sonra, öğeler arasında çok fazla boşluk oluşuncaya kadar
tarayıcıyı yeniden boyutlandırın ve tahmin iyi sonuç vermez.
Bu karar biraz öznel olmakla birlikte 600px değerinin üzerindeki değerler kesinlikle çok geniştir.
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 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 ekranlara yönelik CSS'yi ekleyin. 601px öğesinin min-width 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 faydalı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, en yüksek ve en düşük sıcaklıkları ayırarak bu sıcaklıkları birbirinin üzerinde değil, aynı çizgide bulabiliriz.
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, ekran genişliğini tamamen kullanmaması için büyük ekranlarda tahmin panelinin maksimum genişliğini sınırlamak en iyisidir.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Metni okumak için optimize etme
Klasik okunabilirlik teorisi, ideal bir sütunun her satırda 70 ila 80 karakter (İngilizcede yaklaşık 8 ila 10 kelime) içermesi gerektiğini öne sürer. Dolayısıyla, 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ı bir şekilde inceleyelim.
Daha küçük ekranlarda 1em konumundaki Roboto yazı tipi, her satıra 10 kelime verecek şekilde mükemmel bir şekilde çalışır ancak daha 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 hangi içeriğin gizleneceğini veya gösterileceğini seçerken dikkatli olun. Bir içeriği ekrana sığdıramadığınız için yalnızca gizlemeyin. Ekran boyutu, kullanıcının ne isteyebileceğini kesin bir şekilde göstermez. Örneğin, hava durumu tahmininden polen sayısının çıkarılması, baharda dışarı çıkıp çıkmayacağını belirlemek için bilgiye ihtiyaç duyan alerji hastaları için ciddi bir sorun olabilir.
Chrome Geliştirici Araçları'nda medya sorgusu kesme noktalarını göster
Medya sorgusu kesme noktalarınızı ayarladıktan sonra, sitenizin bunlarla nasıl göründüğüne bakmak istersiniz. Kesme noktalarını tetiklemek için tarayıcı pencerenizi yeniden boyutlandırabilirsiniz ancak Chrome Geliştirici Araçları, bir sayfanın farklı ayrılma 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:
DevTools'u 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ı sayfanızın üzerinde renkli çubuklar olarak görüntülemek için Medya sorgularını göster'i seçin.
Sayfanızı söz konusu medya sorgusu etkin durumdayken 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.