Kategoriarkiv: CSS och design

Nu indexeras mobilsidor först av Google

Kommentera

Google indexerar mobilsidor först. Kvinnan på bilden använder mobilen för att söka på Google.

Från och med mars 2018 börjar Google att främst indexera innehållet på mobilsidor. Uppdateringen kallas “Mobile-first indexing” och innebär att Google använder mobilversionen av en hemsida för indexering och ranking. Anledningen är att de allra flesta sökningarna sker från mobilen och att Google strävar efter att ge sina användare (särskilt mobilanvändare) den bästa möjliga sökupplevelsen.

Om din hemsidas design är responsiv och mobilanpassad idag bör du inte påverkas av Googles förändring. Om du däremot har en separat mobilsida för din sajt så är det viktigt att känna till att det främst är innehållet på mobilsidan som kommer att indexeras och rankas av Google framöver.

Google kommer inte att flytta alla sidor på en gång utan börjar med de sidor som redan uppfyller Googles kriterier för mobilanpassning. De vars hemsidor har flyttats kommer att meddelas via Google Search Console.

Tre punkter att se över om du har en separat mobilsida för din sajt:

  1. Se till att innehållet på mobilversionen av din hemsida är likvärdigt med desktopversionen.
  2. När punkt 1 är avbockad, använd Googles robots.txt-testverktyg för att verifiera din mobilsida så att den blir tillgänglig för Googlebot.
  3. Se till att lägga till och verifiera din mobilsida i Google Search Console så att den indexeras av Google.

Läs mer på Google Webmaster Central Blog »


Inte mobilanpassat företagets hemsida än? Här är fyra anledningar att göra det

  1. En majoritet av svenskarna surfar från mobilen varje dag, enligt en rapport från IIS. En mobilanpassad hemsida förbättrar sökupplevelsen för dessa.
  2. Två av tre svenskar tycker att det är viktigt att företag har en mobilanpassad hemsida, enligt rapporten Svenska företag på webben 2017.
  3. Ett företags mobilanpassade hemsida premieras bland Googles mobila sökresultat sedan 2015.

85% surfar från mobilen – här är 5 tips för en mobilanpassad sajt

 

Dela detta inlägg:

85% surfar från mobilen – här är 5 tips för en mobilanpassad sajt

2 svar

Exemplet visar Loopia Sitebuilder-mallen Serendipity. Läs mer om Loopia Sitebuilder här.

Hela 85% av den svenska befolkningen använder Internet i mobilen, enligt rapporten Svenska och Internet 2017. Det gör att det vanligaste sättet att använda internet dagligen är via sin mobiltelefon.

Har du ingen mobilanpassad hemsida idag är det alltså läge att skaffa en nu. Nedan delar vi med oss av 5 tips till dig som vill ha en mobilanpassad hemsida med en design som anpassar sig efter den enhet sajten besöks ifrån.

1. Mobilanpassade fälttyper – så gör du

Det virtuella tangentbordet på en Smartphone med touch-skärm har sina för- och nackdelar. Troligtvis kan de flesta skriva snabbare på ett fysiskt tangentbord, men å andra sidan kan det virtuella tangentbordet anpassas efter olika behov och tillfällen. För en mobilanvändare kan det till exempel vara guld värt att få ett förstorat tangentbord om t ex kort- eller OCR-nummer ska skrivas in vid en betalning från mobilen.

» Så här skapar du mobilanpassade fälttyper

2. Responsiva tabeller – här är 2 varianter

En av utmaningarna med en mobilanpassad hemsida är att få till schyssta tabeller. Responsiva tabeller som anpassar sig efter alla olika enheter kan nämligen vara en utmaning att få till. Nedan tipsar vi om två olika lösningar, beroende på hur breda tabeller du vill använda på din sajt.

» Spana in 2 olika varianter av responsiva tabeller

3. Mobilanpassad meny på sajten? Gör så här

