Duyarlı tasarım – media query gücünden yararlanma

1 Mayıs 2012, Salı

Verileri seviyoruz ve web sitelerimizdeki analizleri izlemek için çok zaman harcıyoruz. Aynı şeyi yapan her web geliştiricisi, son dönemde mobil cihazlardan gelen trafikteki artışı fark etmiştir. Geçtiğimiz yıl boyunca, birçok önemli sitenin sayfa görüntülemelerinin önemli bir yüzdesini akıllı telefonlardan ve tabletlerden aldığını gördük. Bunlar, en son HTML, CSS ve JavaScript’i destekleyen gelişmiş tarayıcılara sahip, ancak aynı zamanda 320 piksele kadar dar ekran alanlarına sahip çok sayıda ziyaretçiyi temsil ediyor.

Erişilebilirlik konusundaki kararlılığımız, tüm kullanıcılarımıza iyi bir tarama deneyimi sunmak için çabaladığımız anlamına geliyor. Mobil cihazlara özel web siteleri oluşturmak veya mevcut siteleri ve yeni lansmanları hem masaüstü hem de mobil cihazlarda iyi görünecek şekilde uyarlamak arasında zorlu bir seçimle karşı karşıya kaldık. İki site oluşturmak, belirli donanımları daha iyi hedeflememize olanak tanırdı, ancak tek bir ortak siteyi korumak, kanonik bir URL’yi muhafaza eder, karmaşık yönlendirmelerden kaçınır ve web adreslerinin paylaşımını basitleştirir. Sürdürülebilirliği göz önünde bulundurarak, her ikisi için de aynı sayfaları kullanmaya yöneldik ve aşağıdaki yönergeleri nasıl yerine getirebileceğimizi düşünmeye başladık:

1. Sayfalarımız her ekran çözünürlüğünde okunaklı bir şekilde oluşturulmalıdır
2. Tek bir içerik seti hazırlayıp bunu her cihazda görüntülenebilir kılıyoruz
3. Pencere boyutu ne olursa olsun asla yatay kaydırma çubuğu göstermemeliyiz

Uygulama

Başlangıç noktası olarak, basit ve anlamsal (semantic) işaretleme, düzenin değiştirilmesi gerektiğinde daha esnek ve yeniden akıtılması daha kolay sayfalar sağlar. Stil sayfasının akışkan bir düzen (liquid layout) sağlamasını garanti altına alarak, mobil uyumluluk yolunda zaten ilerlemiş oluyoruz. Kapsayıcı öğeler için width belirtmek yerine, max-width kullanmaya başladık. height yerine min-height kullandık, böylece daha büyük yazı tipleri veya çok satırlı metinler kapsayıcının sınırlarını bozmaz. Sabit genişlikli görsellerin akışkan sütunları “açık tutmasını” önlemek için şu CSS kuralını uyguluyoruz:

Akışkan düzen iyi bir başlangıçtır ancak belirli bir incelikten yoksun olabilir. Neyse ki medya sorguları (media queries), IE9+ ve çoğu mobil cihaz dahil olmak üzere modern tarayıcılarda artık iyi desteklenmektedir. Bunlar, mobil tarayıcıda iyi bir şekilde küçülen bir site ile modern arayüzden yararlanmak için geliştirilmiş bir site arasındaki farkı yaratabilir. Ancak önce, akıllı telefonların kendilerini web sunucularına nasıl tanıttıklarını hesaba katmalıyız.

Görüntü Alanları (Viewports)

Bir piksel ne zaman piksel değildir? Akıllı telefonda olduğunda. Varsayılan olarak, akıllı telefon tarayıcıları yüksek çözünürlüklü masaüstü tarayıcıları gibi davranır ve sayfayı sanki bir masaüstü monitöründe görüntülüyormuşsunuz gibi düzenler. Yakınlaştırmadan önce okunması imkansız olan küçük metinli “genel bakış modunun” nedeni budur. Varsayılan Android tarayıcısı için varsayılan görüntü alanı genişliği 800 piksel, iOS için ise ekrandaki gerçek fiziksel piksel sayısına bakılmaksızın 980 pikseldir.

Tarayıcıyı sayfanızı daha okunabilir bir ölçekte oluşturmaya zorlamak için görüntü alanı meta öğesini kullanmanız gerekir:

