Je hebt een prachtige foto laten maken. De fotograaf heeft zijn best gedaan, de belichting is perfect en de compositie klopt. Je zet hem vol trots in de header van je nieuwe website. Op je grote monitor ziet het er fantastisch uit. Maar dan pak je je telefoon erbij en schrik je je een hoedje: je ziet alleen nog maar een schouder en een stukje achtergrond. Je hoofd is verdwenen.
Geen paniek. Dit is geen fout van de fotograaf en je website is niet stuk. Het is een klassiek conflict tussen een mooi plaatje en de techniek van responsive design. Bij Welldotcom maken we er geen punt van om dit even haarfijn uit te leggen.
Waarom gebeurt dit?
Websites moeten werken op elk scherm. Van een breedbeeldmonitor tot een vierkante tablet en een langwerpige smartphone. Een foto die de hele achtergrond vult, kan niet op elk scherm in zijn geheel zichtbaar zijn. De verhoudingen botsen simpelweg.
Om zwarte balken aan de zijkanten te voorkomen (want dat staat slordig), wordt de foto automatisch vergroot tot het hele scherm gevuld is. De consequentie is logisch: wat niet past binnen het kader, valt eraf. Meestal gebeurt dit vanuit het midden van de foto. Staat het onderwerp net iets te ver naar rechts? Dan valt dat op een mobiel scherm buiten beeld.
De oplossing begint bij de foto
Voorkomen is beter dan genezen. Als je nieuwe foto's laat maken voor je website, geef de fotograaf dan de volgende instructies mee.
Zorg voor voldoende ruimte rondom het onderwerp. Geef het onderwerp wat 'lucht'. Als je hoofd op de originele foto al bijna de bovenrand raakt, gaat het op een breed scherm gegarandeerd mis. Zoom iets uit. Zorg voor een veilige marge om het onderwerp heen. Dan heeft de website ruimte om te schuiven zonder dat er belangrijke dingen wegvallen.
Een goed formaat om aan te houden is 1920 pixels breed bij 1200 pixels hoog.
YOOtheme Pro to the rescue
Heb je de foto al en wordt het onderwerp toch afgesneden? Grote kans dat je website is gebouwd met Yootheme Pro. Dit is het systeem waarmee wij de vormgeving en lay-out van de website regelen. Binnen deze 'builder' zitten een paar handige trucs om dit tot in de puntjes te regelen.
- Verander het focuspunt Standaard lijnt een website uit op het midden (Center Center). Staat de persoon op de foto rechts? Dan kun je in Yootheme de Image Position aanpassen naar Center Right of Top Right. Hiermee zet je de rechterkant van de foto vast. Als het scherm smaller wordt, snijdt de website nu alleen de linkerkant (de lege ruimte) weg en blijft de persoon netjes in beeld.
- Specifieke mobiele afbeelding Een liggende foto op een staand mobiel scherm is vragen om problemen. Je houdt maar een heel smal strookje over. Yootheme Pro biedt de mogelijkheid om per apparaat een andere afbeelding te tonen. Upload voor mobiel een staande variant (portret) van dezelfde foto. Zo heb je op elk scherm de perfecte uitsnede en kijkt niemand meer tegen een half hoofd aan.
Kom je er niet uit?
Het blijft soms een beetje puzzelen met pixels. Heb je ruzie met je header of wil je dat wij er even met een professioneel oog naar kijken? Geef dan een gil. Wij zetten de puntjes op de i voor je website.
Kennis omzetten in resultaat?
Een informatief artikel is een goed startpunt. Maar de echte groei voor je bedrijf zit in de professionele uitvoering. Geen tijd of zin om zelf met de techniek, het ontwerp of de vindbaarheid van je website aan de slag te gaan? Als jouw partner nemen we dit werk graag volledig uit handen. Zo kun jij je focussen op wat echt telt: je onderneming.