På samma sätt som en pilot använder instrumentpanelen för att ta beslut, kan du använda Google Analytics. Där finns information om vilka besökarna är och hur de surfar på din hemsida. Men vad är den viktigaste informationen och hur använder man rapporterna?

Google Analytics är ett viktigt verktyg och används mycket inom webbanalys och digital marknadsföring. I Google Analytics samlas data och statistik från trafiken på en hemsida där man bland annat kan se sidans laddningstid, mest besökta sidor och hur mycket trafik som finns. Det är bra sätt att hålla koll på sina besökare, hur man bäst utvecklar sitt företag till att växa och där målet kan vara att ha ett stadigt antal besökare per månad.

Rapportens delar

I Google Analytics finns ett antal olika rapporter, Realtid, Publik, Förvärv, Beteende och Konverteringar. Google Analytics 4 är en uppgradering där all data kommer finnas och där det är enklare att hitta.

Realtid

I Realtid syns allt som händer på sidan just nu, man kan se plats, var de kommer ifrån och vilka sidor de är intresserade av. 

Publik

Publik visar demografin av personer som är inne. Man kan till exempel se ålder, språk (inställt av Google), geografisk plats (land och stad), enhet (dator, tablet, mobil), webbläsare (Chrome, Edge, Safari) samt kön.

Demografin visar vilken målgrupp företaget riktar sig åt, om man borde smalna av eller breda målgruppen. Man kan även ta reda på en typisk persona som oftast är intresserad av att köpa en produkt eller vad den är mest riktad åt.

Förvärv

Förvärv visar hur en användare kommer in till hemsidan. Vilken trafikkälla de använder, bounce rate/avvisningsfrekvens, sessionslängd och sidlängd.

• Organisk trafik: Besökarna hittar din webbplats via Googles sökmotor
• Direkt trafik: De som skriver in adressen direkt i adressfältet
• Referral: När trafik kommer in via en annan källa
• Social: De som kommer från sociala medier
• Avvisningsfrekvens: Hur många lämnar efter att besökt en sida
• Sessionens längd: Hur länge de är inne under en session
• Sidlängd: Hur länge de är inne på en sida och innan de går vidare till nästa sida

Beteende

Visar hur dina besökare beter sig på hemsidan. Beteendeflödet visar en karta över vilken resa en användare tar från början till slut. Var användaren är mest engagerad och var de hoppar av.

Vilka sidor som är mest visade, hur länge man är på sidan och hur lång laddningstiden är finns också där. Men det som ligger i fleras intresse är trafiken. Vilka besöker din hemsida och utifrån det sätta upp specifika mål. 

Konverteringar

När det har skett en form av konvertering till en kund till exempel vid ett köp, hur många som har konverterat i ett uppsatt mål till exempel ett formulär, eller en potentiell kund. Eller är det att bli hittad på Google ni behöver fokusera på? 

Vad vill man veta när man gör en analys på sin hemsida?

Det viktigaste man behöver för att göra en analys är se besökares tid på sidan, hur de hamnade på sidan och vilka sidor som är mest besökta, vad man gör och vad man vill att de ska göra. Men mycket är beroende på vad man vill mäta. 

Glöm inte, byt till GA4

Google Analytics Universal är den nuvarande versionen av Google Analytics. Google Analytics 4 kommer bli en nyare, uppdaterad version av Google Analytics Universal. Det finns skillnader i Google Analytics Universal och Google Analytics 4 i bland annat hur man navigerar sig då utseendet är annorlunda och delarna är på olika ställen.

Den 23 juli 2023 kommer Google sluta samla in data från Google Analytics Universal, vilket betyder att om du inte redan har flyttat över data till Google Analytics 4, är det en bra sak att göra nu. Behöver du hjälp med ditt Google Analytics konto är du välkommen att kontakta oss. 

Internet Explorer är en gammal legend i etern – tyvärr med betoning på gammal. I över fem år har Microsoft försökt fasa ut webbläsaren, och nu finns till och med ett pensionsdatum satt: 15 juli, 2022. För datorer som fortfarande får uppdateringar kommer Explorer inte stödjas efter det datumet, men för äldre datorer som inte uppdateras kan webbläsaren ligga kvar som vanligt.

Trots Microsofts egna uppmaningar att byta till den modernare webbläsaren Edge, används Internet Explorer fortfarande av en hel del användare – även här i Sverige. Eftersom Explorer inte kan hantera merparten av den nya teknik som idag används för att bygga hemsidor, blir följden att explorer-användare inte kan tillgodose sig allt innehåll på alla hemsidor. Eftersom att ett företags hemsida ofta är dess främsta säljkanal, kan detta leda till förlorade intäkter, och i värsta vall ett sämre varumärkesrykte.

Detta kan leda till förlorade intäkter, och i värsta vall ett sämre varumärkesrykte. Många personer vet dessutom inte om att hemsidors utseende är relaterat till den webbläsare de använder. Här tror vi att information är nyckeln.

