Duyarlı web tasarımı, pek çok açıdan cep telefonlarına bir tepkiydi. Akıllı telefonlar ortaya çıkmadan önce, çok az kişi web sitelerinin avuç içi cihazlarda nasıl görüneceğini ve nasıl bir his olacağını ciddiye alıyordu. Yerleşik web tarayıcılarına sahip cep telefonlarının hızlı yükselişi ile bu durum değişti.
Duyarlı web tasarımı, varsayımları sorgulayan bir düşünce yapısını teşvik etti. Daha önce bir web sitesinin yalnızca masaüstü bilgisayarlarda görüntüleneceğini varsaymakla birlikte, artık aynı web sitesini telefon ve tabletler için de tasarlamak standart uygulamadır. Hatta mobil kullanım, artık web'de masaüstü kullanımını geride bıraktı.
Bu duyarlı yaklaşım, gelecekte size çok fayda sağlayacak. Web sitelerinizin günümüzde hayal bile edemediğimiz cihazlarda ve ekranlarda görüntülenmesi tamamen mümkündür. Bu düşünce yapısı, ekranlarla sınırlı değildir. Günümüzde bile içeriklerinize erişmek için ekranı olmayan cihazlar kullanılıyor. Anlamsal HTML için güçlü bir temel kullanıyorsanız sesli asistanlar web sitelerinizi kullanabilir.
Ekran dünyasında da deneysel çalışmalar var. Bugün piyasada katlanabilir ekranlı cihazlar var. Bu durum, tasarımlarınızla ilgili bazı zorlukları beraberinde getirir.
Çift ekranlar
Katlanabilir cihaz kullanıcıları, web tarayıcılarının ekranlardan yalnızca birini kaplamasını veya her iki ekrana birden uzanmasını tercih edebilir. Tarayıcı her iki ekranı da kapsıyorsa, görüntülenen web sitesi iki ekran arasındaki menteşeye göre bölünür. Harika görünmüyor.
Görünüm segmentleri
Web sitenizin çift ekranlı bir cihazda görüntülenip görüntülenmediğini algılamak için tasarlanmış deneysel bir medya özelliği vardır. Medya özelliğinin önerilen adı viewport-segments. İki türü vardır: horizontal-viewport-segments ve vertical-viewport-segments.
horizontal-viewport-segments medya özelliği 2, vertical-viewport-segments ise 1 değeri bildiriyorsa cihazdaki menteşenin yukarıdan aşağıya doğru çalıştığı ve içeriğiniz yan yana iki panele bölünür.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
// Styles for side-by-side screens.
}
vertical-viewport-segments medya özelliği 2, horizontal-viewport-segments ise 1 değeri bildiriyorsa menteşe bir yandan diğer yana çalışarak içeriğinizi iki panele böler (biri üst tarafta olacak şekilde).
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
// Styles for stacked screens.
}
Hem vertical-viewport-segments hem de horizontal-viewport-segments için 1 değeri bildirilirse cihazda birden fazla ekran olsa bile web sitesi yalnızca bir ekranda görüntülenir. Bu, herhangi bir medya sorgusu kullanmamakla eşdeğerdir.
Ortam değişkenleri
viewport-segments medya özelliği tek başına bu rahatsız edici noktayı tasarlamanıza yardımcı olmaz. Menteşenin boyutunu bilmenin bir yolunu bulmanız gerekir. Ortam değişkenleri bu noktada yardımcı olabilir.
CSS'deki ortam değişkenleri, stillerinizde garip cihaz girişlerini hesaba katmanıza olanak tanır. Örneğin, safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom ve safe-area-inset-left ortam değerlerini kullanarak iPhone X'te "çentik"i temel alarak tasarım yapabilirsiniz. Bu anahtar kelimeler bir env() işlevi içinde sarmalanmış.
body {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
Ortam değişkenleri özel mülkler gibi çalışır. Bu, ortam değişkeninin mevcut olmaması durumunda bir yedek seçenek iletebileceğiniz anlamına gelir.
body {
padding-top: env(safe-area-inset-top, 1em);
padding-right: env(safe-area-inset-right, 1em);
padding-bottom: env(safe-area-inset-bottom, 1em);
padding-left: env(safe-area-inset-left, 1em);
}
Bu ortam değişkenlerinin iPhone X'te çalışması için viewport bilgilerini belirten meta öğesini güncelleyin:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Artık sayfa düzeniniz tüm görüntü alanını kaplar ve belgeye cihaz tarafından sağlanan set değerleriyle güvenli bir şekilde doldurulur.
Katlanabilir ekranlar için altı yeni ortam değişkeni öneriliyor: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right.
Aşağıda, biri diğerinden geniş olan iki sütunlu bir düzen örneği verilmiştir.
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Dikey menteşesi olan çift ekranlarda, ilk sütunu ilk ekranın genişliği, ikinci sütunu ise ikinci ekranın genişliği olacak şekilde ayarlayın.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
main article {
flex: 1 1 env(viewport-segment-width 0 0);
}
main aside {
flex: 1;
}
}
Çift ekranı fırsat olarak değerlendirin. Belki bir ekran, kaydırılabilir metin içeriğini görüntülemek için kullanılırken diğeri, resim veya harita gibi sabit bir öğeyi gösterir.
Gelecek
Katlanabilir ekranlar artık büyük bir cihaz mı olacak? Kim bilir? Mobil cihazların ne kadar popüler olacağını hiç kimse tahmin edemezdi. Dolayısıyla gelecekteki form faktörleri konusunda açık fikirli olmakta fayda vardır.
Her şeyden önemlisi, web sitelerinizin gelecekte karşılaşacakları duruma yanıt verebilmesini sağlamak önemlidir. Duyarlı tasarımın size sunduğu şey budur: Yalnızca bir dizi pratik teknik değil, aynı zamanda yarının web'ini oluşturmanıza yardımcı olacak bir düşünce yapısı da edinirsiniz.
Öğrendiklerinizi sınayın
Ekran yapılandırmalarıyla ilgili bilginizi test edin
Hangi medya sorgusu, katlanabilir cihazları bölünmüş yatay modda hedefler?
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)Ortam değişkenleri nedir? Ör. env(safe-area-inset-top)