Responsive – Duyarlı Tasarım

Web tasarımının ilk günlerinde, sayfalar belirli bir ekran boyutunu hedefleyecek şekilde oluşturulurdu. Kullanıcı tasarımcının beklediğinden daha büyük veya daha küçük bir ekrana sahipse, istenmeyen kaydırma çubuklarından, aşırı uzun satır uzunluklarına ve alanın kötü kullanımına kadar çeşitli sonuçlar ortaya çıkıyordu. Daha farklı ekran boyutları kullanılabilir hale geldikçe, web sayfalarının düzenlerini ve görünümlerini farklı ekran genişliklerine, çözünürlüklerine vb. uyacak şekilde değiştirmelerine olanak tanıyan bir dizi uygulama olan responsive web design (RWD) kavramı ortaya çıktı. Bu, çok cihazlı bir web için tasarım yapma şeklimizi değiştiren bir fikirdi ve bu makalede, bu konuda uzmanlaşmak için bilmeniz gereken ana teknikleri anlamanıza yardımcı olacağız.

Tarihi web sitesi düzenleri

HTML temelde duyarlı bir yapıya sahiptir. Metin içeren bir web sayfası oluşturur ve tarayıcı penceresini yeniden boyutlandırırsanız veya sayfayı daha küçük ekranlı bir cihazda görüntülerseniz, tarayıcı metni pencereye sığacak şekilde otomatik olarak yeniden akıtacaktır.

Buna akışkan düzen denir.

Ancak bu düzenle ilgili sorun, sitenin daha küçük ekranlarda (aşağıda görüldüğü gibi) ezilmiş görünmesi ve daha büyük ekranlarda okunamayacak kadar uzun satır uzunluklarına sahip olmasıdır.

Not: Bu basit akışkan düzenine bakın: örnek, kaynak kodu. Örneği görüntülerken, farklı boyutlarda nasıl göründüğünü görmek için tarayıcı pencerenizi içeri ve dışarı sürükleyin.

Bunun alternatifi, öğeleri piksel cinsinden sabit bir boyuta ayarlayan sabit genişlikli bir düzen oluşturmaktır.

Bu yaklaşımla ilgili sorun, site genişliğinden daha küçük ekranlarda yatay bir kaydırma çubuğu (aşağıda görüldüğü gibi) ve daha büyük ekranlarda tasarımın kenarlarında çok fazla beyaz alan elde etmenizdir.

Not: Bu basit sabit genişlikli düzene bakın: örnek, kaynak kod. Yine, tarayıcı pencere boyutunu değiştirdiğinizde sonucu gözlemleyin.

Mobil web ilk özellikli telefonlarla birlikte gerçeğe dönüşmeye başladığında, mobili benimsemek isteyen şirketler genellikle sitelerinin farklı bir URL’ye (genellikle m.example.com veya example.mobi gibi bir şey) sahip özel bir mobil sürümünü oluştururlardı. Bu da sitenin iki ayrı versiyonunun geliştirilmesi ve güncel tutulması gerektiği anlamına geliyordu.

Note: The screenshots above are taken using the Responsive Design Mode in Firefox DevTools.

As the mobile web started to become a reality with the first feature phones, companies who wished to embrace mobile would generally create a special mobile version of their site, with a different URL (often something like m.example.com, or example.mobi). This meant that two separate versions of the site had to be developed and kept up-to-date.

Ayrıca, bu mobil siteler genellikle çok kısaltılmış bir deneyim sunuyordu. Mobil cihazlar daha güçlü hale geldikçe ve web sitelerinin tamamını görüntüleyebildikçe, bu durum kendilerini sitenin mobil versiyonunda sıkışıp kalmış bulan ve sitenin tam özellikli masaüstü versiyonunda olduğunu bildikleri bilgilere erişemeyen mobil kullanıcılar için sinir bozucuydu.

Duyarlı tasarımdan önce esnek düzen

