Birkaç yıl önce, web siteleri tasarlamak ve inşa etmek nispeten kolaydı. Web siteleri daha kolaydı ve ekran boyutlarında çok az değişiklik gösteren masaüstü ve dizüstü bilgisayarlarda görüntülendi. Günümüzde görüntüleyenlerin göz atma zamanlarını ele geçiren mobil cihazlarla, bir web sitesi bir 4.8 ”akıllı telefon ekranında, 5 inçlik bir tablet bilgisayarında, 7 inçlik bir tablette veya arada bir boyutta görüntülenebilir.
Web sitenizin cihaz türleri ve ekran boyutları genelinde doğru şekilde görüntülenmesini nasıl sağlıyorsunuz?
Çözüm ilk önce Ethan Marcotte, Web sitesi tasarımlarını duyarlı hale getirmenin yollarını keşfettiğinde, yani ekran boyutuna göre değişmelerini sağlayın. Duyarlı bir web sitesi tasarımı, web sayfalarının çok çeşitli ekran boyutlarında iyi bir şekilde işlediğinden emin olmak için CSS'yi akıllıca kullanan bir yöntemdir - URL yeniden yönlendirmeye başvurmadan veya dinamik olarak farklı HTML ve CSS kodları sunmadan, UserAgent'a bağlı olarak. Bu gerçekten bir teknoloji ya da standart değil, sonuca ulaşılmasına yardımcı olan bir dizi tasarım ilkesi.
Son birkaç yılda, birçok duyarlı şablon, CSS çerçeveleri ve WordPress temaları yayıldı. Örneğin, tek bir kod satırı yazmadan WordPress'te duyarlı bir web sitesi oluşturmak mümkündür.
Ancak gerçek bir web tasarımcısı sadece şablonları kullanarak memnun değil. Etkili bir şekilde kullanabilmek için, duyarlı web tasarım öğelerini anlama çabasını gösterecektir.
Bu yüzden bugün, ustalaşmanız gereken 3 temel teknike bakacağız, etkili bir duyarlı tasarımcı olursunuz.
Medya sorguları, ekran, baskı, TV, avuçiçi cihazlar vb. Farklı ortam türleri için farklı düzenler tasarlamanızı sağlar. Medya türüne bağlı olarak, stili, yazı tipini ve sayfanın diğer öğelerini yapılandırabilirsiniz.
CSS3'te tanıtılan medya sorguları, bir tasarımcının içeriğin sunumunu belirli bir çıkış aygıtı türlerine uyacak şekilde özelleştirmesine izin verir. Bunlar, bir medya türü bildirimi ve doğru veya yanlış olarak değerlendiren bir veya daha fazla medya özelliği ifadesinden oluşur.
Medya türleri arasında el, ekran, televizyon, baskı ve projeksiyon bulunur. Medya özellikleri arasında, aygıtın yüksekliği, genişliği, en boy oranı, çözünürlük, renk indeksi, yükseklik, tarayıcı penceresinin genişliği, ancak bunlarla sınırlı değildir.
Temel bir örnek alalım; Metin boyutunuzun telefon gibi küçük cihazlarda daralmasını istediğinizi düşünün. Bunun için sorgu şöyle bir şey olurdu:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Şimdi, tarayıcı genişliği 400 pikselden az değilse, paragraflarınızın yazı tipi boyutu 1em olacak, bu durumda 0,8em'e küçülecektir.
Tecrübemde, duyarlı bir mizanpajı tasarlamanın en iyi yolu, öncelikle ana yapısal elemanlarla bir varsayılan ana stil sayfası oluşturmaktır. Ardından, öğelere göre düzeni veya diğer aygıt öğelerini özelleştirmek için medya sorguları ekleyebilirsiniz. Bir avuç kuraldan daha fazlaysa, bunları daha sonra seçerek yükleyebileceğiniz ayrı bir alt sayfaya taşımak daha iyi olabilir. İşte böyle işe yarayacak:
Bu kod parçası, cihazın cihaz modunda 720px'den daha az cihaz genişliği ile elde edilip edilmediğini kontrol eder ve eğer öyleyse, tablet_layout.css stil sayfasını yükler.
Genişlik, yükseklik, min / max-genişlik, min / maks-yükseklik özelliklerinin hepsinin tarayıcı penceresinin genişliğine ve yüksekliğine işaret ettiğini unutmayın. Cihaz genişliği ve yüksekliği cihaz genişliği, cihaz yüksekliği, min / max cihaz genişliği, min / max cihaz yüksekliği ile kontrol edilir . Eğer bakmak istersen medya sorgularını kullanarak daha fazla örnek MDN iyi bir tur attı.
“Akışkan ızgarası”, sabit piksel değerlerinden ziyade çeşitli öğelerin nispi oranlarında kodlanmış bir düzeni açıklamak için kullanılan bir terimdir.
Geleneksel CSS düzenleri, öğeleri konumlandırmak için sabit genişlikli ızgaralar kullandı. Sabit genişlik yaklaşımı bugün artık 3 inçten birkaç fit'e kadar değişen cihaz ekranlarına sahip olduğumuz için artık işe yaramıyor. Bir akışkan ızgara tasarımında, her bir eleman, her elemanın yüksekliğini ve genişliğini belirtmek yerine, taban elemanına nispi orantısı bakımından kodlanır; bir yüzde veya göreli büyüklük verilir.
Dört sütun olduğunu düşün. Bu sıvıyı yapmak için, her birini 200 piksel genişliğinde belirtmek yerine,% 0,2083 (yani 200/960) olarak belirtmeniz gerekir. En azından bu prensip. Tamamen akıcı bir ızgara oluşturmak çok özen gerektirir. Özel araçları kullanarak tavsiye etmeyi tercih ettiğim nadir vakalardan biridir. Minik Sıvı Izgarası , Değişken Izgara Sistemi ve Sıvı Baseline Grid kendi akışkan ızgarasını sıfırdan yazmak için bazı harika alternatifler.
HTML konteyneri desteklediği sürece görüntü yerel boyutta oluşturulduğunda görüntüler esnek sayılır, ancak tarayıcı penceresi küçüldükçe, görüntü ona sığacak şekilde ölçeklenir.
Tasarımın geri kalanı sıvı ve duyarlı olsa bile, tüm bileşenler ölçeklenmiyorsa, iyi sonuç vermeyecektir. Bu resimler ve videolar ile zor olabilir. Bir masaüstünde 700 piksel genişliğinde bir görüntü harika görünecek, ancak 320 piksel tablette görüntülendiğinde kırpılacak. En modern duyarlı tasarımlar, görüntü ölçeği oluşturmak için CSS maksimum genişlik özelliğini kullanır. (Bu yöntem İlk Richard Butler tarafından önerildi .)
img {max-width: 100%;}Bu az satır, maksimum görüntü genişliğini kabın% 100'üne ayarlayarak görüntünün kırpılmamasını sağlayacaktır. Tarayıcı penceresi veya ekranı küçülürse, bu CSS kodu parçası görüntüyü orantılı olarak küçültür. Boy oranı kilitliyken, yükseklik otomatik olarak ayarlanır.
Bunun yerine, görüntüyü belirli bir dikey ekran oranını bu şekilde işgal edecek şekilde kilitleyebilirsiniz.
img {max-height: 75%;}(Hem maksimum yükseklik hem de maksimum genişlik özelliklerini birlikte kullanmamaya dikkat edin.)
Resim boyutu ayrıca, aşağıdaki gibi, em öğesini kullanarak ana öğe yerine metin boyutuna da bağlanabilir:
img {width: 30em;}Görsel metin içeriyorsa, metnin okunabilir olduğundan emin olmak için minimum / maksimum boyutu sınırlamak isteyebilirsiniz. Bunu şöyle belirtebilirsiniz:
img {width: 30em;max-width: 500px;min-width: 100px;}Aynı teknikler videoları ölçeklemek için kullanılabilir, örneğin:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Duyarlı tasarım, sektörümüzün geleceğidir, ancak etrafında uçan birçok farklı teknikle, takip etmek çoğu zaman zordur. Bu 3 basit teknikte ustalaşacaksınız ve duyarlı bir tasarımcı olmanın% 90'ı olacaksınız.
Öne çıkan görsel / küçük resim, elastik görüntü Shutterstock üzerinden.