Vi tror att den informationen gör sig bäst i form av en diskret, men tydlig, informationsruta. En ruta som berättar att den bästa versionen av din hemsida, den ser man med en webbläsare som Edge, Google Chrome, eller Safari. En ruta som endast visas för Explorer-användare.

Låter det bra?
Kontakta oss, så hjälper vi dig!

Visste du att det tar mindre än 30 sekunder för en besökare att forma ett intryck av din hemsida? Därför är det otroligt viktigt att fånga uppmärksamheten snabbt så att de upptäcker allt fantastiskt innehåll du har att dela med dig. Här är fyra saker vi gör för att få dina besökare att stanna på din hemsida!

Nyckeln: användarvänlighet!

Om man skulle sammanfatta svaret på frågan ”hur bygger vi upp en hemsida som får besökare att stanna?”, så är svaret kort och slätt: användarvänlighet. En hemsida som sätter sina besökare i första hand och följer principer för användarvänlighet kommer alltid att vara bättre än en som inte gör det. Men vad menar man egentligen med användarvänlighet? Sammanfattat är användarvänlighet åtgärder för att förenkla och tydliggöra ett system. Det handlar helt enkelt om att skapa en hemsida som är lätt och behaglig att använda. Vid det här laget har nog de flesta lärt sig hur en vanlig hemsida är upplagd och vart man troligtvis kan hitta det man söker. Därför kan det vara bra att följa de standarder som finns inom webbdesign, då det gör inlärningen av din hemsidas system mycket mer effektiv.

Bjud in till interaktion

Kanske har du hört talas om en “CTA” knapp? En CTA, eller “call to action” som det står för, är en visuellt utstickande funktion oftast i formen av en knapp, länk eller budskap. Syftet med en CTA är att leda dina besökare till det huvudsakliga målet för hemsidan, eller att starta en viktig åtgärd. Att placera CTA element på sin startsida, samt i slutet på exempelvis artiklar, ger besökare ett naturligt flöde genom hemsidan och bjuder in till att fortsätta interagera med den.

Engagera med content

Om man vill att besökare ska stanna kvar på en hemsida är det viktigt att engagera dem, att ge ett spännande intryck! Det finns många sätt att öka engagemang, men ett enkelt sätt att få besökares uppmärksamhet är genom bild och rörelse. Inspirerande videos eller animationer på din hemsida kan fånga uppmärksamheten och få många att stanna kvar. Bilder eller filmmaterial av mänskliga interaktioner med din service eller produkt är extra hjälpsamma då det tillåter dina besökare att relatera till det du erbjuder!

Förenkla så mycket som det går

En tumregel i webbdesign är enkelhet, minimera till det allra viktigaste. Detta betyder visuellt att hålla fokus genom att undvika överflödiga komponenter som gör hemsidan rörig. Varje gång du går in i ett rum läser du omedvetet av omgivningen, likaså gör dina besökare när de öppnar din webbplats. Beroende på hur stökig din hemsida är varierar den kognitiva belastningen, alltså hur mycket det finns att läsa av. Ett sätt att förenkla din webbsida är att minska stegen dina besökare måste gå igenom i viktiga processer eller bara för att komma åt den information de söker. Det gäller att vara sparsam med dina besökares tid – ju mindre friktion desto mer nöjda besökare.

För att sammanfatta…

Det behöver inte vara jättesvårt att fånga besökares uppmärksamhet, med några enkla knep kan man locka många att stanna kvar och ta en titt. Det kan hjälpa att förenkla så mycket som det går, engagera med bild och rörelse och genom att ha tydliga ingångar i designen med CTA element. Glöm inte heller det mest centrala: användarvänligheten.

Behöver du hjälp med att skapa en hemsida? Eller har du fler frågor kring hur du kan få dina besökare att stanna kvar på din hemsida? Hör av dig till oss, så hjälper vi dig!

Är du redan igång med din hemsida? I den här artikeln tipsar vi om lite åtgärder du alltid kan göra för att hålla din hemsida fräsch och inbjudande efter lansering, så att dina besökare fortsätter upptäcka ditt innehåll!

Uppdatera!

Att hålla din hemsida uppdaterad innebär inte nödvändigtvis tekniska förändringar. Det gör mycket att bara hålla hemsidan levande med nytt material. Genom att uppdatera till exempel nyheter, personalprofiler, referenser eller kundcitat finns det alltid anledning att besöka hemsidan igen och upptäcka det nya innehållet. Det visar alltså att verksamheten håller sig aktiv och gör det mer naturligt att forma en närmare kundrelation, då du uppfattas som tillgänglig och närvarande.

Att hålla hemsidan uppdaterad är också väldigt positivt för hemsidans SEO, eller ”sökmotoroptimering” som det så fint heter. SEO är, enkelt förklarat, arbete för att förbättra synligheten av din hemsida på de olika sökmotorerna. Genom att uppdatera din hemsida löpande med nytt innehåll ser du till att t.ex. Google kikar på den oftare, vilket kan förbättra din rankning. Några konkreta exempel på hur du kan arbeta vidare med SEO är bland annat genom att optimera dina nyckelord, alt-texter och länka till ditt och andras material.

