Dansk English

SmartWeb Help | Design Manager New

1.7 Responsive indhold

Når man har et responsive design, skal man også lave indholdet responsive. Hvis man ikke vant til at lave responsive indhold, kan det godt virke lidt omstændigt i starten - men det er kun, indtil man har prøvet det et par gange.



 

Her er et par generelle huskeregler:
 

  1. Du laver indhold, der skal fungere på mange forskellige enheder.
  2. Vælg antal kolonner med "Skabelon" knappen, inden du går i gang (se mere nedenfor).
  3. Benyt ikke faste bredder på indholds-elementer (fx. tabeller, billeder og andre elementer osv).
  4. Benyt ikke tabeller til at "placere" dit indhold (undgå generelt at bruge tabeller, hvis du kan).
  5. Upload billeder i den store version (fx. 1.000 px * 1.000 px), så de kan blive nedskaleret automatisk til mindre enheder.
  6. Upload billeder i kvadrater (lige brede / høje).


I et responsive design vil man gerne have, at elementer har forskellige bredder afhængigt af, hvilken enhed man bruger.

Eksempelvis skal et billede ikke være lige så bredt (og dermed stort) på en smartphone som på en alm. computer. Det samme gælder eksempelvis din menu - den kan ikke være lige så bred på smartphonen som på din computer (der er simpelthen ikke plads nok).

I et responsive design arbejder man derfor med "relative" bredder og ikke "faste" bredder. I praksis arbejder man med kolonne-strukturer, og det gør man ved at klikke på knappen, der hedder "Skabeloner". Den ser sådan ud:


Skabeloner for indhold
Når du vil i gang med at lave skabeloner for dit indhold - det kan eksempelvis være, at du vil have en tekst og ved siden af den, skal der være et billede.
Dette er en 2 kolonne-skabelon, hvor der i første kolonne er placeret en tekst, og i næste kolonne er placeret et billede.

Du finder "Skabeloner" knappen i din editor - eksempelvis når du redigerer din forside:





Når du klikker på knappen, får du mulighed for at vælge mellem forskellige skabeloner (kolonner). Vælg det antal kolonner, der passer til den opgave, du er i gang med, og indsæt tekster og billeder i kolonnerne.


Tekster
Der er som udgangpunkt ikke noget specielt, du skal være opmærksom på. Tekster får automatisk korrekt ombrydning på de forskellige enheder. Som altid skal du dog huske at "rense" tekster for styling, inden du kopierer dem fra dit word-dokument.

Tabeller
Undgå at bruge tabeller, når du vil lave responsive indhold. Hvis du absolut er nødt til at bruge en tabel, angiv da bredden til at være 100%, og skriv aldrig en fast bredde på i pixels. Når bredden er sat til 100%, vil tabellen "fylde ud" i forhold til det element, den ligger indeni (fx. en kolonne).

Billeder (indhold)
Når du indsætter et billede via editoren, vil den automatisk blive underlagt en "styling regel", så den nedskaleres til andre enheder.
Du skal derfor uploade dit billede i den "største version" - ikke det størst mulige format, du kan finde (for så bliver det for tungt), men i den størrelse (bredde) billedet har på den største enhed. Nedskaleringen af billederne bliver pænest, hvis du uploader dem i kvadrater (fx. 1000 px * 1000 px).

Billedelement
Når du uploader billeder i dit billedelement, skal du ikke uploade billeder i kvadrater.

Du skal i stedet benytte dette mål:
Bredde: 1240 px
Højde: 440px