7 WordPress-tip til en mobilvenlig hjemmeside

Der er ikke noget værre end at have et flot desktop-websted og et mobilwebsted, der ikke fungerer korrekt.

De fleste designrettelser er enkle, men kræver opmærksomhed, hvis du ønsker, at besøgende skal blive på dit websted, mens de surfer på en mobilenhed.

Denne artikel vil fremhæve syv mobilvenlige webstedsproblemer og rettelser til dem.

  • Foretagne(Are) ændringer vises ikke på mobilen(Mobile)
  • Uvenlig navigation
  • Responsivt layout(Responsive Layout) holder pludselig op med at virke
  • Billeder tager for lang tid at indlæse
  • Det vigtigste indhold er ikke indlysende
  • For meget information
  • Data til små skærme

Mobilvenlige hjemmesideopdateringer dukker ikke op(Mobile Friendly Website Updates Not Showing Up)

Du har lige brugt meget tid på at opdatere din hjemmeside. De ser godt ud på dit skrivebord, men dukker ikke op på din mobilenhed.

En af de mest almindelige årsager er caching. Din mobilbrowser viser muligvis en gammel version af dit websted, som du tidligere har downloadet. En anden grund kan være, at dit websted holder fast i den gamle version af din side og ikke viser dine ændringer.

Hvis dette er problemet, skal du rydde cachen for at downloade den reviderede version. Et caching-plugin såsom WP Super Cache , W3 Total Cache eller WP Fastest Cache kan hjælpe med at løse dette problem.

Nedenfor er fire trin til at hjælpe dig med at tømme din hjemmesides cache og browser for at aktivere den nye version til at blive vist på dit mobilvenlige websted.

  1. Opdater din browser flere gange på din desktop og mobilenhed.
  2. Test din hjemmeside på forskellige mobile enheder.
  3. Ryd dit websted med et caching-plugin.
  4. Tjek med dit hostingfirma for at se, om der er et andet cachingsystem på din server, der skal ryddes.

Uvenlig navigation(Unfriendly Navigation)

Det kan være udfordrende at skabe en navigationsmenu, der fungerer godt på mobile enheder. Hvis din hjemmesidenavigation har mange elementer og undermenuer, er det endnu mere vanskeligt at presse alt sammen på en mindre skærm.

Hvis du for eksempel kun har tre eller fire elementer i din hjemmesidenavigation, skulle det se fint ud på mobilen. Men hvis du har flere elementer og undermenuer, vil de stables oven på hinanden og se overfyldte ud.

Nedenfor(Below) er et par måder at løse dette problem på for et mobilvenligt websted:

  • Gør din navigation til en rullemenu til mobile enheder.
  • Vis din navigationsmenu som blokelementer, så de vises lodret.
  • Brug et menuikon, der kan skiftes for at optage mindre plads.
  • Opret en mobil navigationsmenu ved hjælp af jQuery.
  • Brug Hamburger- menuen (Mange temaer inkluderer dette som en mulighed, eller du kan bruge et plugin( use a plugin) .)

Responsivt layout holder pludselig op med at virke(Responsive Layout Stops Working Suddenly)

Hvis dit mobilvenlige websted pludselig holder op med at fungere, kan det skyldes et plugin på dit websted.

Installation af et nyt plugin eller en opdatering til et eksisterende plugin kan forårsage en konflikt med andre, der påvirker dit responsive layout.

Start med at deaktivere hvert plugin et ad gangen for at se, om det er årsagen. Deaktiver ikke dem alle på én gang, eller du ved ikke, hvilket plugin der kan være synderen.

Kodeændringer(Code) er en anden mulig årsag. Hvis du har ændret en kode ved et uheld eller med vilje, skal du gendanne den originale kodebase og se, om dit responsive websted begynder at fungere igen.

Når du tjekker dit websted for mobilrespons, bør du altid teste det på en mobilenhed. 

Nogle gange ser det ud til, at det virker, når du ændrer størrelsen på browservinduet på dit skrivebord, men det vises ikke korrekt på mobilen.

Hvis en linje kode mangler i en HTML -header-fil, kan det bryde det responsive design. Denne enkelte linje med manglende kode vil få din mobilenhed til at antage, at det websted, du ser, er et websted i fuld størrelse.

Det gengivede websted vil være på størrelse med viewporten (størrelsen på det område af websiden, der er synligt for brugeren).

