Duyarlı Başlıklar ve Logolar - İpuçları ve Tuzaklar

Duyarlı web tasarımı kavramı, web'e izin verdi ve öncü geliştiriciler için bir temel haline geldi. Modern dünyada duyarlı tasarımın değerini inkar etmiyor, ancak duyarlı tasarımların nasıl düzgün bir şekilde tasarlandığını tam olarak anlamakta zorluk çekiyor..

Bir web sitesinin pek çok benzersiz alanı var ancak bireysel öğelere odaklanmak, bir kullanıcının hedeflerini ve bu hedeflere duyarlı tasarımla nasıl ulaşılabileceğini anlamanıza yardımcı olabileceğinden, konu uzayabilir.

Kapatmak istiyorum başlıklar, logolar için tasarım önerileri, ve gezinme menüleri, Duyarlı tasarıma ait oldukları için. Bu önerileri kendi işinize uyguladıkları gibi uygulayın ve arayüzlerinizi kullanıcı davranışlarını göz önünde bulundurarak tasarladığınızdan emin olun.

Daha İnce Gezinme Çubukları

Büyük ekranlarda, büyük başlıklara, hatta çok seviyeli bağlantı katmanlarına sahip büyük boyutlu başlıklara sahip olmak normaldir. Ancak daha küçük ekranlar aynı alana sahip değildir ve gerektiğinde kısıtlanmalıdır.

Yerel mobil uygulamaların tipik olarak sabit başlıklar, bu, duyarlı tasarımda da yaygın bir uygulamadır. Sabit bir başlık da küçülmeli daha küçük cihazlarda olduğunda: bu içerik için daha fazla alan bırakır ancak okuyuculara başlık ve gezinmeye doğrudan erişim sağlar.

Örneğin, tam boyutlu bir monitörde ve bir mobil cihazda Cartoon Brew düzenini alın.

600px kesme noktasında, gezinme sayfadaki yüksekliğinin neredeyse yarısına kadar küçülür. Bu hem logoyu hem de tıklanabilir nav menüsünü küçültür, ancak bunlar çok daha orantılı göreceli ekran alanına.

Ayrıca, Cartoon Brew'ın mobil ekranda duyarlı bir menü olarak açılan bir kutunun olduğunu düşünün. Bu demektir ki içerik bindirmeleri Sayfa açıldığında, bu nedenle bunun için yeterli yer bırakmak önemlidir..

Benzer bir örnek Jacksonville Art Walk web sitesinde bulunabilir. Üst gezinme çubuğu kaydırma yaparken sabit kalır, ancak daha küçük cihazlarda küçülür. İnce tasarım çubuğu için bu duyarlı tasarım için daha iyidir içerik için daha fazla alan bırakır daha küçük bir mobil ekranda.

Gezinme çubuğundaki her bağlantının, metin bağlantısına eklenmiş ilgili bir simgesi vardır. Bu geniş ekran monitörde harika görünüyor, ancak daha küçük ekranlar için çok ayrıntılı.

Art Walk navigasyonu, 770px sınır değerinin çevresinde sabit bağlantıları olan bir açılır menüye dönüşür. Simgeler açılır menüde gizlenir çünkü küçük cihazlarda çok küçük ve çok sıkışık olurlar.

Duyarlı bir başlık tasarlarken her zaman düşünün genel ekran alanı Navbar'ı şekillendirirken. Başlığın sabit kalmasını istemiyorsanız bu tamamen iyi, ancak yine de isteyebilirsiniz biraz küçült Sayfanın en üstünde yer kazanmak için.

Logoyu Simgelemek

Çoğu logo, markayı temsil eden bir metin ve bir simge veya grafik içerir. Bu her zaman yapabileceğin anlamına gelir Iconify (evet bu gerçek bir kelimedir) bu tür logolar bir sembole kadar tam sürümünün.

Bu, duyarlı başlıklar için güçlü bir tekniktir, çünkü her zaman tam bir logo için yeterli alan yoktur. Tam boyutlu bir logonun parıltısını ve çekiciliğini yitirirsiniz, ancak temiz bir duyarlı düzen için ödemek zorunda kalabileceğiniz fiyattır..

Web Designer News logosunu inceleyin ve tarayıcıyı yeniden boyutlandırırken nasıl değiştiğini görün.

Belki siteyi ilk ziyaret eden herkes bu simgeyi tanımaz, ancak desen tanıma bu büyük bir sorun değil.

İnsanlar sayfanın sol üst köşesinin genellikle bir logo için ayrıldığını bilecek kadar Internet’te olmuştur. Bu küçük pembe simge de favicon'da kullanılır, bu nedenle siteye çok fazla kazmadan bazı sonuçlar çıkarmak kolaydır..

