Mobil web'in istikrarlı bir hızla büyümesi ve Google'ın sayfaları yanıt verme hızlarına göre sıraladığını onaylamasıyla, web sitenizin çeşitli farklı cihazlara ve ekran boyutlarına uyum sağlaması çok önemlidir.

Ancak duyarlı web tasarımı, yerleşim düzeninizi uyarlamak için genişletmekten veya sıkıştırmaktan daha fazlasıdır. İçeriği ve işlevselliği korurken tek bir web sitesini birkaç farklı şekilde sunmakla ilgilidir.

Bunu akılda tutarak, duyarlı web tasarımı için en iyi yedi uygulama ipucunu burada bulabilirsiniz.

1. Duyarlı düşünün

Duyarlı web tasarımı başladığında, tasarımcılar en büyük ekranları planlayarak başladılar ve ardından en küçüğüne ulaşana kadar küçüldüler. Çoğu zaman, daha küçük bir ekrana sığacak kadar iyi bozulmayan süslü öğeler içeriyorlardı, bu da mobil versiyonun orijinalin sulandırılmış bir kopyası olmasına ve bir şekilde sonradan düşünülmüş gibi hissetmesine neden oldu. Bugün, mobil cihazlar birçok web sitesi için en büyük trafik hacmini oluşturuyor, bu nedenle mobil kullanıcılar, diğer kullanıcılarla aynı kalitede tarama deneyimi bekliyor ve hak ediyor. Ancak bu, daha büyük ekran boyutlarının da göz ardı edilmesi gerektiği anlamına gelmez. Birçok kişi hala büyük bir masaüstü kullanıyor ve gün boyunca farklı ekranlar arasında daha da fazla atlıyor.

Bunu çözmenin en iyi yolu, "önce mobil" yaklaşımını benimsemek, önce en küçük ekran için tasarım yapmak, ardından ekran boyutlarını artırdıkça gerekli öğeleri eklemektir.

Popüler kesme noktaları için tasarlamaya odaklanın, ancak aradaki boşlukları da hesaba katın - her gün yeni cihazlar piyasaya çıkıyor ve bugün neredeyse hiç kullanılmayan bir ekran boyutu önümüzdeki ay yeni büyük şey olabilir. Tabletlerini portre modunda kullanan kişileri de göz önünde bulundurmayı unutmayın; bu, gözden kaçabilir ve ezilmiş bir masaüstü veya çok fazla boş alana sahip basit bir mobil düzen gibi görünebilir.

2. İçeriğe dikkat edin

Odak noktanızın tüm öğeleri bağlamlarını dikkate almadan bir sayfaya sığdırmak olduğu 'boyutuna sığdırma' yaklaşımının tuzağına düşmeyin. En önemli içerik ve özelliklere odaklanarak ve hangi öğelerin tehlikeyle karşı karşıya olduğu konusunda acımasız davranarak başlayın. Farklı ekran boyutlarını yükseltirken, her aşamada bunların dahil edilip edilmediğini sorgulayın – eğer üzerinde çok uzun süre düşünmeniz gerekiyorsa, muhtemelen orada olması gerekmez. İhtiyacınız olan içerik ve özellikler konusunda netleştikten sonra, düzen üzerinde çalışmaya başlayabilirsiniz. Ekran boyutlarının çok çeşitli olması, geleneksel "ekranın üstü" kavramının hemen hemen ölü olduğu anlamına gelir. İnsanlar kaydırmaya alışkın – Facebook ve Twitter gibi sitelerin gelişi bunu gördü – bu nedenle sitelerinizi kaydırmayı teşvik edecek, ancak en önemli bilgileri ekranın üst kısmına doğru tutacak şekilde tasarlayın. Bu, iletişim bilgilerini, CTA'ları ve e-ticaret sitelerinde çok önemli olan 'Sepete Ekle' düğmesini içerir.

Öğelere kullanıcı için önemlerine göre öncelik verin; böylece, bir masaüstündeki bir görüntünün yanına metin sığdırabiliyorsanız, bir mobil cihazda kullanıcılarınızın dikkatini çekmek için hangisinin daha iyi olduğunu dikkatlice düşünün ve bunun önce geldiğinden emin olun. Önizleme sayfasındaki bir blog resmi gibi diğer öğeler, mobil versiyonun tamamen dışında bırakılarak odak içeriğin kendisine bırakılabilir.

3. Ölçeklenebilir gezinme ile denemeler yapın

Gezinme, duyarlı web tasarımının en zorlu yönlerinden biridir, ancak aynı zamanda en önemlilerinden biridir. Çoğu web tasarım kuralının aksine, burası tutarlı olmanız gerekmeyen bir yerdir - büyük ekranlarda kullanılan büyük, karmaşık menüler cep telefonlarında çalışmayacaktır, bu nedenle farklı ekranlar için farklı türde bir gezinme oluşturmak tamamen kabul edilebilir. boyutlar. Gizli gezinme, menünün varlığını gösteren burger gibi basit bir simgeyle birçok mobil sitede popülerdir. Menüyü aşağıdaki içeriğin üzerine kaydırabilir veya tüm ekranda kaplamasını sağlayabilirsiniz. Diğer bir seçenek ise, içeriğin ekranın yan tarafından açıkça kaybolduğu ve kullanıcıların etkileşime geçmek için kaydırabileceği yatay kaydırma için dolgunlaştırmaktır.

