Grup web sitenizdeki görüntüleri optimize etmenin 5 yolu

Günümüzde web siteleri, aynı cihazda (yatay veya dikey) farklı yönlerde bile yüzlerce farklı ekran boyutunda görünebilir. İnsanların sitenizi gördüğü ekranlar, mobil cihazlarda yalnızca birkaç yüz piksel genişliğinde, daha yeni yüksek tanımlı geniş ekran monitörlerde binlerce piksel genişliğinde olabilir.

Yeni teknolojiler, insanların sitenizi görebileceği bir dizi ekran boyutu sağladığından, sitelerin büyük veya küçük, uzun veya geniş herhangi bir ekranda harika görünmesini sağlayan site tasarımı hakkında yeni bir düşünme biçimi de gerektiriyordu.

'Duyarlı' web sitesi tasarımı kavramı burada devreye giriyor!

Duyarlı Tasarım Nasıl Çalışır?

Duyarlı bir web sitesi, konumlandırma ve boyutun görüntülendikleri alana göre 'göreceli' olması için oluşturulur. Siteniz farklı ekranlarda görüntülendiğinde, esneterek veya küçülterek uyum sağlar; mevcut alana sığdırmak için hareket etmek.

Bandzoogle web sitenize yüklediğiniz herhangi bir fotoğraf, resmin içinde bulunduğu 'boşluğun' ne kadar büyük olduğuna bağlı olarak uzar ve ölçeklenir.

Başlık görüntüleri söz konusu olduğunda bu özellikle önemlidir, çünkü duyarlı görüntüler çerçeveye mümkün olan en iyi şekilde "uyar". Bir sürü resmi kırpmak için daha az iş, müzik çalmak için daha fazla zaman demektir, değil mi?

Tasarımınızı tam olarak doğru yapmak için grup web sitenizdeki görüntüleri optimize etmenin beş yoluna bakalım.

1. Doğru resmi seçin

Duyarlı tasarım, başlık resimleriniz gibi sayfa öğelerini kullandığınız resim dosyasının orijinal boyutuyla 'orantılı olarak' ölçekler ve bunu, görüntünün sayfada ayarlandığı alana göre 'göreli' yapar.

Bu, tüm cihazlarda görüntü oranlarının korunduğu ve görüntülerin her zaman içinde bulundukları alanı mümkün olan en iyi şekilde 'doldurmaya' çalışacağı anlamına gelir. Bu, resmin bölümlerinin 'kesilmiş' görünmesine sahip başlık resimlerine neden olabilir - bu duyarlı tasarımda kaçınılmazdır, ancak sığacak şekilde iyi kırpılan bir resim seçmek yardımcı olacaktır.

Sanatçı: Tragedy Ann

Masaüstü ve geniş ekran

Bir dizüstü bilgisayarda, başlık görüntüleri ekranın genişliğine göre ölçeklenir. Bir mobil cihazda görüntü, ekranın yüksekliğine göre ölçeklenir.

Başka bir deyişle, resminiz her zaman alanın en uzun kenarına göre ölçeklenir.

Şimdi, bunu 1.000 piksel genişliğinde bir ekranda hayal edin - masaüstü / dizüstü bilgisayar ekranları yüksek olduklarından daha geniştir ve aynı ekranın da 570 piksel yüksekliğinde olduğunu varsayalım (birçok ekran için yaklaşık 16:9 oranı).

Bu senaryoda, görüntümüz bu ekranda 1.000 piksel genişliğindedir, ancak 900 piksel yüksekliğe ölçeklenmiştir, bu da, yalnızca 570 piksel yüksekliğindeki bir alanda, üstte ve altta 300 pikselin üzerinde bir değer keserek sarmalandığı anlamına gelir. fotoğraf. Başsız resimler, evet!

Mobil ve dikey yönlendirme

600 piksel yüksekliğindeki mobil ekran örneğiyle aynı matematiği yapın - aynı ekranın yalnızca yaklaşık 320 piksel genişliğinde olduğunu söyleyin. Resim bu ekrana uyum sağladığında, görüntünün yarısından fazlası her iki taraftan da kesilecektir (resmin 600 piksel yüksek portre ekranında 667 piksel genişliğe kadar boyutlandırıldığını unutmayın).