Web sitesi oluşturmaya yönelik akışkan veya sabit genişlikli yöntemlerin dezavantajlarını çözmeye çalışmak için bir dizi yaklaşım geliştirildi. 2004 yılında Cameron Adams, farklı ekran çözünürlüklerine uyum sağlayabilen bir tasarım oluşturma yöntemini açıklayan Çözünürlüğe bağlı düzen başlıklı bir yazı yazdı. Bu yaklaşım, JavaScript’in ekran çözünürlüğünü algılamasını ve doğru CSS’yi yüklemesini gerektiriyordu.

Zoe Mickley Gillenwater, ekranı doldurmak veya tamamen sabit boyutta olmak arasında mutlu bir orta yol bulmaya çalışarak esnek sitelerin oluşturulabileceği farklı yolları tanımlama ve resmileştirme çalışmalarında etkili oldu.

Responsive design

Duyarlı tasarım terimi 2010 yılında Ethan Marcotte tarafından ortaya atılmış ve üç tekniğin bir arada kullanılmasını tanımlamıştır.

• Bunlardan ilki, Gillenwater tarafından halihazırda araştırılmakta olan ve Marcotte’un 2009 yılında A List Apart’ta yayınlanan Fluid Grids adlı makalesinde okunabilecek olan akışkan ızgaralar fikriydi.
• İkinci teknik ise akışkan görüntüler fikriydi. Çok basit bir teknik olan max-width özelliğinin %100 olarak ayarlanmasıyla, görseller, içerdikleri sütun görselin içsel boyutundan daha dar hale geldiğinde küçülüyor, ancak asla büyümüyordu. Bu, bir görüntünün esnek boyutlu bir sütuna taşmak yerine sığacak şekilde küçülmesini, ancak sütun görüntüden daha geniş hale gelirse daha da büyümemesini ve pikselleşmemesini sağlar.
• Üçüncü anahtar bileşen medya sorgusuydu. Medya Sorguları, Cameron Adams’ın daha önce JavaScript kullanarak keşfettiği düzen değiştirme türünü yalnızca CSS kullanarak mümkün kılıyordu. Tüm ekran boyutları için tek bir düzene sahip olmak yerine düzen değiştirilebiliyordu. Kenar çubukları daha küçük ekran için yeniden konumlandırılabiliyor ya da alternatif navigasyon görüntülenebiliyordu.

Duyarlı web tasarımının ayrı bir teknoloji olmadığını anlamak önemli – web tasarımına yönelik bir yaklaşımı veya içeriği görüntülemek için kullanılan cihaza yanıt verebilen bir düzen oluşturmak için kullanılan bir dizi en iyi uygulamayı tanımlamak için kullanılan bir terim. Marcotte’un orijinal araştırmasında bu, esnek ızgaralar (float kullanarak) ve medya sorguları anlamına geliyordu. Ancak bu makalenin yazılmasından bu yana geçen yaklaşık 10 yıl içinde duyarlı çalışmak varsayılan hale geldi. Modern CSS düzen yöntemleri doğası gereği duyarlı ve duyarlı siteler tasarlamayı kolaylaştırmak için web platformunda yerleşik yeni şeyler var.

Bu makalenin geri kalanı, duyarlı bir site oluştururken kullanmak isteyebileceğiniz çeşitli web platformu özelliklerine işaret edecektir.

Medya sorgusu

Duyarlı tasarım ancak medya sorgusu sayesinde ortaya çıkabildi. Medya Sorguları Seviye 3 spesifikasyonu 2009 yılında Aday Öneri haline geldi, yani tarayıcılarda uygulanmaya hazır olduğu kabul edildi. Medya Sorguları bir dizi test yapmamıza (örneğin kullanıcının ekranının belirli bir genişlikten veya belirli bir çözünürlükten daha büyük olup olmadığı) ve sayfayı kullanıcının ihtiyaçlarına uygun şekilde biçimlendirmek için CSS’yi seçerek uygulamamıza olanak tanır.

Örneğin, aşağıdaki medya sorgusu, geçerli web sayfasının ekran medyası olarak görüntülenip görüntülenmediğini (dolayısıyla basılı bir belge olmadığını) ve görüntü alanının en az 800 piksel genişliğinde olup olmadığını test eder. .container seçicisi için CSS yalnızca bu iki şey doğruysa uygulanacaktır.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

