Gör din webbplats mobilvänlig

Visste du att mer än hälften av dina webbplatsbesökare kanske tittar på din webbplats på sin telefon eller surfplatta? Den här guiden går igenom de viktiga stegen för att tillhandahålla en sömlös användarupplevelse på alla skärmstorlekar, från att välja ett responsivt tema till att finjustera ditt innehåll.

Att välja ett mobilvänligt tema på en WordPress-webbplats är avgörande för att tillhandahålla en sömlös och optimerad användarupplevelse på olika enheter, förbättra tillgängligheten och påverka sökmotorrankingen positivt.

Alla teman som erbjuds på WordPress.com är mobilresponsiva, vilket innebär att de är utformade för att se bra ut både i mobila webbläsare och på stationära datorer.

Om du använder ett tredjepartstema, se till att det marknadsförs som mobilvänligt och ser bra ut när du öppnar det på dina mobila enheter. Kolla temats dokumentation beträffande anpassningsalternativ eller inställningar för att ge dig kontroll över temats utseende på mobila enheter.

När du har valt ett mobilresponsivt tema kommer du troligen att göra ändringar i standardinnehållet för att göra temat till ditt eget. När du redigerar din webbplats i WordPress-redigeraren är det viktigt att se till att den ser bra ut på alla enheter.

Det finns ingen separat ”mobilredigerare” i WordPress. Ändringar som du gör på din webbplats återspeglas på både mobila och stationära enheter. Så länge din webbplats har ett mobilvänligt tema kommer innehållet att anpassas till alla skärmar, stora som små. Detta kallas ”responsivitet”.

Du kan klicka på ikonen Förhandsgranska i det övre högra hörnet av redigeraren för att se hur din webbplats ser ut för besökare. Välj Mobil eller Surfplatta för att visa en uppskattning av innehållet i redigeraren:

Vi säger approximation här eftersom många element i redigerarvyn formas av webbplatstemat. Temats stilar visas inte i redigeraren. De visas endast genom att sidan förhandsgranskas i en ny flik eller genom att din webbplats visas i din enhets webbläsare. För att visa ditt innehåll med temats stilar tillämpade klickar du på alternativet ”Förhandsgranska i ny flik”.

När du har klickat på alternativet ”Förhandsgranska i ny flik” kan du visa mobilversionen med hjälp av inspektionsverktyget i din webbläsare. Så här använder du webbläsarens inspektionsläge för att förhandsgranska hur en sida eller ett inlägg kommer att se ut i mobilvyn:

1. Klicka på ikonen Förhandsgranska i det övre högra hörnet av WordPress-redigeraren.
2. Välj alternativet ”Förhandsgranska i ny flik”.
3. Högerklicka på förhandsgranskningssidan och klicka på ”Inspektera” (Chrome, Firefox, Edge) eller ”Inspektera element” (Safari).
4. I webbläsarens inspektionsläge klickar du på mobilikonen för att ändra dess förhandsgranskning till mobilvyn.

När du har publicerat dina ändringar kan det vara till hjälp att öppna din telefon eller surfplatta och visa webbplatsen som en vanlig besökare, med en sista kontroll för att se till att webbplatsen ser ut som du har tänkt dig.

Här är några tips för att maximera responsiviteten för din webbplatsdesign, så att innehållet presenteras på ett bra sätt på både mobil, surfplatta och dator.

Om en bild har text som är en del av själva bilden kan texten klippas av på mindre skärmar, exempelvis:

Detta beror på att text som är en del av en bild inte är responsiv.

Med WordPress-redigeraren kan du skriva text på en bild. När du lägger till text till en bild på det sättet blir texten responsiv. I videoklippet nedan återskapar vi samma bild som ovan med hjälp av omslagsblocket, vilket visar dess responsivitet på mindre skärmar:

För att maximera responsiviteten för typsnittsstorleksändringar på din sida, använd em– eller rem-enheter istället för pixlar (px). Att använda pixlar för textstorlek hårdkodar det specifika typsnittets storlek på sidan, vilket innebär att typsnittet alltid kommer att visas i den exakta storleken, oavsett skärmstorlek. Som kontrast är em– och rem-värdena relativa storleksenheter som storleksändras beroende på det tillgängliga utrymmet på besökarens skärm.

Istället för att använda en textmeny för din mobillayout kan du anpassa din webbplats navigeringsblock för att visa mobilmenyn, som kallas en överläggsmeny (även känt som ”hamburgarmeny” eller ”kebabmeny”). Den här funktionen kan hjälpa till att göra sidhuvudet mer kompakt och menyn mer tillgänglig för visning och användning på mobil.

Vissa block inkluderar alternativet ”Stapla på mobil” för att bättre använda utrymmet på mindre skärmar. Om innehåll visas sida vid sida på en stationär skärm kommer det att flyttas ner under på mindre skärmar, så att det blir lättare att läsa för mobilbesökare.

Inställningen ”Stapla på mobil” är tillgänglig i följande block:

• Blocket Kolumner
• Media- och textblock
• Visa Instagram-inlägg

Knappar och menyer blir lättare att läsa på mindre enheter om du tillåter omslutning över flera rader.

Alternativet ”Tillåt omslutning över flera rader” är tillgängligt i layoutinställningarna för följande block:

• Knappblock
• Blocket Delningsknappar
• Blocket Navigering
• Blocket Sociala ikoner
• Blocket Kommentarer
• Rad- och stapelblock

AMP (Accelerated Mobile Pages) är ett ramverk med öppen källkod från tredje part som gör det möjligt att skapa webbplatser som laddas nästan omedelbart på mobil, vilket ger webbplatsbesökare en snabb surfupplevelse. För att lägga till AMP på din webbplats kan du installera AMP-tillägget. För WordPress.com-webbplatser med tillägg aktiverade som skapades före den 13 juni 2022 installerades AMP-tillägget som standard.

Tänk på att användning av AMP tar bort en hel del funktionalitet på din webbplats (layout, flertalet funktioner) så att mobilbesökare kan ladda webbplatsen snabbt. Det är bäst att bara använda det om ditt tema skapades med AMP i åtanke. Alla teman på WordPress.com är redan mobilvänliga, så AMP krävs inte för att tillhandahålla en mobiloptimerad upplevelse.

Om din webbplats har visningsproblem och du har AMP installerat, rekommenderar vi att du inaktiverar AMP-tillägget för att se om detta förbättrar din webbplats prestanda. Om du ser alternativet ”Avsluta mobilversion” på din webbplats och vill ta bort det helt, inaktivera även AMP-tillägget.

Om din webbplats har använt AMP ett tag, kom ihåg att Google inte uppdaterar sina resultat omedelbart och kommer att fortsätta att visa AMP-sidor ett tag efter att du inaktiverat det. Det kan vara klokt att konfigurera sidomdirigeringar efter att AMP har inaktiverats. Sökmotorer indexerar URL:erna för AMP-sidor och det kommer att ta dem lite tid att ta bort dessa URL:er från sin lista, vilket innebär att vissa mobilbesökare kan skickas till en 404-felsida.

Det finns flera populära och kostnadsfria omdirigeringstillägg att välja mellan. Du kommer att ställa in en 301-omdirigering och behöver troligen ett Regex-uttryck i stil med /(.*)\/amp. Vi rekommenderar att du testar för att säkerställa att du har konfigurerat rätt omdirigering samt konsulterar anvisningarna för omdirigeringstillägget.