Billedstørrelser
Her er et overblik over de forskellige billedformater og størrelser
For at skabe et ensartet udtryk, en bedre brugeroplevelse og en mere effektiv arbejdsproces har vi defineret billedformater og størrelser til de forskellige typer af moduler. Klare retningslinjer for billeder gør det nemmere og hurtigere at eksekvere på nye landingpages og contentsider samtidig med at vi sikrer et professionelt og visuelt sammenhængende udtryk på lemu.dk på tværs af devices.
Når vi bruger de rigtige billedstørrelser undgår vi forvrængede billeder i dårlig kvalitet og langsom indlæsningstid. Det betyder, at siderne fremstår skarpe, hurtige og indbydende og sikrer, at alle billeder understøtter budskabet bedst muligt.
Husk at benytte jer af focalpoint da det sikrer en mere præcis og nøjagtig rendering af billeder samt optimal distribuering af den visuelle vægt på tværs af devices.
OBS
Vær yderst opmærksom på overvejende at benytte normal format da siden hurtigt kan komme til at fremstå hoppende hvis bredden ikke benyttes overvejet.
Forside- content og artikel herobannere
Forside- content og artikel herobannere
Herobannere er i fuld bredde. Herobannere fra gammel lemu.dk kan ikke bruges da de er i en mindre opløsning så de kommer til at skalere grimt. Focal point er også vigtigt at benytte sig af for at sikre optimal visuel balance. Billedet skal have distribueret den visuelle vægt i højre side da vægten i venstreside er reserveret til tekst.
Image/Videocontainer block (Umbraco titel)
Image Left/Right
Billedet kan sættes i variabel højde, men hvis vi beholder et 16:9 format vil focal point kunne optimere renderingen af billedet. Ved variabel højde af billedet vil det være vigtigt at bibeholde bredden (583px) af billedet.
Image left har samme properties som Image right.
Embedede YouTube videolinks har automatisk 16:9 format.
Image left right kan også indeholde en Youtube video der bliver indsat med link.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Square image
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
1-3 images/Videos (Umbraco titel)
Et billede med tekst under
1 billede. Alle billedmoduler med tekst under er i 16:9 format med dimensionerne 184x666px. Kun normal format.
To billeder med tekst under
16:9 format. Kun normal format.
To billeder med tekst under
16:9 format. Kun normal format.
To billeder med tekst under
16:9 format. Kun normal format.
To billeder med tekst under
16:9 format. Kun normal format.
Tre billeder med tekst under
16:9 format. Kun normal format.
Callout module
Callout modulet er i fuld bredde og højden er variabel efter billedet, men det kan definers af brugeren. Dette billede er f.eks. 700px i højden.
Teaser moduler
Generelt så er billederne responsive så det egentlige format behøves ikke at følges til den sidste pixel.
Men man skal dog være ekstremt opmærksom på hvordan man bruger tekst på billeder. Billederne skal være optimeret til tekst for at bruge tekst ovenpå billeder.
Alle billederne kan laves i både narrow og hight format og i normal og wide bredde men vær ydest påmærksom på at bruge wide sparsomt da oplevelsen af siden godt kan virke hoppende med forskelllige bredder.
Top Placed Image
I topplaced image så er billederne i 16:9 format og er også responsive, så det egentlige format behøves ikke at følges til den sidste pixel. Hvis der skal indsættes ikoner så resizer de automatisk og skal det være svg, - baggrundsfarven vælges i indstillinger.
Da der ikke er tekst på billedet er valget af dette ikke så vigtigt som ved teasermodulet.
Dette modul kan også indstilles til normal eller wide, men bibeholder 16:9 formatet.