Bu yoğun logo tekniği için her zaman grafiğe güvenmenize gerek yoktur. Young And Hungry başlığı logo için "Y&H" metnine göre yoğunlaşan parlak yeşil metin kullanıyor..

Bu, markalamanın tek harf olarak tanınması kolay değilse, her site için çalışmayabilir. Ama bu logoları göstermek için gidiyor basitleştirilebilir hem grafiklere hem de metne hem de değişkenlere daha az yer kaplar daha küçük ekranlarda.

Tam Ekran Arka Planları Kullanma

Çoğu açılış sayfası, daha fazla dikkat çekmek için tam ekran arka planlar kullanır. Bu güçlü bir tekniktir ancak çoğu zaman büyük monitörlerde en iyi sonucu verir.

Peki bunu daha küçük bir ekranda nasıl idare edersiniz? Genellikle, tasarımcılar arka plan resmini kaldır Belirli bir kesme noktasını veya görüntünün kendisini geçtikten sonra yeniden hizalandı pencereye sığdırmak için.

Cap Radio Raffle bu tekniği ana sayfasında kullanıyor. Arka plan görüntüsü odak noktasını görünümde tutar Ekranın boyutu ne olursa olsun, her zaman.

Bu tür bir çözüm tipik olarak bazı CSS konumlandırması gerektirir ama asıldığın zaman çok basit. Sadece odak noktasını görünümde tutun her zaman ve görüntü kabını yeniden boyutlandır cihazla orantılı olarak sığdırmak için.

Estetik nedenlerle geniş arka planlar ötesinde, sayfa içeriği için büyük resimler de kullanabilirsiniz. Mashable'nin ana sayfası, tüm düzeni kapsayan üst hikaye için özellikli bir görüntü arka planı kullanıyor.

Duyarlı düzenleri görüntüyü sıkıştırır süre merkezi bir odak noktası tutmak. Bunu yapmak zordur, çünkü öykü değiştiğinde öne çıkan görüntü değişir, bu nedenle fotoğrafların dikkatlice küratörlüğünü yapılması gerekir. Mashable'nin çözümü, doğru bir şekilde tasarlandığında bloglar ve dergi düzenleri için tam ekran fotoğrafları kullanmak için mükemmel bir yöntemdir..

Gezintiyi Basitleştirin

Küçük ekranlar için tadilat yapılırken, mümkün olduğu kadar çok bağlantıda kal navigasyonda ve kolayca erişilebilir yap. Bu, çok katmanlı açılır menüleriniz varsa, birkaç bağlantıyı atmanız gerekebileceği anlamına gelir.

Her ne kadar doğru bir stratejiniz varsa, tüm açılanları kontrol altında tutmak hala mümkündür. Örneğin, Kidscreen bir kullanır. küçük ok simgeleri ile açılır menü duyarlı menüdeki alt çizgileri gösteren.

Birçok kişi hamburger menüsüne karşı çıkıyor ama ben uzun nav menüleri için gerekli bir ürün olarak kabul etmeye geldim. Basitçe çalışır ve çoğu akıllı telefon kullanıcısı tarafından "menü düğmesi" olarak anlaşılır hale gelmiştir..

Aslında, üç çubuklu hamburger menüsüne dayanmayan duyarlı bir site bulmak için zorlanacaksınız. CyberChimps buna harika bir örnek dikey bir açılır pencere kullanıyor içeri kaydırmak yerine.

CyberChimps için gezinti yapısı sayfanın üstünde aşağı kayacak şekilde yeniden düzenlenir. Menü ile yukarıdan düşer bağlantılar için büyük blok elemanları.

İle tıklanacak daha fazla alan ve daha büyük bağlantı metni, sayfalarda gezinme işlemi çok daha basit hale gelir. Bu felsefeyi tüm duyarlı başlığınızla takip etmeyi hedefleyin; tasarımlarınız önemli ölçüde gelişecektir.

Kendinizinkini oluşturun

Emrinde bu ipuçları ile kullanılabilir duyarlı başlıkları oluşturmakta hiç zor olmamalıdır. Size yardımcı olacak birçok araç varken, gerçekten anlamanın tek yolu pratik yapmaktır..

Öyleyse bu teknikleri yanınıza alın ve web siteleri oluşturmaya başlayın! Ayrıca, aşağıda ele alabileceğiniz yanıt veren başlıklar için daha fazla kaynak listeledik.

• Temel Bir Mobil CSS Duyarlı Gezinme Menüsü Oluşturma (Teamtreehouse.com)
• Responsive Web Sitesi Başlığı için En İyi Uygulama (Ux.stackexchange.com)
• Başlık resmimi uygun şekilde nasıl yanıt verebilirim?? (Stackoverflow.com)