Tänk på nyckelord

När det handlar om att skapa nytt innehåll är det bra att du tänker på nyckelord och utformar texterna utefter det. Nyckelorden behöver inte upprepas, variera gärna med synonymer, Google förstår sammanhanget och det blir roligare att läsa. Även befintliga texter kan vidareutvecklas för att på ett bättre sätt inkludera de viktigaste nyckelorden.

Beskriv bilder med alt-text

När det kommer till bilder bör du även tänka på att skriva alt-texter, alltså beskrivningar som visas om bilden inte kan laddas in eller om en besökare använder en skärmläsare. Detta är inte bara bra för SEO, men gör också din hemsida mer inkluderande för personer med nedsatt syn. När du skriver dina alt-texter försök att inte börja med ”bild på” eller ”grafik med”, då det upprepar det omgivande textinnehållet. Tänka istället på hur du hade beskrivit bilden för någon annan i telefon. Bilden nedan har till exempel alt-texten ”apa som kollar sig själv i spegel”.

Länka till annat material på hemsidan

Det är alltid bra att länka till relaterat innehåll för att bjuda in till att fortsätta läsa. Om du till exempel ska publicera en artikel, ställ dig frågan om det finns andra relevant artiklar du kan länka till? Att skapa kopplingar till annat material gynnar både SEO(då Google uppskattar interna länkar) och uppmuntrar besökare att spendera mer tid på hemsidan.

Vill du ha fler tips om hur du kan förbättra din hemsidas synlighet? Läs gärna vår artikel om SEO genom att trycka på knappen nedan! (såg du vad jag gjorde där ?)

Fokusera på identiteten

En annan viktig aspekt av att få dina besökare att stanna är att hålla fokus på företagsidentiteten både visuellt och innehållsmässigt. Att använda befintliga grafiska element och strukturer gör det både enklare att redigera och förstärker varumärket i sig.

Texthierarki och artikelstruktur

En väl strukturerad text innebär att informationen är hierarkist uppdelad med hjälp av tydliga rubriker, underrubriker, ingresser och brödtexter. Det gör det lättare för läsare att följa textflödet och ta till sig information. Att följa liknande strukturer på liknande typer av innehåll gör din hemsida mer sammanhängande och tillgänglig.

Förmedla med bilder

Bildval är ett bra sätt att förmedla din identitet – som vi ofta får höra, säger en bild mer än tusen ord. Detta kan vi uttnyttja för att dra uppmärksamhet till viktigt innehåll. Det bästa är att ha eget bildmaterial av högkvalitet skapad för just ditt projekt. Men, det finns också resurser med copyright-fritt material som håller hög standard och kan användas för att stödja ditt innehåll och din identitet. Unsplash eller Pexels är två bra exempel på sådana resurser.

Ha dina mål i åtanke

Vad är målen med din hemsida? Om du inte tänkt på den frågan så är det kanske dags att fundera på det och definiera dina mål.

Vill du uppfattas som pålitlig? Då kan kundcitat eller recensioner vara ett bra sätt att få dina besökare att lita på din verksamhet. Kundcitat är alltså berättelser från kunder som använt din produkt eller tagit del av din tjänst.

Kanske vill du öka kundlojalitet? För att öka kundlojaliteten kan det vara bra att försöka hitta vad som är unikt för din verksamhet – vad får dig att sticka ut? Det är därför din målgrupp kommer till dig, fortsätt därför skapa innehåll som tilltalar dem!

Eller, vill du att fler ska upptäcka företaget? Det finns säkert mycket innehåll på din hemsida som kan spridas vidare till nya ögon genom sociala medier. Du kan t.ex. dela artiklar och på så sätt leda besökare in till din hemsida där de kan få mer information om din verksamhet.

Vad betyder allt det här? Tänk på vad du vill säga till vem och bara gör det 🙂

För att få besökare att stanna på ens hemsida…

…måste man alltså tänka på att hålla sin hemsida uppdaterad med nytt innehåll, hålla koll på struktur, identitet och se över vilka mål som ska uppnås. Även om det kan vara något resurskrävande är det samtidigt gynnsamt att skapa innehåll löpande för att fånga uppmärksamhet och driva trafik till din hemsida. Den är på många sätt ansiktet utåt för din verksamhet, och då är det värt att lägga lite extra tid för att engagera dina besökare!

Behöver du hjälp med att skapa innehåll och hålla din hemsida aktiv? Hör av dig till oss, så hjälper vi dig!

Som en webbyrå där teknik och design står i främsta rummet, vill man inte gärna göra kompromisser mellan en välfungerande hemsida och en snygg hemsida. Med variabla teckensnitt blir det lättare att använda ett teckensnitts olika varianter, utan att tumma på hemsidans hastighet. Men vad är egentligen variable fonts? Och kan det lösa alla våra problem? I den här artikeln går vi igenom just detta: de variabla teckensnittens funktion, dess möjligheter och begränsningar, och hur du själv kommer igång med att använda dem. Häng med!

