İnternete her gün, birden fazla cihazda göz gezdiriyorum. MacBook Pro'yu, iMac, PC, iPad, iPhone'umu ve hatta televizyonumu bile kullanıyorum. Dolayısıyla, daha büyük ekran çözünürlükleri için optimize edilmemiş veya mobil cihazıma yüklenecek iki dakikanızı ayıran web sitelerini gördüğümde beni gerçekten rahatsız ediyor.
Hepimiz duyarlı tasarım kavramını benimsedik. Çok az insan buna karşı çıkıyor. Aslında, son zamanlarda duyduğum tek inandırıcı repost, bir müşterinin fazladan zaman için ödeme yapmak istememesi. Fakat herhangi yeni bir uygulamada olduğu gibi, efsaneler de onu tersine çevirmek için büyüdü.
Bakalım bu yanlış anlaşılmalardan birkaçını çözebilir miyiz…
Evet, mobil web patlıyor ve evet, duyarlı tasarımın ardındaki itici güçtür, ancak duyarlı tasarıma düştüğümüzde, sadece mobilden daha fazlasını düşünmeliyiz. Retina ekranlarının ve video oyun tarayıcılarının tanıtımıyla, internet kullanıcıları artık daha geniş ekran çözünürlüklerinde ve birçok farklı bağlamda web sitelerini görüntülüyor.
Duyarlı web siteleri tasarlarken ve geliştirirken farklı kullanıcı bağlamlarını dikkate almaya çalışın. Kullanıcının hangi cihazı kullandığını düşünmeniz gerekiyor: kullanıcı mobil cihazda mı yoksa televizyonun önünde mi? Kullanıcının nerede bulunduğunu düşünmeniz gerekiyor: kullanıcı bakkalda mı yoksa vahşi doğada kamp mı yapıyor? İyi bir içeriğe sahip olmak, sitenizin bir margaritaya sahip sahilde otururken, sitenizi yüklemek için on dakika sürüyorsa hiçbir şey ifade etmeyecektir.
İçerik her şeydir, ancak içerik heryerdedir ve kesinlikle üzerinde hiçbir kontrolünüz olmadığı bir şeydir. Bu yüzden, gerçekçi olmanızın nedeni, içeriğinizin büyük veya küçük herhangi bir çözünürlüğe ölçeklenmesidir. Elimizde, düzenleri manipüle etmemize, metin boyutlarını optimize etmemize ve herhangi bir içerik için performansı artırmamıza olanak tanıyacak bir takım araçlarımız var.
Bağlamın her zaman değiştiğini hatırlayın, bu nedenle görsel düzeni, kullanıcının ihtiyaçlarını ve duyarlı bir tasarıma yaklaşırken performansı dengelemek çok önemlidir. Sadece mobil değil.
Yanıt veren web tasarımının her proje için işe yaramayacağını ve kullanım durumuna bağlı olduğunu savunurdum. Son zamanlarda benim görüşümü değiştirdim ve kullanıcı odaklı tasarımcılar ve geliştiriciler olacaksak, her projeye duyarlı tasarım düşünülerek yaklaşmamız gerektiğine kesinlikle inanıyorum.
Sabit genişlikli web siteleri, daha büyük ve daha küçük ekran çözünürlüklerinde sınırlayıcı olabilir. Sonuç olarak, web sitemizin hangi cihaz veya ekran çözünürlüğünde olursa olsun, kısıtlama olmaksızın herkes tarafından erişilebilir olması gerekmektedir.
Tasarımcıların ve geliştiricilerin sadece belirli cihaz çözünürlüklerine ölçek veren duyarlı web siteleri oluşturduğu sektörde ortaya çıkan bir trend fark ettim ve bu durumdan da suçluyum. En yaygın üç cihaz elbette dizüstü bilgisayarlar / masaüstü bilgisayarlar, iPad'ler ve iPhone'lar (veya diğer mobil cihazlar). Tasarımcılar olarak, duyarlı tasarımın tasarım kesme noktaları hakkında olduğunu ve içeriğin yalnızca belirli cihazların kullanıcıları değil, herkes tarafından okunabilir ve herkes tarafından erişilebilir hale getirildiğini fark etmemiz gerekir.
Bununla birlikte, bir yazılım programında web siteleri tasarlıyorsanız, kesilecek noktalarla bir çeşit çerçeveye sahip olmanız önemlidir. Kendini yaratmanı öneriyorum. Düzeninizi içeriğe göre optimize edin. Sınır değerlerin en iyi nasıl çalıştığını öğrenmenin en iyi yolu, önce bir fikir almak için birkaç tel kafesin üzerine çizim yapmaktır, sonra istediğiniz yazılımdaki pikselleri yerleştirmeye başlayabilirsiniz. Wireframe ve tasarım yaparken aynı ızgarada çalıştığınızdan emin olun.
Eğer benim gibi olursanız, tel kafeslerinizi kodlarsınız ve canlı bir prototip yaratırsınız. Bu bana yanıt veren iş akışımla çok yardımcı oldu, çünkü Photoshop'ta pikselleri cramlamaya çalışmak yerine tasarımda kırılmalara neden olarak akışkan bir mockup oluşturabilir ve tasarımda kesinti noktaları oluşturabilirim.
Duyarlı web sitelerinin çoğunda gördüğüm en büyük sorunlardan biri, tasarımcılar ve geliştiriciler tasarım ayrılma noktaları üzerinde cihaz kesme noktalarını kullanmayı tercih ettikleri zaman tipografinin kurtlara atılmasıdır. Benim düşünceme göre tasarım üzerinde cihaz seçmek, yayınlanmakta olan içerik için tam bir ihmal ve kullanıcı bu içeriği tüketiyor. İçerik, okunabilirliği korumak için ayarlanması gerekene kadar okunabilirliğini korumalıdır. İçerik her zaman kral olacak ve içeriğinizin erişilebilirliği ve okunabilirliği her zaman en yüksek öncelik olmalıdır.
Duyarlı bir tasarımda içeriğin okunabilirliğini sürdürmeyi sürdürmeyi sevdiğim yollardan biri, yazı tipi boyutu, dolgu, kenar boşlukları ve düzen için ems gibi ilgili birimleri kullanmaktır. Duyarlı tasarım, orantılı düzenlerle ilgilidir ve bence, ems mükemmel bir uyum sağlar.
Ems, ana öğelerin yazı tipi boyutuna ölçeklenebilen göreceli birimlerdir, size çok fazla zaman ve güçlük kazandırabilir ve tüm düzeninizin yapısını korumaya yardımcı olurlar. Bunun sorulması ne anlama geliyor? Yani, temel yazı tipi boyutu arttıkça veya azaldıkça, düzenek her şeyi uyuşturmaksızın eşit olarak ayarlanır.
İşte bir örnek olarak, süper çözünürlükte ve küçük bir tablet için çok büyük bir masaüstü monitörü için iki tasarım kesme noktası bulduğumuzu söyleyebiliriz. Ayrıca temel font-ebadımızın 1.0em'e eşit olan 16px olduğunu ve sitenin 3840 x 2160 (süper çözünürlük) çözünürlüğünde görüntülendiğinde 22px'e varan taban font-büyüklüğüne çarptığımızı ve bu temel font-boyutunu 800 x 600 çözünürlükte 14px (küçük dizüstü bilgisayar / tablet). Web sitemizin türünün ve düzeninin boyutunu, büyük ve küçük bir olmak üzere iki belirlenmiş kesme noktasında önemli ölçüde değiştirdik. Daha büyük çözünürlükler için 22px temel yazı boyutu olan 1.4em bir başlık, 1.4em'nin 30.8 piksele eşit olduğu ve 14px'lik daha küçük taban yazı tipi boyutunda, 1.4em'in 19.6 piksele eşit olacağı anlamına gelir. Yazı tipi boyutumuz 3840 x 2160 boyutlarında dramatik olarak daha büyük olmasına rağmen, aynı zamanda ayarlanmış olduğundan dolayı düzen kırılması konusunda endişelenmemize gerek yok. İçeren elementimizin 50em genişliğinde olduğunu varsayalım. 800 x 600 çözünürlükte 700px olacak ancak 3840 x 2160 çözünürlükte 1100px olacaktır. Dolgularımız ve kenar boşluklarımız da ayarlanacak. Ems'de font boyutu ve mizanpaj setine sahip daha büyük çözünürlükte, tasarımımızın orantılı olarak ölçeklenmesine izin verdik, bu da içeriğimizi daha erişilebilir ve daha okunabilir hale getiriyor.
Duyarlı tasarımın amacı, içeriğinizi tüm ekran çözünürlüklerinde ve cihazlarında engelliler için bile herkes için erişilebilir kılmaktır. İçeriği gizlemek hiçbir zaman iyi bir fikir değildir. Şansınız varsa, gizlemek zorunda kalırsanız, buna başlamak için ihtiyacınız olmazdı. İçeriği gizlemek, ekran okuyucular için okunamaz hale getirir ve artık içeriğinizi görsel veya bilişsel engelli olanlara erişemez hale getiriyorsunuz. Bunu göz önünde bulundurun, içerik tüm cihazlarda evrensel olmalı, kullanıcılarınızı ayrı bir cihazda neleri görüntüleyebileceklerini kısıtlayarak cezalandırmayın.
Bu söyleniyor, hala ekranın kullanıldığı birkaç kullanım durumu buluyorum : yok; işe yarar. Çoğunlukla kullanım durumları bir tür navigasyonla ilgileniyor ve ben ekranı kullanıyorum: yok; Farklı cihazlarda formu değiştiren gezinti öğelerinde. İçeriği farklı cihazlarda sınırlamak veya gizlemek hiçbir zaman iyi bir fikir değildir çünkü büyük olasılıkla bir varsayımda bu kararı temel aldınız ve bazı kullanıcılar, bir yerlerde çok kötü bir deneyime sahip olacaklar.
Son zamanlarda düşük bant genişliğine sahip kullanıcılara karşı empati eksikliği gösteren çok sayıda web sitesi var. Bu sitelerin çoğunluğu ortak, büyük resimler ve büyük JavaScript kitaplıklarında aynı şeylere sahiptir ve bu web sitelerinin birçoğu, mobil bir ilk yaklaşımla tasarlanmışlarsa optimize edilmiş olabilir.
Duyarlı görüntüler hakkında hala çok fazla tartışma olduğu için, herhangi bir çözüm için herhangi birisinin taahhütte bulunması zordur. İkilemi anlıyorum, ancak tüm tarayıcılarda ve cihazlarda standart olan mükemmel bir çözüm için beklemek, mevcut web sitenizi sınırlı bant genişliğine sahip cihazlarda daha kolay kullanmıyor. Sorununuzu en iyi şekilde gideren ve onunla birlikte çalışan bir çözüm bulun. Bir çözüm bulamamak herkes için performans sorunları anlamına gelir ve bu da duyarlı tasarımın amacını tamamen ortadan kaldırır.
Büyük JavaScript kütüphaneleri küçük cihazlarda da sorunlara neden olabilir. Ekran çözünürlüğüne veya cihaz türüne bağlı olarak bunları koşullu olarak aramak için bir yol bulmayı deneyin. Duyarlı tasarıma gelince, performans bir sonradan yapılmamalıdır.
Web patladı ve mobil ve akıllı telefon teknolojisinin gelişiyle içeriğe her yerde ve her yerde erişebiliriz. Tüm kullanıcılarımıza ulaşabilmemiz ve istedikleri zaman istediklerini verebilmemiz önemlidir. Duyarlı tasarım çok yeni bir tekniktir ve bence bu, içeriğimizi web genelinde birleştirmek için mükemmel bir tekniktir.
Duyarlı tasarıma ilişkin diğer efsaneler, debunk etmek ister misiniz? Duyarlı tasarım için herhangi bir olumsuzluk var mı? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, duyarlı web resmi Shutterstock üzerinden.