Hvordan gjøre nettstedet ditt mobilvennlig

Sommeren 2015 ble det gjennomført flere Google-søk via mobil enn desktop for første gang noensinne – og du’Det er bedre å tro de’har bare gått opp siden den gang!


Hvis du’Når du leser denne artikkelen, er sjansen stor for deg’er du allerede klar over viktigheten av å ha et mobilvennlig nettsted, og ønsker å sørge for at din tilbyr en flott opplevelse for mobilbrukere. Vi kan lære deg hvordan du gjør det!

For å gjøre nettstedet ditt mobilvennlig, du’Jeg må:

  1. Velg et mobil-responsivt tema eller mal
  2. Fjern innholdet ditt
  3. Gjør bilder og CSS så lette som mulig
  4. Unngå Flash
  5. Endre knappestørrelse og plassering
  6. Plasser linkene dine
  7. Bruk en stor og lesbar font
  8. Fjern popup-vinduer
  9. Test regelmessig

Men først, hva betyr egentlig mobilvennlig?

Når vi snakker om a ‘mobil-vennlig’ nettsted, vi’snakker om å vise en annen ‘versjon’ av nettstedet ditt for besøkende som ser nettstedet ditt fra mobil, for å gi dem en bedre opplevelse.

Det er flere måter du kan oppnå dette på:

  • Responsiv utforming – din nettside’s design justeres for å tilpasse seg skjermstørrelsen, enten du’du bare endrer størrelsen på skrivebordets fane, eller blar gjennom en mobil eller nettbrett.
  • Dynamisk servering – Besøkende får vist en annen, spesialbygget versjon av nettstedet, avhengig av hvilken enhet de har’viser fra.
  • En mobilapp – I noen tilfeller er det mest fornuftig å ha en helt egen app for mobilpublikummet ditt (selv om dette er tilfelle, bør du også sørge for at nettstedet ditt er opp til grunn for de som ikke’t vil laste ned det).

Responsiv design er det minste minimum du bør sikte mot, og det’det Google anbefaler. Når det er sagt, tror vi det’er verdt å redigere det automatisk genererte mobilområdet ditt uansett – du vil tross alt sikte mot en fantastisk mobil brukeropplevelse, i stedet for en ‘akseptabel’ en.

Hvis du tror at en mobilapp vil fungere for nettstedet ditt, anbefaler vi å komme i kontakt med en utvikler som kan hjelpe deg med det.

Her er noen andre artikler du kanskje liker:

Hvordan designe et nettsted – Hvis du’begynner å designe (eller redesigne!) nettstedet ditt, sjekk ut denne artikkelen for en trinnvis veiledning og viktige punkter du bør vurdere.

Hvordan bygge et nettsted – Haven’har du startet på nettstedet ditt ennå? Ingen bekymringer, denne guiden vil lede deg gjennom hele prosessen!

5 beste nettstedbyggere for SEO – Enhver nettstedsbygger med sterk SEO kommer med mobilvennlighet bakt rett i maler. Her er fem av de beste.

1

Velg et mobilt responsivt tema eller mal

OK, så dette er første skritt, og det’er en stor en: velg et mobil responsivt tema eller mal!
Fordi det å ha en mobil responsiv design er så viktig, er det’er noe som stort sett hver topp nettstedbygger har dekket på tvers av hver av maler. For eksempel:

Squarespace – har vanntett mobil respons, og vil være vårt topp valg hvis du’re bygge et nettsted fra bunnen av og se mobilopplevelsen som en topp prioritet.

Wix – alle maler er mobile-responsive, men husk alltid å sjekke i mobilvisningen mens du går. Fordi Wix nettsteder er så tilpassbare, noen ganger ikke store endringer’t oversette så sømløst, og du’Jeg må gjøre noen finjusteringer.

Hvis du’å bygge et nettsted ved hjelp av et CMS-system, for eksempel WordPress, må du forsikre deg om at temaet du velger å bygge nettstedet ditt fra er mobil responsivt – eller hvis du’har allerede bygget et nettsted, bytt til det som er!

Bare søk ‘responsivt tema’ i WordPress’ eget temabibliotek, eller på en tredjepartsside som Themeforest. Sørg for at du leser anmeldelser, og om mulig, ta en titt på nettsteder som bruker dette temaet fra mobilen din for å måle opplevelsen selv.

Hjelp! Hva om jeg’m på et ikke-responsivt tema, og det kan jeg’t bytte den?

Hvis nettstedet ditt ble bygget ved hjelp av et gammelt, ikke-responsivt tema eller mal, og du’kan du ikke bytte den, kan du prøve å legge denne linjen med kode på hver side’s tag:

Dette betyr at sidene dine automatisk skal formatere seg for å passe til bredden på enheten, og bytte fra en liggende stil til portrett.

2

