Tre sätt att mobilanpassa din webbplats.

Våren 2015 har kantats av många samtal och diskussioner gällande mobilsök och mobilanpassning av webbplatser. Att små enheter hela tiden fortsätter att utgöra större och större andelar av det totala surfandet är knappast någon nyhet. Men vad som bland annat diskuterats hett under våren är hurvida sökmotorerna framöver kommer ta hänsyn till, och anpassa sitt sökresultat utefter webbplatsernas användarvänlighet i mindre enheter.

Senaste året har vi noterat hur sökresultat vid sökningar gjorda med smartphones börjat skilja sig mot resultatet vid samma sökningar via dator. När sedan Google i februari gick ut med att de kommer fokusera ytterligare på mobilsök blev detta redan heta ämne ännu mer hett. Google lanserade dessutom ett datum för när förändringarna skulle ske, nämligen den 21 april. Att Google i förtid går ut med ett specifikt datum är ovanligt. Självklart vill sökmotorerna alltid presentera det bästa sökresultatet. Och med så många mobila sökningar som görs idag är det ett naturligt steg att mobilanpassade sajter också får bättre positioner vid sökningar från små enheter.

Vad betyder detta för dig som har en vanlig webbplats?

De allra flesta webbplatser som byggs idag är responsiva. Tar du in en offert från en webbyrå eller en aktör som erbjuder en färdig ehandels-lösning så ska responsivitet absolut finnas med i specifikationen. Men responsivitet är inte det enda sättet att göra en webbplats idag. Det finns egentligen tre skilda konstruktionssätt för att få sin webbplats att fungera i mobila enheter. Samtliga metoder har både fördelar och nackdelar. Här kommer en kortfattad presentation.

1. Responsiv design

Responsivitet är som sagt det vanliga sättet att bygga en webbplats på idag. Det är en relativt enkel och bra lösning. Google skriver att de rekommenderar denna typ av designkonstruktion, men det beror mycket på att det är det enklaste sättet att göra rätt på, och samtidigt enkelt för sökmotorer att förstå.

Med en responsiv design används samma kodbas (HTML) och samma URL:er. Däremot anpassar sig elementen efter storleken på skärmen. Detta görs genom att använda dynamiska storlekar på elementen, samt att olika stil-koder (CSS) aktiveras för olika storlekar på enheter. Men det är samma kod som läses in för alla typer av enheter, vilket gör administrationen enkel.

Nackdelen är att layouten ofta blir svår att få optimal för alla storlekar, på grund av oundvikliga kompromisser. Ska det se bra ut i en liten mobiltelefon, men även på en högupplöst projektor behövs allting skalas och kompromissas. Risken är att man använder ganska mycket ”dubbla kodbaser” i olika lager som döljs och visas för olika storlekar. Detta är inte tanken med responsiv design. Bygger man två distinkta webbplatser är det bättre att istället använda någon av de andra två konstruktionerna, snarare än att jobba med dubbla kodbaser på varje sida.

2. Separata URL:er

Den första typen av mobil-enhetsanpassning skedde för ganska många år sedan i form av helt egna versioner (mobilversioner) av webbplatserna. Versionerna lades sedan på egna domäner eller URL:er. Metoden används fortfarande, och det går att göra på rätt sätt. Man använder en subdomän (ex; mobil.noga.se) eller en undermapp (ex; noga.se/mobil), där en ny version av webbplatsen placeras. Nackdelen är dock ganska uppenbar. Med dubbla URL:er av alla sidor är det enkelt att missa något, och när det händer kan det ha en negativ påverkan på flera sätt. Du har säkert suttit framför datorn och klickat in på någon artikel som en vän publicerat på Facebook. När du kommer in på artikeln så ser allting väldigt avlångt och konstigt ut. Då är det troligen en mobilversion av artikeln du är inne på. Detta är ett exempel på ett felaktigt sätt att mobilanpassa sin webbplats på med separata URL:er.

Det som behöver göras är två saker. Dels behöver användaren vidarebefordras till rätt webbplats beroende på vilken enhetsstorlek som används. Detta för att eliminera problemet med att sidan ser felaktig ut som i exemplet med Facebook. Det som också behöver göras är att upplysa sökmotorerna om att det finns dubbla uppsättningar av varje sida. Detta görs genom META-taggarna link rel=”alternate” och link rel=”canonical”. Missar man detta kommer sidorna börja konkurrera med varandra i sökträfflistan (duplicerat innehåll).

3. Dynamic Serving

Detta är den tekniskt sett mest avancerade lösningen, men också den med flest möjligheter. Här använder man samma URL-adresser, men olika kodbaser (HTML). Genom att på servern identifiera vilken typ av enhet som ansluter till webbplatsen, anpassas också vilken webbplats som skickas till klienten. Fördelen är att man inte behöver tänka på att det utåt sätt finns olika webbplatser, samtidigt som man kan anpassa och optimera webbplatsen helt utefter olika enheters storlekar.

Nackdelen är att metoden är tekniskt mer avancerad. Dessutom är det lite omständigare att både bygga och uppdatera webbplatsen. Men eftersom koderna är helt uppdelade kan olika personer med fördel arbeta med olika delar av webbplatsen samtidigt, olika A/B-test kan administreras och köras samtidigt, osv.


Tabell över de olika konstruktionerna

Konfiguration Samma URL-adresser? Samma HTML-kod?
Responsiv design Ja Ja
Separata URL:er Nej Nej
Dynamic Serving Ja Nej

Vilken konfigurering är då bäst?

Det beror självklart på vilken typ av webbplats du ska bygga. I de allra flesta fall rekommenderar vi på NOGA en Responsiv webbdesign. Men har du en ehandel med tekniskt kunnig personal kan den dynamiska server-varianten (Dynamic Serving) vara något att satsa på. De allra bästa webbplatserna är fullständigt optimerade efter varje storlek och det kan endast göras bra genom att ha skilda koder. Google skriver att de rekommenderar responsiv design, men att de inte premierar något speciellt URL-format, så länge allt görs rätt och alla sidor med tillhörande kodfiler görs tillgängliga för Google-boten. Separata URL:er kan absolut användas, men det bör inte vara första-alternativet. När du ändå bygger med två olika kodbaser, borde du samtidigt satsa på att konfigurera dessa med Dynamic Serving.

Vad hände nu då efter 21 april?

Inga större förändringar just det datumet. Men det spelar egentligen inte så stor roll, för vi vet att användarvänlighet alltid kommer gynnas. Därför behöver du inte vänta på att mobilanpassa din webbplats!

Hör gärna av dig till oss om du vill ha råd om hur du mobilanpassar din webbplats på ett sätt som ger dig den bästa sökmotoroptimeringen, den bästa synligheten och den bästa användarvänligheten för dina besökare. En lösning som i slutändan alltid ska ge dig fler besökare och fler affärer!

Alexander Edsmyr

Teknisk Chef, NOGA

 

Dela artikeln

 

Lämna en kommentar