Tek Boyut Bazılarına Uyar: Duyarlı Web Tasarımı Görüntü Çözümleri Kılavuzu

Mobil ve tablet cihazlar nihai dünya hakimiyetini elde etmeye yaklaştıkça, web tasarımı ve teknolojisi, sürekli artan sayıda ekran boyutuna uyum sağlama yarışında. Bununla birlikte, bu fenomenin zorluklarını karşılamak için araçlar tasarlamak, ortaya çıkan en son moda sözcüklerden birinin “duyarlı web” olmasıyla birlikte yepyeni bir dizi sorunu beraberinde getiriyor. Bu, web'in tüm cihazlarda olmasa da çoğu cihazda, kullanıcının deneyimini bozmadan çalışmasını sağlamanın zorluğudur. İçeriği masaüstü veya dizüstü bilgisayarlara uyacak şekilde tasarlamak yerine, cep telefonları, tabletler veya web'e bağlı herhangi bir yüzey için bilgi mevcut olmalıdır. Ancak, bu duyarlı web tasarımı evriminin zor ve bazen acı verici olduğu kanıtlanmıştır.

Metinsel bilgileri yerleştirmek neredeyse önemsiz olsa da, bir zamanlar yalnızca masaüstü bilgisayarlar düşünülerek tasarlanmış duyarlı görüntüler, infografikler, videolar ve benzeri içerikleri dikkate aldığımızda işin zor kısmı ortaya çıkıyor. Bu sadece içeriğin doğru görüntülenmesi sorununu değil, aynı zamanda içeriğin kendisinin farklı cihazlar kullanılarak nasıl tüketildiğini de gündeme getiriyor. Akıllı telefonlardaki kullanıcılar, masaüstlerindeki kullanıcılardan farklıdır. Veri planları ve işlem hızı gibi şeyler de dikkate alınmalıdır. Google, arama sonuçlarında mobil uyumlu siteleri öne çıkarmaya başladı ve bazıları bunun bu tür sitelerde önemli bir pagerank artışına yol açacağını düşünüyor. Daha önceki çözümler, yalnızca mobil alt alan adları (ve yönlendirmeler) dağıtarak bunu ele aldı, ancak bu karmaşıklığı artırdı ve hızla modası geçti. (Her sitenin bu rotayı karşılama yeteneği yoktur.)

Duyarlı Web Görselleri Arayışında

Bu noktada geliştiriciler ve tasarımcılar, web sitesi yüklerinin mobil sitelerdeki kullanıcılarla buluşacak şekilde optimize edilmesini sağlamalıdır. Web trafiğinin %20'sinden fazlası artık mobil kullanıcılardan oluşuyor ve bu sayı hala artıyor. Sayfa içeriği verilerinin en büyük payları arasında yer alan görseller ile bu yükü azaltmak bir öncelik haline geliyor. Hem sunucu tarafı hem de ön uç çözümler dahil, duyarlı tasarım görüntüsünün yeniden boyutlandırılmasını basitleştirmek için çeşitli girişimlerde bulunulmuştur. Bu duyarlı görüntü çözümlerini tartışmak için öncelikle mevcut görüntü bağlantı eksikliklerini anlamamız gerekir.

<img> etiketi, yalnızca doğrudan görüntünün kendisine bağlanan kaynak özniteliğine sahiptir. Herhangi bir eklenti olmadan ihtiyaç duyulan doğru görüntü türünü belirlemenin hiçbir yolu yoktur.

HTML'de bulunan tüm resim boyutlarına sahip olup CSS kurallarını kullanarak doğru resmin dışında display:none gösteremez miyiz? Kusursuz bir mantıksal dünyada en mantıklı çözüm budur. Bu şekilde tarayıcı, gösterilmeyen tüm resimleri görmezden gelebilir ve teorik olarak onları indiremez. Ancak, tarayıcılar genel mantığın ötesinde optimize edilmiştir. Sayfanın yeterince hızlı oluşturulmasını sağlamak için tarayıcı, gerekli stil sayfaları ve JavaScript dosyaları tam olarak yüklenmeden önce bağlantılı içeriği önceden getirir. Masaüstü bilgisayarlar için tasarlanan büyük resimleri göz ardı etmek yerine, tüm resimleri indirmiş ve daha da büyük bir sayfa yükü ile sonuçlanmış oluyoruz. Yalnızca CSS tekniği, yalnızca arka plan görüntüleri olarak tasarlanan görüntüler için çalışır çünkü bunlar stil sayfasında ayarlanabilir (medya sorguları kullanılarak).

Peki, bir web sitesi ne yapmalı?

Arka Uç Duyarlı Görüntü Ölçekleme Çözümleri