Bir stil sayfasına birden fazla medya sorgusu ekleyebilir, düzeninizin tamamını veya bir kısmını çeşitli ekran boyutlarına en iyi şekilde uyacak biçimde değiştirebilirsiniz. Bir medya sorgusunun eklendiği ve mizanpajın değiştirildiği noktalar kesme noktaları olarak bilinir.

Medya Sorgularını kullanırken yaygın bir yaklaşım, dar ekranlı cihazlar (örneğin cep telefonları) için basit bir tek sütunlu düzen oluşturmak, ardından daha büyük ekranları kontrol etmek ve bunu işlemek için yeterli ekran genişliğine sahip olduğunuzu bildiğinizde çok sütunlu bir düzen uygulamaktır. Bu genellikle mobil ilk tasarım olarak tanımlanır.

Esnek ızgaralar

Duyarlı siteler sadece kırılma noktaları arasında düzenlerini değiştirmekle kalmaz, esnek ızgaralar üzerine inşa edilirler. Esnek bir ızgara, mümkün olan her cihaz boyutunu hedeflemenize ve bunun için piksel mükemmelliğinde bir düzen oluşturmanıza gerek olmadığı anlamına gelir. Bu yaklaşım, var olan çok sayıda farklı boyuttaki cihaz ve en azından masaüstünde insanların tarayıcı pencerelerini her zaman büyütmediği gerçeği göz önüne alındığında imkansız olacaktır.

Esnek bir ızgara kullanarak, yalnızca bir kesme noktası eklemeniz ve içeriğin kötü görünmeye başladığı noktada tasarımı değiştirmeniz gerekir. Örneğin, ekran boyutu büyüdükçe satır uzunlukları okunamayacak kadar uzarsa veya bir kutu daraldıkça her satırda iki kelime olacak şekilde sıkışırsa.

Duyarlı tasarımın ilk günlerinde, düzen gerçekleştirmek için tek seçeneğimiz float kullanmaktı. Esnek float düzenleri, her bir öğeye yüzdelik bir genişlik vererek ve düzen genelinde toplamların %100’den fazla olmamasını sağlayarak elde ediliyordu. Marcotte, akışkan ızgaralarla ilgili orijinal yazısında, pikseller kullanılarak tasarlanmış bir düzeni alıp yüzdelere dönüştürmek için bir formül detaylandırmıştı.

hedef / içerik = sonuç

Örneğin, hedef sütun boyutumuz 60 pikselse ve içinde bulunduğu ortam (veya kapsayıcı) 980 pikselse, ondalık noktayı iki basamak sağa taşıdıktan sonra CSS’mizde kullanabileceğimiz bir değer elde etmek için 60’ı 980’e böleriz.

.col {
  width: 6.12%; /* 60 / 980 = 0.0612 */
}

Bu yaklaşım bugün web’de birçok yerde bulunmaktadır ve burada Eski düzen yöntemleri makalemizin düzen bölümünde belgelenmiştir. Çalışmalarınızda bu yaklaşımı kullanan web sitelerine rastlamanız muhtemeldir, bu nedenle float tabanlı esnek ızgara kullanarak modern bir site oluşturmayacak olsanız bile bunu anlamaya değer.

Aşağıdaki örnekte Medya Sorguları ve esnek bir ızgara kullanılarak basit bir duyarlı tasarım gösterilmektedir. Dar ekranlarda düzen, kutuları üst üste yığılmış olarak görüntüler:

Daha geniş ekranlarda iki sütuna geçerler:

Modern düzen teknolojileri

Çoklu sütun düzeni, Flexbox ve Grid gibi modern düzen yöntemleri varsayılan olarak duyarlıdır. Hepsi de esnek bir ızgara oluşturmaya çalıştığınızı varsayar ve bunu yapmak için size daha kolay yollar sunar.

Multicol

Bu düzen yöntemlerinin en eskisi multicol’dur – bir sütun sayısı belirttiğinizde, bu, içeriğinizin kaç sütuna bölünmesini istediğinizi gösterir. Tarayıcı daha sonra ekran boyutuna göre değişecek olan bu sütunların boyutunu hesaplar.

.container {
  column-count: 3;
}

