Duyarlı tasarım, web tasarımında nispeten yeni bir terimdir. Web tasarımcısı Ethan Marcotte'nin bu terimi kullandığı 2010 yılının Mayıs ayında yalnızca üç yıl önce ele alındı. onun makalesi A Listesi için.
Bugün, duyarlı tasarımın burada kalmaya devam edip etmediği veya panda bir flaş olup olmadığı ile ilgili bir tartışma var. Sadece zaman gösterecek, ancak şimdilik, duyarlı tasarımın kullanıcı deneyimini olabildiğince konforlu hale getirmeye çalıştığı açıktır.
Duyarlı tasarım, kullanıcılara gelişmiş bir görüntüleme deneyimi sunan siteler oluşturmaya odaklanan bir web tasarım felsefesidir. Bu, zahmetsiz gezinme ve okuma, minimum tarayıcı yeniden boyutlandırma, kaydırma ve kaydırma gibi özellikleri içerir. Tüm bunlar, masaüstü bilgisayarlardan akıllı telefonlara kadar çeşitli farklı cihazlarda gerçekleşir.
Bu web tasarım yaklaşımı hala yeni bir devlet olduğundan, duyarlı tasarımın ne hakkında olduğu konusunda tamamen net olmayabilir. Birden fazla platformda içeriklerin sorunsuz bir şekilde görüntülenmesi hakkında mı yoksa daha çok, işletmelerin satışlarını daha iyi bir kullanıcı deneyimi ile artırmak için daha çekici siteler oluşturmasına yardımcı olmak mıdır?
Mashable zaten bir uzuvda gitti ve denilen 2013 yılı duyarlı tasarım yılı. Bu görülmekle birlikte, duyarlı tasarımın bazı temel yönleri hiçbir zaman gitmeyecek standartlardır. İşte kendinizi tanımak için en önemli duyarlı tasarım gerçekleri.
Duyarlı tasarım ve mobil tasarımın bir ve aynı olduğunu düşünmek için affedilsin - ama değiller. Elbette, duyarlı tasarım, web sitelerini hem tarayıcı boyutuna hem de mobil cihazlara uygun olacak şekilde oluşturur, ancak duyarlı tasarım gerçekten web tasarımdır. Mobil tasarım olarak bu web tasarım yaklaşımına atıfta bulunulması problemi, doğal olarak sınırlayıcı olmasıdır, bu da yaklaşımın kendisine bir zarar vermektedir.
En etkili yanıt veren web siteleri, bir dizi çözünürlükte olması gerektiği gibi görülebilir. Bu, normal 1024 × 768 pikselden 1920 × 1080 ekranlara ve aradaki herşeye kadar her şeyi içerir. Bunlar gibi siteler de tabletlerde (hem retina hem de standart ekranlar) ve akıllı telefonlarda görkemli görünmektedir. Bir web tasarımcısı duyarlı tasarımı yalnızca mobil içerikle inceliyorsa, potansiyel olarak daha geniş bir kullanıcı deneyimi yaşamaktadır.
Aynı zamanda, mobil, tüm duyarlı tasarım tartışması için gerçekten uygun bir başlangıç noktasıdır. Bir mobil şema ile başlamak ve daha sonra duyarlı bir web sitesi geliştirildiğinden bu tasarımı ek boyutlara genişletmek norm oldu. Birçok tasarımcı, bunları en aza indirmekten ziyade görselleri büyütmenin daha basit olduğuna inanıyor.
Web tasarımcılarının takip etmesi gereken bir kural varsa, bu görüntü kalitesi gerçek görüntü sayısından çok daha önemlidir. Bunun nedeni, düşük kaliteli bir görüntünün her boyutta çekici görünmemesidir. Bir görüntüyü yüklemek için sitenin aldığı zaman neredeyse boyut kadar önemlidir. Mobil kullanıcılar bununla aynı fikirdeyecekler, çünkü bununla rekabet edebilecekleri sınırlı bant genişlikleri var.
Bir web tasarımcısı ne yapmalı? Yükleme süresi ve kalite arasındaki akıllı dengeye ulaşmanız yeterlidir. Bu, CSS yükseklik ve genişlik özellikleriyle görüntüleri ölçeklendirmeyi, tam boyutlu görüntüleri yüklemeyi engelleyen ve Internet için görüntülerin optimize edilmesini içerir. Yüklemeden önce, keskin ve görsel kaliteyi koruduğu sürece her görüntüyü kırpmanız ve her resmi mümkün olan en küçük boyutta kaydetmeniz önerilir.
Çıkış yapmak Sony ABD'nin web sitesi . Hangi boyutta olursa olsun, tüm görüntülerin kalite açısından nasıl keskin olduğunu unutmayın. Siteyi ziyaret ettiğinizde veya ana sayfayı yeniledikten sonra, görüntülerin ne kadar hızlı yüklendiğini de not edin. Herşeyin odaklanmaya son derece keskin bir şekilde gelmesi için bir saniyeden fazla beklemek zorunda değilsiniz.
Tasarımcılar, duyarlı bir ortamda görüntüleri birleştirirken birçok seçeneğe sahiptir. Sadece birkaç görüntü kullanabilirler; mobil boyutlardaki şemalarda görüntülerin kullanımını azaltmak; görüntülerin kendilerini mobil ortamda maskelemelerine izin vermek; veya çeşitli dosya boyutları ve sürümleri kullanın. Bazı geliştiriciler görüntüleri gizlemeye karşı olsa da, bu seçimler etkili bir şekilde çalışacaktır, çünkü kullanıcı görünmeyene rağmen görüntüleri yüklemeye devam edecektir.
Tür tek bedene uygun olmamalıdır. Masaüstünüzde göze hitap eden bir çeşit yazı tipi akıllı telefonunuzda korkunç olabilir. Tipografi, duyarlı tasarımın diğer yönleri ile aynı kuralları izlemelidir.
Duyarlı tipografinin en önemli yönü çizgi uzunluğudır. Düz okunabilirlik için, ekranın genişliğine göre optimize edilmeli. Masaüstü web siteleri için başparmak kuralı, 50 ila 75 karakter arasında bir çizginin ideal olması; Mobil cihazlar için, sadece 35 ila 50 karakter arasında idealdir.
Tip ayrıca dikey olarak kolayca okunmalıdır. Birçok site, büyük metin blokları için ekranın punto boyutunun yüzde 140'ına varan bir satır alanı kullanır. Ekran daha küçükse, daha fazla alan eklenmelidir.
Kullanılan belirli yazı tipi bile önemli. Süslü yazı tipleri ve yenilik yazı tipleri, büyük ekranlarda görsel olarak çekici görünme özelliğine sahiptir, ancak nokta boyutu küçükse, okunması zor olur. Bu tür yazı tipleri aralarında çok yer olmalıdır. Daha küçük boyutlarla çalışırken, normal sans serif stillerini ve hatta vuruşları kullanmak en kolay yoldur.
üzerinde Hardboiled Web Tasarımı'nın sitesi Bu ilkelerin takip edildiğini ve iyi yanıt verileceğini görebilirsiniz. Bir masaüstündeki metnin satır uzunluğunun - ortalama 50 ila 75 karakterlik ideal öneriden daha büyükken - nasıl temiz ve okunması kolay bir yazı tipinden oluştuğunu not edin. Ayrıca, satır alanı yazı tipinin nokta boyutundan da büyüktür. Mobil cihazlarda, sitenin yanıt verme yeteneği daha da iyi performans gösteriyor: Bir iPhone 5 ekranında, satır başına düşen karakter sayısı yaklaşık olarak 67'dir, bu da 35 ila 50 karakter arasında ideal kuralın biraz üzerindedir.
Web tasarımcılarının düşünmesi gereken en önemli faktörlerden biri olan kullanıcı deneyimine gelince, navigasyon önceliklerin en üstünde yer alıyor. Navigasyon rahat bir kullanıcı deneyimi sağlamak için pürüzsüz ve verimli olmalıdır.
Etkili yanıt veren tasarım, belirli bir tarayıcının belirli genişliğine dikkat ederek bunu sağlamalıdır. Duyarlı tasarımı iyi kullanan bir site, site gezintisini, tarayıcının genişliğine bağlı olarak farklı alanlarda düzenler. Bunun en güzel örneklerinden biri şudur: Gıda Duygusu Sitesinin gezinmesi.
Duyarlı tasarımın site navigasyonunu daha büyük ekranlı cihazlarda daha büyük oranlara ölçeklendirmesi bir hata olur.
Şimdi, web tasarımcılarının duyarlı tasarımdan söz ettiklerini duyduğunuzda, bunun yalnızca bir web sitesinin iyi görünmesini ve daha küçük, mobil ekranlarda sorunsuzca çalışmasını sağladığını bileceksiniz. Bu tasarım yaklaşımının, her boyuttaki web sitelerinin kullanıcıya en uygun deneyimi sunma ilkesini temel aldığını bileceksiniz - siteyi görüntülemek için ne kullanıyor olursanız olun.
Duyarlı tasarım, en azından internet üzerinde sadece web sitelerini görüntüleyen kişilerin çoğuna nispeten yeni bir kavramdır. İşte bu yüzden pek çok insan, duyarlı tasarımı nelerin yarattığı konusunda hemfikir olamaz… duyarlı tasarım. Mobil ekranlarda her şeyi düzgün görebilmek mi? Gözü memnun edecek olan yükleme süreleri ve yüksek kaliteli görüntüler mi? Temiz tasarım ve okunması kolay yazı tipleri hakkında mı?
Hepsi bu kadar ve daha fazlası. Bunlar sadece bu web tasarım yaklaşımının temelleridir, ancak duyarlı tasarım hala gelişmekte ve değişmektedir, bu yüzden de ek unsurlar da dikkate alınacaktır. Sonunda, kullanıcı deneyimini geliştirmekle ilgili, çünkü hiç kimse yavaş, bulanık, okunması zor, karmaşık veya gezinmesi zor bir web sitesiyle uğraşmak istemiyor.
Duyarlı tasarım sadece bir trend mi? Duyarlı tasarımın kilit yönleri nelerdir? Yorumlarınız ile düşüncelerinizi öğrenmemize izin verin.