Responsivt design: Slik får du et WordPress-nettsteder til å fungere overalt

Introduksjon

På dette punktet har du laget sideinnhold og definert strukturen for hele nettstedet. Neste oppgave er å sjekke om nettstedet fortsatt fungerer når skjermbildet blir mindre. På de fleste bedriftsnettsteder kommer mer enn halvparten av alle lesere via en telefon, og en side som ser flott ut på desktop kan virke overfylt eller feiljustert på en mindre skjerm.

Det er dette responsiv forhåndsvisning er til for: du kan sjekke at nettstedet er lesbart og brukervennlig uansett skjermstørrelse. Elementor har innebygde funksjoner som lar deg forhåndsvise og justere siden på ulike skjermstørrelser uten å forlate redigeringsverktøyet.

Trinn 1 — Bytt mellom ulike skjermvisninger

Elementor viser de ulike enhetene i topplinjen. De tre ikonene ved siden av sidetittelen representerer visningene for desktop, nettbrett og mobil.

Klikk på nettbrett-ikonet. Arbeidsflaten smalnes til 1024 piksler i bredden, og viser hvordan siden ser ut på skjermer i nettbrettstørrelse. Klikk på mobil-ikonet, så blir det enda smalere: 767 piksler. Dette er Elementors standard brytningspunkter (skjermbreddene der oppsettet endres for å passe til en mindre enhet). De samsvarer med hvordan de fleste vanlige nettbrett og mobiltelefoner fungerer.

Når du bytter forhåndsvisning skjer to ting samtidig: Arbeidsflaten tilpasses slik at du kan se oppsettet med den aktuelle skjermbredden, og panelet for innstillinger oppdateres slik at det viser verdiene som gjelder for den aktuelle enheten. Endringer du gjør i mobilvisningen påvirker kun brytningspunktet for mobil; verdiene for desktop og nettbrett forblir uendret.

Slik fungerer arvede verdier

Elementor overfører innstillingene fra større skjermer til mindre. Hvis du setter en overskrift til 36 piksler på desktop, vil den fortsatt være 36 piksler på nettbrett og mobil inntil du eksplisitt endrer den for mindre skjermer.

Du kan se alternativene for responsivt design i innstillingspanelet. Felter som har et lite enhets-ikon støtter ulike verdier for ulike enheter. Hvis du ikke har angitt en verdi for den gjeldende enheten fortsetter Elementor å bruke verdien som er arvet fra den større skjermen til du eventuelt overstyrer den.

Derfor anbefaler vi at du begynner med desktop-versjonen før du går over til mindre skjermstørrelser. Desktop-versjonen er grunnlaget alle de andre visningene bygger på, så løs de største utfordringene der først før du gjør målrettede justeringer for smalere skjermer.

Trinn 2 — Vis siden på mobil

Klikk på mobil-ikonet i toppmenyen. Det er her plassmangelen er mest kritisk. Lange overskrifter blir brutt på en klønete måte, knappene får det for trangt, mens marger som ser harmoniske ut på desktop-versjonen kan ende opp som bortkastet plass.

Bla gjennom hele telefonvisningen. Se etter disse vanlige problemene:

• Overskrifter som deles opp i for mange korte linjer. En overskrift som ser fin ut på desktop kan bli hakkete på mobil hvis den brytes etter hvert annet eller tredje ord.
• Seksjoner med for stor avstand. Den vertikale avstanden som ga seksjonen luft på desktop kan se ut som en feil på en skjerm med 375 piksler.
• Knapper som er vanskelige å trykke på. En knapp som fungerer fint på desktop kan bli for liten eller for inneklemt til å fungere godt på mobilskjerm.
• Kolonne-oppsett som ikke er blitt tilpasset. To kolonner som ligger ved siden av hverandre på desktop kan bli presset sammen til uleselige smale striper i stedet for å bli lagt i én enkelt kolonne på mobil.
• Horisontal skrolling. Hvis noe fører til at siden får en horisontal skrollbar på mobil bør det være det første du fikser, da det gir inntrykk av at hele siden ikke fungerer som den skal.

Lag en liste over hva som må endres, og gå deretter gjennom endringene i de neste trinnene.

Trinn 3 — Tilpass skriftstørrelsen til mindre skjermer

Skriftstørrelse er vanligvis den viktigste tilpasningen for responsivt design. En overskrift i 48 piksler som ser flott ut på desktop kan fylle hele skjermen på en mobiltelefon.

1. Bytt til mobil-visning via ikonet i toppmenyen.
2. Klikk på overskriften du vil endre.
3. Åpne Stil-fanen i panelet til venstre.
4. Klikk på blyantikonet ved siden av Skriftbilde for å åpne popup-vinduet for typografi.
5. Finn feltet Størrelse. Hvis du ikke har angitt en mobilspesifikk verdi, vises fortsatt størrelsen for desktop. Velg et lavere tall for å overstyre dette for mobil. For overskrifter i hero-seksjonen fungerer vanligvis en størrelse på rundt 28 til 32 piksler. For seksjonsoverskrifter er 22 til 26 piksler et greit utgangspunkt.

