Postat av under Sökmotoroptimering, Webbdesign.

Mobilvänlig webbdesign

Google postade igår ett inlägg i deras Official Google Webmaster blog som är intressant för alla webbutvecklare och även för de som sysslar med sökmotoroptimering(SEO). Från och med 21:a april i år kommer Google att börja ranka mobilvänliga hemsidor högre i sökresultaten för användare som söker i mobilen. De kommer göra en förändring i deras algoritm för sök som med målet att användare världen över ska få mera relevanta sökresultat när de använder sina mobiltelefoner.

Det kan ju tyckas rätt logiskt att det för en besökare väger upp om det går att ta till sig informationen på en hemsida i mobilen på ett vettigt sätt utan att man behöver zooma in, flytta runt på sidan och liknande. I november förra året så började Google använda en liten textbit som gjorde det enklare för mobila besökare att se om en sida i resultatet var ”mobile-friendly” eller inte.

Med mobilanvändning som ständigt växer så tycker jag det är ett naturligt steg att Google värderar mobilt optimerade hemsidor högre än dess dåligt optimerade konkurrenter. Dessvärre så är det fortfarande skrämmande många till och med topp-företag som har hemsidor som inte går att använda utan frustration i mobilen.

Vad gör en hemsida mobilvänlig?

Vad definieras då som en mobilvänlig hemsida? Google:s syn på det hela och vad som lär vägas in i deras bedömning av sidor i april, kan du hitta i deras guide to mobile-friendly sites. Google har även ett test du kan köra på din eller din konkurrents hemsida för att se om den är mobilvänlig.

Det är flera aspekter som spelar in, bland annat hur sidan är designad- om den är responsiv eller har en speciell version för mobila besökare och även SEO-mässigt om en besökare levereras på ett korrekt sätt till sidan utan massa ompekningar och liknande. Mer om mobil SEO kan du också läsa i Google:s pedagogiska guide ”Mobile SEO”.

Här är några exempel på sådant som jag brukar tänka på när jag utvecklar responsiva hemsidor som ska ge en trevlig upplevelse i olika typer av mobiltelefoner. Mycket av detta tänk är även viktigt att ha med om du vill ha en snyggt och användarvänligt emailutskick:

  • Knappar som går att trycka på med tummen: Vet inte hur ofta jag stött på knappar på hemsidor i mobilen som knappt går att trycka på utan att flytta handen då ytan att trycka på är för liten.
  • Textstorlek: Det finns mängder med kombinationer av skärmstorlek, upplösning och pixeltäthet bland moderna mobiltelefoner, vilket gör att den textstorlek som fungerar på de flesta datorskärmar inte nödvändigtvis är läsbara för alla mobilanvändare.
  • Hastighet: Trenden om du tittar på WordPress-teman från de senaste åren är stor användning av stora bilder, sliders/karuseller och mycket innehåll på en enda sida som kräver en del scroll för att ta del av allt. Detta kräver ofta en hel del Javascript, mer avancerad CSS-stil och bilder vilket snabbt ökar laddningstiden för hemsidan rejält. Om inte användare sitter med Wi-Fi eller har en bra datatrafik i mobilen så blir sidor som dessa och är dåligt optimerade, väldigt långsamma och frustrerande att besöka.Hemsidor som är långsamma att ladda och som har sega animationer gör att besökare backar och letar upp en mer optimerad konkurrent i sökresultaten istället. Men detta går att förhindra genom smart kodning, komprimering av filer och även att använda logik för att inte ladda in allt i full storlek eller direkt undvika att vissa block med innehåll laddas för mobila användare.

Det blir intressant att se hur denna förändring i Google:s algoritmer kommer att påverka besökartrenden från och med i vår för företag som ännu inte har en hemsida som fungerar bra även i mobiltelefoner.

Om du ännu inte har optimerat din hemsida för mobila besökare så är det här ännu ett bra skäl för dig att ta en titt på det så att du står redo under våren!

 

Vill ha hjälp med att optimera din eller ditt företags hemsida så den blir mobilvänlig?

Kontakta mig om att göra din hemsida mobilvänlig »