Ännu en utmaning med att skapa en mobilanpassad sajt för små skärmar är att ta fram en meny som håller sig tydlig och fullt synlig utan att besökaren behöver zooma in/ut eller vända och vrida på mobilen/surfplattan. Här presenterar vi två olika lösningar; en horisontell och en vertikal så kallad “hamburgermeny” som idag används av de allra flesta sajter på nätet.

» Så fixar du en mobilanpassad meny

4. Skapa en mobilanpassad sajt med lättanvända Loopia Sitebuilder

Med vårt populära hemsidesverktyg Loopia Sitebuilder skapar du snabbt och enkelt din egen hemsida från grunden – helt utan krav på förkunskaper. Loopia Sitebuilder erbjuder flera responsiva designmallar som automatiskt anpassar din sajt efter enheten den besöks ifrån. Du har dessutom möjlighet att prova verktyget gratis innan du bestämmer dig.

Läs mer, prova gratis och kom igång med din hemsida i Loopia Sitebuilder »

5. Skapa en hemsida snabbt, smidigt och responsivt med WordPress

WordPress är världens största hemsidesverktyg med miljontals användare världen över. De flesta WordPress-teman är responsiva och anpassar sig efter den enhet sajten besöks ifrån, oavsett om det är en dator, mobil eller surfplatta.

För att skapa en mobilanpassad hemsida i WordPress behöver du installera WordPress, välja ett responsivt tema och sedan fylla på med text och bilder. Behöver du hjälp med att komma igång kan vi tipsa om vår populära WordPress-skola.

Kom igång med WordPress hos Loopia »

Vill du ha hjälp med att mobilanpassa din sajt?

Vi på Loopia har över 3 500 återförsäljare, däribland en hel del webbyråer som pysslar med just mobilanpassad webbdesign. Maila dina önskemål till af@loopia.se så hjälper vi dig att få kontakt med den av våra återförsäljare som passar dig och dina behov bäst. Läs mer om Loopias återförsäljarprogram.

Detta inlägg publicerades ursprungligen den 17 januari 2017 och har uppdaterats den 23 januari 2018.

Dela detta inlägg:

Statistik: Mobilbesöken ökar än – har du mobilanpassat din sajt?

1 svar

Precis som tidigare år så fortsätter mobilbesökarna på Loopia.se att öka i en redig och stadig takt. Detta gäller inte bara för loopia.se utan surfandet från mobila enheter fortsätter att öka överlag, även om takten minskat något enligt IIS rapport ”Svenskarna och internet 2015”.

Diagram över antalet mobilbesökare på loopia.se från år 2010-2016. Det ökar för varje år som går. Dags att mobilanpassa din sajt!

Det gör det extra viktigt för dig som företagare att mobilanpassa din sajt och/eller e-handel, om du inte redan gjort det. Allra helst ska sajten vara responsiv, så att layouten anpassar sig efter respektive enhet som dina besökare surfar ifrån. Det ger ett positivt intryck som kan leda till fler kunder och större intäkter.

Vill du mobilanpassa din hemsida/e-handel?

Loopia erbjuder en rad olika hemsidesverktyg och e-handelslösningar för dig som vill skapa en ny sajt, där du får tillgång till en mängd olika designmallar som anpassar sig efter respektive enhet som sajten besöks ifrån.

Läs mer om våra hemsidesverktyg och e-handelslösningar.

Läs också våra tidigare blogginlägg om att mobilanpassa sin hemsida:
» Så fixar duen mobilanpassad meny på din sajt
» 2 sätt att göra responsiva tabeller på
» Hur du fixar fälttyper som underlättar för mobilbesökaren

Dela detta inlägg:

Nu gör Google webben ännu mer mobilvänlig

Kommentera

Skärmar av olika slag med skärmdumpar av loopia.se, som visar att sajten är mobilvänlig.I april 2015 ändrade Google så att en mobilvänlig sajt rankas högre än övriga bland sökresultaten vid sökningar i mobilen, och på så vis syns bättre. Många företagare har sedan dess valt att mobilanpassa sina hemsidor och webbutiker för att lättare kunna klättra i sökresultaten.

