Kategoriarkiv: CSS och design

Fräscha upp ditt företags närvaro på webben inför hösten

Sommaren börjar lida mot sitt slut och en spännande och fartfylld höst väntar runt hörnet. Nya projekt, kunder eller utmaningar? Oavsett vad så är det en bra idé att se till att din digitala närvaro är redo för höstens aktiviteter. Följ nedanstående tre steg för att fräscha upp ditt företags webbnärvaro.

1. Snygga till din egen sajt

Börja med att städa upp din egen hemsida för att hålla den uppdaterad och levande.

    • dammsugareKorrekturläs textstycken och blogginlägg
      Kika igenom sajten noggrant för att försäkra dig om att all information fortfarande är aktuell.
    • Kontrollera länkar och bilder
      Gå igenom länkar och bilder och försäkra dig om att samtliga stämmer överens med textinnehållet på sidan och leder dit dem ska.
    • Se till att din sajt ser bra ut i besökarnas webbläsare
      Ta hjälp av Google Analytics för att ta reda på vilka webbläsare dina besökare använder. Testa sedan att din sajt ser bra ut i dessa webbläsare och deras olika versioner.

2. Se över ditt rykte på nätet

Googla ditt eget företagsnamn för att se vad som finns skrivet om dig på nätet. Förhoppningsvis är det fina recensioner, men har du mot förmodan fått negativa omdömen någonstans är det en god idé att bemöta dessa och höra dig för om vad som gått snett.

3. Underlätta för dina besökare

Se till att det är enkelt för dina besökare att hitta till din sajt, genom att exempelvis:

    • Uppdatera din företagsinformation på olika söksajter (hitta.se, eniro.se, etc).
    • Registrera ditt företag på Google Maps om du har ett fysiskt kontor eller en fysisk butik. Det underlättar för kunder som vill besöka dig IRL men ger dig också bättre ranking i Google’s sökmotor.
    • Sökmotoroptimera din sajt för att rankas så högt upp i sökmotorer som möjligt och på så vis öka chansen för potentiella kunder att hitta dig. Ta del av våra SEO-tips på bloggen »
    • Mobilanpassa din sajt genom att t.ex. använda responsiv webbdesign som anpassar din sajt efter vilken enhet den besöks ifrån. Google rankar sedan april i år mobilanpassade sajter högre, vilket kan vara en anledning att testa. (Tips! Använd Google Analytics för att se hur stort antal mobilbesökare din sajt har, det kan bli ytterligare en motivationsfaktor till att mobilanpassa.)

4. Håll ordning och reda

En ordentlig rensning av mailinkorgen är superbra att göra inför den hektiska hösten. Sträva efter att alltid ha en så tom inkorg som möjligt för att effektivisera ditt arbete.

Några steg i rätt riktning är att försöka svara på inkommande mail så fort som möjligt, ta bort eller arkivera mail som du inte längre behöver och att sortera övriga mail i undermappar och färgmärka de som kan behövas framöver.

Bilden är lånad från Flickr-användaren Lucas och har modifierats.

Dela: facebooktwittergoogle_pluslinkedinmail

Mobilanpassning ger dig högre Googleranking

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. 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.

Ä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. Prova Loopia Sitebuilder gratis och läs mer om tjänsten här!

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.

responsive_loopia_se_2

Läs även gärna följande relaterade artiklar:

Dela: facebooktwittergoogle_pluslinkedinmail

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

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: facebooktwittergoogle_pluslinkedinmail

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

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: facebooktwittergoogle_pluslinkedinmail

Fixa en mobilanpassad meny på din sajt

En utmaning med att skapa sajter för små skärmar är att ta fram en meny. Här presenterar vi två olika lösningar. Dels den lösning vi själva har valt att använda på Loopia.se, men också den allt mer populära variant som används av Facebook, Youtube och många andra.

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.

1. The Loopia way

Vi har valt en horisontell meny där man sveper över menyn med fingret för att skrolla 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”. Orsaken till att vi valde denna typ av meny är att vi gillar att du som besökare får en försmak av vad menyn innehåller utan att den för den delen tar upp speciellt mycket skärmyta.

Vi har utgått från projektetet iScroll för att bygga menyn.

loopia-meny

2. Gör som Facebook och Youtube

Ett mycket populärt sätt för att göra menyer både på mobila sajter och i appar är att låta menyn komma fram från vänster sida på samma sätt som bland annat Facebook. Detta sparar dig utrymme på höjden jämfört med lösningen ovan, men besökaren är tvungen att öppna menyn för att se vad den innehåller.

Vill du implementera “Facebook-lösningen” finns det många färdiga lösningar att använda, bland annat jPanelMenu.

jpanelmenu

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.

Dela: facebooktwittergoogle_pluslinkedinmail

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

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)

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.

responsive_table_alt1

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.

 

Dela: facebooktwittergoogle_pluslinkedinmail

Beta-testa nya Loopia.se med responsive web design

Arbetet med att göra hela Loopia.se responsive (alltså att den anpassar sig efter den enhet/skärmstorlek du använder) pågår för fullt, och du kan nu provköra delar av nya Loopia.se på adressen responsive.loopia.se.