Vad är variable fonts?

En variable font är alltså ett nytt format av teckensnitt som kan användas inom webbdesign. Det kommer med fördelar som minskad filstorlek och ökad kontroll över teckensnitten.

Hur fungerar det idag?

Innan vi kan känna att variable fonts faktiskt har en fördel bör vi kolla lite på hur det funkar idag. Vid arbete med teckensnitt så pratar man ofta om en teckensnittsfamilj. I familjen ingår flera olika stilar, där stilarna har gemensamma nämnare men individerna är olika. Teckensnittfamiljen är exempelvis ”Times new roman”, varje stil i familjen är sedan exempelvis regular, italic eller bold.

Vid klassisk användning av teckensnitt så är varje stil separerade i olika filer. På webbplatser där man kanske bara använder två olika teckensnittsfamiljer i två olika stilar behöver detta inte vara ett problem. Om du däremot vill använda flera teckensnittsfamiljer och flera olika stilar i varje, kan detta påverka hemsidans hastighet: ju fler teckensnitt du läser in, desto långsammare går det. Detta problem har Variable fonts kommit för att lösa.

Hur fungerar variable fonts?

En variable font förpackar alla olika stilar i en teckensnittsfamilj till en enda fil. Filen utgår från en specifik stil och anpassas därefter utifrån olika axlar. Exempelvis ”Weight” som avgör hur tunn eller tjock stilen ska vara. Detta innebär inte bara att filstorleken blir signifikant mindre, utan det gör även att teckensnittet i större utsträckning kan få fler variationer. Istället för att bestämma om ett teckensnitt ska vara ”Semi-bold” eller ”Bold” kan designerna välja ett värde mellan 400 och uppåt 1000. Vilket erhåller otroligt fler varianter än de tidigare två.

Så hur gör man?

För att börja använda variable fonts behöver du först hitta ett teckensnitt som stödjer formatet. Detta kan du exempelvis göra på Google fonts eller axis-praxis. Kontrollera vilka axlar som teckensnittet har och inom vilka värden det går att påverka. På axix-paxis kan det se ut såhär:

Teckensnittet i exemplet ovan har två axlar, Weight och Width. Axeln Weight tar emot värden mellan 300 och 700. Axeln Width tar emot värden mellan 1 och 150. Olika teckensnitt har olika axlar och olika värden att korrigera, detta kontrolleras där teckensnittet laddas ner. Filformatet för en variable font är vanligtvis ”.woff2”. När teckensnittet är nedladdat och du vet vilka axlar du kan påverka med vilka värden är det dags att börja designa dina teckensnitt i css. Introducera till att börja med teckensnittet via @font-face. 

Sedan kan du manipulera axlarna via ”font-variation-settings” som exemplet nedan. Wght står för Weight och wdth står för Width.

Begränsningar

Variable fonts låter än så länge väldigt spännande och bra, men det finns några begränsningar som kan vara bra att komma ihåg innan vi kastar oss ut i en ny värld av teckensnitt. Först och främst så är denna typ av teckensnitt fortfarande relativt ny, detta innebär att det inte finns en uppsjö av olika teckensnitt att välja mellan. För oss som vill skriva på svenska kan jakten på ett bra teckensnitt ibland bli ännu svårare eftersom vi använder å ä ö i vårt alfabet.

Vill du använda Variable fonts på en webbplats är det viktigt att webbplatsens användare har en uppdaterad webbläsare, vilket är något vi inte kan lite på att alla har. Ett antal webbläsares äldre versioner stödjer inte variable fonts och teckensnittet kommer därför inte fungera för de användarna. Men detta är inget problem som inte går att lösa. Läs mer härom hur du skapar en ”fallback” till icke stöttande webbläsare.

Tänk på att variabel fonts syfte är att minska teckensnittens filstorlek. Används inte många olika vikter och teckensnittsfamiljer kan den gamla varianten av teckensnitts hantering fungera minst lika bra.

Laddar din hemsida långsamt på grund av många teckensnitt? Hör av dig till oss så hjälper vi dig!

Vi vet hur det kan vara, slutet på utbildningen närmar sig eller det är dags för praktik för att testa på arbetslivet. För att stilla dina nerver vill vi ge lite tips kring portfolion, vilket kan vara viktigt att ha när man söker praktik på en mer kreativ arbetsplats.

För att du ska slippa bli stressad när din framtida praktikplats ber dig skicka en portfolio, ger vi dig här några svaren på de vanligaste portfoliofrågorna en student kan ha. Trevlig läsning!

1. Vad letar mottagare av praktikansökningar efter i en portfolio?

En bild av vad personen kan, det kan antingen vara om personen visar på en bredd eller om den har någon specifik spetskunskap. När det gäller praktik så handlar det inte om att personen ska ha skapat det bästa någonsin utan visa på vad den har jobbat med tidigare. Beskrivande texter i portfolion kan vara ett bra komplement för att framhäva vad man är bra på, vad man vill lära sig mer om och vem man är.

