“ Duyarlı bir web siteniz var mı?” Bu, ziyaretçinin cihazına ve ekran boyutuna bağlı olarak değişen bir yerleşime sahip bir sitedir. Duyarlı web tasarımı artık sektörün en iyi uygulamasıdır. Google tarafından önerilir ve Web genelinde milyonlarca sitede bulunur. Ancak, farklı ekran boyutlarında “uyan” ve gerçekten duyarlı bir siteye sahip olan bir web sitesi sahibi olmak arasında büyük bir fark vardır.
Şirketlerin web sitelerini yeniden tasarladıklarını ve yeni mobil uyumlu tasarımlarının erdemlerini anlatan bir basın bültenini yayınladıklarını rutin olarak görüyorum. Bu siteleri ziyaret ettiğimde, genellikle bulduğum şey, farklı ekranlara sığacak şekilde ölçek ve değişiklik yapan bir düzendir, ancak yanıt verme fikrini aldıkları kadarıyla. Bu yeterli değil. Gerçekten duyarlı bir web sitesi, daha küçük veya daha büyük bir ekrana sığacak şekilde ölçeklendirmekten fazlasını yapar. Bu sitelerde, aşağıdaki önemli özellikleri de bulacaksınız.
1. Optimize Edilmiş Performans
Kimse bir web sitesinin yüklenmesini beklemeyi sevmez ve bir kişi idealden daha az bir bağlantıya sahip bir mobil cihaz kullanıyorsa, bir sitenin hızlı bir şekilde yüklenmesi ihtiyacı daha da önemlidir.
Peki sitenizin performansını nasıl optimize edersiniz? Yeniden tasarlamanın bir parçası olarak yeni bir site ile başlıyorsanız, o zaman bu projenin bir parçası olarak bir performans bütçesi oluşturmaya dikkat etmelisiniz. Mevcut bir siteyle çalışıyorsanız ve sıfırdan başlamıyorsanız, ilk adım, sitenizin performansını bugün nerede durduğunuzu görmek için test etmektir.
Sitenizin performans açısından geçerli olduğu bir taban çizgisine sahip olduğunuzda, indirme hızını artırmak için gerekli iyileştirmeleri yapmaya başlayabilirsiniz. Başlamak için harika bir yer, muhtemelen sitenizin görüntüleri ile. Yavaş yükleme sitelerine geldiğinde, çok büyük görüntüler # 1 suçludur, bu nedenle web teslimatı için resimlerinizi optimize etmek, sitenize performans açısından gerçekten yardımcı olabilir.
Gerçek şu ki, geliştirilmiş web sitesi performansı ve hızlı indirme hızları, tüm ziyaretçilerin beğeneceği bir avantajdır. Ne de olsa hiç kimse bir sitenin “çok hızlı” yüklendiğinden şikayet etmedi, ancak bir sitenin yüklenmesi çok uzun sürdüğü takdirde, insanları ekranlarına duyarlı bir şekilde “uyup uymadığı” na çevirecektir.
2. Akıllı İçerik Hiyerarşisi
Bir web sitesi geniş ekranda görüntülendiğinde, mevcut önemli ekran mülkü nedeniyle çeşitli şekillerde içerik yayınlayabilirsiniz. Ekrandaki önemli mesajları ve görüntüleri, haber güncellemelerini, etkinlik bilgilerini ve site navigasyonunu bir kerede ekrana sığdırabilirsiniz. Bu, bir ziyaretçinin tüm sayfanın içeriğini kolayca ve hızlı bir şekilde taramasına ve kendileri için neyin önemli olduğuna karar vermesine olanak tanır.
Bu senaryoyu, bu site tasarımını aldığınızda ve bir cep telefonu gibi küçük ekran aygıtları için dönüştürdüğünüzde oldukça çarpıcı bir şekilde değişir. Aniden daha önce sahip olduğunuz ekran gayrimenkulünün bir kısmı ile çalışıyorsunuz. Bu, sitede ilk olarak nelerin görüneceğine, nelerin izleyeceğine, vb. Karar vermeniz gerektiği anlamına gelir. Bir kerede görülen her şey yerine, bir veya iki şeyi (bir tanesi muhtemelen navigasyon olan) göstermek için yeterli alana sahip olabilirsiniz. Bu, hiyerarşinin kararlarının alınması gerektiği anlamına gelir. Ne yazık ki, genellikle ekranda ilk olanı belirleyen ve sonra ikinci, vs. sayfanın kendisinin kodlandığı yoldur. Duyarlı bir site oluştururken, önce ekranda ilk önce ne olduğunu, ardından da koddaki ikinci öğeyi ve benzerlerini görüntülemek en kolay yoldur. Ne yazık ki, bir cihazda en önemli olanı diğeri kadar kritik olmayabilir. Gerçekten duyarlı bir site, içeriğin hiyerarşisinin farklı durumlara bağlı olarak değişmesi gerektiğini ve nerede görüntülendiğine dair akıllı olması gerektiğini anlar.
CSS Grid Layout, Flexbox ve daha fazlası dahil olmak üzere CSS mizanpajı tekniklerindeki geliştirmeler, HTML kodundaki içerik alanlarının tam sırası ile engellenmek yerine, akıllı tasarımcılar içerik oluştururken web tasarımcılarına ve geliştiricilere daha fazla seçenek sunar. Bu yeni yerleşim tekniklerinden yararlanarak cihaz manzarasının daha da önemli hale gelmesi ve sitemizin kullanıcılarının ihtiyaçları gelişmeye devam ediyor.
3. Bir Cihazın Güçlü Yönlerini ve Zayıf Yönlerini hesaba katan deneyimler
Cihazların konusunu ele alarak - birinin sitenizi ziyaret etmek için kullanabileceği her cihaz, bu platformun doğasında bulunan güçlü ve zayıf yönlere sahiptir. Harika bir yanıt veren site, farklı cihazların yeteneklerini ve sınırlamalarını anlar ve bunları, bir ziyaretçinin o anda hangi cihazı kullanıyor olabileceğine en uygun olan özelleştirilmiş deneyimler oluşturmak için kullanır.
Örneğin, bir cep telefonu, geleneksel bir masaüstü bilgisayarında bulamayacağınız bir dizi özellik içerir. GPS, mobil merkezli bir özelliğe bir örnektir (evet, masaüstlerinde de genel konum bilgisini alabilirsiniz, ancak cihaz GPS'i çok daha doğrudur). Siteniz, çok detaylı ve spesifik adım adım yönlendirme bilgilerini veya o anda tam olarak nerede olduklarına dayalı özel teklifleri akıllıca göndermek için GPS bilgilerini kullanabilir.
Bu prensibin uygulamadaki diğer bir örneği, hangi ekran görüntüsünü kullandığınızı anlayan ve bu ekrana en uygun görüntüleri gönderen bir site olacaktır. Yüksek piksel yoğunluğuna sahip bir ekranınız varsa, o ekrana daha yüksek kaliteli görüntüler göndermeye karar verebilirsiniz. Bu aynı görüntüler, daha az yetenekli bir ekranda anlamsız olurdu ve ekstra dosya boyutu gerçek bir sebepten dolayı indirilirken ekstra kalite kaybolacaktı.
Gerçekten harika yanıt veren siteler, tüm kullanıcı deneyimini göz önünde bulundurur ve bu deneyimi yalnızca bir cihaz türüne veya ekran boyutuna göre değil, donanımın diğer önemli yönlerini de temel alarak uyarlar.
4. İçerik İçerikli
Başlangıçta, duyarlı web tasarımı, bir sitenin düzeninin farklı ekran boyutlarına yanıt verme fikri nedeniyle adını aldı, ancak yalnızca ekran boyutundan çok daha fazlasını yanıtlayabilirsiniz. Bir cihazın güçlü ve zayıf yönlerini kullanmanın önceki örneğine dayanarak, bir web sitesi deneyimini gerçekten özelleştirmek için bunları ve tarih ve saat gibi diğer verileri kullanabilirsiniz.
Büyük bir fuar etkinliği için bir web sitesi düşünün. Duyarlı bir web sitesi, sitenin sayfalarının düzenini farklı ekranlarla ölçeklendirecek şekilde değiştirirken, hangi içeriğin görüntülenmesinin en önemli olduğunu belirlemek için tarihi de kullanabilirsiniz. Etkinlikten önceki zaman aralığıysa, büyük olasılıkla kayıt bilgilerini belirgin bir şekilde görüntülemek istersiniz. Ancak, olay aslında o anda gerçekleşiyorsa, kayıt en önemli içerik olmayabilir. Bunun yerine, o günkü olaylarla ilgili zaman çizelgesinin, kullanıcının acil ihtiyaçları ile daha alakalı olduğu için daha kritik olduğuna karar verebilirsiniz.
İşleri bir adım ileriye götürdüğünüzde, gerçekte ticari fuarda nerede olduklarını belirlemek için bir cihazın GPS'sine dokunabilirsiniz. Onlara, bulundukları yere dayanarak etkileşimli içerikler verebilir, yakınlardaki stantları veya başlangıç oturumlarını gösteren oturumları gösterebilirsiniz.
5. Erişilebilirlik
Bir sitenin bir ziyaretçinin ihtiyaçlarına gerçekten nasıl cevap verebileceğine bakacağımız son örnek, web sitesi erişilebilirliğini düşünmek. Web siteleri, engelli olanlar da dahil olmak üzere mümkün olduğunca çok insan tarafından kullanılmalıdır. Web siteniz, içeriğe erişmek için bir ekran okuyucuya veya başka bir destekli yazılıma ihtiyaç duyan biri tarafından kullanılmalıdır. Bu sayede siteniz onların ihtiyaçlarına cevap veriyor çünkü engelli ziyaretçiler için farklı olsa da deneyimin hala uygun olmasını sağladınız.
Mümkün olduğunca çok veri noktasına yanıt vererek ve sadece ekran boyutuna cevap vermeden, bir web sitesi sadece “mobil uyumlu” olmaktan çok daha fazlası olabilir. Bu, ifadenin her anlamında gerçekten duyarlı bir deneyim haline gelebilir.