Billeder og grafik

  • Brug kun billeder og grafik, hvis de fortæller brugeren noget, og har en funktion for din side. Ikke blot som fyld og pynt.
  • Vurder, om det giver mening at vise din grafik på f.eks. en smartphone, eller om den skal skrives som tekst i stedet.
  • Tjek altid, hvordan dine billeder ser ud i responsivt design, hvis du ønsker dem præsenteret på en bestemt måde. 

Funktionalitet

For at du har kontrol med, hvordan dine billeder præsenteres i responsivt design, anbefaler vi som udgangspunkt, at der uploades to versioner af et billede – et til desktopvisning og et til mindre skærme. I TYPO3 gøres det ved, at et indholdselement vises eller ikke vises i responsivt design. F.eks. et billedelement, hvis det eksisterende billede ikke egner sig til visning på en smartphone.

Du kender sikkert de generelle vejledninger til billedbrug i TYPO3 og ved, at TYPO3 i et vist omfang automatisk kan skalere billeder tilfredsstillende. Det er muligt at undersøge, om dine eksisterende billeder fungerer tilfredsstillende i responsivt design. Det vil blandt andet afhænge af billedstørrelse, motivets placering, hvordan du har defineret visningen af billedet, om det er et fokusfelt osv.

Beskæring

Det kan være lidt komplekst at vejlede konkret om størrelser og opløsning på billeder til web, da dine billeder bliver vist i forskellige browsere og på skærme med vidt forskellige størrelser og opløsninger. TYPO3 genererer i de fleste tilfælde billeder i passende størrelse. Vi anbefaler dog, at dine billeder maksimalt har en bredde på 1400 px.

Fokusfelter

Du skal altid skrive kort og præcist, når du skriver tekst til fokusfelter. De er ikke beregnet til lange forklaringer eller beskrivelser, men blot til at skærpe fokus på et emne.

I fokusfelter er billedet en baggrund til din tekst, og teknisk set tilpasser billedet sig teksten. I fokusfelter med for meget tekst bliver billedet derfor ’gentaget’. Det kan også ske, hvis siden vises på en lille skærm i responsivt design, da teksten skal kunne læses og derfor har en vis størrelse. På den måde ændrer størrelsesforholdet sig mellem tekst og billedet. Bemærk, at fokusfeltbilledet beskæres fra højre mod venstre i responsivt design.

Fokusfelt på desktop

Gentagelse af fokusfelt

Samme fokusfelt på 320 pixels skærm.

Gennemse altid dine fokusfelter i responsivt design og vurder, om du skal uploade endnu en version, som kun vises i responsivt design. Se beskrivelse under Funktionalitet.