Endringen gjelder kun for mobilversjonen. Overskriften på desktop-versjonen beholder sin opprinnelige størrelse.

Sjekk resultatet på arbeidsflaten med én gang. Hvis overskriften fortsatt brytes for ofte kan du prøve å redusere størrelsen med noen få piksler. Målet er å finne en størrelse der overskriften kan leses naturlig uten å dominere skjermen eller brytes opp i for mange linjer.

Gjør det samme for eventuelle underoverskrifter eller tekstblokker som ser for store ut i forhåndsvisningen for mobil. Brødteksten ser vanligvis fin ut når den arves fra desktop (16 piksler er lettlest på de fleste mobiltelefoner), men hvis det er tekst som virker kunstig stor eller liten kan du justere den på samme måte.

Trinn 4 — Tilpass marger og avstand

I design for desktop brukes ofte god avstand mellom seksjonene for å skape luft. På mobilen kan den samme avstanden få seksjonene til å se tomme ut eller skyve innholdet utenfor skjermen.

1. Hold deg i mobil-visningen.
2. Klikk på beholderen (den ytre rammen til seksjonen du vil endre).
3. Åpne Avansert-fanen i panelet til venstre.
4. Skroll ned til Oppsett og finn feltene for Marg. De fire boksene (Topp, Høyre, Bunn, Venstre) kan fortsatt vise verdiene for desktop.
5. Reduser margene øverst og nederst. Hvis det på desktop brukes 80 eller 100 piksler vertikal marg, kan du prøve 30 til 40 piksler for mobil.

Margene til venstre og høyre er også viktige. Hvis teksten ligger helt inntil skjermkantene kan du øke den horisontale margen til 15 eller 20 piksler. Hvis teksten virker for innrykket, kan du redusere den.

Gjenta dette for hver seksjon som ser ut til å ha for mye plass i forhåndsvisningen for mobil. Målet er at seksjonene skal se naturlige ut, og verken ligge for tett eller for spredt.

Knapper

Mens du er i gang med justering av marger bør du også sjekke alle knappene. Hvis en knapp virker for liten eller inneklemt til at den er enkel å trykke på på en mobilskjerm, velger du Knapp-widgeten, åpner Avansert-fanen og øker avstanden for mobil.

Et komfortabelt trykkeområde bør være minst 44 piksler høyt. De fleste Elementor-knapper med standardmarger oppfyller dette kriteriet, men en knapp med skreddersydd utforming gjør det kanskje ikke.

Trinn 5 — Tilpass kolonneoppsett

Innhold designet for desktop blir ofte plassert i to kolonner, for eksempel et bilde til venstre og tekst til høyre. På mobilen må slike side-ved-side-oppsett vises i én enkelt kolonne.

Elementor-beholdere håndterer dette ved hjelp av retningsinnstillinger.

1. Hold deg i mobil-visningen.
2. Klikk på beholderen som inneholder kolonneoppsettet.
3. Åpne Oppsett-fanen i panelet til venstre.
4. Finn innstillingen Retning. For desktop er den sannsynligvis satt til Rad (horisontal pil). Endre den til Kolonne (vertikal pil) for mobil.

Underelementene i beholderen ligger nå etter hverandre i stedet for side om side. Sjekk arbeidsflaten for å forsikre deg om at rekkefølgen ser riktig ut.

Noen ganger er ikke den naturlige visningsrekkefølgen ideell. Hvis du har et bilde til venstre og tekst til høyre på desktop, vil bildet vises øverst på mobil når elementene blir vist etter hverandre. Det kan være greit, men kanskje du heller vil ha teksten først slik at leserne ser overskriften før de skroller ned til bildet. Hvis rekkefølgen må endres kan du justere den via Rekkefølge for de enkelte underelementene i oppsett-instillingene til beholderen.

Både rutenett, seksjoner med bilder og tekst, parvise kolonner og oppsett med kort kan dra nytte av den samme endringen fra rad til kolonne.

Trinn 6 — Skjul elementer som ikke er nyttige på mobil

Noen elementer har sin fortjente plass på desktop, men skaper uoversiktlighet på mobil. Det kan være en dekorativ skillevegg mellom seksjoner, en sekundær handlingsknapp, et stort bakgrunnsmønster eller et sett ikoner som ser bra ut på en bred skjerm, men bare tar opp plass i høyden på mobil.

Med Elementor kan du skjule enkeltelementer basert på enhetens skjermstørrelse.

1. Velg elementet du vil skjule på mobil.
2. Åpne Avansert-fanen.
3. Skroll ned til Responsiv-seksjonen.
4. Finn Skjul på Mobil stående-bryteren og slå den på. Gjør det samme for Skjul på Tablet Portrait hvis elementet også skal skjules på nettbrett.

