At have en responsiv hjemmeside, der ser godt ud på desktop, tablet og mobil - er afgørende for at sikre en god browsingoplevelse for dine besøgende. De tre visninge, eller viewports, er vigtige elementer at tage med i overvejelserne, når man bygger hjemmesider i værktøjet, hvor det er nemt at skabe viewport-specifikt layout og design.
Viewport-optimer din hjemmeside
En af de vigtigste forskelle mellem de tre viewports er deres bredde. Med en brugervenlig viewport-grænseflade gør værktøjet det nemt at ændre en hjemmeside, så det passer til desktop, tablet og mobil.
Du kan skifte mellem viewports ved at klikke på de tre ikoner øverst i værktøjet:
Brug tastaturgenvejen
Skift mellem visningsportene ved at bruge tastaturgenvejen Option ⌥ + V (Mac) / Alt + V (PC).
Hierarki ved justering af viewports
Værktøjet har et strengt hierarki, når det kommer til viewports for at gøre det så nemt som muligt at arbejde med. Desktop-viewporten er den primære visning, hvilket betyder, at tilføjelse af nye moduler og redigering på desktop også påvirker tablet og mobil, hvis disse viewports ikke er blevet justeret manuelt.
Du kan tilføje moduler på alle visningsporte. Et tilføjede modul vil automatisk blive inkluderet i de andre viewports, men du kan kun slette moduler fra desktopvisning.
Tablet er nummer to i viewport-hierarkiet, hvilket betyder, at ændringer på tabletvisning også er synlige på den mobile viewport, men påvirker ikke desktop.
Endringer man laver på mobilvisning, vil ikke påvirke de andre viewports.
Oversigt over viewport-hierarki:
- Desktop: påvirker tablet og mobil
- Tablet: påvirker mobil
- Mobil: påvirker ikke de andre viewporte
Viewport-hierarkiet "bryder" for rækker, kolonner eller moduler, når du ændrer et element på en af viewportene individuelt. For eksempel, når du ændrer en række på tablet eller mobil og bagefter ændrer noget på den samme række på desktop, vil ændringerne på desktop ikke påvirke de andre viewports. Dette er for at hjælpe dig med at undgå at overskrive viewport-specifikke ændringer og design, hver gang du ændrer noget på din computer eller tablet.
Vær opmærksom på, at ovenstående ikke gælder for placering af elementer. Hvis du trækker rækker, kolonner eller moduler til en ny position på mobilen, vil de også blive flyttet på tablet og desktop, og så videre.
Ændring af kolonnebredde
Det, der ser godt ud på desktop, ser måske ikke så godt ud på tablet- eller mobilvisning. Derfor, for at holde billederne synlige og teksten læsbar, er det vigtigt at justere kolonnebredden mellem visningsportene for at forbedre brugeroplevelsen. Til en vis grad sker dette automatisk baseret på responsivt design. Du har dog mulighed for yderligere at tilpasse kolonnebredden per viewport, hvis du mener, at en anden bredde fungerer bedre til dit specifikke indhold.
Skift kolonnebredde for en specifik viewport ved at navigere til ønsket visning fra redigeringsværktøjets navigation. Når du er i den specifikke viewport, skal du trække kolonnen til højre eller venstre for at indstille bredden.
At skjule rækker, kolonner og moduler
Nogle gange giver det mening at skjule specifikke elementer på forskellige viewports. Klik på den række, kolonne eller modul, du vil skjule, vælg indstillingen Vis på enhed, og marker den eller de enheder, du vil vise elementet på.
Skjule elementer
Du kan ikke skjule elementer på den viewport, du arbejder i. Hvis du f.eks. arbejder i mobilvisningen i værktøjet, vil du ikke være i stand til at skjule elementer fra mobilvisning. For at skjule noget fra mobilvisning, skal du i stedet være i tablet- eller desktopvisningen i værktøjet.
Adfærd på mobil er ofte meget anderledes end på desktop og tablet, hvilket kan kræve forskellige kundeengagementer eller opfordringer til handling. For eksempel vil du måske have en "klik for at ringe"-knap på mobilversionen af din hjemmeside, men ikke på desktop- og tabletversionerne. Brug af funktionen Vis på enhed vil gøre det muligt for dig at opnå dette ved at skjule knappen på desktop og tablet.