Nu har Google gått ut med att de i början av maj 2016 genomför ännu en uppdatering som ökar pressen om att mobilanpassa sin sajt genom att ranka mobilvänliga sajter ännu högre än tidigare vid sökningar från mobilen. Du som ännu inte har mobilanpassat din sajt bör alltså göra det nu.

Funderar du på att skapa en helt ny sajt kan vi tipsa om hemsidesverktyget Loopia Sitebuilder. Det ger dig tillgång till professionella, mobilanpassade mallar som du skapar din hemsida utifrån. Verktyget kräver inte heller några förkunskaper.

Är din hemsida mobilvänlig?

På Webmaster’s Mobile Guide kan du läsa mer om vilka krav som ställs på en mobilvänlig sajt och testa hur pass mobilanpassad din egen hemsida är i deras Mobile-Friendly Test.

» Läs mer om uppdateringen på Google’s blogg

» Läs mer om mobilanpassad och responsiv webbdesign

Dela detta inlägg:

Google nobbar popup-annonser för mobilanvändarens skull

2 svar

“Ladda ner vår app!” – En allt för välbekant fras som titt som tätt dyker upp i form av heltäckande popup-annonser som döljer innehållet på de sajter du besöker från mobilen. Dessa heltäckande annonser upplevs ofta så pass irriterande att många väljer att överge webbplatsen helt och hållet.

Tidigare i år kunde vi läsa att Google rankar mobilanpassade hemsidor högre vid sökningar från mobila enheter, i syfte att ge mobilanvändaren en positiv sökupplevelse med relevanta sökresultat.

Google nobbar popup-annonser från och med 1 november 2015

Google nobbar popup-annonser, som du ser exempel av på denna bild.

Nu tar sökmotorjätten det hela ett steg längre. Google nobbar popup-annonser med start den 1 november 2015 och slutar att klassa sajter som använder sig av heltäckande popups som mobilvänliga. Google menar att användaren bör få en positiv sökupplevelse oavsett om informationen finns tillgänglig i en app eller på en webbsida.

Detta gäller främst popup-annonser som täcker sidans innehåll och uppmanar besökaren att ladda ner en app. Andra annonsformat, t ex banners, anses fortfarande vara mobilvänliga så länge de inte skymmer någon större del av sajtens innehåll.

» Läs mer om den nya riktlinjen på Google Webmaster Central Blog

Delar av bilden är lånade av Google Webmaster Central Blog.

Dela detta inlägg:

Mobilanpassning ger dig högre ranking på Google

6 svar

Du har förmodligen, precis som vi på Loopia, sett en ökning av mobilbesökarna till din sajt under den senaste tiden. Idag används smartmobilen flera gånger om dagen av nästan hälften av alla smartmobilägare, enligt rapporten Svenskarna och Internet från 2014. Har du inte mobilanpassat din hemsida än är det dags att göra det nu, dels för att göra ett bättre intryck hos dina mobila användare men också för att stiga bland sökresultaten i Google’s sökmotor.

Google avslöjade nämligen på sin blogg nyligen att de den 21 april 2015 ändrar så att mobilvänliga hemsidor rankas högre än övriga hemsidor vid sökningar i mobilen, och på så vis syns bättre.

Hur stor inverkan uppdateringen kommer att ha är svårt att säga i dagsläget, men skillnaden mellan de mobila och de vanliga sökresultaten kommer troligtvis att öka jämfört med hur det ser ut idag. Google skriver själva att skillnaden kommer att bli signifikant.

Läs hela inlägget från Google Webmaster Central Blog »

Är din hemsida redo?

Passa på att klättra i sökresultatet när Google’s uppdatering börjar gälla. Med Loopia Sitebuilder bygger du en professionell, mobilanpassad hemsida själv – snabbt och enkelt utan några förkunskaper. Alla mallar i Loopia Sitebuilder är mobilvänliga och anpassar sig automatiskt efter den enhet du använder.

Läs mer om Loopia Sitebuilder och prova tjänsten gratis »

På Webmaster’s Mobile Guide kan du läsa mer om vilka krav som ställs på en mobilvänlig hemsida och testa hur pass mobilanpassad din egen hemsida är i deras Mobile-Friendly Test.