Elementet forsvinner fra mobilvisningen, men forblir synlig på desktop. Lesere med større skjermer ser det fortsatt, mens mobilbrukere får en ryddigere opplevelse.

Bruk denne funksjonen med måte. Hvis du stadig må skjule elementer på mobilversjonen kan det hende at designet for desktop er unødvendig komplisert. Velfungerende sider bør ha omtrent samme innholdsstruktur uansett skjermstørrelse, der oppsett og størrelse tilpasses i stedet for at enkelte deler fjernes helt.

Trinn 7 — Sjekk topp- og bunntekst på mobil

Gjennomgangen av responsivt design må omfatte hele nettstedet, ikke bare sideinnholdet. Topp- og bunntekstene krever like mye oppmerksomhet.

I forhåndsvisningen for mobil kan du se øverst på siden. Astra-temaet skal ha erstattet desktop-navigasjonen med et hamburgerikon (tre streker som fungerer som menyknapp). Klikk på det i forhåndsvisningen og sjekk at menyen som glir inn fra siden åpnes som den skal, at menyelementene er leselige, og at de er store nok til å trykke på uten å treffe feil lenke.

Skroll deretter ned til bunnen og sjekk bunnteksten. Informasjon om opphavsrett, lenker i bunnteksten og eventuelle kontaktopplysninger bør fremdeles se ryddige ut på en mobiltelefon. Hvis bunnteksten virker tettpakket eller teksten brytes på en uheldig måte, må disse justeringene gjøres i tilpasningsverktøyet til Astra i stedet for i Elementor. Det samme gjelder mobilmenyen. Hvis menyikonet eller panelet som glir inn fra siden føles feil, går du til Utseende → Tilpass → Topptekst og justerer innstillingene for Off-Canvas-menyen der.

Trinn 8 — Test i en ekte nettleser

Elementors responsive forhåndsvisning er nyttig, men det er likevel bare en simulering. Før du anser siden som ferdig bør du teste den utenfor redigeringsverktøyet.

1. Klikk Forhåndsvisning i toppmenyen (øyeikonet), eller publiser siden og gå direkte til live-versjonen.
2. Åpne siden i nettleseren på mobilen din. Hvis du jobber med en lokal eller midlertidig URL som telefonen ikke har tilgang til, kan du i stedet bruke den innebygde enhetsmodusen i nettleseren på datamaskinen din (høyreklikk → Inspiser, og klikk deretter på ikonet for å bytte enhet).
3. Skroll gjennom hele siden på telefonen eller i mobilvisningen.
4. Åpne mobilmenyen og trykk på noen lenker.
5. Trykk på den viktigste handlingsknappen.
6. Sjekk bunnteksten.

Når du tester i nettleseren kan du oppdage ting som forhåndsvisningen i Elementor noen ganger overser. Skrolling med fingrene føles for eksempel annerledes enn skrolling med mus, og visningen av skrifttyper kan variere fra enhet til enhet.

Du trenger ikke å teste på ti enheter. Én ekte telefon og én nettleser på datamaskinen med tilpasset skjermstørrelse vil fange opp det aller meste. Legg spesielt merke til interaktive elementer som skjemaer eller trekkspill, som noen ganger oppfører seg annerledes med berøring enn med en musepeker. Hvis det grunnleggende fungerer og ingenting ser feil ut, ligger nettstedet ditt allerede et hestehode foran mange andre førstelanseringer.

Konklusjon

Responsivt design kan bli en endeløs runddans hvis du lar det skje. Du retter opp en overskrift på mobilen, oppdager at margen ser feil ut, justerer den, og innser at visningen på nettbrett har endret seg. Fokuser på å sikre at overskriftene er lette å lese, at knappene kan trykkes på, at menyene fungerer, og at det ikke er noen horisontale skrollbarer. Når alt dette er på plass på både desktop, nettbrett og mobil, er du stort sett ferdig.

Hundre prosent konsekvent design på alle typer skjermer er en luksus. En oversiktlig, fungerende nettside som faktisk er publisert er bedre enn et “nesten perfekt” utkast som bare ligger i redigeringsverktøyet.

Selve arbeidsflyten vi har beskrevet her er verdt å ha i bakhånd. Hver gang du oppdaterer en side eller lager en ny, følger du den samme framgangsmåten: sjekk hver skjermstørrelse, korriger skriftstørrelsen, så margene, så kolonnene, så topp- og bunntekst, og avslutt med en test i en ekte nettleser. Det vil gå raskere for hver gang du gjør det.

I de følgende veiledningene går vi over fra design til ytelse. Vi starter med de hastighetsforbedringene som gir størst utslag for leserne.

Neste trinn:

• Del 13: Caching og grunnen til at hastighet er penger
• Del 14: Objekt-caching med Redis
• STW WordPress-hosting