2. Hur man kan sticka ut i mängden med sin portfolio?

Texten kan vara väldigt viktig, att skriva något personligt eller roligt. Texten kan visa om personen är trevlig, vad den vill lära sig. Det är viktigt att göra research om det aktuella företaget innan ansökan skickas in, det visar att personen är intresserad på riktigt. 

Att skriva något roligt, vara extra trevlig eller personlig handlar inte om att vara en komiker eller göra sig till. Du har dig själv att utgå ifrån, visa vem just du är. Försök vara personlig i din första kontakt med företaget även om det sker via mail eller telefon. Det personliga brevet kan vara mer generellt.

Ett bra sätt att sticka ut är att vara i god tid, genom att vara först. Har du skapat något analogt, som du är extra stolt över kan det skickas via post.

3. Vad får man inte missa i portfolion?

De projekt som man har gjort, det är bättre att välja ut några få som man är extra stolt över än att lägga in allt man gjort. I portfolion kan du visa vem du är genom att lägga in projekt som du tycker extra mycket om. Det är viktigt att styrka det man vill jobba med, vill man jobba med webb är webb det som portfolion främst ska innehålla.

Är det så att man inte har gjort så många projekt att visa inom det område man vill lära sig mer om behöver man förklara detta med text i portfolion och det personliga brevet. 

4. Vad ska portfolion innehålla?

Det behöver inte vara sant att skarpa projekt väger högre än andra, det är viktigare hur det ser ut i designen och hur du beskriver projektet. En viktig utgångspunkt är även att göra det så lätt som möjligt för mottagaren. Detta kan du göra genom att lägga in all information du har på en och samma plats och undvika att lägga in länkar till externa sidor. Känner du att länkarna är viktiga kan det vara en god idé att inkludera en bild på projektet i din portfolio och beskriva projektet i text. Inkludera ändå länk till aktuell sida om mottagaren skulle vara intresserad av att läsa mer. Men det ska inte vara ett krav för att förstå ditt budskap, all information ska finnas i din portfolio.

5. Vad ska jag börja med för att komma igång?

Leta inspiration genom att Googla på vad andra har gjort tidigare. Men låt dig inte skrämmas av perfekta portfolios i de första sökresultaten. Det är bättre att göra något än inget allts. Diskutera med kurskompisar som kanske sitter i samma situation, det är svårt om man inte gjort det innan.
Leta först fram de projekt du är mest nöjd med. Titta igenom projekten och se vilken stil de följer, är det liknande stilar kan du kanske följa den stilen i utformningen för hela portfolion. Är de olika projekten väldigt olika kanske det kan vara en idé att göra utformningen av portfolion lite mer neutral och avskalad för att låta projekten ta plats. Hämta inspirationen från dig själv.

6. Hur lång ska portfolion vara?

Den behöver vara kort och koncis, ta med det du är stolt över. Det som är rimlig och relevant för den praktikplats där du söker praktik.

7. Vilka format är extra bra att bygga portfolion i?

Vid val av format kan det vara en bra att tänka på vilka felmarginaler som finns. Funkar det inte till 100% finns det risk för sämre resultat. Detta handlar exempelvis om en webbplats som portfolio. Som student har man kanske inte lärt sig allt inom webbdesign än, finns det då en risk att webbplatsen ser konstig ut eller inte fungerar till 100% på mottagarens dator? Med en portfolio på en webbplats kan man inte styra hur mottagaren tar emot materialet, vilken skärmstorlek de sitter på, vilken webbläsare de använder etc. Används en PDF kan du med säkerhet veta att mottagaren ser samma resultat som du skickade in.

Med det sagt är det inte förbjudet att göra en webbplats. Så länge man har i åtanke att man inte med säkerhet vet hur mottagaren tar emot materialet. Ingen borde dock förvänta sig att du är fullärd. 

Slutgiltiga tips.

Håll inte på någon viktig information om dig själv som du vill berätta på ett möte, berätta allt som känns viktigt vid första kontakten så att mottagaren kan skapa sig en tydlig bild om vem du är.

Vi på Hamrén är öppna för nya praktikanter både i Norrköping och Malmö. Lycka till med din portfolio!

Global Accessibility Awareness Day (Globala dagen för uppmärksammande av tillgänglighet), som infaller tredje torsdagen i maj, finns för att uppmärksamma behovet av mer tillgängliga och inkluderande digitala lösningar. Vi på Hamrén brinner extra mycket för en mer inkluderande webb och har därför påbörjat ett spännande projekt som ska hjälpa både våra kunder och vår bransch med mer information om tillgänglighet och inkluderande design, så håll utkik! Men, tills projektet lanseras, låt oss berätta mer om dessa ämnen redan nu!