responsiv-loopia-se_580

 

Vill du skapa en mobilanpassad hemsida?

Läs mer om de hemsidesverktyg vi erbjuder, och missa inte övriga inlägg om mobilanpassad webbdesign på vår blogg.

Dela detta inlägg:

Det här har vi fixat i nya kundzonen – fortsätt ge feedback

Kommentera

Nu har det gått en månad sedan vi släppte vår nya kundzon som beta. Vi har lyssnat noga på er feedback, och vi har gjort tester där användare med olika kunskapsnivå har fått uppgifter att lösa medan vi tittat dem över axeln.

Baserat på detta har vi sedan gjort en rad förändringar och förbättringar. Bland annat följande:

  • En mer slimmad design för datoranvändare
    De som använder mus behöver inte lika stora “klickytor” som den som använder en touch-enhet. Därför utnyttjar vi skärmytan till att visa mer information utan att skrollning behövs om du använder en dator.
  • Bättre översikt på startsidan
    Vi har gjort ersatt ikonerna på startsidan med ett list-läge och ersatt “Dina mest använda tjänster” med en lista som visar alla dina tjänster uppdelat i kategorier.
  • Visa alla
    Under respektive kategori i listan på startsidan finns nu en “Visa alla”-knapp som listar resten av objekten i den kategorin om alla inte syns.
  • Enklare att lägga till och skapa alla typer av objekt
    I högerspalten finns nu en meny där du enkelt kan lägga till alla typer av tjänster vi erbjuder.
  • Tydligare kontoinformation och enklare att nå kontoinställningar
    I högerspalten ser du även information om din kontotyp, samt hittar en snabb väg till kontoinställningar och prepaid.

responsive_cz_devices

Använd vår smarta sök-funktion

Sökrutan på startsidan innehåller många smarta funktioner:

  • Sök på specifika objekt
    T ex ett speciellt domännamn, ett fakturanummer eller en e-postadress. Söker du på ett domännamn får du förutom domännamnet upp e-postadresser, fakturor, WordPress-installationer och annat som är relaterat till just det domännamnet.
  • Sök på objekttyper
    Skriver du “e-postadresser” i sökrutan så visas alla dina e-postadresser i listan nedan. Samma sak gäller “domännamn”, “wordpress”, “webbutiker” eller vilken annan typ av objekt som helst. Du kan dessutom söka med flera ord som t ex “obetalda fakturor” för att endast se fakturor som du ännu inte betalt.
  • Sök på begrepp
    Vill du t ex byta lösenord på någon av dina tjänster kan du söka “byt lösenord” och få upp alla objekt som går att byta lösenord på. Vill du överlåta ett domännamn kan du skriva t ex “överlåt domän” eller “byt ägare”.
  • Dina sökningar sparas
    Under sökrutan sparas dessutom dina sökningar och sorteras efter vilka du använder mest. Med andra ord är dina vanliga sökningar aldrig längre än ett klick bort.

Vi arbetar ständigt med att förbättra sökverktyget så att det ska bli ännu smartare för att i alla lägen förstå vad du vill göra och hjälpa dig med det.

smart-search-cz

Nya funktioner

Förutom att vi arbetat med att tillgodose den feedback vi fått in så har vi även lagt in några nya funktioner i nya kundzonen sedan beta-perioden startade (och det är fler på gång).

  • Svart/vit-listning av e-postadresser
    Du kan nu svart- och vitlista e-postadresser för att hantera spam bättre. Läs mer här
  • 301-redirects för alla kunder
    Du kan nu mycket enkelt göra så kallade 301-redirects av dina domännamn för att inte tappa placeringar hos sökmotorerna. Detta gäller både webbhotellskunder och domänkunder. Läs mer här
  • Flerårsförnyelse .NU-domäner
    Du kan nu flerårsförnya inte bara .SE och .EU utan även .NU (stöd för fler domännamn kommer).

Fortsätt ge feedback och rapportera konstigheter