Bunun yerine bir sütun genişliği belirtirseniz, minimum bir genişlik belirtmiş olursunuz. Tarayıcı bu genişlikte konteynere rahatça sığacak kadar sütun oluşturacak ve ardından kalan boşluğu tüm sütunlar arasında paylaştıracaktır. Bu nedenle, sütun sayısı ne kadar alan olduğuna göre değişecektir.

.container {
  column-width: 10em;
}

Flexbox

Flexbox‘ta flex öğeleri, ilk davranışları olarak kaplarındaki boşluğa göre küçülür ve öğeler arasında boşluk dağıtır. flex-grow ve flex-shrink değerlerini değiştirerek, öğelerin etraflarında daha fazla veya daha az boşlukla karşılaştıklarında nasıl davranmalarını istediğinizi belirtebilirsiniz.

Aşağıdaki örnekte flex öğelerinin her biri, Flexbox düzen konusunda açıklandığı gibi flex: 1 kısaltmasını kullanarak flex konteynerinde eşit miktarda yer kaplayacaktır: Flex öğelerinin esnek boyutlandırılması.

.container {
  display: flex;
}

.item {
  flex: 1;
}

Not: Örnek olarak, yukarıdaki basit duyarlı düzeni bu kez flexbox kullanarak yeniden oluşturduk. Sütunların boyutunu hesaplamak için artık garip yüzde değerleri kullanmamıza gerek kalmadığını görebilirsiniz: örnek, kaynak kod.

CSS grid

CSS Izgara Düzeninde fr birimi, kullanılabilir alanın ızgara parçaları arasında dağıtılmasını sağlar. Bir sonraki örnek, 1fr boyutunda üç parçalı bir ızgara konteyneri oluşturur. Bu, her biri kaptaki kullanılabilir alanın bir bölümünü alan üç sütun izi oluşturacaktır.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Not: Sütunları .wrapper üzerinde tanımlayabildiğimiz için ızgara düzeni sürümü daha da basittir. örnek, kaynak kodu.

Duyarlı görseller

Duyarlı görsellere yönelik en basit yaklaşım, Marcotte’un duyarlı tasarımla ilgili ilk makalelerinde anlatıldığı gibiydi. Temel olarak, ihtiyaç duyulabilecek en büyük boyuttaki bir görseli alır ve onu küçültürdünüz. Bu yaklaşım günümüzde hala kullanılmaktadır ve çoğu stil sayfasında bir yerlerde aşağıdaki CSS’yi bulabilirsiniz:

img {
  max-width: 100%;
}

Bu yaklaşımın bariz dezavantajları vardır. Görüntü gerçek boyutundan çok daha küçük görüntülenebilir, bu da bant genişliği israfına neden olur – bir mobil kullanıcı tarayıcı penceresinde gerçekte gördüğünün birkaç katı büyüklüğünde bir görüntü indiriyor olabilir. Ayrıca, masaüstünde olduğu gibi mobil cihazlarda da aynı görüntü en boy oranını istemeyebilirsiniz. Örneğin, mobil cihazlar için kare bir görüntüye sahip olmak, ancak aynı sahneyi masaüstünde yatay bir görüntü olarak göstermek güzel olabilir. Ya da bir görüntünün mobil cihazlarda daha küçük boyutta olduğunu kabul ederek, küçük ekran boyutunda daha kolay anlaşılabilecek tamamen farklı bir görüntü göstermek isteyebilirsiniz. Bunlar bir görüntüyü küçülterek elde edilemez.

<picture> öğesini ve <img> srcset ve sizes niteliklerini kullanan Duyarlı Görüntüler bu sorunların her ikisini de çözer. “İpuçları” (görüntünün en uygun olduğu ekran boyutunu ve çözünürlüğünü tanımlayan meta veriler) ile birlikte birden fazla boyut sağlayabilirsiniz ve tarayıcı her cihaz için en uygun görüntüyü seçerek kullanıcının kullandığı cihaza uygun bir görüntü boyutu indirmesini sağlar.

Ayrıca, farklı boyutlarda kullanılan görüntüleri art direct yapabilir, böylece farklı ekran boyutları için farklı bir kırpma veya tamamen farklı bir görüntü sağlayabilirsiniz.

HTML Öğren bölümünde Duyarlı Görseller ile ilgili ayrıntılı bir kılavuz bulabilirsiniz.