Postat av under Marknadsföring på Internet, Webbdesign.

På dagens webb så är det kritiskt att din hemsida går att använda och att dina nyhetsbrev går att läsa i mobilen och surfplattor. Användandet av mobiler fortsätter att öka världen runt och därmed även företags spenderande för mobila annonser och satsningar för hemsidor och e-butiker som konverterar även när användaren är ute på språng. Tidigare var det populärt att ha en separat mobil version på en egen subdomän för sidan i stil med http://m.thomasdesign.se/ men nu har det blivit allt mer populärt med att använda så kallad responsiv design.

Responsiv design innebär att designelement på en hemsida flyter runt och ändrar storlek beroende på vilken upplösning din skärm har. Detta möjliggörs med att sätta olika regler i CSS-koden för upplösningar som hanteras av webbläsaren, oftast satta i bredd efter de vanligaste upplösningarna hos datorer, smartphones och surfplattor. Många nya smartphones och surfplattor har dock börjat ha samma höga upplösning eller högre än datorer, men de har då även en högre pixeltäthet som det går att anpassa designen efter och något som också är värt att tänka på om många av ens besökare använder sådana enheter.

Hur kommer man undan enkelt och billigt om man vill testa sin heta, nya responsiva design för en hemsida eller ett mailutskick men inte har flera mobiler och surfplattor med olika operativsystem? Du kan lösa det med olika typer av hemsidor eller mjukvara! Här listar jag sju av dessa som jag känner till och använder mer eller mindre i min utveckling av responsiva hemsidor och mail. Flera av dessa nedan kan du även använda för att testa dina mobilappar med som bonus!

Chrome Developer Tools emulering

1. Emulering i Chrome Developer Tools

Typ av verktyg: Mjukvara
Plattformar: Alla
Vad du kan simulera: Android, iOS
Pris: Gratis

En del föredrar Firefox och tillägget Firebug för webbutveckling och buggtestande, men jag trivs bäst med Chrome och det inbyggda Developer Tools. Förutom att du snabbt kan välja ett element på en sida och testa redigeringar direkt i webbläsaren så har Google även utrustat Chrome med en bra emulering som ofta stämmer väldigt bra överens med resultatet i en riktig enhet med Android eller iOS. Den främsta fördelen här är att du kan se och testa dina ändringar direkt och behöver inte uppdatera eller ladda upp något för att se resultaten i något annat verktyg eller i en mobil, vilket sparar mycket tid.

Bonustips: Ladda ner extension Tincr till Chrome som sparar dina ändringar du gör med Chrome Developer Tools direkt utan att du behöver göra något i ditt textredigeringsprogram!

Android SDK

2. Android SDK

Typ av verktyg: Mjukvara
Plattformar: Windows, Mac OS
Vad du kan simulera: Olika versioner av Android och appar
Pris: Gratis

Android SDK kan tyckas vara lite överkurs om du mest vill testa så att din hemsida ser OK ut i en Androidlur fast du inte har en fysiskt, men det kan vara användbart för att komma åt specifika inställningar och om du vill testa responsiva mail i Gmail-appen utan att köpa till någon testtjänst, men inte har något emot lite pillande med installationsfiler och inställningar.

Bluestacks

3. Bluestacks

Typ av verktyg: Mjukvara
Plattformar: Windows, Mac OS
Vad du kan simulera: Android-appar
Pris: Gratis

Bluestacks är främst utvecklat för att du ska kunna spela dina favoritspel till Android på din Mac eller PC. Men du kan även använda deras gränssnitt som ser ut likt en surfplatta med Android till att testa din hemsida. Med lite knep och knåp så kan du även installera flera webbläsare och appar som Gmail-appen för att testa hur dina mailutskick ser ut, något som annars brukar kräva kostsamma testverktyg som till exempel Litmus. Bluestacks kan vara ett snabbt alternativ till Android SDK om du mest snabbt vill simulera en hemsida utan allt för många inställningar eller meckande med filer.

Spoon.net

4. Spoon