Mobil ekran çözünürlükleri büyük ölçüde değişir, ancak çoğu modern akıllı telefon tarayıcısı şu anda 320 piksel civarında standart bir device-width bildirmektedir. Mobil cihazınızın gerçek genişliği 640 fiziksel piksel ise, 320 piksel genişliğindeki bir görsel ekranın tam genişliğine sığacak şekilde boyutlandırılır ve bu süreçte piksel sayısının iki katını kullanır. Metnin küçük ekranda çok daha net görünmesinin nedeni de budur; standart bir masaüstü monitörüne kıyasla iki kat piksel yoğunluğu.

Görüntü alanı meta etiketinde width değerini device-width olarak ayarlamanın yararlı yanı, kullanıcı akıllı telefonunun veya tabletinin yönünü değiştirdiğinde bunun güncellenmesidir. Bunu medya sorgularıyla birleştirmek, kullanıcı cihazını döndürdükçe düzeni ayarlamanıza olanak tanır:

Gerçekte, sitenizin çeşitli cihazlarda nasıl aktığına ve göründüğüne bağlı olarak farklı kesme noktaları (breakpoints) kullanmanız gerektiğini fark edebilirsiniz. Ayrıca, desteklenen yerlerde piksel boyutlarına başvurmadan belirli yönelimleri hedeflemek için orientation medya sorgusunu da kullanabilirsiniz.

Medya sorguları örneği

Kısa süre önce Google Hakkında sayfasını yeniden yayına aldık. Akışkan bir düzen kurmanın yanı sıra, tablet veya akıllı telefon gibi daha küçük ekranlarda iyileştirilmiş bir deneyim sağlamak için birkaç medya sorgusu ekledik.

Belirli cihaz çözünürlüklerini hedeflemek yerine, nispeten geniş bir kesme noktası setiyle ilerledik. 1024 pikselden daha geniş bir ekran çözünürlüğü için sayfayı, 12 sütunlu ızgaramıza göre orijinal tasarlandığı gibi oluşturuyoruz. 801 piksel ile 1024 piksel arasında, akışkan düzen sayesinde biraz sıkıştırılmış bir sürüm görüyorsunuz.

Yalnızca ekran çözünürlüğü 800 piksele düşerse, temel içerik olarak kabul edilmeyen içerikler sayfanın altına gönderilir:

Son bir medya sorgusu ile akıllı telefon alanına giriyoruz:

Bu noktada, artık büyük görseli yüklemiyoruz ve içerik bloklarını üst üste diziyoruz. Ayrıca, içerik öğelerinin farklı bölümler olarak daha kolay tanımlanabilmesi için aralarına ek boşluklar ekledik.

Bu basit önlemlerle sitenin çok çeşitli cihazlarda kullanılabilir olduğundan emin olduk.

Sonuç

Siteleri mobil cihazlarda ve dar görüntü alanlarında erişilebilir kılmak için basit bir çözüm olmadığını unutmamak gerekir. Akışkan düzenler harika bir başlangıç noktasıdır, ancak bazı tasarım ödünleri verilmesi gerekebilir. Medya sorguları, birçok cihaz için cilalama eklemenin yararlı bir yoludur, ancak ziyaretlerin %25’inin şu anda bu tekniği desteklemeyen masaüstü tarayıcılardan yapıldığını ve bazı performans etkileri olduğunu unutmayın. Ayrıca sitenizde süslü bir araç (widget) varsa, bir fareyle harika çalışabilir ancak hassas kontrolün daha zor olduğu dokunmatik bir cihazda o kadar iyi çalışmayabilir.

Anahtar nokta, erken ve sık test etmektir. Kendi sitelerinizde bir akıllı telefon veya tablet ile gezinerek geçirdiğiniz her zaman paha biçilmez olacaktır. Gerçek cihazlarda test yapamadığınızda, Android SDK veya iOS Simülatörü kullanın. Arkadaşlarınızdan ve iş arkadaşlarınızdan sitelerinizi kendi cihazlarında görüntülemelerini isteyin ve nasıl etkileşimde bulunduklarını izleyin.

Mobil tarayıcılar harika bir yeni trafik kaynağıdır ve bunları en iyi nasıl destekleyeceğinizi öğrenmek, profesyonel gelişimin heyecan verici yeni bir alanıdır.

Google’daki responsive tasarım örneklerinden bazıları:

• www.google.com/about/
• www.google.com/goodtoknow
• www.google.com/culturalinstitute
• www.google.com/events/sciencefair
• www.google.com/intl/en/chrome/devices
• picasa.google.com

Yazanlar: Rupert Breheny,
Edward Jung ve
Matt Zürrer, Google Web Yöneticisi Ekibi