Duyarlı tipografi

Duyarlı tasarımın daha önceki çalışmalarda ele alınmayan bir unsuru da duyarlı tipografi fikriydi. Esasen bu, daha az veya daha fazla ekran alanını yansıtmak için medya sorguları içinde yazı tipi boyutlarının değiştirilmesini tanımlar.

Bu örnekte, 1. seviye başlığımızı 4rem olarak ayarlamak istiyoruz, yani temel yazı tipi boyutumuzun dört katı olacak. Bu gerçekten büyük bir başlık! Bu jumbo başlığı yalnızca daha büyük ekran boyutlarında istiyoruz, bu nedenle önce daha küçük bir başlık oluşturuyoruz, ardından kullanıcının en az 1200 piksel ekran boyutuna sahip olduğunu biliyorsak daha büyük boyutla üzerine yazmak için medya sorgularını kullanıyoruz.

html {
  font-size: 1em;
}

h1 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4rem;
  }
}

Yukarıdaki duyarlı ızgara örneğimizi, özetlenen yöntemi kullanarak duyarlı türü de içerecek şekilde düzenledik. Düzen iki sütunlu versiyona geçerken başlığın nasıl boyut değiştirdiğini görebilirsiniz.

Mobil cihazlarda başlık daha küçüktür:

Ancak masaüstünde daha büyük başlık boyutu görüyoruz:

Tipografiye yönelik bu yaklaşımın da gösterdiği gibi, medya sorgularını yalnızca sayfanın düzenini değiştirmekle sınırlandırmanız gerekmez. Alternatif ekran boyutlarında daha kullanışlı veya çekici hale getirmek için herhangi bir öğeyi ayarlamak için kullanılabilirler.

Duyarlı tipografi için görünüm alanı birimlerini kullanma

İlginç bir yaklaşım da duyarlı tipografiyi etkinleştirmek için viewport birimi vw’yi kullanmaktır. 1vw, görüntü alanı genişliğinin yüzde birine eşittir, yani yazı tipi boyutunuzu vw kullanarak ayarlarsanız, her zaman görüntü alanının boyutuyla ilişkili olacaktır.

h1 {
  font-size: 6vw;
}

Yukarıdakini yapmanın sorunu, kullanıcının vw birimini kullanarak ayarlanan herhangi bir metni yakınlaştırma yeteneğini kaybetmesidir, çünkü bu metin her zaman görüntü alanının boyutuyla ilgilidir. Bu nedenle, metni asla yalnızca görüntü alanı birimlerini kullanarak ayarlamamalısınız.

Bunun için aslında bir çözüm var ve calc() kullanmayı içeriyor. Eğer vw birimini ems veya rems gibi sabit bir boyut kullanarak bir değer kümesine eklerseniz, metin yine de yakınlaştırılabilir olacaktır. Esasen, vw birimi bu yakınlaştırılmış değerin üzerine eklenir:

h1 {
  font-size: calc(1.5rem + 3vw);
}

Bu, mobil için ayarlamak ve medya sorgularında yeniden tanımlamak yerine, başlık için yazı tipi boyutunu yalnızca bir kez belirtmemiz gerektiği anlamına gelir. Yazı tipi daha sonra görüntü alanının boyutunu artırdıkça kademeli olarak artar.

Görünüm alanı meta etiketi

Duyarlı bir sayfanın HTML kaynağına bakarsanız, genellikle belgenin <head> bölümünde aşağıdaki <meta> etiketini görürsünüz.

<meta name="viewport" content="width=device-width,initial-scale=1">

Bu meta etiket, mobil tarayıcılara görüntü alanının genişliğini cihaz genişliğine ayarlamaları ve belgeyi amaçlanan boyutunun %100’üne ölçeklendirmeleri gerektiğini söyler; bu da belgeyi amaçladığınız mobil cihazlar için optimize edilmiş boyutta gösterir.

Buna neden ihtiyaç duyuldu? Çünkü mobil tarayıcılar görüntü alanı genişlikleri konusunda yalan söyleme eğilimindedir.