Fjern innholdet ditt

Du’har valgt et nydelig responsivt tema eller mal, så nå har du det’er du helt klar, ikke sant? Feil!

Å bytte til riktig mal eller tema er et stort skritt, men det’det er bare en av flere du bør ta for å perfeksjonere den mobile opplevelsen.

Nå det’det er på tide å ta en titt på den automatiske mobilvisningen av nettstedet ditt og fjerne det:

Destill tilbudet ditt

Tren frem hovedmålet på siden du’igjen, og ikke’nøl med å gjøre dette mye mer fremtredende på din mobilversjon.

Ta en titt på dette eksemplet fra Trainline:

Trainline mobilvennlig eksempel

Hjemmesiden er utviklet for å oppmuntre brukere til å søke etter togbilletter, og dette skjemaet tar sentrum på mobilversjonen. På skrivebordsversjonen vil dette virke for påtrengende, men på en mobilversjon fungerer det.

Unngå store biter av tekst

Kopien på nettstedet ditt skal være kort og søtt til de beste tider (med unntak av blogginnlegg, som dette!), Men på mobil blir dette desto viktigere. Les over tipsene våre for å skrive for nettet, og ta den virtuelle saksen til alle lange biter av tekst.

Forkorte former

Å fylle ut lange former er en oppgave på de beste tider, men på en mobil? På farten? Glem det! Lange former vil miste leserne raskere enn du kan si ‘dette er et obligatorisk felt’. Forsikre deg om at alle former du har’å vise på mobil ber bare om informasjon om det’er helt essensiell.

Topp tips! Pesky autokorrektur er en sikker måte å gjøre skjemafylling til et stort bortkastet tid. Lagre leserne stresset ved å slå det av. Hvis du har tilgang til koden til skjemaet, må du sørge for at autokorrektivt felt er satt til autokorrektur = off. 3

Gjør bilder og CSS så lette som mulig

Å gjøre nettstedet ditt så lett som mulig er alltid en god idé – men hva betyr det egentlig? Vel, hvert element på nettstedet ditt har en virtuell ‘vekt’ – om det’s en video eller et bilde som har en filstørrelse, eller kode som må lastes hver gang du klikker på nettstedet.

Google har vært veldig tydelig på at nettstedets hastighet er en avgjørende rangeringsfaktor, og betyr langsom (a.k.a. ‘tung’) Nettsteder vil tape på konkurransen på resultatsidene for søkemotoren (SERP).

Når det gjelder mobil er dette desto viktigere. Hvis du’Vi har noen gang prøvd å laste inn en webside et sted fjernt, bare for å se hvert element falle smertefullt sakte på plass, du’Jeg forstår hvorfor.

Så, hva kan du gjøre med det?

Komprimere bildene dine

Når du’laster du opp et bilde til nettstedet ditt – mobil- eller desktop-versjon – det’Det er viktig at du komprimerer bildene dine ved hjelp av et gratis online verktøy, for eksempel kraken.io. Dette reduserer filstørrelsen på bildene dine betydelig, uten at det går utover bildekvaliteten.

Vert videoene dine med en tredjepart

Ved å laste opp videoene dine til en tredjepart og deretter legge dem inn på nettstedet ditt, betyr det det virtuelle ‘vekt’ av disse videoene blir stort sett holdt til det valgte nettstedet, i stedet for til ditt.

Wistia er en populær plattform for dette, men YouTube fungerer også – deg’Jeg vil bare sørge for at du gjør det’slår av automatisk avspilling, slik at en ikke-relatert video ikke gjør det’t spille etter ditt. For å gjøre dette, ganske enkelt:

  • Gå til WordPress-siden eller -innlegget
  • Finn den innebygde koden og klikk på ‘tekst’ tab
  • Finn delen som sier src =”youtubeurlhere”
  • Legge til ?automatisk avspilling = 0&rel = 0 etter youtubeurlhere
  • Koden skal nå lese src =”youtubeurlhere? autoplay = 0&rel = 0 “
  • Truffet ‘Oppdater’ og du’det er godt å gå

Topp tips! Hvis du ikke gjør det’tror ikke innholdet ditt vil gå for godt ned på YouTube (noen videoer gjør det ikke’t er mye fornuftig uten konteksten til en hel side), må du sørge for at du viser synligheten til ‘unotert’. På den måten vil ingen snuble over det andre steder enn nettstedet ditt. 4

Unngå Flash

Flash brukes ofte til å lage animasjoner, men det er generelt ikke’t støttes av mobile enheter, så unngås det best.

5

Endre knappestørrelse og plassering

Stort sett hvert nettsted bruker knapper for å koble seg til andre seksjoner eller til skjemaer. Men a ‘flink’ knappen kan fort bli en ‘dårlig’ knappen på mobilen hvis den’s på feil sted, eller er det feil størrelse.