blacklist_01_loginVi arbetar fortfarande med förbättringar och att färdigställa delar av den nya kundzonen för att till slut kunna plocka bort beta-stämpeln och stänga ner den gamla kundzonen. Och eftersom kundzonen är skapad för er kunder så vill vi gärna ha fortsatt feedback.

Oavsett om du har testat beta-versionen tidigare eller inte, så uppskattar vi om du vill logga in och provköra igen. Testa även gärna med mobilen eller surfplattan och skicka dina synpunkter till feedback@loopia.se.

Stort tack!

Dela detta inlägg:

Ny kundzon i beta – för mobil, surfplatta och dator

Kommentera

Nu lanserar vi vår nya grymma, och helt omarbetade, kundzon genom att släppa en beta-version. Förutom att den nu funkar lika bra i mobilen eller surfplattan som på datorn så har vi tänkt om rejält vad det gäller hela arbetssättet.

Ett helt nytt koncept

När du loggar in i nya kundzonen möts du precis som tidigare av frågan “Vad vill du göra?” där du med steg-för-steg-guider får hjälp att skapa e-postadresser, fixa en hemsida eller en webbutik.

Under guiderna hittar du alla befintliga tjänster. Istället för att bläddra omkring i en meny kan du nu se allt innehåll i ditt konto i form av ikoner (det går också att växla till ett listläge som ger dig mer information utan att behöva klicka in på varje objekt).

Vill du göra något med ett domännamn klickar du helt enkelt på ikonen för just det domännamnet. Därefter kan du göra de inställningar du önskar för domännamnet – allt samlat på ett ställe.

Samma sak gäller om du vill betala en faktura, sätta autosvar på en e-postadress, eller om du vill logga in på din hemsida byggd med Loopia Sitebuilder. Klicka på respektive ikon så hittar du alla inställningar och funktioner för det objektet.

Klicka på bilden för att se en större version.

Klicka på bilden för att se en större version.

Smarta listor och smart sök

Har du ett stort konto med många domännamn, e-postadresser och hemsidor? Inga problem. Loopia Kundzon sorterar de objekt du oftast använder överst.

Är det något objekt som behöver mer uppmärksamhet, t ex ett domännamn som håller på att löpa ut eller en faktura som förfallit, så sorteras de överst och rödmarkeras. Detsamma gäller nya objekt, har du precis köpt ett domännamn vill du troligtvis göra inställningar i det, och har du precis skapat en WordPress-sajt antar kundzonen att du vill börja jobba med den – därför lyfts de upp överst och markeras “Ny”.

Hittar du ändå inte det objekt du vill jobba med så kan du använda den smarta sökfunktionen. Där kan du till exempel skriva ett visst domännamn och få upp alla objekt som är relaterade till det domännamnet… t ex e-postadresser, WordPress-installationer, fakturor och själva domänamnet i sig.

Du kan också söka på begrepp som ”obetalda fakturor” eller ”byt lösenord” och få upp alla objekt som är relevanta för detta.

Mobil, surfplatta eller dator…

Oavsett vilken storlek på skärm du har så funkar nya Loopia kundzon lika bra. Alla funktioner är tillgängliga på alla enheter, och du behöver aldrig zooma in och ut… precis som det ska vara.

responsive_cz

Beta = vi vill ha din feedback

responsive_cz_beta-inloggningDå konceptet är alldeles nytt har vi valt att släppa en frivillig beta-version, du väljer själv om du vill använda den eller vår gamla kundzon när du loggar in. Du kan närsom helst logga in i den gamla kundzonen igen. På så sätt har du som användare stora möjligheter att påverka hur den nya kundzonen kommer att ta form.

Skicka gärna dina första intryck och dina åsikter efter en tids användade till feedback@loopia.se.

 

Dela detta inlägg:

Fixa en mobilanpassad meny på din sajt

2 svar

En utmaning med att skapa sajter för mindre skärmar är att ta fram en meny. Här presenterar vi två olika lösningar, en horisontell och en vertikal. Vilken lösning som passar din sajt bäst beror självklart på sajtens innehåll och hur dina besökare enklast navigerar i den typen av innehåll.