Yalnızca mobil cihazlara yönelik siteleri/alt alanları yasaklayarak, kullanıcı aracısını (UA) koklamak ve doğru boyutta görüntüleri kullanıcıya geri sunmak için kullanmakla baş başa kalırız. Ancak, herhangi bir geliştirici bu çözümün ne kadar güvenilmez olabileceğini kanıtlayabilir. Yeni UA dizileri her zaman ortaya çıkıyor ve kapsamlı bir listeyi sürdürmeyi ve güncellemeyi yorucu hale getiriyor. Ve tabii ki, bu, ilk etapta kolayca sızdırılan UA dizelerinin güvenilmezliğini hesaba katmaz bile.

Uyarlanabilir Görüntüler

Ancak, bazı sunucu tarafı çözümleri dikkate alınmaya değerdir. Uyarlanabilir Görüntüler, arka uç duyarlı bir görüntü düzeltmesini tercih edenler için harika bir çözümdür. Herhangi bir özel işaretleme gerektirmez, bunun yerine küçük bir JavaScript dosyası kullanır ve ağır işlerin çoğunu arka uç dosyasında yapar. PHP ve nginx yapılandırılmış bir sunucu kullanır. Ayrıca herhangi bir UA koklamasına dayanmaz, bunun yerine ekran genişliğini kontrol eder. Uyarlanabilir Görüntüler, görüntülerin ölçeğini küçültmek için harika çalışır, ancak aynı zamanda, büyük görüntülerin sanat yönetimine ihtiyaç duyduğu, yani yalnızca ölçekleme değil, kırpma ve döndürme gibi tekniklerle görüntü küçültme gerektiğinde de kullanışlıdır.

sencha dokunmatik

Sencha Touch, üçüncü taraf bir çözüm olarak adlandırmak daha iyi olsa da, başka bir arka uç duyarlı tasarım görüntüsü çözümüdür. Sencha Touch, UA'yı koklayarak görüntüyü buna göre yeniden boyutlandırır. Aşağıda hizmetin nasıl çalıştığına dair temel bir örnek verilmiştir:

 <img src="http://src.sencha.io/http://example.com/images/kitty_cat.jpg" alt="My Kitty Cat">

Sencha'nın görüntüyü otomatik olarak yeniden boyutlandırmasını istemememiz durumunda, görüntü boyutlarını belirleme seçeneği de vardır.

Günün sonunda, sunucu tarafı (ve üçüncü taraf) çözümleri, doğru görüntüyü geri göndermeden önce isteği işlemek için kaynaklara ihtiyaç duyar. Bu, değerli zaman alır ve sırayla istek-yanıt yolculuğunu yavaşlatır. Aygıtın hangi kaynakları doğrudan talep edeceğini belirlemesi ve sunucunun buna göre yanıt vermesi daha iyi bir çözüm olabilir.

Ön Uç Çözümleri

Son zamanlarda, duyarlı görselleri ele almak için tarayıcı tarafında büyük iyileştirmeler yapıldı.

<picture> öğesi, W3C tarafından HTML5 belirtiminde tanıtılmış ve onaylanmıştır. Şu anda tüm tarayıcılarda yaygın olarak mevcut değildir, ancak yerel olarak kullanılabilir olması çok uzun sürmeyecektir. O zamana kadar, öğe için JavaScript çoklu dolgularına güveniriz. Çoklu dolgular, öğeden yoksun eski tarayıcılar için de harika bir çözümdür.

Ayrıca, <img> öğesi için birkaç webKit tabanlı tarayıcıda kullanılabilen srcset özniteliği durumu da vardır. Bu, herhangi bir JavaScript olmadan kullanılabilir ve webKit olmayan tarayıcılar göz ardı edilecekse harika bir çözümdür. Diğer çözümlerin yetersiz kaldığı, ancak kapsamlı bir çözüm olarak kabul edilmemesi gereken tuhaf durumlar için yararlı bir durak noktasıdır.

resim dolgusu

Picturefill, <picture> öğesi için bir çoklu dolgu kitaplığıdır. Duyarlı görüntü boyutlandırma ve ölçekleme sorunlarına yönelik ön uç çözümler arasında en popüler kitaplıklardan biridir. İki versiyonu vardır; Picturefill v1, span kullanarak <picture> öğesini taklit ederken Picturefill v2, onu sunan tarayıcılar arasında <picture> öğesini kullanır ve eski olanlar için bir çoklu dolgu sağlar (örneğin, IE >= IE9 için). Özellikle Android 2.3 için bazı sınırlamaları ve geçici çözümleri vardır - bu da tesadüfen img srcset özniteliğinin kurtarmaya geldiği bir örnektir. Aşağıda Picturefill v2'yi kullanmak için örnek bir işaretleme verilmiştir:

 <picture> <source media="(min-width: 768px)"> <source media="(max-width: 767px)"> <img alt="My Kitty Cat"> </picture>

Sınırlı veri planlarına sahip kullanıcıların performansını artırmak için Picturefill, geç yükleme ile birleştirilebilir. Bununla birlikte, kitaplık daha geniş tarayıcı desteği sunabilir ve yamalara güvenmek yerine garip durumları ele alabilir.

Imager.js