Bu, grup fotoğrafınızın kenarında davulcuyu kızdırmak için iyi bir yol, bu da eğlenceli olabilir! Ama hala...

Optimize edin, ardından dosyalarınızı yükleyin

Kullanabileceğiniz iyi bir metafor, resimleri çerçeveleyen bir sanat galerisinde olduğunuzu hayal etmektir - manzara Monet'i bir 'Whistler'ın Annesi' portre çerçevesine koyarsanız, bu çerçeve, duvarın kenarında çok sayıda gerçekten güzel nilüfer kesecektir. senin resmin.

Burası zorlaşabileceği yer - site oluşturucular kullanmak istediğiniz resimleri (veya bunlarda nelerin gösterildiğini) tahmin edemezler, ancak hangi resimlerin ekleneceği konusunda seçici olmak iyi bir ilk adımdır.

Başlığınız için doğru resmi seçmek için birkaç kolay ipucu:

• 'Yakın kırpılmış' görüntüleri kullanmaktan kaçının - görüntünüzün 'odak' çevresinde ne kadar fazla boşluk veya dolgu varsa, odağın farklı ekranlarda kesilmesi o kadar az olasıdır.
  
• Büyük resimler kullanın - 72 dpi boyutunda 2000 x 1800, çoğu Bandzoogle teması için genellikle iyi çalışır ve resimlerinizin her ekranda harika görünmesini sağlamaya yardımcı olur.
  
• Yönlendirmede 'kare'ye yakın görüntüler kullanmaya çalışın - Mükemmel bir kare görüntü olmak zorunda değildir, ancak resminizde eşit yükseklik ve genişliğe mümkün olduğunca yakın bir yerde genellikle herhangi bir ekranda harika çalışır. Bu ekstra alan, sitenizin hangi yönde görüntülendiği önemli değil, size nefes alma alanı sağlar.
  
• Resmin kendisinde metin veya logo içeren resimler kullanmaktan kaçının - kesinlikle önemli metinlerin veya markanızın ziyaretçileriniz için kesilmesini istemezsiniz!
  
• Bunun yerine logonuzu Bandzoogle tema düzenleyicinizin 'başlık / logo' seçeneğinin altına ekleyin. Ardından, başlıkta istediğiniz metni 'Harekete Geçirici Mesaj başlık özelliğine' ekleyin. Bu şekilde, önemli mesajlarınız ekran kenarı tarafından kesilmeyecektir.

Sanatçı: Martin ve James

2. Temanıza göre kırpın

Halihazırda yüklenmiş resimleriniz varsa, Bandzoogle onları daha da iyi göstermek için harika araçlarla birlikte gelir!

Şablon tasarımlarımızdan bazıları yüklendiklerinde 'tam ekran' görüntülenecek, başlık yükseklikleri ayarlanabilir, başlık resimlerini sınırlı bir alanda, farklı şekillerde (Spotlight şablonu gibi) gösterebilir ve hatta başlık resminizi arka plan olarak ayarlayabilir. sayfalarınız (örneğin, Dilim).

Farklı başlık seçenekleriyle farklı temaları denemek kolaydır - 'temayı düzenle' > 'temaları görüntüle' yoluyla tema tasarımını değiştirebilir, istediğiniz temayı seçebilir, o temayı tasarım düzenleyicide özelleştirebilir, 'kaydet' seçeneğine tıklayıp yayınınızı yayınlayabilirsiniz. değişir.

Temanın başlığınızı tam sayfa arka plan resmi olarak ayarlamaması koşuluyla, eklediğiniz resimlerin göreli yakınlaştırma ve konumlandırmasını da ayarlayabilirsiniz.

'İçeriği düzenle'de, içeriği düzenle sekmenizdeki başlık resmini tıklayın, ardından başlık düzenleyicide başlık resmi küçük resminizin altındaki 'kırp' bağlantısını tıklayın.

Daha sonra yakınlaştırma kaydırıcısını kullanarak yakınlaştırmayı ayarlayabilir ve resmi tıklayabilir/göreceli bir yerleşime sürükleyebilirsiniz.

3. Bir odak noktası belirleyin

