Responsieve websites zijn cruciaal voor uw bedrijf. Responsief zijn biedt een eenvoudige manier om consistentie met uw merk en website te behouden op alle belangrijke apparaten. En u moet ervoor zorgen dat u banners voor responsieve websites juist kiest. Ooit geprobeerd om een ​​website met je telefoon te laden om een ​​warboel op het scherm te vinden? Dat is wat er gebeurt als een site niet reageert of mobielvriendelijk is.

Afbeeldingen zijn een van de meest frustrerende aspecten van responsieve websites, met name banner- / volledige breedte-afbeeldingen. Dit zijn de dingen die het meest waarschijnlijk breken. Of verschijnt niet correct op het scherm. Waarom gebeurt dit? Om dit te begrijpen, zullen we uitleggen wat het betekent dat uw website responsief is. (Zie voor meer informatie: Dit is hoe een fantastische Advisor-site eruit ziet. )

De sleutel tot Responsive

Responsieve websites verkleinen de afmetingen van uw website horizontaal. Dit betekent dat wanneer de website horizontaal verandert, alles op uw website opnieuw wordt gepositioneerd. Dit is een vloeiende lay-out. Aangezien responsieve websites de grootte van de lay-out aanpassen en wijzigen afhankelijk van uw apparaat, kan het moeilijk zijn om alle details van een website-afbeelding te zien als de pagina niet reageert. Banners zijn bijzonder moeilijk, omdat ze erg groot en bijna altijd vol detail zijn.

Hieronder heb ik een aantal best practices voor je aangegeven wanneer je banners kiest voor responsieve afbeeldingen met Advisor-websites.

Banners kiezen voor responsieve websites

zorg dat de grootte van de foto niet te klein is. We raden bannerafbeeldingen voor responsieve websites aan als minimaal 2000px bij 600px voor de beste beeldkwaliteit. Iets minder dan dit formaat (voor zowel breedte als hoogte) resulteert in een wazig beeld. Hoe groter het beeld, hoe meer ruimte we moeten spelen en het rechterdeel van je banner bijsnijden.

Probeer afbeeldingen zonder focus te kiezen. Het kiezen van bannerafbeeldingen zonder focus, zoals een landschap, is een van de beste afbeeldingen op de banner van uw website. Ongeacht het apparaat, de kijker zal de details van de afbeelding kunnen onderscheiden. Omdat er geen focus is, kunnen we de afbeelding plaatsen zonder dat u zich zorgen hoeft te maken over hoe de website opnieuw wordt bemeten op apparaten. Hier zijn enkele voorbeelden:

Zoals u kunt zien, krimpt de afbeelding horizontaal, maar aangezien het landschap zo groot is, kunnen clients nog steeds zien wat de achtergrond is.

Een afbeelding met focus kiezen. Stel dat u een foto van een persoon of object op uw website als focus wilt. Wanneer u foto's met een focus gebruikt, is het erg belangrijk om de hoofdfocus in het midden van de afbeelding te houden. Omdat responsieve bannerafbeeldingen horizontaal willen krimpen, verliezen we veel van de zijden (witte ruimte) van de afbeeldingen. (Voor gerelateerde informatie, zie: Deze ene zaak kan de website van uw adviesbureau schaden. )

In de voorbeelden ziet u de steen en het individu in het midden van de afbeelding. Dit zorgt voor een schone, verkleinde afbeelding.

Test vooral je afbeeldingen. De beste manier om uw afbeeldingen te testen, is door ze uit te proberen op uw website. Het testen van afbeeldingen helpt u ook te begrijpen wat voor soort foto's wel en niet werken. Je kunt het zelf proberen, of samenwerken met ons geweldige ondersteuningsteam. (Zie voor verwante literatuur: Hoe uw website-inhoud klanten kan aantrekken. )

-Dit artikel is geschreven door Shaheen Mahani en verscheen voor het eerst op Advisor-websites.