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.
- Vurder om det giver mening at vise din grafik på fx 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. I Typo3 gøres det ved at et indholdselement vises eller ikke vises i responsivt design. Fx 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 forsø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 opløsninger.
Har du brug for at beskære dit billede, ændre opløsningen eller lægge et helt andet billede op til visning i responsivt design, kan vi give følgende eksempler på skærmstørrelse og -opløsning som vejledning:
iPhone 4
- Skærmstørrelse: 3,5" diagonalt
- Skærmopløsning: 960x640 pixels ved 326 dpi
iPhone 5
- Skærmstørrelse: 4" diagonalt
- Skærmopløsning: 1136x640 pixels ved 326 dpi
iPhone 6
- Skærmstørrelse: 4,7" diagonalt
- Skærmopløsning: 1334x750 pixels ved 326 dpi
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.
Fokusfelt på desktop
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.