Gå gärna in och kika med din dator, smartphone och surfplatta och meddela oss på feedback@loopia.se om vad du tycker eller om du hittar några konstigheter (gärna med detaljer om vilket operativsystem, vilken webbläsare och enhet du använder så att det blir lättare för oss att justera det du hittat).

De delar som inte är responsive än är bloggen, kunskapsdatabasen samt kundzonen och åf-zonen. Dessa är byggda på andra system än övriga Loopia.se och vi håller på för fullt med att bygga om dem också. Håll utkik här på bloggen, och på Facebook, Twitter eller Google+ framöver så får du aktuell information om hur det arbetet fortgår, samt tips och funderingar kring hur vi löser olika delar.

Läs gärna våra blogginlägg med tips om hur du kan göra din sajt responsive och på andra sätt anpassa den för den ökande skaran mobilbesökare:

Dela: facebooktwittergoogle_pluslinkedinmail

Fälttyper underlättar för mobilbesökaren

Det virtuella tangentbordet på en smartphone med touchskärm har både för- och nackdelar. Troligtvis kan de flesta skriva snabbare på ett fysiskt tangentbord, men å andra sidan kan det virtuella tangentbordet ändra skepnad för att passa den situation du är i.

Detta är något som du som webbutvecklare kan utnyttja genom att ange passande fälttyper för dina formulär.

Om du har ett formulär för kortbetalning kan det vara smidigt att låta det numeriska tangentbordet poppa upp för besökaren när kortnumret ska fyllas i. Det gör du genom att ange type=”number” i input-taggen enligt följande:

<input type="number" name="cardnr" />

Numeriskt tangentbord på iPhone till vänster och Android till höger.

Det numeriska tangentbordet ser olika ut beroende på om du har t ex en iPhone eller Android (se bilden nedan), och personligen föredrar jag att använda type=”tel” istället då detta fungerar bättre för de som använder iPhone. Beroende på vilka tecken besökaren behöver tillgång till kan detta dock vara fel, så prova dig fram.

Några av de fälttyper du kan ange:

  • number – Numeriskt tangentbord.
  • tel – En variant av det numeriska tangentbordet för telefonnummer (som faktiskt funkar bättre än “number” på en iPhone om du endast är ute efter siffror).
  • url – Visar tangentbord med knappar som “.”, “/” och “.com”.
  • email – Ser till att bl a “.” och “@” är lättillgängliga.
  • date – Plockar fram en datumväljare.

För att se alla fälttyper och hur du använder dem besök gärna w3schools.com.

Kompatibilitet

De flesta moderna webbläsare har stöd för många av fälttyperna, och om de inte har stöd så kommer de att agera som type=”text”. Med andra ord får alla besökare med kompatibla webbläsare en bättre upplevelse, och de utan märker inga konstigheter.

Vill du se vilka webbläsare som stödjer vad, ta gärna en titt på Caniuse.com som vi tipsat om tidigare. Informationen är tyvärr inte fullständig, så det bästa är att prova sig fram.

Stäng av autokorrigering

För att ytterligare förbättra formulärupplevelsen för de besökare med iOS (iPhone/iPad) så kan du stänga av autokorrigering och automatisk stor bokstav i början av ord i de fält du önskar.

Har du till exempel ett inloggningsformulär kan det vara superirriterande om telefonen hela tiden försöker rätta ditt användarnamn genom att sätta stor bokstav i början och köra rättstavning.

<input type="text" name="username" autocorrect="off" autocapitalize="off" />

Har du fler tips på hur man enkelt kan förenkla för mobilbesökaren? Tipsa gärna i kommentarerna.

Dela: facebooktwittergoogle_pluslinkedinmail

Rätt innehåll på rätt sätt – ett lyft för din hemsida

Det spelar ingen roll hur glassigt du förpackar din tjänst eller informationen på din hemsida, om innehållet inte håller måttet kommer besökaren inte att komma tillbaka (eller kanske inte ens hitta dit första gången).

Ändå är det lätt att glömma bort hur viktigt det är att lägga in relevant innehåll, ta bort det som är överflödigt och “massera” det befintliga.

En grundregel är att innehållet ska vara ändamålsenligt för ditt företag/din tjänst, för kunden och för sammanhanget kunden befinner sig i. Läs mer

Dela: facebooktwittergoogle_pluslinkedinmail

Tänk på mobilbesökaren först

Antalet besökare via mobila enheter ökar drastiskt på Loopia.se för varje månad som passerar, men detta är självklart inget unikt för våra sajter. Du har säkert sett samma trend på din besöksstatistik? Som vi berättat tidigare håller vi på att snickra om alla våra sajter med responsive web design för att de ska fungera lika bra oavsett vilken enhet du använder.

Du kanske har hört om begreppet “Mobile first”? Mobile first är ett tankesätt som innebär att du utgår från den mobila besökaren i första hand när du utformar din sajt. Även om besökarantalet från traditionella datorer kommer att vara betydande lång tid framöver så finns det stora poänger med det tankesättet. Det tvingar dig till exempel att prioritera vilka delar och vilken information som är viktigast och som ska framhävas först. Läs mer

Dela: facebooktwittergoogle_pluslinkedinmail