Olika hjälpmedel finns ute i samhället, till exempel ramper och ljudsignaler vid övergångsställen, men har du tänkt på att det behövs hjälpmedel även på webben? Mer än en miljard människor globalt upplever fysiska eller psykiska hinder. Det kan till exempel handla om att uppleva hinder baserat på sin syn, hörsel, eller rörelseförmåga. Det finns såklart fler anledningar till att känna sig exkluderad i den digitala världen. Personer som inte har tillgång till den senaste tekniken, har en sämre internetuppkoppling eller mindre datorkunskap riskerar att hamna utanför. Oavsett ekonomi, utbildning, ursprung, religion, sexuell läggning, könsidentitet, ålder eller språk ska människor kunna känna sig välkomnade i den digitala världen.

Inkluderande design handlar om att skapa lösningar som är tillgängliga för så många personer som möjligt utan att behöva specialanpassningar via extra funktionalitet. Man utgår från den breda variationen som finns mellan olika människors egenskaper, förmågor och möjligheter och designar för bredden snarare än en genomsnittlig användare. Med inkluderande design bjuder vi in mångfalden och siktar på att skapa en bra användarupplevelse för alla, oavsett användare.

Den bästa motiveringen för inkluderande design är helt enkelt att alla tjänar på det, oavsett hur användarens situation ser ut. Att visa empati för olika användare skapar en bättre och trivsammare miljö. Alla får en chans att ha tillgång till samma information, tjänster och möjligheter, som i sig är en grundläggande mänsklig rättighet. Härligt va?

Här kommer några användbara länkar om tillgänglighet och inkluderande design medan vi bygger på

Innan vi lanserar vårt större projekt om tillgänglighet och inklusivitet kommer här fem bra länkar för dig som vill veta mer om detta redan nu!

• DIGG berättar mer om webbdirektivet, de officiella riktlinjerna för hur man bör arbeta med webbplatser i offentlig sektor
• Microsoft informerar om inkluderande design och vad det innebär på olika plan [på engelska]
• Skapa en tillgänglig färgpalett med hjälp av verktyget Accessible Color Palette Builder [på engelska]
• Airbnb Design berättar om representation och hur illustrationer kan bidra till ett mer inkluderande designsystem [på engelska]

Läs gärna även vår egen artikel om varför en tillgänglighetsanpassad hemsida är en vinnande investering för ditt företag!

Kan vi hjälpa till?

Behöver du mer information om tillgänglighet redan nu, är du intresserad av att veta hur pass tillgänglig din hemsida är, eller vill du starta ett projekt tillsammans med en byrå som brinner för tillgänglighet? Kontakta oss så hjälper vi dig!

WordPress lanserade för en tid sedan ett nytt redigeringsverktyg, som revolutionerade innehållshanteringen i WordPress. Verktyget heter Gutenberg och ger dig som administratör stora möjligheter när du vill skapa nya sidor och inlägg.

Men, som med mycket annat fungerar det bäst när det används på rätt sätt. I den här artikeln ger vi dig 9 tips på hur du skapar snyggt och bra innehåll i Gutenberg!

Tips 1: Förstå Gutenberg

Gutenberg är en wysiwyg-editor som du stöter på varje gång du öppnar en ny sida eller inlägg i WordPress. När du skapar eller redigerar en sida så placerar du ditt innehåll i olika block. Blockens syfte är att strukturera upp innehållet och göra innehållet mer lättillgängligt och läsvänligt för besökarna. Blockens funktion har ett flertal fördelar: innehållet blir tydligt uppdelat för dina besökare och det underlättar ditt arbete med att skapa en enhetlig webbplats. En annan stor fördel med Gutenberg är att du samtidigt som du redigerar ser hur sidan kommer att se ut, det vill säga ”What You See Is What You Get”.

Tips 2: Använd rubriker

På en sida har du möjligheten att dela upp informationen i olika rubriker. Rubriker vill du använda för att göra texten mer lättillgänglig för läsaren eller för att guida läsaren till den sektion av sidan som är mest intressant för dem. För rubriker används Gutenberg blocket rubrik. Där placeras alla rubriker förutom sidans titel. En plats för titeln finns från början när du öppnar redigeraren.

Sidans övriga rubriker läggs till i nya block genom att trycka på +, välj blocket rubrik.

För alla rubriker kan du själv välja vilken nivå rubriken ska ha i texten.

Förutom att rubriker underlättar läsvänligheten för dina besökare så underlättar det för en sökmotor att förstå strukturen på ditt innehåll och ökar din sidas tillgänglighet.

Tips 3: Bestäm vad du vill förmedla med din text

Mellan rubrikerna placerar du ditt textinnehåll. Innan du börjar skriva ska du bestämma dig för vad du vill förmedla med din text. Välj ut ett antal nyckelord som du återkommer till i texten. Bestäm syftet med texten, om du vill informera, inspirera eller något annat och skriv därefter texten utifrån det syftet. I Gutenberg används blocket stycke för din text. På ett flertal av dina sidor kan det vara bra att efter titeln skriva en ingress.