Imager.js, Picturefill tarafından kullanılandan farklı bir yaklaşımla duyarlı görüntüler elde etmek için BBC News ekibi tarafından oluşturulan bir kitaplıktır. Picturefill, <picture> öğesini desteklenmeyen tarayıcılara getirmeye çalışırken, Imager.js ağ hızlarına dikkat ederken yalnızca uygun görüntüleri indirmeye odaklanır. Ayrıca, üçüncü taraf kitaplıklarına güvenmeden tembel yüklemeyi de içerir. Yer tutucu öğeleri kullanarak ve bunları <img> öğeleriyle değiştirerek çalışır. Aşağıdaki örnek kod, bu davranışı sergiler:

 <div> <div class="image-load" data-src="http://example.com/images/kitty_{width}.jpg" data-alt="My Kitty Cat"></div> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

İşlenen HTML şöyle görünecektir:

 <div> <img src="http://example.com/images/kitty_480.jpg" data-src="http://example.com/images/kitty_{width}.jpg" alt="My Kitty Cat" class="image-replace"> </div> <script> new Imager({ availableWidths: [480, 768, 1200] }); </script>

Tarayıcı desteği, ileri görüşlü bir çözümden daha pragmatik bir çözüm olma pahasına, Picturefill'den çok daha iyidir.

Kaynak Karıştırma

Kaynak Karıştırma, duyarlı görüntü sorununa diğer ön uç kitaplıklarından biraz farklı bir açıdan yaklaşır. “Önce mobil” düşünce okulundan bir şeye benziyor, bu sayede varsayılan olarak mümkün olan en küçük çözünürlüğe hizmet ediyor. Bir cihazın daha büyük bir ekrana sahip olduğunu tespit ettiğinde, daha büyük bir görüntü için görüntü kaynağını değiştirir. Daha çok bir hack ve daha az tam teşekküllü bir kütüphane gibi geliyor. Bu, özellikle mobil siteler için harika bir çözümdür, ancak masaüstü bilgisayarlar ve/veya tabletler için çift kaynak indirmenin kaçınılmaz olduğu anlamına gelir.

Diğer bazı dikkate değer JavaScript kitaplıkları şunlardır:

• HiSRC - Duyarlı görüntüler için bir jQuery eklentisi. jQuery'ye bağımlılık bir sorun olabilir.
• Mobify.js - Görüntüler, stil sayfaları ve hatta JavaScript dahil olmak üzere duyarlı içerik için daha genel bir kitaplık. Kaynak yüklenmeden önce DOM'yi 'yakalar'. Mobify, güçlü ve kapsamlı bir kitaplıktır, ancak amaç yalnızca duyarlı görüntüler ise, aşırıya kaçabilir.

Özet

Günün sonunda, hangi duyarlı web tasarımı görüntü yaklaşımının kullanıcı tabanına uygun olduğuna karar vermek geliştiriciye kalmıştır. Bu, veri toplama ve test etmenin, izlenecek yaklaşım hakkında daha iyi bir fikir vereceği anlamına gelir.

Özetlemek gerekirse, uygun duyarlı görüntü çözümüne karar vermeden önce aşağıdaki soruların listesini dikkate almanız yararlı olabilir.

• Eski tarayıcılar bir sorun mu? Değilse, daha modern bir yaklaşım kullanmayı düşünün (örneğin: Picturefill, srcset niteliği)
• Tepki süresi kritik mi? Değilse, üçüncü taraf veya arka uç çözümüne gidin.
• Çözümlerin kurum içinde mi olması gerekiyor? Üçüncü taraf çözümleri açıkça göz ardı edilecektir.
• Bir sitede duyarlı görsellere geçiş yapmaya çalışan çok sayıda görsel var mı? Doğrulama veya anlamsal etiketler (veya daha doğrusu anlamsal olmayan etiketler) hakkında endişeler var mı? Bu, görüntü isteklerini Uyarlanabilir Görüntüler gibi bir şeye yönlendirmek için bir arka uç çözümü gerektirecektir.
• Sanat yönetmenliği bir sorun mudur (özellikle çok fazla bilgi içeren büyük resimler için)? Böyle bir senaryo için Picturefill gibi bir kütüphane daha iyi bir çözüm olacaktır. Ayrıca, arka uç çözümlerinden herhangi biri de işe yarayacaktır.
• JavaScript eksikliği konusunda bir endişe var mı? Ön uç çözümlerinden herhangi biri söz konusu olmayacak ve bu da UA koklamasına dayanan arka uç veya üçüncü taraf seçeneklerini bırakacaktır.
• Mobil yanıt sürelerinin masaüstü yanıt sürelerine göre bir önceliği var mı? Kaynak Karıştırma gibi bir kitaplık daha uygun olabilir.
• Sadece resimlere değil, sitenin her yönüne duyarlı davranış sağlamaya ihtiyaç var mı? Mobify.js daha iyi çalışabilir.
• Mükemmel dünyaya ulaşıldı mı? Yalnızca CSS display:none yaklaşımı!