For at rette dit mobilvenlige websted skal du tilføje følgende kodelinje til overskriftssektionen:

<meta name=”viewport” content=”width=device-width”>

Nogle gange kan denne kode forsvinde, når et tema opdateres.

Billeder tager for lang tid at indlæse(Images Are Taking Too Long to Load)

At optimere billeder og reducere billedfilstørrelsen(reducing image file size) giver mening. Store billeder, der ikke er optimeret, kan sænke indlæsningshastigheden på dine websider. Dette kan være frustrerende for mobilbrugere.

WordPress version 4.4 og nyere serverer automatisk den mindste version af et billede på din server.

Hvis du allerede kører den nyeste version af WordPress , men dit websted stadig ikke indlæses hurtigt nok, kan du:

Det vigtigste indhold er ikke indlysende(Most Important Content Isn’t Obvious)

Nogle websteder er fyldt med en masse unødvendigt indhold til at fylde det tomme rum, når de åbnes på et skrivebord.

Hjemmesider udviklet uden at være bevidste om mobilbrugere falder generelt ind under denne kategori. Disse websteder tager mere tid og båndbredde at indlæse.

Hvis siderne ikke er designet passende til mobilenheder, vises en del af indholdet muligvis ikke på mobilen uden en masse scrolling.

Det meste af tiden vil et element på din webside se ud på én måde på en computer og helt anderledes på en mobilenhed.

For eksempel vil en prisside med tre kolonner vise dem side om side på en computer.

På en mobilenhed er kolonnerne dog stablet oven på hinanden, fordi skærmstørrelsen er mindre. Denne adfærd er forventet.

Sørg(Make) for, at din pristabel er øverst på din webside, så den vises først, når den ses på mobilen. Hvis du har meget tekst over din tabel, skal mobilbrugere scrolle ned for at se den og måske ikke.

For den mest optimale mobilbrugeroplevelse skal du placere de mest kritiske stykker indhold øverst på siden. Hvis en bruger skal scrolle meget, før de kan se dit indhold, vil de sandsynligvis ikke.

For meget information(Too Much Information)

Websteder med komplicerede brugergrænsefladeelementer såsom tabeller, flertrinsformularer og avancerede søgefunktioner kan give en dårlig mobilbrugeroplevelse.

Disse elementer indeholder for meget information, der kan overfylde en mobilskærm og forstyrre en bruger i at finde den information, de ønsker.

En tilgang er at fjerne eller skjule noget indhold fra mobilbrugere. Dette er dog ikke en ideel løsning for besøgende, der ønsker at have adgang til disse elementer.

For at undgå dette problem skal du optimere dit mobilvenlige websted så meget som muligt. Fjern også eventuelle unødvendige elementer, mens du fokuserer på kernestrukturen på dit websted.

Data til små skærme(Data For Small Screens)

Komplekse tabeller med mange rækker og kolonner kan være et problem, når de ses på små mobilskærme. Den bedste løsning er at bruge responsive tabeller.

Et plugin såsom WP Responsive Table kan gøre dette nemt at opnå.

Som med pristabellen ovenfor, når de ses på en mobilenhed, vil kolonnerne blive stablet, så de passer til den mindre skærm.

Andre måder at vise data på mobilenheder omfatter:

  • Oprettelse af en mindre tabel uden gitterlayout for at undgå behovet for vandret rulning.
  • Vip et bord om på siden for at passe bedre på en mindre skærm.
  • Udskiftning af større borde med mindre, der linker til den fulde version.
  • Konvertering af tabeller til cirkeldiagrammer.

Da mobilforbruget vokser eksponentielt, er det bydende nødvendigt, at virksomhedswebsteder er optimeret med mobilvenlige versioner. Forbedre(Enhance) brugeroplevelsen uden at ofre funktionalitet ved at følge trinene ovenfor.

Du bør også altid overvåge dit websteds ydeevne og foretage tweaks, når det er nødvendigt for at forbedre ydeevnen og brugeroplevelsen.



Anton Nyström

About the author

Jeg er softwareingeniør og opdagelsesrejsende. Jeg har erfaring med både Microsoft Xbox 360 og Google Explorer. Jeg er i stand til at give ekspertanbefalinger til visse softwareudviklingsværktøjer, samt hjælpe folk med at fejlfinde almindelige Explorer-fejl.


Related posts