Där skriver du en kort introduktion på vad sidans innehåll handlar om. Den ska gärna vara intresseväckande så att dina besökare känner att de vill stanna och läsa resterande innehåll. Ingressen kan även ibland fungera som en förhandsvisning av sidan eller inlägget på exempelvis din startsida. Texten kan du skriva direkt där det står “Börja skriva eller…” eller så kan du trycka på + och välja blocket stycke.

Tänk på!
När du beställer en webbplats av Hamrén så brukar vi alltid utveckla ett eget ingressblock för att underlätta för dig. Har du tillgång till ett ingressblock så skriver du ingressen där istället för i blocket stycke.

Tips 4: Smycka med bilder

Bilder kan vara ett trevligt inslag i en lång text. I Gutenberg kan du lägga till bilder på tre olika sätt. I blocket “Bild”,“Galleri” eller ”Media och text”.

Blocket ”Bild” använder du om du vill lägga till en bild och ”Galleri” om du vill lägga till flera bilder på samma plats. Slutligen använder du ”Media och text” om du vill använda dig av en bild och text tillsammans. Glöm inte att när du använder bilder så är det viktigt att beskriva bilden i bildtexter och i alt-texter för både tillgänglighet och extra begriplighet. Här ser du ett exempel på hur det kan se ut i Gutenberg när du använder de olika bildblocken.

Tips 5: Citera på ett stiligt sätt

Använder du frekvent citat på din webbplats kan du använda blocket citat för detta. I blocket citat så kan du både skriva själva citatet och blocket tillhandahåller även en plats för referens till citatets ägare.

Blocket citat är bra att använda för att göra sidan mer luftig och det kan belysa de viktiga delarna i din text. Det gör också att du får rätt programmatisk struktur på dina citat, samt en enhetlig sida då citaten följer samma utseende på hela webbplatsen.

Tips 6: Slussa besökarna rätt

Vill du slussa runt dina besökare från en sida till en annan så är blocket ”Knapp” ett fördelaktigt alternativ. Knappar kan skicka besökaren vidare till en ny intern sida, en extern sida, eller förflytta besökaren på aktuell sida. När besökaren skickas till en extern sida är en tumregel att öppna en ny flik för användaren. På så sätt kommer besökaren enkelt tillbaka till din sida efter det korta uppehållet. Använd blocket ”Knapp” och trycker på länkikonen, skriv in länken du vill skicka användaren till och tryck på enter. Här kan du även välja om länken ska öppnas i en ny flik eller inte.

Vill du enbart förflytta besökaren på den aktuella sida behöver du först bestämma vart besökaren ska flyttas. Exempelvis till en rubrik längre ner på sidan. Tryck på den rubrik du vill förflytta besökaren till. I högerspalten kan du se ett flertal olika inställningar för blocket. Där öppnar du rubriken ”Avancerat” och skriver några sammanhängande ord i fältet ”HTML-ankare”.