Bu meta etiket, orijinal iPhone piyasaya sürüldüğünde ve insanlar web sitelerini küçük bir telefon ekranında görüntülemeye başladığında, çoğu sitenin mobil olarak optimize edilmemiş olması nedeniyle mevcuttur. Bu nedenle mobil tarayıcı, görüntü alanı genişliğini 980 piksel olarak ayarlıyor, sayfayı bu genişlikte işliyor ve sonucu masaüstü düzeninin yakınlaştırılmış bir versiyonu olarak gösteriyordu. Diğer mobil tarayıcılar da (örneğin Google Android’de) aynı şeyi yapıyordu. Kullanıcılar ilgilendikleri kısımları görüntülemek için web sitesini yakınlaştırabiliyor ve kaydırabiliyordu, ancak bu kötü görünüyordu. Duyarlı bir tasarıma sahip olmayan bir siteyle karşılaşma talihsizliğini yaşarsanız bugün hala bunu göreceksiniz.

Sorun şu ki, kesme noktaları ve medya sorguları içeren duyarlı tasarımınız mobil tarayıcılarda amaçlandığı gibi çalışmayacaktır. Görüntü alanı genişliği 480 piksel veya daha az olduğunda devreye giren bir dar ekran düzeniniz varsa ve görüntü alanı 980 piksel olarak ayarlanmışsa, dar ekran düzeninizi mobil cihazlarda asla göremezsiniz. width=device-width ayarını yaparak Apple’ın varsayılan width=980px değerini cihazın gerçek genişliği ile geçersiz kılarsınız, böylece medya sorgularınız amaçlandığı gibi çalışır.

Bu nedenle, yukarıdaki HTML satırını her zaman belgelerinizin başına eklemelisiniz.

Viewport meta etiketi ile kullanabileceğiniz başka ayarlar da vardır, ancak genel olarak kullanmak isteyeceğiniz şey yukarıdaki satırdır.

• initial-scale: Sayfanın 1 olarak ayarladığımız ilk yakınlaştırmasını ayarlar.
• height: Görüntü alanı için belirli bir yükseklik ayarlar.
• minimum-scale: Minimum yakınlaştırma düzeyini ayarlar.
• maximum-scale: Maksimum yakınlaştırma düzeyini ayarlar.
• user-scalable: Hayır olarak ayarlanırsa yakınlaştırmayı önler.

minimum-scale, maximum-scale kullanmaktan ve özellikle user-scalable değerini no olarak ayarlamaktan kaçınmalısınız. Kullanıcıların ihtiyaç duydukları kadar çok veya az yakınlaştırma yapmalarına izin verilmelidir; bunun engellenmesi erişilebilirlik sorunlarına neden olur.

Not: Viewport meta etiketinin yerini almak üzere tasarlanmış bir CSS @ kuralı vardı – @viewport – ancak bu kural ilgi görmedi ve kullanımdan kaldırıldı. @viewport kullanılmamalıdır.

Özet

Duyarlı tasarım, görüntülendiği ortama yanıt veren bir site veya uygulama tasarımını ifade eder. Bir dizi CSS ve HTML özelliğini ve tekniğini kapsar ve artık varsayılan olarak web sitelerini nasıl oluşturduğumuzu belirler. Telefonunuzda ziyaret ettiğiniz siteleri düşünün – masaüstü versiyonu küçültülmüş veya bir şeyleri bulmak için yana kaydırmanız gereken bir siteyle karşılaşmak muhtemelen oldukça sıra dışıdır. Bunun nedeni, web’in bu duyarlı tasarım yaklaşımına geçmesidir.

Bu derslerde öğrendiğiniz düzen yöntemleri yardımıyla duyarlı tasarımlar elde etmek de çok daha kolay hale geldi. Bugün web geliştirmede yeniyseniz, duyarlı tasarımın ilk günlerine kıyasla elinizin altında çok daha fazla araç var. Bu nedenle kullandığınız tüm materyallerin yaşını kontrol etmenizde fayda var. Tarihi makaleler hala faydalı olsa da CSS ve HTML’nin modern kullanımı, ziyaretçiniz siteyi hangi cihazla görüntülemiş olursa olsun zarif ve kullanışlı tasarımlar oluşturmayı çok daha kolay hale getirmektedir.