Horisontell mobilanpassad meny.1. Ge dina besökare en försmak av innehållet med en horisontell meny

Med en horisontell meny sveper du över menyn med fingret för att scrolla till höger och vänster. Det går även bra att trycka på pilknapparna till höger och vänster om menyn för att skrolla om din enhet inte har stöd för “swipe”. En fördel med den här typen av meny är att besökare till din sajt får en försmak av vad menyn innehåller utan att den för den delen tar upp speciellt mycket skärmyta.

Inspireras av projektetet iScroll för att bygga en horisontell meny till din sajt.

En så kallad hamburgermeny.2. Spara på utrymmet med en hamburgermeny

Ett annat populärt sätt för att göra menyer på mobila sajter och i appar är att använda en så kallad “hamburgermeny”, dvs en vertikal meny som visas när besökaren klickar på en avsedd knapp. Den främsta fördelen med hamburgermenyn är att den sparar utrymme på höjden jämfört med lösningen ovan, dock är besökaren tvungen att öppna menyn för att se vad den innehåller.

Vill du implementera ”hamburgermenyn” finns det många färdiga lösningar att använda, bl a jPanelMenu.

Åsikterna kring huruvida hamburgermenyn är en bra eller dålig idé är många. Är du intresserad av att läsa mer kan vi tipsa om följande tre artiklar:

Det finns självklart många andra sätt att lösa menyfrågan för mobila enheter. Vilken är din favorit? Tipsa gärna och berätta om hur du resonerar i kommentarerna nedan.

 

Skapa en egen mobilanpassad hemsida

Med hjälp av något av alla de hemsidesverktyg vi erbjuder kan du med enkla medel skapa en egen mobilanpassad hemsida från grunden. Läs mer om de hemsidesverktyg vi erbjuder, och missa inte övriga inlägg om mobilanpassad webbdesign på vår blogg.

Dela detta inlägg:

Två sätt att göra responsiva tabeller på din sajt

8 svar

Att bygga en sajt som automatiskt anpassar sig efter mobil, surfplatta eller fullstor datorskärm innebär en del utmaningar. En av dem är tabeller. Här beskriver vi dels hur vi har löst det, men visar också en alternativ lösning om du har ännu bredare tabeller än vad vi har på Loopia.se. (Lär mer responsive web design här för att få koll på grunderna i hur du skapar responsiva tabeller).

Första steget är självklart att sätta bredden på tabellen och cellerna till ett procentvärde istället för ett fast värde. Men i väldigt många fall räcker inte detta om tabellen har många kolumner.

The Loopia-way

Om du besöker vår sajt via mobilen eller drar ned storleken på ditt webbläsarfönster så ser du att vi har valt att släcka den första kolumnen (med radrubriker), och istället visa rubrikerna ovanför varje cells innehåll som du kan se på bilden nedan. Vi har också minskat storleken på texten något.

Se exempel på detta på loopia.se/webbhotell.Bild som visar en av Loopias responsiva tabeller.

Om du har ännu större tabeller

Lösningen ovan fungerar bra för oss eftersom vi inte har några riktiga mastodont-tabeller. Vi har dock hittat en ganska trevlig lösning för dig som har tabeller med riktigt många kolumner. Här behålls istället kolumnen med radrubriker och låses, medan resten av kolumnerna går att skrolla mellan i sidled.

En del av översikten går tyvärr förlorad på mindre skärmar med den här lösningen, men det känns som en rimlig kompromiss.

Se exempel på denna lösning och hur du själv kan använda det på dina sajter.

responsive_table_alt2

Har du någon annan bra lösning för hur man hanterar tabeller med responsiv design? Tipsa gärna i kommentarerna.

Vill du skapa en mobilanpassad hemsida?

Med relativt enkla medel kan du skapa en egen mobilanpassad sajt, genom något av de hemsidesverktyg vi erbjuder. Läs mer om hemsidesverktygen, och missa inte övriga inlägg om mobilanpassad webbdesign på vår blogg.

Dela detta inlägg: