Hvis du ønsker å gjøre et WordPress-nettsted mobilvennlig, er denne detaljerte veiledningen eksklusivt for deg.

Visste du at 9 av 10 mobilsøk fører til handling og mer enn halvparten av dem fører til salg?

Bruken av mobilt Internett øker som aldri før. Det går forbi stasjonær internettbruk, flere og flere bruker nå smarttelefoner og nettbrett for å bla gjennom informasjon på nettet.

Dette er hovedgrunnen til at de fleste e-handelssider nå lager mobilapper for å øke salget og brukerinteraksjonen. Hvis nettstedet eller bloggen din ennå ikke er mobilvennlig, bør du umiddelbart vurdere å gjøre designet responsivt, ellers vil du miste mange potensielle kunder, trafikk og salg på bordet.

Hvorfor gi konkurrentene en fordel ved å ikke ha et mobilvennlig design? Gjør nettstedet ditt mobilvennlig og du vil snart merke de givende resultatene.

Hvorfor gjøre en WordPress-side mobilvennlig ?

Hvis nettstedet ditt er mobilvennlig, skjer dette;

  • vil du se en økning i trafikken
  • du kan øke antallet abonnenter ved å ha responsive e-postmeldingsskjemaer og landingssider
  • du vil få mer salg (mobilinternettbrukere er for det meste avhengige av søkemotorer for å bla gjennom informasjon, så de er kunder av høy kvalitet som er klare til å kjøpe)

Så hva venter du på? Gjør bloggen din brukervennlig og begynn å tiltrekke flere mennesker. La oss dykke ned i detaljene for å finne ut mer.

Innholdsfortegnelse:

Den ultimate guiden for å gjøre et WordPress-nettsted mobilvennlig

Slik gjør du din WordPress-side mobilvennlig

Hva er en mobilvennlig nettside?

Med milliarder av mennesker som bruker mobiler over hele verden for å bla gjennom informasjon, begynner det å bli en trend å bruke mobilnettsteder.

Selv Google belønner nettsteder som er optimalisert for mobilbrukere fordi de gir en raskere og bedre opplevelse for brukerne.

Et mobilvennlig nettsted vil automatisk oppdage miljøet hver besøkende bruker for å få tilgang til nettstedet ditt og deretter vise det i formatet som passer best for den enheten (som smarttelefoner, nettbrett og så videre).

Slik ser et responsivt kontra ikke-responsivt mobilnettsted ut:

Hvordan gjøre en WordPress-side mobilvennlig

Som du kan se ovenfor, laster et mobilt responsivt nettsted alle elementene som logo, tekst, knapper, navigasjon, meny osv på riktig måte på mobil mens ikke-responsiv design ser rotete ut på mobil.

Ifølge Statista fortsetter andelen netttrafikk fra mobil å vokse. Antall globale mobilinternettbrukere har økt med mer enn 10 % de siste 4 årene.

Ikke bare det, mobilinternett-brukerpenetrasjonsindeksen er nå 61,2 %, noe som representerer litt over 2 milliarder mennesker som får tilgang til Internett på mobile enheter. Det er en interessant statistikk, er det ikke?

Det er derfor du bør fokusere på å gjøre nettstedet ditt brukbart hvis det ennå ikke er responsivt.

Når det er sagt, er det forskjell på et responsivt nettsted og et mobilvennlig nettsted. Hva er dette?

Et responsivt nettsted fungerer for alle stasjonære, nettbrett og smarttelefoner også med det samme innholdet da det automatisk justerer oppsettet, mens et mobilvennlig nettsted faktisk er en egen versjon av skrivebordsnettstedet som er designet spesielt for smarttelefoner.

Kort sagt, å ha en mobil responsiv design kan forbedre rangeringene, brukeropplevelsen, salget og de generelle konverteringene på nettet.

Hvordan vet du om nettstedet ditt er mobilvennlig?

Vil du vite om nettstedet ditt er mobilvennlig eller ikke?

For å sjekke mobilresponsen til nettstedet ditt, kan du bruke et gratisverktøy fra Google som er kjent som Mobilvennlig testverktøy som viser deg hvor enkelt en besøkende kan bruke siden din på en mobilenhet.