Typ av verktyg: Mjukvara
Plattformar: Windows
Vad du kan simulera: Opera Mini med simulering av flera olika vanliga Android-mobiler och surfplattor
Pris: Från 12$/månad

Spoon är en tjänst som jag som webbutvecklare kan finna ovärderlig ibland, då den låter dig köra massor med program i molnet. Det starkaste med Spoon för mig är att det låter mig testa från Internet Explorer 6 och upp till IE 10 samtidigt som om jag hade alla versionerna installerade samtidigt på datorn. Jag vet inte hur de har lyckats med detta, men om du är ute efter ett smidigt och prisvärt test för att optimera för gamla och hatade versioner av Explorer så är det ett bonustips.

Vad Spoon också erbjuder är en Opera Mini till Android-simulator där du kan testa en mängd olika förinställda upplösningar och pixeltäthet som representerar populära smartphones och surfplattor med Android och du kan också konfigurera en helt egen vilket gör att simulatorn fungerar bra även för framtida enheter.

Sauce Labs

5. SauceLabs

Typ av verktyg: Hemsida
Plattformar: Windows
Vad du kan simulera: Android, iOS, Windows, Mac OS, Linux
Pris: Från 12$/månad

SauceLabs låter dig köra virtuellt testande av hemsidor och appar för flera olika plattformar och få screenshots och testresultat från dem. Detta möjliggörs med virtuella maskiner där du till och med kan navigera med viss fördröjning. Framför allt tjänsten ”Manual” är intressant i det här fallet som du kan testköra en begränsad version av gratis på hemsidan.

6. Opera Mini Simulator

Typ av verktyg: Hemsida
Plattformar: Alla
Vad du kan simulera: Opera Mini 8
Pris: Gratis

Det här är det mest begränsade verktyget i artikeln, men Opera Mini Simulator kan tillsammans med andra verktyg vara ett bra tillägg i din testarsenal om det dyker upp något fel som du har svårt att återskapa.

Xcode iOS Simulator

7. Xcode iOS Simulator

Typ av verktyg: Mjukvara
Plattformar: Endast Mac OS
Vad du kan simulera: Olika versioner av iPhone, iPad
Pris: Gratis

Xcode är ett program som alla som är bekanta med iOS-utveckling känner till och är gratis om du har Mac OS. Men du behöver inte kunna knacka app-kod för att kunna utnyttja denna simulator, utan det räcker med att du startar Xcode och sedan väljer Xcode > Open Developer Tool > iOS simulator för att få tillgång till ett mycket användbart verktyg. Simulatorn låter dig testa med olika versioner av iPhone och iPad och i horisontellt eller vertikalt läge och här är det nästan garanterat att det ser likadant ut i simulatorn som i en riktig enhet, vilket kan spara dig en del pengar om du inte är så sugen på att köpa en iPhone eller iPad.

Har du tips på någon till hemsida eller verktyg som jag har missat? Skriv gärna en kommentar!

Vill du ha hjälp med att optimera din hemsida eller din maildesign för mobilen? Kontakta mig

Postat av under Marknadsföring på Internet, Sociala medier.

Twitter Sverige

Twitter låter dig ta till dig all möjlig sorts information runt från hela världen och kan även hjälpa dig att hitta nya kunder eller nya jobb och få inspiration för dina projekt. Här listar jag några svenska hashtags som jag följer inom företagande, marknadsföring och utveckling. Tipsa gärna i kommentarerna om det är någon speciell svensk hashtag du kan rekommendera!

1. #sthmltech

Med #sthmltech hittar du nyheter och uppdateringar inom startup-företag i Stockholm. Även om du inte bor i Stockholm kan det vara intressant för inspiration om nya företag som poppar upp runt om i landet, som till exempel det mobila caféet Wheely som jag hittade genom feeden. Särskilt livat i flödet blir det när det hålls olika event inom området. Om du är intresserad av jobb eller uppdrag hos svenska startups kan det också vara en bra idé att ta en titt ibland.


2. #affiliatese

#affiliatese är hashtagen för svenska affiliatemarknadsförare. Här dyker det upp frågor och svar och intressanta artiklar inom området.


3. #svSEO

#svSEO ger intressanta diskussioner och länkar inom sökmotoroptimering (SEO). Trevligt för inspiration och att hålla sig uppdaterad om den ständiga utvecklingen med Google:s algoritmer och nya trender.

4. #WPSE

Under #WPSE så samlas inlägg om WordPress och WordPressutveckling. Just nu rätt mycket marknadsföring i resultaten, men det dyker även upp intressanta tips och guider emellanåt.

5. #nyttjobb

#nyttjobb är enligt mig stället nummer ett för att leta nya jobb och anställda på svenska Twitter. Här postas kanske hundratals platsannonser varje dag från rekryteringsföretag och även av mindre företag själva. Är du på jakt efter att anställa någon så dyker det även upp användare som meddelar att de söker jobb. Jag har tidigare hittat en del intressanta tjänster att söka här tidigare och då många som jag annars hade missat då de kanske bara postats på ett företags hemsida och inte som en betald rekryteringsannons.

Postat av under Marknadsföring på Internet, Sökmotoroptimering.

Domän

Med satsningen på nya toppdomäner så kommer det att tillkomma 1500 nya toppdomäner sen slutet av 2013 fram till slutet av 2015. En av de företagen som erbjuder registrering av dessa är Marcaria. Om du någonsin har registrerat ett mer udda domännamn som till exempel .ad så har du nog kommit i kontakt med Marcaria. Jag kan inte rekommendera dem om du inte måste ha ett domännamn som endast de sitter på, för de har en väldigt föråldrad hemsida och kontrollpanel, höga priser och framförallt: långsamma och instabila servrar! Så om du ute efter en ny toppdomän rekommenderar jag att du söker runt och ser om det finns några alternativ till Marcaria.

Men Marcaria är i alla fall en av de registrars som erbjuder en mängd av de nya toppdomänerna (gTLDs), nu senast med tillskottet .menu. De olika nya domänerna är i olika stadier av registrering där de till en början endast är öppna för en utvald publik för att undvika så kallade “domain squatters” och andra som kan sabotera för stora varumärken. Men flera är öppna för allmän registrering; t.ex. .clothing för $28.

Fler toppdomäner i urval hos Marcaria:

.bar
.domains
.shoes
.careers
.recipes
.photos
.wiki
.social
.enterprises
.cheap
.company
.kaufen

Det blir intressant att se hur alla dessa nya toppdomäner kommer att påverka sökresultat inom en snar framtid och vilka kreativa lösningar som kommer att dyka upp som följd av dem. Antagligen kommer det svämma över med konkurrens för lösningar i stil med ”lenses.cheap” och ”auto.kaufen” där nog de bästa försvinner under så kallade ”sunrise”-perioden. Eller så fort allmän registrering öppnar upp och de riktigt rutinerade domän-hustlarnas automatiska system registrerar domäner i bulk åt dem.

Postat av under Marknadsföring på Internet, Sociala medier, Webbdesign.

Facebook:s nya design

Facebook:s nya design (gjord suddig då det är min egna news feed)

Många som gick in på Facebook på en dator hajade nog till idag. Facebook har släppt en ny design för deras newsfeed som är optimerad för att framhäva bilderna i den. Vissa delar av designen påminner om den som Facebook testade under förra året men som inte togs emot så väl, vilket ofta brukar vara standardreaktionen bland många innan de vant sig.

Den nya Facebook-designen påminner lite om den för Google+ och det är nu lättare att snabbt särskilja mellan olika inlägg. Annars är upplägget med tre kolumner i news feed detsamma som tidigare så det är ju ingen total omdesign av sidan.

Facebook ska ha tagit lärdomar från deras testdesign från förra året och kommer att rulla ut denna globalt under de kommande veckorna. Det ska bli intressant att se vad folks reaktion blir av det här i längden och om Facebook till exempel får en aning mer eller mindre effektiva annonser då de nu är i vita rutor på en grå bakgrund och därmed framhävs lite mer än tidigare.

Kan du se den nya designen när du går in på Facebook på din dator än? Vad tycker du? Läs mer om den nya designen hos The Verge