Tenk på hvordan du holder og bruker telefonen. Sjansen er du’bruker tommelen for stort sett alt, noe du betyr’t når du med tommelen blir en total smerte.

Her’der du bør ta sikte på å plassere CTAer på en mobil side:

Opprette et mobilvennlig nettsted: hvor du kan legge til CTA-er

Så nå du’Vi har knappene dine på rett sted, det’det er på tide å gjøre dem i riktig størrelse. Det betyr generelt deg’Jeg må forstørre dem litt – det’Det er tross alt mye vanskeligere å klikke nøyaktig med tommelen enn med en mus.

6

Plasser linkene dine

Når vi snakker om hvor vanskelig det er å klikke nøyaktig med en tommel i motsetning til med en mus, gir det oss fint til neste punkt: se på lenkene dine!

Mer spesifikt deg’Jeg vil sjekke at hyperkoblinger på mobilområdet ditt:

  • Aren’t for nær hverandre, for å unngå at folk klikker på feil ved en tilfeldighet.
  • Koble ut til sider som også er mobiloptimaliserte for en sømløs brukerreise.

7

Bruk en stor og lesbar font

Den’Vi anbefaler at du bruker en skriftstørrelse på minst 14px på skrivebordet, men sørg for å teste hvordan det ser ut på mobilversjonen din – sjansen stor for at du kanskje synes den vises litt liten, og du’Jeg vil slå det litt opp.

Kontroller også lesbarheten til skriften din. Den’er en ting å prøve en mer eksperimentell font på skrivebordet, men dette trekket vil neppe lønne seg på mobilen. Når det er sagt, du’Jeg vil beholde skrifter som ‘på merke’ som mulig på tvers av alle plattformer.

Når du jobber med en mobilvisning av nettstedet ditt, gjør du det’Vi har et mye mindre område å leke med. På et skrivebord kan du plassere tekst med linjeskift og bilder. På mobil kan du prøve å fremheve eller bruke store bokstaver i forskjellige tekstlinjer i stedet for å hindre dem i å slå seg sammen.

8

Fjern popup-vinduer

Når det brukes nøye, kan popup-vinduer fungere veldig bra på en stasjonær versjon av et nettsted. Du har kanskje lagt merke til de’noe vi bruker på ganske mange sider her på WBE.

Men når det kommer til mobil, unngås popup-vinduer best. Ikke bare har du en mindre skjerm å takle, men det kan du også’t skreddersy popup-en for å utløse i viktige øyeblikk, for eksempel når brukeren går ut av skjermen.

9

Test regelmessig

Den beste måten å finne ut hvor mobilvennlig mobilsiden din er, er å teste den! Du’Jeg vil gjøre dette på tre forskjellige måter:

Kjør nettadresser gjennom Google’s mobilvennlige verktøy

Google har et gratis mobilvennlig testverktøy, som alle kan bruke til å teste hvor mobilvennlig en gitt URL er – om det’er en hjemmeside (som nedenfor), eller en side på nettstedet ditt.

Googles mobilvennlige test

Prøv ut forskjellige enhetsstørrelser fra skrivebordet ditt

En fin måte å sjekke hvor responsivt nettstedet ditt er, er å bare leke med formen til fanen på nettstedet du har åpent. Når du reduserer bredden på fanen, bør du legge merke til at nettstedet ditt begynner å ‘kontrakt’ og omformes til den mer mobilvennlige versjonen.

For raskt å teste utseendet til hva som helst på mobilen, kan du også høyreklikke på hjemmesiden din, velg ‘Undersøke’, og klikk deretter på ikonet for to skjermer som vises på verktøylinjen over toppen:

Se mobilversjon fra skrivebordet

Hvordan gjøre nettstedet ditt mobilvennlig: Sammendrag

Takk for at du holdt deg til oss da vi forklarte hvordan du gjør nettstedet ditt mobilvennlig. Her’s de trinnene igjen:

Slik gjør du nettstedet ditt mobilvennlig:

  1. Velg et mobil-responsivt tema eller mal
  2. Fjern innholdet ditt
  3. Gjør bilder og CSS så lette som mulig
  4. Unngå Flash
  5. Endre knappestørrelse og plassering
  6. Plasser linkene dine
  7. Bruk en stor og lesbar font
  8. Fjern popup-vinduer
  9. Test regelmessig

Den gode nyheten for de fleste nettsteder er at mesteparten av det harde arbeidet sannsynligvis vil bli gjort for deg etter tema eller mal. Når det er sagt, tror vi det’Det er verdt å lage de ekstra tweaks som er beskrevet ovenfor for å sikre at mobilbrukere får en strålende opplevelse, i stedet for en akseptabel. Statistikken sier tross alt’Trolig utgjør majoriteten av brukerne dine!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map