Det fungerer bra, og det er helt gratis å bruke, og du trenger bare å angi en side-URL eller nettstedets hjemmeside-URL for å se hvordan den scorer på verktøyet deres.

Slik ser det ut:

Hvordan gjøre en WordPress-side mobilvennlig

Som du kan se ovenfor, har vi lagt inn en URL og som viser oss at siden er mobilvennlig (som betyr at siden er enkel å bruke på en mobil enhet).

Den viser deg også ekstra ressurser der du kan få rapporter om mobilbruk på hele nettstedet for å analysere nettstedet ditt fullt ut for respons.

Generelt utføres responsiv testing på mobil for å sikre at alle brukerne av nettstedet ditt får den beste seeropplevelsen på enhetene sine, kan være bærbare datamaskiner, stasjonære datamaskiner, nettbrett og så videre.

Bortsett fra det Google-vennlige testverktøyet, kan du også bruke følgende nettverktøy som er helt gratis for å teste nettstedets respons.

Alle verktøyene ovenfor er nyttige for å vite om nettstedet ditt er mobilvennlig eller ikke, og du kan sjekke responsen på et hvilket som helst nettsted med bare ett klikk fra din egen nettleser ved å skrive inn nettadressen til en hvilken som helst side.

La oss nå snakke om noen PRØVEDE måter å bygge en mobil responsiv versjon av WordPress-nettstedene dine på.

Bruk et mobilresponsivt WordPress-tema: de 3 hovedtemaene

En av de enkleste måtene å lage et mobilvennlig nettsted på er å bruke et mobilvennlig tema for WordPress-nettstedene dine. Selv om det er massevis av alternativer, her er listen over topp 3 temaer du kan bruke for å få et responsivt design med flotte funksjoner til en overkommelig pris.

1. Divi

Divi er en av WordPress-temaer mest populære premium brukt av mer enn 800 000 mennesker over hele verden. Det gir deg massevis av mobilvennlige temaer med Divi, som er et premium-tema og en visuell sidebygger.

Divi er eksklusivt designet for å gi brukere en bedre skrivebordsopplevelse inkludert mobilresponsopplevelse.

Den lar deg tilpasse nettstedet ditt slik du vil, da du kan justere skriftstørrelser på avstanden spesifikt for forskjellige mobiler. Du kan også tilordne unike tekststørrelser og avstandsverdier for mobil og nettbrett uten å forringe skrivebordsopplevelsen.

Slik ser det ut:

Hvordan gjøre en WordPress-side mobilvennlig

Som du kan se ovenfor, lar den deg tilpasse designet i 3 seksjoner i Mobile Styles-panelet som er nettbrett, telefon og mobilmeny. Du kan få tilgang til hver av dem og tilpasse alt, inkludert tekstfarge, logoer og mer. Enkelt.

Hva er prisen på Divi?

Det fine med å bruke Elegant Themes er rimelige priser der du kan hente alle premium-temaene deres ved å bare betale $80, noe som betyr at du bare betaler $0,79 per tema.

Elegante temaer kommer i 2 prisplaner nevnt nedenfor.

1. Årlig tilgang: Dette er det billigste alternativet som koster $80 for 1 år (med vår eksklusive rabatt) og du vil få tilgang til over 80 temaer med 5 plugins og Divi-temabygger.

2. Livstidstilgang: Hvis du vil ha livstidstilgang til stilige temaer, er denne pakken for deg som koster $224 for livet, hvor du får livstidsoppdateringer, temaer og plugins-nedlastinger med livstidsstøtte.

Gode ​​nyheter for deg. Hvis du ønsker å gripe Divi-byggeren med stilige temaer, kan du bruke vår eksklusive lenke for å få 10 % rabatt på prisene deres.

Klikk her for å laste ned Divi

Hvis du ikke er fornøyd med temaet eller funksjonene, kan du også be om full refusjon av pengene dine innen 30 dager etter kjøpet. Så du vil ikke miste noe.

2. Genesis Framework

Ser du etter et premium temarammeverk som ikke bare er mobilresponsivt, men både raskere og SEO-vennlig? Da bør du prøve Genesis-rammeverket, da det gir deg livstidstilgang og ubegrenset bruk av nettstedet.

Hva koster Genesis Framework ?

Genesis tilbyr to prisplaner oppført nedenfor.

1. Genesis Framework: Dette er bare det nakne rammeverket som er alt du trenger som koster deg $59,95, som er en engangsavgift, og du vil få ubegrenset bruk av nettstedet samt livstidstilgang inkludert livstidsoppdateringer.

2. Pro Plus-medlemskap: Denne pakken lar deg laste ned hele temasamlingen deres som koster deg $499,95, og det er en engangsavgift med ubegrenset bruk av nettstedet og livstidstilgang og en flott pakke for webdesignere og utviklere.

Klikk her for å laste ned Genesis for WordPress

3. GenererPress

Hvis du leter etter WordPress-temaer premium rimelig og raskere, generere Press er bare for deg.

Hvor mye koster det?

GeneratePress koster deg bare $49,95 for 1 år. Du vil også få 40 % rabatt neste år dersom du er eksisterende kunde.

Rask merknad: Den tilbyr deg også en gratisversjon som du kan laste ned fra nettsiden deres, men den gir deg grunnleggende og begrensede funksjoner.

Klikk her for å laste ned GeneratePress premium

Bruk WordPress-plugins for mobiler: de 4 beste pluginsene for å gjøre nettstedet ditt responsivt

En flott ting med å bruke WordPress CMS er at det gir deg massevis av mobilplugins som hjelper deg enkelt å gjøre nettstedet ditt til et mobilvennlig. Her er en liste over de 4 beste pluginene som gjør nettstedet ditt mobilresponsivt (og få av dem er premium, men verdt hver krone).

WPtouch

WPtouch er en av de mest brukte mobilpluginene for WordPress-nettsteder. Den er installert og brukt av over 500 000 nettsteder over hele verden, og den er også på Googles kortliste over de beste WordPress-mobilløsningene.

Denne plugin-en vil umiddelbart aktivere en mobilversjon av nettstedet ditt som vil bestå Google Mobile-testen. Det hjelper deg også enkelt å tilpasse utseendet til nettstedet ditt og gi en raskere nettleseropplevelse for mobilbesøkende uten å endre temakoden.

Den tilbyr også en premiumversjon av plugin-en som kalles WPtouch Pro (og koster deg $79 for 1 nettstedsbruk), og den bruker temaene for mobile besøkende og skrivebordstemaet ditt vil ikke endre seg slik at blogginnholdet ditt forblir det samme.

Dessuten, med deres Pro-alternativ, kan du også kontrollere menyene, sidene, enhetene dine og til og med spesifisere forskjellige hjem- og landingssider for bloggen din.

WP mobilmeny

WP Mobile Menu er en av de beste WordPress-plugins som gir deg en responsiv mobilmeny hvor du enkelt kan tilpasse stilen på mobilmenyene dine slik du ønsker.

Det gir deg en eksepsjonell opplevelse for mobilbesøkende å få tilgang til innholdet på nettstedet ditt, uavhengig av enheten de bruker mens de surfer, inkludert smarttelefon, nettbrett eller skrivebord.

iThemes mobilplugin

Dette er IKKE en gratis plugin da det er en premium mobilplugin fra iThemes som er veldig populær og brukt av mange mennesker over hele verden.

Det gir deg en mengde alternativer sammen med en innebygd styling manager for å gjøre nettstedet ditt responsivt på alle enheter. Den tilbyr deg også mobilklare temaer for å optimalisere nettstedet ditt for mobilbrukere.

Det er forskjellige prisalternativer som tilbys, og den grunnleggende planen starter på bare $45 og gir deg tilgang til 2 lisenser som er et ideelt alternativ for bloggere og eiere av enkeltsider.

Med Mobile Style Manager kan du enkelt endre de grunnleggende stilene og fargeskjemaene til mobiltemaet ditt, og det kan tilpasses ved å bruke hvilket som helst tema du bruker, og det vil ikke påvirke designet ditt.

Trykk på Trykk

Dette er en annen mye brukt premium mobilplugin fra CodeCanyon (Envato Market) som gir deg den mest fleksible og allsidige WordPress-mobilmenyen.

TapTap kan tilpasses og er en av de fantastiske og brukervennlige WordPress-mobilmenyene som er tilgjengelige på nettet akkurat nå. Enten det er en e-handelsbutikk eller en porteføljeside, kan du tilpasse alt fra fonter, skriftstørrelser, ikoner, farger, knapper og logoer til bakgrunner, justeringer og mer.

Dette er en premium plugin fra CodeCanyon og standard enkeltlisensen til denne plugin koster deg $26 hvor du kan få ett års oppdateringer og kundestøtte.

Det beste med å bruke denne mobilmeny-pluginen er at du enkelt kan forhåndsvise alle endringene du gjør på nettstedet ditt i sanntid (og det hjelper deg å tilpasse mobilmenyen raskt).

Bruk Accelerated Mobile Pages (AMP)

Nettstedshastighet er en av de viktigste rangeringsfaktorene for Google.

For å redusere lastetiden tilbyr Google en ny tilnærming kjent som Accelerated Mobile Pages (AMP) for mobilbrukere.

Her er et eksempel på et AMP-søkeresultat fra New York Times:

Hvordan gjøre en WordPress-side mobilvennlig

Som du kan se ovenfor, laster AMP-sider raskt og gir en veldig rask opplevelse for brukere som surfer på nettinformasjon fra sine mobile enheter.

Den største fordelen med AMP-sider er at de lastes veldig raskt. For eksempel, når noen søker etter noe på Google, vises AMP-lenkene øverst, og når resultatet klikkes, lastes det nesten umiddelbart.

En annen grunn til å vurdere å implementere AMP for nettsidene dine er at det gir deg ekstra tegngrenser for titler.

Enten du vet det eller ikke, har Google en tittelgrense på 78 tegn for smarttelefoner. For stasjonære datamaskiner er det 70.

Dette betyr at hvis du bruker mer enn 70 tegn (for skrivebord) og 78 tegn (for mobil) i titler, avkortes de ekstra tegnene slik at de ikke vises.

Så du kan legge til flere tegn i mobiltitlene dine for å få mer eksakte søketreff fra mobilbrukere for å øke den totale søketrafikken fra smarttelefoner.

Nå oppstår spørsmålet: hvordan implementere AMP for WordPress-nettsteder?

Heldigvis er det noen få WordPress plugins som hjelper deg med å enkelt aktivere og implementere AMP-versjonen for WordPress-nettstedene dine.

Her er en liste over noen fantastiske AMP-plugins som du kan bruke til å implementere AMP-versjonen for mobilbrukerne dine.

Feil å unngå når du gjør WordPress-nettsidene dine mobilvennlige

Bruk av bilder uten optimalisering: folk flest gjennomsøker Google-bilder og bruker bilder direkte på blogginnleggene uten å bekymre seg for optimalisering. Slutt å gjøre det hvis du også er en av dem, siden nettstedets lastetid er sterkt påvirket av bildene du bruker.

Bruk plugins som WP Smush.it for å optimalisere bildene dine eller enda bedre optimalisere dem ved å bruke gratis bildeoptimaliseringsverktøy selv før du bruker bilder på innleggene dine.

Går for langt med java script: Visste du at de fleste nybegynnere spiller med CSS-filer og Java-skript uten egentlig å vite hvordan de skal leke med koden? Hvis du er en av dem, ikke rot rundt med Java- eller CSS-kode uten å vite det, ellers vil du mest sannsynlig ende opp med å ødelegge nettstedets lastetid.

Ikke tester nettstedene dine: teste om nettstedene dine åpnes riktig på forskjellige mobile enheter og nettbrett. Du kan bruke MobileTest.me, QuirkTools, etc. for å vise nettstedet ditt på forskjellige skjermoppløsninger.

Andre ressurser:

konklusjonen

Det er bokstavelig talt milliarder av mennesker som bruker smarttelefoner til alt fra bilanmeldelser til rabatter til netthandel. Det spiller ingen rolle om du bruker et WordPress-nettsted eller en e-handelsbutikk, å ha et responsivt design forbedrer det totale resultatet.

Så hva synes du om mobiloptimaliserte WordPress-sider? Har du noen spørsmål ? Del din mening i kommentarene.