Responsive design
Bij een responsive design tonen we eenzelfde afbeelding in verschillende formaten op de website. Ongeacht via welk scherm je lezers de site bezoeken, krijgen ze steeds het juiste beeldformaat te zien.
Dat vergt een ommezwaai in onze beeldaanpak: één groot, scherp beeld met voldoende pixels moet alle beeldcomponenten mooi vertalen naar het device waarop ze worden gezien.
Header images, CTA images en carrousels vertrekken vanuit een landscape beeld. Afbeeldingen in een tekstelement en fotoalbums kunnen meerdere beeldverhoudingen weergeven (portrait, landscape, panorama of vierkant). Volg steeds de beeldinstructies voor een correcte weergave.
Op de nieuwe website zijn enkel afbeeldingen toegelaten in .jpeg formaat! Zorg er ook voor dat je enkel afbeeldingen gebruikt waarover je het auteursrecht hebt! MEMO minimum formaten
|
Overzicht visuele webcomponenten
Header image
De header image is zichtbaar bovenaan de startpagina van een subsite, dus niet op onderliggende pagina’s. Naast een expressieve foto is er ruimte voor een titel (heading 1) en introtekst (subtitle).
Bij lancering van de nieuwe site kreeg iedere subsite een afgeleide header in het juiste formaat. Je kan deze afbeelding natuurlijk aanpassen naar een nieuwe afbeelding, volgens onderstaande richtlijnen.
Opmaak
- Beeldstijl
Selecteer een kwaliteitsvol, sprekend beeld zonder tekst of logo. Collages, groepsfoto's, logo's, tekeningen, cartoons;... zijn niet geschikt voor een header image.
Headers vragen om spontane, natuurlijke foto's in reportagestijl. Behoud abstracte of conceptuele beelden ter illustratie bij tekstelementen.
- Template
Header images opmaken in het online grafisch ontwerpplatform Canva
Voor speciale, grafische ontwerpen: contacteer Nik Römer
Technische specificaties
- Oriëntatie
Liggend, verhouding: 2/1
- Minimum formaat
2000 pixels B x 1000 pixels H
Ideaal, maximum formaat: 4000 pixels B x 2000 pixels H
- Uploadcapaciteit
Maximum 40 MB
- Bestandsformaat
Sla afbeeldingen steeds op als jpeg.
- Bestandsnaam
Geef je afbeeldingsbestanden een goede naam voor betere SEO: 'studenten.jpg' en niet UA123.jpg. Gebruik kleine letters en vermijd spaties.
Afbeeldingen in een tekstelement
Voor afbeeldingen in een tekstelement zijn meerdere beeldverhoudingen mogelijk.
De fotobewerking kan niet meer gebeuren in de editor op de webpagina, de beeldbewerking dient vooraf te gebeuren.
Eens opgeladen in het tekstelement, wordt de foto geschaald in de frontend afhankelijk van het device waarmee de bezoeker surft.
Wens je alle afbeeldingen even groot weer te geven, dan zal je ze allemaal hetzelfde formaat moeten geven, alvorens op te laden.
Gebruik geen afbeeldingen in tabellen.
Opmaak
- Beeldstijl
Selecteer een kwaliteitsvol, sprekend beeld zonder tekst.
- Template
Afbeeldingen in een tekstelement opmaken in het online grafisch ontwerpplatform Canva
Specificaties
- Oriëntatie
Portrait, landscape, panorama of vierkant
- Minimum breedte of hoogte
1000 pixels B of H
Maximum breedte: 6000 pixels B
Opgelet!
De afbeelding wordt groter of kleiner getoond naargelang de grootte:- Het beeld is even groot als de volledige tekstkolombreedte:
de volledige tekstkolombreedte
- Het beeld is kleiner dan de volledige tekstkolombreedte
het beeld wordt automatisch gecentreerd, met optie voor uitlijning links of rechts.
Bij linkse of rechtse uitlijning wordt het beeld automatisch tot een geschikt formaat herleid.
- Het beeld is even groot als de volledige tekstkolombreedte:
- Uploadcapaciteit
Maximum 40 MB
- Bestandsformaat
Sla afbeeldingen steeds op als jpeg
- Bestandsnaam
Geef je afbeeldingsbestanden een goede naam voor betere SEO: 'studenten.jpg' en niet UA123.jpg. Gebruik kleine letters en vermijd spaties.
Call-to-action image en Carrousel
Voor call-to-action images (CTA image) en carrousels gebruiken we steeds liggende beelden. Hoe groter het aantal pixels, hoe mooier het resultaat.
De CTA image wordt groter of kleiner getoond naargelang het device en aantal. Het systeem kropt de afbeelding steeds in een consistent formaat:
- Desktop weergave
- 1 CTA image: wordt centraal en groot getoond
- 2 of 3 CTA images na elkaar: komen naast elkaar
- Er staan maximum drie CTA images naast elkaar, bij meer dan 3 CTA images start een nieuwe rij
- Mobiele weergave
CTA images komen steeds onder elkaar te staan
Opmaak
- Beeldstijl
Selecteer een sprekend beeld zonder tekst of logo.
Bij het carrouselbeeld is ruimte om afzonderlijk een tekstregel toe te voegen.
Bij de CTA-images bestaan meerdere weergavemogelijkheden en stijlen.
- Template
CTA images en carrousels opmaken in het online grafisch ontwerpplatform Canva
Technische specificaties
- Oriëntatie
Liggend, verhouding: 2/1
Formaat
Minimum formaat: 1000 pixels B x 500 pixels H
Ideaal, maximum formaat: 6000 pixels B x 3000 pixels H
Opgelet bij CTA image als afbeelding bij een YouTube video
Als je een CTA image instelt met embed-link naar een YouTube filmpje, dan wordt meestal automatisch een afbeelding in de CTA getoond. Als de afbeelding niet automatisch verschijnt: voeg zelf een afbeelding toe met aangepaste afmetingen op 4000 px B x 2240 px H. Of minimum 2000 px B x 1120 px H. Geen afbeelding bij YouTube video's ?
- Uploadcapaciteit
Maximum 40 MB
- Bestandsformaat
Sla afbeeldingen steeds op als jpeg
- Bestandsnaam
Geef je afbeeldingsbestanden een goede naam voor betere SEO: 'studenten.jpg' en niet UA123.jpg. Gebruik kleine letters en vermijd spaties.
Fotoalbum
Het fotoalbum laat verschillende beeldverhoudingen toe. Afbeeldingen mogen rechtstreeks worden opgeladen, maar houd steeds de minimum breedte aan. Maak een selectie van je beste beelden.
Specificaties
- Oriëntatie
Portrait, landscape, panorama of vierkant
- Minimum breedte
1000 pixels B
Maximum breedte: 6000 pixels B
- Uploadcapaciteit
Maximum 40 MB
- Bestandsformaat
Sla afbeeldingen steeds op als jpeg
- Bestandsnaam
Geef je afbeeldingsbestanden een goede naam voor betere SEO: 'studenten.jpg' en niet UA123.jpg. Gebruik kleine letters en vermijd spaties.