Kom ihåg orden du skrev in och gå tillbaka till din knapp eller skapa en ny knapp. Där skriver du in orden som länk, men använd tecknet hashtag (#) framför orden. I mitt exempel blir länken därför #En-ankarlänk. Eftersom du här fortfarande skickar användaren till en intern sida ska ingen ny flik öppnas.

Tips 7: Tappa inte ditt skrivarflow

Använd Gutenbergs snabbkommando ”/” för att direkt lägga till nya block utan att trycka på + ikonen. Skriv antingen enbart ”/” i stycket och scrolla till önskat block, eller sök på vad du önskar exempelvis ”/rubrik” så tas ett nytt rubrikblock fram.

Tips 8: Se över sidans innehåll

Genom att klicka på (i) uppe i vänster hörn får du en snabb överblick över sidans innehåll. Antal ord, stycken, block samt rubrikstrukturen. Här får du en indikation på hur sidans innehåll är strukturerat.

YOAST är ett plugin som hjälper dig avgöra om innehållet fungerar för din SEO. De tillhandahåller en checklista som du kan gå igenom innan du publicerar. Hela checklistan hittar du här.

1. Om du använder YOAST är då den lilla punkten grön?
2. Är huvudämnet i din artikel tydligt?
3. Finns det några långa stycken? Idealet är att varje stycke är fem till sex meningar.
4. Har du lagt till interna länkar? Du kanske har fler artiklar på din webbplats som behandlar likande ämnen, då kan det vara bra att länka till dessa.
5. Har du en tydlig uppmaning till handling i slutet av din artikel?
6. Kan du optimera för fler relaterade nyckelord?
7. Använder du övergångsord?
8. Har du valt rätt kategori och tagg?

Tips 9: Kontakta oss om du behöver hjälp!

Vill du att vi hjälper dig? Inga problem – vi finns bara ett samtal bort!

Det finns många olika temadagar att hålla koll på i kalendern och du har väll inte missat att idag, 28/10, så är det animationens dag. Vi tänkte uppmärksamma detta genom att berätta vad en animation är, vilka animationer vi gjort och såklart berätta att vi gärna hjälper dig och ditt företag med dina animationer.

Vad är en animation?

En animation kan se väldigt olika ut. Det kan vara en hel animerad långfilm, det kan vara en kort liten historia, det kan vara en logotyp i rörelse, en informativ film eller också vara en låda som byter färg. Inget är för stort eller för litet.

Vilka animationer har vi gjort?

Vi har skapat ett flertal animationer och gör gärna fler. Kika på våra Case på startsidan för att se några av våra utvalda projekt.

Kan vi hjälpa dig?

Funderar ni på att ta fram något rörligt material? Eller vill ni ha lite tips på hur man kan liva upp ert varumärke med animation?

Idag är det ingen vanlig dag, för idag firar vi Internets födelsedag. Hurra! Häng med oss på en vandring genom internets historia, på en tillbakablick till hur internet såg ut alldeles i början. Och du! Allra sist i artikeln bjuder vi även på Hamréns allra första hemsida, som lanserades 1997. Det vill du inte missa!

Internet förändrade våra liv

Internet har verkligen haft en stor påverkan på våra liv. Det har förändrat hur vi kommunicerar, hur vi söker information och hur vi underhåller oss. För många företagare har internet en betydande roll i affärsmodellen, i processer för att kunna producera, konsumera, distribuera och expandera.

Idag kan det vara svårt och ibland omöjligt att exempelvis ta sig till jobbet, hitta ett telefonnummer, boka in möten, handla mat, kontakta vänner och mycket annat helt utan internet. Utan internet står vi nästan still. Men vad är egentligen internet, denna sak som får oss att lyckas med de mest grundläggande uppgifterna i vår vardag? Ett känt citat för att beskriva internet lyder:

Det är kanske så det ligger till: den revolutionerande utvecklingen som ständigt påverkar vårt liv, är egentligen ett väldigt komplicerat lappskickningssystem. Vi tar emot en hel hög med lappar varje dag, och ibland kanske vi skickar en egen lapp. Som när jag nu skickar denna lapp till dig.

En liten tillbakablick

Men låt oss inte filosofera för mycket i hur dessa lappar kan ha så otroligt stor betydelse för allt vi gör. Dagen till ära hoppar vi istället tillbaka i tiden och tittar på vad internet hade att erbjuda när vi i Sverige fick upp ögonen för internet. Vad hade egentligen internets early adopters att jobba med?

Linköpings Universitet, 1993

För att hitta den första svenska hemsidan behöver vi inte titta långt. Den lanserades nämligen via Linköpings Universitet redan år 1993 av datorföreningen Lysator. Hur många som faktiskt besökte sidan är dock svårt att säga med tanke på att endast 1,7% av svenskarna överhuvudtaget hade tillgång till internet. Men en stilig sajt är inget vi kan förneka.

Aftonbladet, 1994

Året därpå debatterades det hett om vilken betydelse internet skulle få. Bland annat funderade man på om internet skulle få så pass stor genomslagskraft att det skulle ersätta de traditionella papperstidningarna. Aftonbladet var visionärer och var först ut i Sverige med att ge ut sin tidning även digitalt, år 1994.

AltaVista, 1995

Ju fler sidor som tillkom, desto rörigare blev det. En lösning för att hitta rätt i internetarkivet blev mer och mer efterfrågat. Nu tänker du kanske att Google borde kunna lösa detta problem, men nej: under den här tiden var AltaVista det självklara valet. I AltaVista kunde användarna söka på ord meningar och fraser för att hitta rätt i datamaterialet. Detta gjorde internetupplevelsen mycket behagligare. AltaVistas regalskepp sjönk dessvärre 1998, när Google seglade in på marknaden.

Blocket, 1996

Hade du något du vill sälja innan 1996 så var Gula sidorna, tidningsannonser och lappar på anslagstavlor rätt plats för dig. Detta förändras dock när Blocket lanserade möjligheten att annonsera på internet, helt gratis. Det var tider, det! 

ProNova, 1997 – Hamréns första webbplats!

Men det är inte bara storföretagen som satsar på Internet. År 1997 tar även Rickard Hamrén sin givna plats på internet, när han skapar webbplatsen åt ProNova. Där kan man läsa allt om Norrköpings Data- och kunskapscentrum (om man har bra glasögon — det var ganska smått, på den tiden!).

Det är dock inte förrän 9 år senare som vi ser företaget HamrénMedia för första gången. Nämligen år 2006 som företaget Butiksexpo. Helt rätt i tiden om du frågar mig, då svenskarna år 2006 är mer internetvana. Runt millenieskiftet så använder 50% av svenskarna internet och 2010 var siffran uppe i 91%.

Vi har internet att tacka för hur vi kan leva våra liv idag, och visst hoppas vi att det i många år till finns kvar. Är du ännu mer nyfiken på internets historia, rekommenderar vi en titt på Internetstiftelsens Internetmuseum.

Skulle det vara så att din egen webbplats är lik de webbplatserna ovan kanske det är dags att kontakta Hamrén för en uppfräschning.