Mobilanpassad webbplats – den kompletta guiden

Hur viktigt tror du egentligen att det är med en mobilanpassad webbplats? På den frågan skulle jag kunna svara så här; Google har sedan 2019 premierat webbplatser som har en mobilanpassad webbplats över webbplatser utan i sökresultaten. Dessutom ser vi idag att den mobila trafiken online står för hela 80% av den totala trafiken.

Vad det betyder i klarspråk? Om du inte redan har en mobilanpassad webbplats är det hög tid att göra det nu. Idag. Kanske är det en galen idé, men jag tror att du fixar att mobilanpassa din webbplats själv utan hjälp från varken webbyrå eller konsult. Allt du behöver är någon som guidar dig (jag) och pedagogisk vägledning.

För att detta ska fungera är det viktigt att du följer mina anvisningar och steg till punkt och pricka. Om du tappar bort dig eller inte kommer ihåg vad du läst, börja om från början. Det kan spara dig tid.

Varför ska jag mobilanpassa webbplatsen själv?

Det är förstås upp till dig att avgöra. Mitt starkaste argument till att mobilanpassa webbplatsen själv snarare än att låta en webbyrå eller konsult göra det är att det finns möjlighet att spara pengar. Dessutom tror jag att de flesta klarar av mer än vad vi tror och att mobilanpassa en webbplats är inte stjärnforskning, det handlar bara om att veta vad man gör. Och det är därför jag gör det här med dig.

Även om du aldrig tidigare jobbat med en webbplats tekniska delar eller skrivit en rad kod i ditt liv, så fixar du det här. Jag är med dig hela vägen och jag hoppas att det inte ska behöva ta alltför lång tid. Så ta dig en kopp kaffe så börjar vi från början.

Vad är en mobilanpassad webbplats?

En mobilanpassad webbplats är programmerad att anpassa sitt utseende efter den enhet som besöker webbplatsen. Beroende på om webbplatsen besöks från en laptop, tablet eller telefon så anpassas designen efter den bredd enheten har och presenteras på ett användarvänligt sätt i rätt format.

En mobilanpassad webbplats är alltså ingen funktion eller tjänst som installeras på webbplatsen. Istället är det en metod som används för att berätta för surfenheter hur webbplatsen ska agera för att presenteras på ett så optimalt sätt som möjligt.

Varför ska jag ha en mobilanpassad webbplats?

För att förklara varför du behöver en mobilanpassad webbplats är det lättast att ta det i punktform.

• SEO: Precis som jag skrev längre upp så lägger Google extremt stor vikt att en webbplats är mobilanpassad. Har du mobilanpassat webbplatsen har du köpt dig själv en fribiljett för högre placering i sökresultaten.
• Användarvänlighet: 80%, så mycket står den mobila surfningen för totalt i världen. Om man vill bemöta 4 av 5 webbplatsbesökare på ett vänligt sätt är det en bra idé att mobilanpassa webbplatsen.
• Framtidssäkring: Förutom att mobilen totalt dominerar internetsurfandet tappar även datorer och laptop alltmer mark. Experter spår en framtid helt eller delvis utan datorer, då är det bra om webbplatsen är mobilanpassad.

Hur mobilanpassar jag min webbplats?

Att mobilanpassa en webbplats är en process som ser något olika ut beroende på vilka förutsättningar din webbplats har, vad den är byggd i för system och hur gammal den är. Jag ska försöka täcka in så många olika möjligheter jag bara kan i denna guide, kallar jag det en komplett guide ska den väl ändå vara komplett.

Har du fyllt på den där koppen med kaffe? Så bra, då börjar vi.

Hur är din webbplats byggd?

För att kunna avgöra vilket sätt du kan mobilanpassa din webbplats på behöver jag först veta hur din webbplats är byggd. En webbplats kan vara byggd på många olika sätt och i många olika system eller verktyg. För enkelhets skull har jag fogat samman dessa till tre större grupper som vi kan utgå från när vi mobilanpassar vår webbplats.

1. Webbplatsen är byggd i ett uppdateringsverktyg och använder ett tema. WordPress, Joomla eller Drupal. Med ett uppdateringsverktyg (CMS) bakom finns det goda chanser att det är relativt enkelt att mobilanpassa webbplatsen.
2. Webbplatsen är byggd i Flash eller en förlegad e-handelsplattform. Det händer inte ofta att man stöter på sådana webbplatser idag, men om din webbplats råkar vara byggd för många år sedan tittar vi på det med.
3. Webbplatsen är byggd enbart i HTML. Detta innebär att inget verktyg eller system ligger som grund bakom webbplatsen och att all uppdatering sker direkt i webbplatsens HTML-filer på en server.

Generellt kan man säga så här. I listan ovanför är det bara alternativ 3 som behöver manuell handpåläggning för att bli mobilanpassad. Eftersom det är den process som tar längst tid och kräver mest arbete kommer jag att gå igenom de andra två först. Om du redan nu vet med dig att din webbplats är byggd enbart i HTML kan du därför scrolla ner till del 3.

1. Webbplatsen är byggd i ett uppdateringsverktyg och använder ett tema

Grattis! Att mobilanpassa din webbplats är troligtvis inte jättesvårt och behöver nödvändigtvis inte ta lång tid. Jag kommer inte fördjupa mig hur du ska göra specifikt för varje uppdateringsverktyg, istället går vi igenom vad du generellt behöver göra och sen gör du det i ditt uppdateringsverktyg.

1. Börja med att logga in i admin-sektionen av din webbplats.
2. När du är inloggad vill jag att du navigerar till sektionen eller sidan där du hanterar webbplatsens teman.
3. Notera nu vad ditt aktiva tema heter och se om du någonstans kan läsa mer om temat, se en dokumentation, besöka temats webbplats eller liknande.
4. Med den information du får fram om det tema din webbplats använder vill jag att du läser igenom denna för att se om det står något om “responsiv design”, “responsive webdesign”, “mobilanpassning” eller liknande. De flesta teman i de flesta uppdateringsverktyg är sedan någon gång runt 2012 och framåt oftast mer eller mindre mobilanpassade.
5. Om det står att ditt tema är mobilanpassat eller har responsiv design vill jag gratulera, din webbplats är mobilanpassad.
6. För att du ska vara helt säker på att din webbplats är mobilanpassad enligt Googles standarder vill jag att du besöker Googles eget verktyg som heter Mobile-Friendly Test. Klicka på länken och skriv in URLen till din webbplats i textfältet mitt i skärmen. Klicka på Test URL och låt testet köras.

Om du inte hittar någon information om att ditt tema skulle vara mobilanpassat eller resposnivt så finns även då en rad möjligheter. Så länge du inte betalat en webbyrå eller en konsult dyra pengar för att designa, utveckla och ta fram ett helt anpassat tema efter din grafiska profil är det fullt rimligt att byta tema.

De flesta uppdateringsverktyg har en uppsjö av både gratis- och betalteman, jag är helt säker på att det finns ett till utseendet snarlikt tema du kan använda istället för det du använder idag och som dessutom är mobilanpassat.

Om du är fast besluten att använda samma tema som innan och redigera det för att på så sätt göra det mobilanpassat är det förstås också möjligt. Eftersom en lång rad faktorer spelar in i ett sådant scenario kan jag inte gå in mer i detalj där. Men för att förbereda dig på vad du behöver kunna innebär det troligtvis en del HTML- och CSS kod. Innan du påbörjar ett sådant projekt kan det vara en god idé att kontakta utvecklarna bakom temat och fråga om inte en nyare version ska släppas där mobilanpassning är inkluderat.

2. Webbplatsen är byggd i Flash eller en förlegad e-handelsplattform

Om din webbplats är byggd i Flash är min första tanke att du troligtvis har fler problem än bara mobilanpassning. Min starka rekommendation vore då istället att bygga en ny webbplats innan du funderar på mobilanpassning.

Jag har skrivit en kurs i hur du kan bygga en webbplats i WordPress helt utan tidigare erfarenhet. Kursen är helt digital och består av en 52-sidig interaktiv PDF. Du lär dig allt du behöver för att bygga din egen hemsida. En hemsida som dessutom har alla möjligheter att bli fullt mobilanpassad och har goda SEO-förutsättningar.

Om du ändå insisterar på att mobilanpassa din Flash-baserade webbplats behöver du först och främst hitta en webbutvecklare som skapar hemsidor i Flash idag. Lycka till med det!

3. Webbplatsen är byggd enbart i HTML

Om din webbplats är byggd enbart med HTML, CSS och möjligen lite Javascript har du alla förutsättningar att själv mobilanpassa den. Det kan verka skrämmande att skriva egen kod, speciellt om du aldrig gjort det innan, men jag lovar dig att du grejar det. Vi tar en sak i taget och gör inget förhastat bara. Och om du är osäker, läs bara instruktionen igen.

Testa och diagnostisera din webbplats

För att börja mobilanpassa din webbplats måste du först veta hur pass mobilanpassad din webbplats redan är, eller om den överhuvudtaget är det. Det gör du bäst genom att använda Googles eget verktyg som heter Mobile-Friendly Test. Klicka på länken och skriv in URLen till din webbplats i textfältet mitt i skärmen. Klicka på Test URL och låt testet köras.

Beroende på hur mobilanpassad din webbplats är kommer resultaten se olika ut, men i denna guide utgår jag från att din webbplats är helt icke mobilanpassad och därför börjar jag från början.

Inkludera en meta tagg för viewport

Det tog ungefär tre rader med text innan jag börjar slänga med ord som meta taggar och viewports! Men du kan vara lugn, tänk bara på att det oftast låter svårt för att någon ska kunna ta betalt för det ;-).

Det första du behöver göra för att din icke mobilanpassade webbplats ska kunna avgöra vad det är för enhet som besöker webbplatsen, och således, anpassa utseendet efter den enheten är att inkludera en meta tagg innanför webbplatsens -taggar.

Hur gör man det? Enkelt. Kopiera bara koden: och klistra in den på valfri rad mellan … taggarna. Om du inte har en global fil för din webbplats sidhuvud behöver du klistra in meta taggen på samtliga HTML-sidor och spara dem.

När du gjort det har du tagit dig ett långt steg på vägen mot att ha en mobilanpassad webbplats. Grattis! Det du nu gjort är att berätta för din webbplats att den ska anpassa sig till den besökande enhetens bredd. Exempelvis om din webbplats besöks av en iPhone 8 som är 375 pixlar bred, så kommer även webbplatsen att vara 375 pixlar bred.

Men, bara för att webbplatsens bredd anpassar sig efter den besökande enheten innebär det inte att elementen på din webbplats gör det. Låt oss därför titta närmre på den biten.

Mobilanpassa designen på din webbplats

För att ändra din mobilanpassade webbdesign behöver du öppna CSS-filen som styr hur din webbplats ser ut. Precis som när du väljer ytskikten i ett nyrenoverat hus eller målar en ny fasad är CSS-filens jobb att sätta färg, form och visuell harmoni på din webbplats.

Navigera till platsen där dina webbplats-filer finns, om det så är i en FTP-klient eller en filöverföringstjänst spelar ingen roll. Leta efter en fil med namnet style.css, styles.css, media.css, main.css eller liknande. När du lokaliserat filen vill jag att du öppnar den precis som du öppnar de andra filerna du arbetar med på din hemsida.

Denna fil bör vara full av kod som ser ungefär ut så här, fast i mycket större omfattning då:

body {background-color:blue; width:100%;}
a {color:purple; font-size:16px;}
a:hover {color:#000;}
h1 {font-size:32px;}

Låt oss innan vi börjar bekanta oss lite med CSS. Genom att ändra i en CSS-fil på en webbplats ändrar du utseende-egenskaper i olika element och innehåll. Om du råkar skada formateringen i filen, sparar och laddar upp den till din webbplats kommer delar eller hela webbplasens utseende att bli brutet. Det innebär att designen på din webbplats kommer att vara borta, men innehållet kommer att finnas kvar. Vid en sådan händelse är det bra att kunna återgå till en tidigare fil och ersätta med den felaktiga. Det är därför en god idé att spara en kopia av CSS-filen innan du börjar redigera den.

Kodspråket CSS är tämligen lättförståeligt då det inte innefattar särskilt mycket tecken, symboler eller matematik, utan mer faktiska ord på engelska. Ord som body, margin, padding, height, width, font-size, font-family och color är ord som de flesta av oss redan förstår. Och med bara lite koll på vad orden lite mer specifikt gör i CSS, så är du hemma. Men du behöver inte kunna alltför mycket, jag ska försöka hjälpa dig med det mesta.

Börja skriva CSS för mobiltelefoner, så kallad responsiv webbdesign

För att börja skriva CSS för mobiltelefoner och således mobilanpassa din webbplats behöver du först definiera vilken skärmbredd det är du skriver din kod för. Låt mig förklara lite närmre. CSS-kod appliceras som standard på alla skärmar, enheter och storlekar utan att ta hänsyn till något. Men genom att använda något som kallas media-queries, som vi kommer gå in på alldeles strax, är det möjligt att skriva CSS specifikt för olika skärmstorlekar.

I vårt fall vill vi skriva CSS-kod specifikt för mobiltelefoner. Inga speciella märken eller modeller utan bara mobiltelefoner generellt. Och för att göra det behöver vi lägga till taggar för media-queries längst ned i din CSS-fil. Så börja med att scrolla allra längst ned i den CSS-fil du har öppen i din textredigerare. Slå sedan enter några gånger för att skapa lite mellanrum mellan den generella CSS-koden och den nya koden vi ska addera. Kopiera sist koden som står här nedan och klistra in i CSS-filen:

@media screen and (max-width: 480px) {
    
}

När du klistrat in denna kod i din fil bör du ha en fil som ser någorlunda ut som exemplet nedan, fast med väldigt mycket mer generell kod innan den mobilspecifika CSS-koden kommer:

body {background-color:blue; width:100%;}
a {color:purple; font-size:16px;}
a:hover {color:#000;}
h1 {font-size:32px;}

@media screen and (max-width: 480px) {
    
}

För att göra det lite extra tydligt att det är CSS-kod för mobila enheter vi skriver kan det vara bra att lägga till en kommentar om det. En kommentar är text som inte läses in som CSS-kod från CSS-filen. Den läses inte in överhuvudtaget utan är bara skriven som en notis för att hålla ordning och reda i sin fil. Lite överkurs för vad vi är ute efter kanske, men det ser så mycket mer professionellt ut:

body {background-color:blue; width:100%;}
a {color:purple; font-size:16px;}
a:hover {color:#000;}
h1 {font-size:32px;}

/* -- Mobilanpassad design -- */
@media screen and (max-width: 480px) {
    
}

Se där! Snyggt.

Vad är det nu vi har gjort? För att summera detta steg så har vi adderat en media-query i vår CSS-fil och med hjälp av denna kommer vi kunna skriva CSS-kod som är direkt anpassad mot mobiltelefoner.

I exemplet ovan skrev vi en media-query som specifikt appliceras på alla enheter som har en skärm som är 480 pixlar bred eller mindre. Med andra ord har vi samlat alla mobiltelefoner i stående läge i en media-query. Detta innebär också att vi inte kommer att skriva CSS-kod för mobiltelefoner i liggande läge, utan när mobiltelefonen är i liggande läge kommer den generella CSS-koden att appliceras på webbplatsens design istället. För att din mobil ska anses som mobilanpassad krävs dock bara att designen är anpassad för mobiler i stående format.

En sista sak vi bör addera innan vi går vidare är en initial rad med kod i vår media-query. Se koden nedan, jag förklarar vad vi gjort direkt under koden:

body {background-color:blue; width:100%;}
a {color:purple; font-size:16px;}
a:hover {color:#000;}
h1 {font-size:32px;}

/* -- Mobilanpassad design -- */
@media screen and (max-width: 480px) {
    body {width:100%;}
}

Vi adderade precis kod-raden body {width:100%;}. Vad betyder det? Det betyder att elementet body har en bredd som är 100% av webbläsarens bredd. Varför? För att body är det element som omfamnar alla andra element på hela webbplatsen. Att bodyn är 100% bred underlättar det fortsatta arbetet med att mobilanpassa webbplatsen och dess element.

Se vad som behöver mobilanpassas med hjälp av din webbläsares inspekterare

Samtidigt som du fortfarande har din CSS-fil öppen i din textredigerare behöver du ha din webbplats öppen i din webbläsare. Varför? För att vi måste se vad vi behöver åtgärda genom webbläsaren, och för att det underlättar att kunna skifta mellan webbläsare och textredigerare under processens gång.

Så, öppna din webbläsare (jag använder Google Chrome) och surfa till din hemsida. När du är på din hemsida högerklickar du på valfri plats och klickar “Inspektera” eller “Granska”. Ett fönster likt detta bör då synas någonstans i din skärm:

De flesta av dagens webbläsare har ett inspekterarverktyg, men de heter olika och har olika utseende. Så för enkelhets skull kan det vara en bar idé om du också använder webbläsaren Google Chrome för dessa steg.

Längst upp i vänstra hörnet på inspekteraren (återigen i Google Chrome, detta kan se annorlunda ut i olika webbläsare) finns en ikon som ser ut som två små handhållna enheter, en tablet och en telefon. Klicka på den och du bör lägga märke till att din webbplats plötsligt ser annorlunda ut och anpassas för att renderas som i en telefon. Se nedan:

Du kan behöva ställa in att webbplatsen ska se ut som i en telefon genom att klicka på samma ställa som den röda pilen nedan illustrerar och välja alternativet iPhone 6/7/8. Din webbplats ser då (mer eller mindre) ut som den gör när man besöker den från en webbplats.

När du nu faktiskt kan se hur din webbplats ser ut i en mobiltelefon är det lätt att se vad som behöver justeras och ändras. Vi har ju sedan innan lagt in vår meta tagg som gör att webbplatsen anpassas efter den enhet som besöker den, det vi nu ska göra är att justera de små detaljerna som i slutändan kommer göra att din webbplats är mobilanpassad.

Det kanske är dags att fylla på den där koppen kaffe igen förresten?

Leta upp och justera element som inte är mobilanpassade

I inspekteraren finns en annan knapp bredvid den vi tidigare använde för att rendera webbplatsen genom en telefon. Denna knapp ser ut som en box eller låda med en muspekare bredvid. Vad denna knapp gör är att när du väl klickat på den så kan du markera element på din webbplats för att se dem i inspektorn. Svårt att förstå? Låt mig förklara det lite mer pedagogiskt:

Varför behöver vi markera element på webbplatsen frågar du dig väl nu? Utmärkt fråga, faktiskt. Anledningen till att jag lär dig detta är för att det är nu du måste markera de element på din webbplats som inte ser bra ut i mobil-renderingen och åtgärda dem. Eftersom att jag inte ser din webbplats leder jag dig lite i blindo här, men vi ska nog klara oss igenom det.

Det vi framförallt är ute efter att åtgärda är element som exempelvis går utanför kanterna åt vänster och höger. Detta är något som Google är extremt petiga med (av självklara anledningar) och som därför måste åtgärdas. Eftersom att vi tidigare gjorde body elementet 100% brett innebär det att de element som går över kanterna har en fast bredd. Exempelvis kan ett element ha en fast bredd på 640 pixlar. Detta innebär att den fasta bredden är bredare än våra 480 pixlar som vi skriver kod för och därför går elementet över kanterna. Så det vi nu försöker göra är att lokalisera de element som har en fast bredd för att ändra deras bredd till 100% istället.

Skanna din startsida genom att scrolla upp och ner och se om du har några element som går över höger eller vänster kanterna. När du hittat ett sådant element, använd element-markören som vi gick igenom precis här ovanför och klicka på elementet. Titta sedan i kolumnen längst till höger för att hitta elementets class-namn.

Vad är ett class-namn? Det namn som används för att markera elementet i vår CSS-kod. Om ett element exempelvis har class-namnet ‘.element‘ är det precis vad vi kommer att använda i vår CSS-kod för att markera elementet och ändra dess egenskaper. Låt oss se på ett exempel:

Återigen, i denna del leder jag dig i blindo eftersom att jag varken vet hur din webbplats ser ut eller vad dina class-namn är. Det är nu upp till dig att lokalisera alla element med fasta bredder och lägga in dem i din media-query i CSS-filen.

När du gjort detta med de element du hittar bör din media-query se ut något i stil med detta;

body {background-color:blue; width:100%;}
a {color:purple; font-size:16px;}
a:hover {color:#000;}
h1 {font-size:32px;}

/* -- Mobilanpassad design -- */
@media screen and (max-width: 480px) {
    body {width:100%;}
    .element {width:100%;}
    .element2 {width:100%;}
    .element3 {width:100% !important;}
}

Vi har i exemplet lokaliserat tre element som har fasta bredder överstigande 480 pixlar och som därför förstör användarvänligheten i telefoner. Det har vi nu åtgärdat genom att istället ge dem egenskapen width:100%;. Du har kanske redan lagt märke till att den sista i raden har !important i tillägg till bredd-egenskapen? Att skriva så är ett lätt sätt att berätta för webbläsaren att denna egenskap är viktig och således ska prioriteras högst. Detta kan man applicera om bredden på elementet exempelvis inte vill ändras även fast du gett den en bredd på 100%.

Jag hoppas att du nu har lokaliserat dina element som har fasta bredder och således förstör möjligheten för en mobilanpassad webbplats. Jag hoppas också att du gett dem alla den nya bredden 100% i vår media-query. Om du kommit så här långt är det hög tid att du ger dig själv en klapp på axeln, jag har inte velat säga det innan men det vi gör är ganska avancerat 😉

Element som är för smala i mobil

Precis som element som är för breda finns det också element som kommer att vara för smala i mobildesignen. Dessa element har ofta redan en procentuell bredd som egenskap, men istället för att den då är 100% så kan den istället vara 20, 30 eller 45%.

Resultatet blir då att elementet istället ser hoptryckt ut och elementets innehåll kan överlappa dess kanter. Detta löser vi enkelt genom att, precis som innan, markera elementen med hjälp av element-markören, kopiera class-namnet eller sökvägen till elementet och lägg in det i CSS-filen. Ge sedan elementet samma egenskap som innan, width:100%; det vill säga.

Texten är för liten och är inte läsbar

En annan sak som Googles mobilanpassningstest kan vara lite känsligt kring är om texterna på din webbplats är för små och därför inte heller läsbara. Om så är fallet kommer Google att ge dig ett icke godkänt på den punkten och det ser då ut så här:

Eftersom att du bara testar en sida i taget och inte en hel webbplats kommer du med största sannolikhet veta vilken text det är Google menar om du får denna varning. Den generella rekommendationen brukar vara att man inte ska använda textstorlekar under 12 pixlar, så låt oss förstora de texter som Google anser är för små.

Återigen, använd element-markerings-verktyget och markera det eller de textstycken som har fått icke godkänt i Googles mobilanpassningstest, kopiera class-namnet eller class-sökvägen och klistra in i din CSS-fil. Det vi nu ska skriva är dock lite CSS för att göra textstorleken större och det skriver vi så här:

.element {font-size:12px;}
p {font-size:12px;}

När det kommer till just texter är chansen stor att det inte är ett element du kommer att markera med element-markören. Chansen är större att du kommer att markera en paragraf, en länk, ett citat eller en rubrik. Sådana skrivs inte med en punkt innan namnet utan istället skrivs de helt enkelt bara rakt upp och ner. Så här:

p {font-size:12px;}
a {font-size:12px;}
h1 {font-size:20px;}
h2 {font-size:18px;}
cite {font-size:12px;}

Oavsett vad det är för text-element du behöver ändra, kom bara ihåg att markera det i CSS-filen utan en punkt framför. När du åtgärdat textstorlekarna på din webbplats bör din CSS-fil se ut något i denna stil:

body {background-color:blue; width:100%;}
a {color:purple; font-size:16px;}
a:hover {color:#000;}
h1 {font-size:32px;}

/* -- Mobilanpassad design -- */
@media screen and (max-width: 480px) {
    body {width:100%;}
    .element {width:100%;}
    .element2 {width:100%;}
    .element3 {width:100% !important;}
    p {font-size:12px;}
    a {font-size:12px;}
    h1 {font-size:20px;}
}

Klickbara element är för nära varandra

Ett annat problem som Google lätt slår ner på är om klickbara element eller punkter är för nära varandra i din design. Inte så konstigt kanske med tanke på att vi använder vår klumpiga tumme och inte muspekaren för att klicka runt på webbplatsen från telefonen. Google är måna om att vi träffar rätt, och även ibland kan träffa lite snett, så de vill gärna ge oss lite utrymme att fela med.

Om du får denna varning behöver du återigen lokalisera de element som skapar den och justera deras egenskaper. Kom ihåg att klickbara element alltid är element som antingen är en länk, en knapp eller något annat element som triggar en händelse. Genom att veta det kan du utesluta en hel del element som tänkbara tjuvar.

Fram med element-markören och inspektera dina länkar, knappar och triggers för att se om det kanske är lite snålt om utrymme kring dem på vissa ställen. När du lokaliserat de element som skapar felet markerar du dem, kopierar class-namnen och klistrar in i CSS-filen. Genom att ge våra element lite utrymme runtom kommer vi kunna stryka även denna punkt.

När du lagt in class-namnen i vår media-query ger du elementen en egenskap som kallas padding. Padding är, precis som det låter, stoppning. Tänk dig att du fyller en madrass med stoppning vilket gör att madrassen blir högre och större. På precis samma sätt fungerar padding, fast den ger ett element stoppning runtom så att det blir längre till de närmast angränsande elementen. Vår kod bör således se ut något i denna stil:

.button {padding:20px;}
a {padding:5px;}

I exemplet ovan har jag både gett en knapp (.button) padding. Knappens padding kan vara något högre än a taggens padding då knappen med högsta sannolikhet inte kommer mitt i en paragraf (en längre text) vilket a taggen mycket väl kan göra.

Du bestämmer själv hur mycket padding du vill ge dina element. För att Google ska godkänna utrymmet runtom har jag svårt att se att de skulle kräva mer än 10 pixlars padding.

Avslutningsvis

När du gått igenom och åtgärdat dessa punkter är chansen stor att din webbplats tolkas som mobilanpassad av Google. Det är därför viktigt att du återigen testar din webbplats med Googles verktyg Mobile-Friendly Test. Tänk på att du kan behöva vänta någon dag för att Google ska hämta din webbplats med de uppdaterade egenskaperna, vi vill ju att resultatet ska vara rättvist.

Kom ihåg att spara och ladda upp din CSS-fil mot din server ofta. Ladda ofta om din sida också för att se så att de ändringar du gör faktiskt syns. Om de inte gör det kan du snabbt gå tillbaka och åtgärda ett eventuellt fel eller lägga på en !important på egenskapen. Spara ofta, ladda ofta upp, och spara alltid en lokal kopia av filen du tänker redigera innan du sätter igång.

Jag hoppas verkligen att detta hjälpte dig att åtminstone komma en bra bit på väg mot en mobilanpassad webbplats! Om din webbplats är mobilanpassad nu får du jätte gärna skriva en kommentar och låta mig veta. Glöm inte att inkludera länken till din webbplats också så att jag får se hur resultatet blev.

Blev webbplatsen aldrig mobilanpassad?

Om din webbplats inte blev mobilanpassad och du inte vet hur du ska ta dig vidare så hjälper jag dig jätte gärna! Lämna isåfall en kommentar nedanför så ser jag till att svara så snabbt jag bara kan, vi löser det tillsammans!