Opbygning af sider

Som udgangspunkt er der ikke begrænsninger for, hvordan du kan opbygge dine sider med elementer i Typo3 eller hvad du kan benytte af indhold som tekst, billeder og video, når du skal tilpasse dine sider til responsivt design. Du skal bare være opmærksom på, hvordan de bliver præsenteret i responsivt design og eventuelt tilpasse opbygningen og indholdets placering. 

Layout

Dit sideindhold bliver stakket ovenpå hinanden fra venstre mod højre, når det vises på mindre skærme, men faktisk tilpasser indholdet sig også til store skærme. Fx en stor skærm til en computer. I de overvejelser, som du skal gøre dig i forhold til indhold, skal du primært tænke på indhold til mindre skærme. Det er også det, at vejledningen her går på.

Spalters præsentation i responsivt design 1

Har du inddelt din side i tværgående blokke, vil placeringen af dit indhold se sådan ud:

Spalters placering i responsivt design 2

Fold-ud-elementer

For at øge brugervenligheden på sider med responsivt design skal du tænke på, hvordan du komprimerer dit indhold. Du skal ikke give mindre information, men du skal gøre det på mindre plads.

For at gøre teksttunge eller lange sider mere overskuelige, kan det være en fordel at benytte fold-ud-elementer. Er felterne foldet ind, når brugeren lander på din side, kan brugeren se dine overskrifter og få et hurtigt overblik. Er felterne foldet ud, kan brugeren selv vælge at folde dem ind og fx bevæge sig hurtigere rundt på siden.

Du kan også benytte fold-ud-bokse i stedet for at lave undersider. På en side, som skal introducere et emne - her kaldet en præsentationsside - vil man ofte se links til uddybende information på undersider. I stedet er det muligt at lægge informationen i fold-ud-bokse på præsentationssiden. På den måde får du også en kortere navigationsmenu, øger overskueligheden af den og gør den mere brugervenlig. 

Fold-ud-bokse skal ikke alene bruges som layout på en side. Brugen skal afvejes i forhold til formålet. Fold-ud-bokse egner sig godt til at kommunikere konkret information på en overskuelig måde. En anden mere visuel og kortere form at præsentere indhold på en præsentationsside er at benytte bannerelementer.

En fold-ud-boks er ét element, hvor du kan have tekst eller tekst og billede i relation til hinanden. Du kan også benytte et fold-ud-element, hvor du har mulighed for at indsætte flere typer TYPO3 elementer samlet

Linke ind i fold-ud-element

Du kan linke direkte ind i et fold-ud-element, så det er åbent, når brugeren benytter dit link til siden. 

Når du har teksteditoren åben i TYPO3, gør du følgende: 

  1. Marker det stykke tekst, som du vil gøre til link og klik på Indsæt link ikonet.
  2. Klik på fanebladet Side, i den rude, der åbner.
  3. I feltet Side ID linker du ved at indsætte side-ID og element-ID som følgende 'Side-ID#cElement-ID'. For at linke til fold-ud-boksen over denne her, vil det være 731#c3203

Element-ID finder du ved at holde musen over ikonet ved siden af din elementoverskrift.

Linke til fold-ud-element på tværs af installationer


Ligger fold-ud-elementet, som du ønsker at linke til, et sted i backend, som du ikke har adgang til, kan du ikke bruge ovenstående metode.

I den situation finder du elementets ID ved at kigge i den kode, der ligger bag elementet. Fremgangsmåden er nogenlunde den samme uanset, hvilken browser du bruger.

  1. I frontend markerer du et stykke tekst i fold-ud-elementet.
  2. Højreklik på det.
  3. Klik på Vis detaljer om elementet, Undersøg eller lignende.

Herefter åbner der en rude på din skærm, som viser koden for siden. Se billedet herunder. Det tekststykke, du har markeret, vises med gråt. 

  1. Identificer fold-ud-elementet, som det markerede tekststykke ligger i, ved at se efter collapsible (den tekniske term for fold-ud).
  2. Find element ID'et i samme linje som 'id="cxx"'. På billedet er det c3203.

Linket skal bestå af URL'en til siden efterfulgt af '#cElement-ID'. Her vil det være http://typo3.au.dk/vejledninger/best_pratice/responsivt_design/opbygning_af_sider/#c3203

Placering af indhold

Når du skal placere dit indhold, skal du altid placere det vigtigste for brugeren øverst og til venstre. Dels viser brugerundersøgelser, at brugerne benytter op til 70% af tiden på venstre side af en webside. Og dels viser eyetracking tests at brugere læser websider som et F.

Websider læses som et F

Det betyder ikke, at det du lægger i nederste højre hjørne, ikke bliver set, men du skal vurdere rækkefølgen af indholdet. Fx Hvad skal brugeren til sidst i besøget på siden? Tilmelde sig efter at have læst om arrangementet eller uddannelsen? Så giver det god mening med en tilmeldingsknap i nedreste højre hjørne.

Som nævnt ovenstående bliver dit indhold stakket ovenpå hinanden fra venstre mod højre, når det vises i responsivt design. Med anbefalingerne til placering af indhold vil det vigtigste blive vist først.