Hangisini seçerseniz seçin, tutarlılığı tamamen reddetmeyin - menünüz, farklı işlevselliğe sahip olsa bile, görsel özellikler açısından diğer sürümlere benzer bir duyguya sahip olmalıdır.

4. Görüntüler hakkında her şey

Bir ziyaretçinin bir siteyle ilgili ilk izlenimlerinin büyük bir bölümünü oluşturduğundan, web sitelerindeki resimlerin kalitesi çok önemlidir. Ancak büyük görseller, düşük bant genişliği özelliklerine sahip mobil cihazların indirme hızları üzerinde olumsuz bir etkiye sahiptir. İçeriğe çok benzer şekilde, her ekran boyutu için her görüntünün dahil edilmesini sorgulamalı ve birden çok büyük resim içeren kaydırıcılar gibi öğeleri yeniden gözden geçirirken yalnızca kesinlikle gerekli olanları eklemelisiniz.

Kalan görüntülerinizi uyarlanabilir boyutlandırma ile esnek hale getirerek optimize edin ve uygun biçimi kullanarak saklayın. Görüntü muhtemelen tam ekran olacağından, cep telefonunda 'görüntüyü büyüt' işlevine ihtiyaç duymayacağınızı unutmayın. Resim galerileri eklemeniz gerekiyorsa, uzun kaydırmalı gezinmeyi seçin veya aralarında gezinmek için yatay kaydırmayı kullanın.

5. Tipografiyi düşünün

Orta veya büyük ekranda çalışan birçok yazı tipi, daha küçük ekran boyutları için küçültüldüklerinde düzgün okunması çok zor olacağından, seçtiğiniz tipografi dikkatli bir şekilde değerlendirilmeyi gerektirir, bu nedenle her zaman farklı ekranlarda kapsamlı bir şekilde test edin. Başlıklarınızı dikkatli bir şekilde dengeleyin - işlevlerinin açık olması gerekir, ancak çok büyüklerse aşırı baskın görünebilirler - ve arka plan rengi ile yazı tipi arasında yeterli kontrast olduğundan emin olun.

Farklı ekran boyutlarında yukarı çıkarken içeriğinizin satır uzunluğuna dikkat edin; satır çok uzunsa okunması zor olabilir. Satır uzunluklarını yaklaşık 60–75 karakter arasında tutun ve daha geniş ekranlarda alanı bir kenar çubuğu veya resimlerle doldurun.

6. Dokunmatik ekranlar için optimize edin

Duyarlı web tasarımının yalnızca farklı ekran boyutlarını hesaba katması gerekmez; ayrıca farklı giriş yöntemleri için optimize edilmelidir. Dokunmatik ekranlar yanıltıcı olabilir, bu nedenle düğme boyutlarınız ve bağlantılarınız konusunda cömert olmak ve yaklaşık 44 nokta karelik tıklanabilir bir alanı hedeflemek en iyisidir. Ayrıca dokunmatik ekranlar için kullanıcı deneyiminizi optimize etmeniz gerekir. Evet, doğası gereği sezgiseldirler, ancak kaydırma hareketleri gibi incelikli gezinme yardımcıları değerli bir eklentidir.

7. Gerçek cihazlarda test edin

Son olarak, tasarımınızı planlamak çok önemli bir adım olsa da, yalnızca teoriye güvenmeyin. Tasarımlarınızı ve CSS kesme noktalarınızı kontrol etmenize yardımcı olacak mobil öykünücüler vardır, ancak hiçbir şey gerçek şey üzerinde test etmekten daha iyi değildir - bu öykünücülerin çoğu yalnızca çeşitli ekran boyutlarını çoğaltır, ancak farklı işletim sistemlerinin işlevlerini değil. Oynamak için çeşitli farklı boyutlarda ekranlara ve bir dizi farklı kullanıcıya sahip olduğunuzdan emin olun ve tasarımlarınızı kapsamlı bir şekilde test edin. Bu genellikle yeni bir bakış açısı getirir ve doğru yolda olduğunuzu onaylar veya size nerede iyileştirmeler yapılabileceğini gösterir.

Duyarlı web tasarımı sürekli gelişiyor ve büyüyor ve biz burada sadece yüzeyi çizdik. Bu alandaki en iyi uygulamalar da sık sık değişiyor, bu nedenle en son gelişmelere ayak uydurmak gerekiyor. Çoğu kullanıcının cihazlarında zayıf bir bant genişliğine, düşük çözünürlüğe ve küçük işlem gücüne sahip olduğunu unutmayın; bu nedenle siteniz basit, iyi organize edilmiş, temiz, kullanımı kolay ve çeşitli farklı ekranlarda iyi görünmelidir.