Başlık düzenleyicide başlık resminizi kırparken, resmin üzerinde küçük bir mavi nokta da görebilirsiniz - bu, 'odak noktanızı' ayarlamak içindir. Bu, görüntünün boyutu veya yönü ne olursa olsun, bu noktanın görüntü üzerinde konumlandırıldığı her yerde her zaman 'odakta' olmasını sağlar.

Bu, yüklediğiniz resmin 'odak noktasının' tamamen ortalanmadığı resimler için gerçekten kullanışlı olabilir - odak noktasını resim odağının üzerine tıklamak/sürüklemek, farklı ekranlarda ne kesilirse kesilsin, odağın önde ve merkezde olmasını sağlayacaktır. .

Kırpma, yakınlaştırma ve odak noktalarınızı ayarladıktan sonra, kırpmayı uygulamak için 'kaydet'i tıklayın ve ardından değişikliklerinizi uygulamak için başlık düzenleyicide tekrar 'kaydet'i tıklayın.

Sanatçı: Anna Bassy

4. Mobil başlık yüksekliğini özelleştirin

Mobil ekran ile mobil olmayan ekran arasındaki çizgi sürekli bulanıklaşıyor - örneğin bir tablet cihazı alın. Bir 'masaüstü' olacak kadar büyük değil, bir mobil ekran için yeterince küçük değil.

Siteleri bir çok tablette 'yatay' olarak görüntülediğinizde, site bir masaüstü veya dizüstü bilgisayar ekranında olduğu gibi görünebilir. Bu tableti bir 'portre' olarak yan çevirin ve her şey değişebilir - ekran genişliğinin azaltılması, bir telefonda görebileceğinize daha yakın 'mobil' öğeler sunabilir.

Çoğu Bandzoogle teması, varsayılan olarak dikey yönelimli ekranlarda 'tam yükseklikte' bir başlık gösterecek şekilde ayarlanmıştır - başlık resminiz sol ve sağ taraflara odaklanıyorsa bu sorunlu olabilir.

Bunun için, temanızın başlığınızı sayfalarınız için arka plan resmi olarak ayarlamaması koşuluyla, 'temayı düzenle' sekmeniz aracılığıyla 'başlık' ayarlarında 'özel mobil başlık yüksekliği' seçeneğini etkinleştirebilirsiniz.

Etkinleştirildiğinde, tema düzenleyicide 'mobil önizleme' simgesini tıklayın ve 'başlık yüksekliği (mobil)' kaydırıcısını ayarlayın - bu, resminizin bulunduğu alanı, resim oranlarınıza daha iyi uyacak ve daha fazlasını gösterecek şekilde ayarlamanıza yardımcı olabilir. görüntü. Bunu ayarladıktan sonra 'kaydet'e tıklamanız yeterli!

5. Filtre ekleyin

Son olarak, bir filtre ayarlayarak başlık resimlerinize gerçekten harika hisler ekleyebilirsiniz. Blues'u ortaya çıkarın, resminize daha fazla '70'ler filmi' görünümü verin veya eski siyah beyaza geçin. Burada birçok seçenek var!

Bandzoogle kontrol panelinizdeki 'temayı düzenle' sekmesini tıklamanız ve 'başlık' seçeneklerinin altında bir hazır filtre seçebilir veya kendi özel filtre stilinizi oluşturabilirsiniz.

Sanatçı: Carleen Williams

Bazen kafanızı karıştırmak biraz mümkün olsa da, web tasarımcılarıyla genel fikir birliği, web siteniz açısından yanıt vermenin daha iyi bir yol olduğudur.

Sitenizin şimdi ve gelecekte mevcut olan her ekranda harika görüneceğini ve okunaklı olacağını garanti eder ve siteniz iyi yanıt veren uygulamalar kullanırsa Google gibi siteler sizi daha iyi sıralar.

Uzun vadede, kendi sitelerinizi yönetenler için de harika bir zaman tasarrufu sağlar - ilk adım resimlerinizi ve içeriğinizi optimize etmenin en iyi yolunu bilmektir ve gerisini Bandzoogle halleder!

Sadece birkaç tıklamayla duyarlı resimlerle bir müzik web sitesi yapın. Web sitenizi Bandzoogle ile bugün oluşturun!