Ett internet för alla

Kärt barn har många namn: tillgänglighet, accessibility, inkluderande design…

I vårt fall handlar de alla om samma sak: att på ett empatiskt och avsiktligt sätt anpassa design och innehåll för att så många som möjligt ska kunna ta till sig av det våra kunder vill förmedla. 

Alla tjänar på det

Det största argumentet för att tillgänglighetsanpassa din hemsida är att alla tjänar på det.

En tillgänglig hemsida löper mindre risk att stöta bort personer med permanent eller temporär funktionsvariation, äldre eller yngre användare, de med lägre förståelse för språket, de som har en dålig uppkoppling, eller håller på att lära sig hur man använder en dator eller smartphone. 
Vi människor fungerar alla på olika sätt, men vissa funktionsvariationer gör att hinder uppstår i mötet med omgivningen. Ett fysiskt exempel är att trappor utan ramp eller hiss är ett funktionshinder för den som tar sig fram med exempelvis rullstol. 

På internet kan till exempel dessa saker ställa till med problem:

  • tillkrånglad kod
  • navigation som är svår att förstå intuitivt
  • designval som ger svag kontrast mellan kulör på text och bakgrund, eller suddiga eller otydliga bilder
  • funktioner som inte går att styra med tangentbordet
  • texter som är svåra att förstå

Tillgänglig design omfamnar mångfald och har som mål att skapa en bra användarupplevelse oavsett vem du är eller vilka förmågor du har.

Tangentbord och skärmläsare – hjälpmedel att tänka på

Det finns många användare som av olika anledningar inte kan använda musen. Tumregeln är att om du kan utföra en händelse med hjälp av musen ska det också gå att utföra den via tangentbordet. Ett annat hjälpmedel är skärmläsare, ett program som läser upp text från datorskärmar med konstgjort tal. Programmet används för hemsidor, e‑post och andra digitala dokument. Det finns också skärmläsare som omvandlar text på bildskärmar till punktskrift för blinda. Det är viktigt för skärmläsaren att koden bakom hemsidan är skriven på rätt sätt, att det till exempel finns alt-texter så att den kan beskriva innehållet i bilder.

Hamréns väg till ett mer tillgängligt internet

Om din hemsida är tillgänglig även för personer som upplever funktionshinder på internet, så kommer den vara tillgänglig för alla. Att tillgängliggöra hemsidor hänger till stor del på det som händer bakom skalet. Det här är de grundläggande delarna:

  • korrekt HTML-semantik
  • förutsägbar och intuitiv navigation och struktur
  • medvetna designval kring färger och typografi
  • möjliggöra navigation med tangentbordet
  • texter som är anpassade för sitt syfte

Vi bygger alltid strukturerade hemsidor med korrekt kod, använder verktyg för att vår design ska förenkla istället för försvåra och vi kan till och med skriva texter skräddarsydda för ditt företag. Hemsidorna vi bygger uppnår minst AA-nivå för tillgänglighetsmåttet WCAG2 som du kan läsa mer om här >>>

Rankas högre på Google

Större tillgänglighet på internet innebär att du har chansen att nå fler i din målgrupp. En större tillgänglighet innebär även bättre sökmotoroptimering eftersom Google gillar hemsidor som är tillgänglighetsanpassade och favoriserar dem i sökresultaten.

Mindre krångel

Strukturerad kod = effektivare kod, vilket ger dig snabbare hemsidor som är lättare att hantera, uppdatera och vidareutveckla. Även utvecklings- och förvaltningskostnaderna för hemsidan minskar, liksom resursförbrukningen hos användarna genom den förkortade nedladdningstiden. Dessutom leder det till att hemsidan fungerar bättre i olika enheter och minskar risken för problem i olika webbläsare.

Framtidssäker investering

Att ha en tillgänglig hemsida är en framtidssäker investering. Redan idag finns det juridiska krav på tillgänglighet för hemsidor inom offentlig sektor, men det finns initiativ på EU-nivå att allmänt implementera högre krav. När dessa nya lagar träder i kraft kommer alla som har en hemsida påverkas.Att redan nu fokusera på mer inkluderande design positionerar ditt varumärke i framkant. Tillgänglighet upplevs som smidigare, mer användarvänligt och mer inkluderande och uppskattas av både användare och medarbetare. 

Vill du ha hjälp med att göra din sida mer tillgänglighetsanpassad?

Kontakta oss direkt, så hjälper vi dig!

Ingen vet helt säkert hur det kommer påverka oss som jobbar med marknadsföring, men troligtvis kommer datorer inte kunna ha samma grad av kreativitet som vi människor, vilket ju bådar gott för oss som jobbar med just det. Generellt kan man säga att om du har ett varierande arbete med många olika uppgifter kommer du vara svårare att ersätta än någon som till exempel skruvar fast en specifik mutter på en växellåda vid ett löpande band.

AI på internet idag

Därmed inte sagt att AI inte finns på internet, eller att det inte redan idag påverkar hur vi jobbar med marknadsföring. Kort sagt kan man säga att en AI på internet lär sig saker om dig, minns dem, och tar upp det nästa gång du besöker sidan. Lite som en trevlig vän som minns saker om dig och återkopplar. Eller kanske snarare en riktigt smooth säljare, för målet är ju inte vänskap utan att du ska konverteras från besökare till kund. AI gör det genom att till exempel minnas ditt namn eller vad du varit intresserad av tidigare. Vi har nog alla fått upp annonser som påminner om varor vi inte checkat ut från varukorgen. En typisk AI-funktion.


Ett exempel där AI varit en en bidragande faktor till framgång är e-handeln Amazon där deras AI lyckats analysera vad personer vill köpa och baserat på det tar fram förslag på produkter. Direkt när du går in på sidan får du rekommenderade produkter baserat på vad du tittat på eller köpt tidigare. Om deras AI samlat tillräckligt bra information så du vill köpa någon av produkterna som presenteras kan du göra det med ett enda klick, eftersom du vid tidigare köp lagt in din adress och betalningsuppgifter. En smidig konvertering.

AI på internet imorgon

Det är troligt att det i framtiden också kommer finnas AI som skapar hemsidor, men det finns lite olika teorier om vilken nivå datorer kommer prestera på. Förhoppningsvis kommer the human touch alltid behövas, i ett sånt scenario skulle de som idag är webbdesigners snarare bli art directors till sina datorer.

En annan teori är att det kommer gå att skapa ett ADI, Artificial Design Intelligence, som kan förstå designprinciper och skapa ett universellt medelvärde av webbdesign. Genom att dessutom analysera var besökare klickar och vilka beteenden som leder till konvertering kommer den kunna snabbt bygga om en sida för att passa olika demografier. I det scenariot skulle inte bara templates bli överflödiga, utan också människan som kreatör.

Än är vi inte där

Än så länge byggs de bästa hemsidorna dock av människor av kött och blod, och framförallt med hjärna och hjärta.

Om du inte vill vänta in framtiden utan behöver en hemsida redan idag kan du kontakta oss via formuläret nedan eller direkt till info@hamrenmedia.se

Här kan du läsa om hur vi bygger våra hållbara hemsidor. Läs mer här >>>

01. Mobile first, fortfarande

Vi fortsätter sitta allt mindre vid stationära datorer, vilket ökar kraven på webbdesignens tydlighet som i sin tur påverkar övriga trender. Mobile first innebär i kort att formen tas fram med mobila enheter i fokus, och att desktop-versionen blir en variant av mobilversionen.

02. Lättnavigerat och förenklat

När mobiltelefonen blir det medium där designprocessen startar faller det sig naturligt att formen blir mindre komplicerad, både typografi och illustrationer måste fungera även i små format. Dessutom är konsumenterna nu såpass vana vid det avskalade och lättnavigerade att många företag tar med sig estetiken hela vägen in i varumärket.
Ett exempel är det anrika modeföretaget Burberry, som gjort en helomvändning från sin eleganta och rikt dekorerade look till en tidlös linjär typografi. Men det är inte bara Burberry som förenklar, fler och fler företag väljer logotyper skrivna enbart i gemener med en enfärgad minimalistisk logotyp bredvid. Detta gör att många företag oavsett bransch har liknande typografi, från Burberry, till Airbnb, till Spotify.
Dessa mer avskalade och konservativa logotyper ger företag chansen att förändra den grafiska profilen och innehållet utan att behöva ändra själva logotypen. Stilgreppet ger en frihet att leka med uttryck och innehåll och ger upphov till vad vi berättar mer om i ”07. Vågad typografi och kontraster”.

03. User experience: förhållningssättet som håller kunden i handen

Begreppet User experience (UX) handlar om en persons känslor och attityd till en produkt, ett system eller en tjänst. Det handlar också om systemets nytta, hur enkelt det är att använda och dess effektivitet. Vikten av bra UX är i sig inget nytt, men att sätta användaren i fokus känns väldigt 2019 och därför får det en plats på vår trendspaning. När valmöjligheterna för konsumenten hela tiden blir fler, måste målet för en hemsida vara att bli det minst krångliga alternativet. Är utcheckningen av en varukorg för lång eller svår att förstå går kunden helt enkelt till en konkurrent med bättre UX och köper den där.
Bra UX uppstår när alla delar av en hemsida, från grafisk design till användarvänlighet och informationsarkitektur, samspelar med text.
Den trendsäkra produktiva skribenten (/copywritern/nyhetsbrevförfattaren/UX writern) Mattias Åkerbergs senaste nyhetsbrev UX Writing Summarized är det senaste tecknet på att användarens upplevelse av text på internet blir viktigare och att vi kommer se fler visitkort med titeln UX Writer under året.
PS. På Hamrén har vi under hösten uppdaterat våra kunskaper om UX Design via Berghs School of Communication, och vår nyanställda innehållsproducent Malin har koll på UX Writing. Är du också nyfiken på UX? Vi rekommenderar UX Writers Collectives onlinekurs!

04. Avancerad färg och form

Levande färger och drömmiga gradienter i bakgrunder och på objekt fortsätter vara en stor trend även under 2019. Denna trend är tätt sammanbunden både med den 3D-estetik som blivit allt vanligare, men också att kvalitén på våra skärmar blivit bättre vilket också är mer tillåtande när det kommer till färg.

via BrioRom

05. Levande koraller

Färginstitutet (och färgförsäljaren) Pantone har valt året efter den långa sommaren som gav svenskarna klimatångest att namnge sin kulör PANTONE 16-1546 Living coral (levande korall), om det är en pik mot turismen som dödar korallerna är svårt att veta eftersom Pantone inte själva kommenterat det. Kulören kan beskrivas som en energisk och varm orange-rosa med underton av guld. Den är framtagen som en reaktion mot vårt allt mer digitaliserade liv eftersom vi, enligt Pantone, nu söker autentiska och uppslukande erfarenheter för att få en känsla av kontakt och närhet. Färgen ska symbolisera vårt inre behov av optimism och upplyftande aktiviteter. Vi tycker att Pantone satt huvudet på spiken med denna kulör och vårt ökade behov av upplevelser som känns äkta och nära.

via Pantone

06. Rörliga delar

Med bättre uppkoppling både hemma och på jobbet blir det allt vanligare med relativt tungt innehåll, som videor och GIF/SVG-animationer. Även så kallade mikrointeraktioner (MI) som till exempel genomtänka hover-effekter blir vanligare.

via Femme & Fierce

07. Vågad typografi och kontraster

Fler och fler väljer bort bilder till förmån för större rubriker, vilket tillsammans med bättre skärmar gör att den tidigare så ogillade seriffen nu blir allt vanligare på webben. Även om linjära teckensnitt fortsätter vara det självklara valet för brödtext kommer 2019 bli seriff-rubrikens år. Dessutom kommer rubrikerna rent designmässigt kunna breda ut sig på nya vis, 3D-rubriker, metall-liknande effekter och känslan av att texten kan rinna iväg kommer ge kreatörer stor frihet med det visuella uttrycket.

via Mailchimp

Formgivningen kommer kommer alltså under 2019 utmärka sig genom att tilltala sinnet, pigga upp och att den kommer ha ett lekfullt förhållningssätt till färg och form. Dessutom blir kundens behov av äkta och autentiskt bemötande från företag allt större. Att ha en produkt eller tjänst som är toppen räcker inte, kunden vill också redan när de kommer in på hemsidan få en känsla av att den här produkten eller tjänsten är personlig, autentisk och till för just hen. Därför blir också begrepp som UX Writing ett buzzword för 2019.

TL;DR Webbtrender 2019: Målet är att vara lätt att förstå och rolig att titta på.

I slutet av 2017 hoppade vi på Hamrén på XD-tåget, och nu börjar vi göra fler och fler av våra designskisser i programmet. Det blir nu enklare för oss, och våra kunder, att dela och kommunicera kring designskisserna. Tack vare möjligheten att interagera med designskissen och kommentera direkt på specifika element gör det enklare för oss att dela och kommunicera kring designskisser med våra kunder.

Varför underlättar Adobe XD arbetet för Hamrén och för våra kunder?

Fördelarna med designskisser i Adobe XD är flera, men framför allt är det ett enkelt och intuitivt verktyg som låter oss skapa designskisser som efterliknar webbsidor mer än andra skissformat och därför underlättar hela designprocessen.
Flera komponent-bibliotek, så som Bootstrap och Google Material, finns dessutom förinstallerade, eller tillgängliga för nedladdning, vilket banar vägen för snabbare skissarbete.

Ett verktyg med potential

Fortfarande finns en hel del kvar att önska funktionsmässigt, så som fixerade element och hover-effekter, men som skissverktyg håller programmet verkligen måttet. Än så länge har responsen från våra kunder varit positiv, och vi hoppas att det fortsätter i den riktningen!

Även som webbdesigner kan det ibland vara svårt att acceptera att regler som är självklara för tryckt material, inte alltid är lika applicerbara på digital plattformar. Ett av de områden som skiljer sig åt mellan de båda medierna är layout, där tabeller, floats och olika positioneringsproperties lämnar mycket i övrigt att önska – speciellt när det kommer till vertikal positionering.  Det klassiska 12 kolumns-griddet har varit väldigt osmidigt att återskapa på webben. Tills nu!

CSS Grid Layout – ett enklare sätt att layouta på

I mars i år introducerades CSS Grid Layout, och vi på kontoret kända att våra drömmar besannades. Till skillnad från till exempel flexbox – en personlig favorit när det kommer till layout – kan CSS Grid hantera både en X och en Y-axel, samtidigt. Detta innebär att du kan jobba med både rader och kolumner på ett mycket smidigare sätt än tidigare.

CSS Grid för med sig en ny enhet för bredd och höjd, nämligen fraction (fr). En fraction är helt enkelt en del av helheten. Detta möjliggör för responsiv layout, även om pixlar också accepteras som enhet.

Så hur fungerar CSS Grid?

Rent krasst handlar det om ett omslutande element med display: grid; samt ett gäng barn-divar (där det dessutom fungerar jättebra att använda flexbox, för ytterligare layoutmöjligheter!)

Barnen i sig behöver inte komma i ordning eftersom layouten styrs helt i CSS. Detta gör i teorin att du kan ändra grid helt och hållet, utan att behöva gå in och rota i din HTML-struktur, vilket jag tycker är intressant.

Dessutom kan du döpa rader och kolumner, för att lättare hålla isär dem. Du kan se exempel på detta i mitt kodexempel nedan.

Detta är bara några av de många funktioner som CSS Grid för med sig. För komplett förståelse kan jag verkligen rekommendera CSS-tricks kompletta guide till CSS Grid, som innehåller allt du behöver veta. Om du hellre lär dig av en tutorial på YouTube så är den här jättebra.

Ett praktiskt exempel på CSS Grid layout

Jag kodade ihop ett exempel på en tidningsinspirerad layout, bara för att ge er en idé av hur det kan se ut. Du hittar exemplet på CSS Grid på CodePen.

Ett utsnitt av ett kodexempel av CSS Layout Grid. Bilden visar en tidningsartikel med platshållartext. Artikeln använder et 6-kolumnsgrid.

Notera den ändrade element-ordningen i mobilversionen; att bilden ligger ovanför rubriken. Detta har tidigare inte varit möjligt att åstadkomma via CSS.

Webbläsarstöd

CSS Grid stöds i alla större webbläsare för desktop, inklusive IE och Edge. När det kommer till mobila enheter finns stöd i alla de större webbläsarna, utom Opera och Opera Mini. Du kan läsa mer om webbläsarstöd för CSS Grid på caniuse.com.

Hamrén Webbyrå börjar använda CSS Grid direkt

Sammanfattningsvis tycker jag att CSS Grid är ett riktigt spännande tillskott i CSS-djungeln. Framför allt tror jag att CSS Grid är användbart när det kommer till gallerifunktioner eller liknande, där CSS Grid nu möjliggör mer spännande designmöjligheter. Nästa vecka går en av de större projekt vi arbetat på under hösten live, och där kommer du kunna se att vi använt CSS grid för visning av relaterat innehåll, till exempel.

Så, om du själv har en hemsida där du gärna vill efterlikna ”analoga” layoutmetoder, eller om du helt enkelt vill ha ett enklare och framför allt responsivt sätt att visa data i kolumner – då tycker jag verkligen att du ska ta en titt på CSS Grid Layout!

1. Får dina besökare förtroende för ditt företag när de kommer till din hemsida?

Tips: Ett enkelt sätt är att tydligt visa vart ni finns geografiskt och visa bilder från företaget. Visa även bilder på personalen med tydliga namn och kontaktuppgifter. Det visar att ni är ett öppet företag som är enkelt att komma i kontakt med.

2. Inne på en sida som beskriver en produkt eller tjänst, vem ska kunden kontakta om de är intresserade?

Tips: Säljer du exempelvis batteriladdare så på sidan som beskriver batteriladdare visa även en bild och kontaktuppgifter direkt till den personen på ditt företag som bäst kan svara på frågor om just batterladdare. Det uppmanar till kontakt och troligen ett köp.

3. Hur tydligt är det på din sida att man ska kontakta eller köpa från dig?

Tips: Var övertydlig när det gäller att få besökaren att kontakta dig eller att köpa direkt från sidan. Använd inte små subtila länkar som knappt syns utan länkar och knappar som leder till kontakt och köp ska skilja ut sig och vara mycket tydliga.

4. När såg du över och uppdaterade informationen på din hemsida senast?

Tips: Se över innehållet på din sida med jämna mellanrum och se till att informationen är relevant och aktuell. Många gånger kan man hitta innehåll som är flera år gammal och som bara ligger kvar för att fylla ut på en sida … Ta bort det på en gång!

5. Har du kunskap som dina kunder behöver?

Tips: Med största sannolikhet har du kunskap inom ditt område som dina kunder behöver. Exemplet med batteriladdaren i tips 2 ovan, på hemsidan, ge även tips på hur man bäst laddar batterier, vad man ska tänka på med mera. Då skapar du en attraktiv sida som flera kommer länka till. Det är bra även ur sökmotorsynpunkt och du kommer få en bättre placering på exempelvis Google.

6. Vad säger dina befintliga kunder om ditt företag

Tips: Besökare vill se vad andra som har anlitat ditt företag säger och tycker. Var tydlig med en referenssida där du visar namn och bild på personer och företag som anlitat dig. Detta bygger förtroende och kommer få fler av dina besökare att våga prova ditt företag.

Det finns hundratals små saker att tänka på när man bygger en hemsida. Det mesta mynnar ut i att du ska få fler och bra kunder till ditt företag. Är du intresserad av att ta en dialog kring vad som kan förbättras eller göras på din sida så tveka inte att kontakta mig för ett förutsättningslöst första samtal! Hoppas vi hörs! Rickard Hamrén Vd, Hamrén Media AB 070-694 98 92 rickard@hamrenmedia.se

Skulle du ha nytta av att exempelvis låta dina återförsäljare, leverantörer eller kunder handla och samla sina beställningar på nätet istället för att ringa, maila eller skicka in dem på annat sätt? Ni kanske har kunskap, dokument eller andra tillgångar i bolaget som skulle gå att samla och sälja på nätet? Möjligheterna är många när man vrider och vänder på det.

Har du tankar och funderingar på om e-handel i någon form kan vara intressant för er så kontakta oss så hjälps vi åt att se över vilka möjligheter som finns. Vi har haft förmånen att i över 10 år sitta med dessa frågor med kunder från vitt skilda branscher så en diskussion brukar vara mycket givande.

Efter en tid börjar det dåliga samvetet gnaga över att du borde uppdatera hemsidan. Du borde lägga in bilder på de nyanställda eller de nya kundreferenserna men det är fredag och familjen väntar hemma med middagen.

Vi hjälper dig före, under och efter lansering.

Om du känner igen dig i något av det ovanstående så är du inte ensam. Som tur är finns det  en enkel lösning på detta. Vi hjälper dig före, under och efter lansering av din hemsida. Flera av våra kunder nyttjar oss redan på samma sätt som om de har en intern webbansvarig.

Fördelarna är många, du har en och samma kontaktperson hos oss som lär känna ditt företag väl. Du arbetar med en person som kan webben på sina fem fingrar så du kan vara säker på att resultatet blir bra. Vår erfarenhet visar att uppdateringar som kan ta flera dagar att göra internt kan vi i vissa fall göra på någon timme. Du kan alltså spara pengar och fokusera på det du är bra på. Med stor sannolikhet kan du även öka intäkterna med en hemsida som blir levande och professionell, samt uppskattas av Google.

Är det intressant att titta på?

Slå mig en signal eller skicka ett mail så ser vi vilka behov du har och vad vi skulle kunna hjälpa dig med. Självklart är detta helt förutsättningslöst.

Rickard Hamrén
Telefon: 011-400 98 92

Hamrén Media AB

Ord om oss från våra kunder:

”Hamrén Media har från dag ett överträffat våra högt ställda förväntningar. Alltid snabb support och de har levererat högklassig hemsida och grafiska presentationer vilka har drivit vår affär framåt. Vi kan varmt rekommendera Hamrén Media till andra företag.”
Joachim Lindström, VD, iDeal AB

Vi behövde lyfta vår hemsida till en ny och modern nivå, hos Hamrén Media fick vi vad vi önskade samt lite till på grund av deras erfarenhet och engagerade personal.”
Hans Lassbo, VD, MiLi Däck & Service AB

”Hamrén Media ska ha en guldmedalj! Proffsig och kunnig personal.”
Roberto Bonardi, Romabo

”Hamrén media är mycket lyhörda, kvalitativa samt engagerade och har kunnat förverkliga och också utveckla våra design-idéer gällande vår hemsida. Det ger oss en långsiktig trygghet som vi värdesätter och vi kan verkligen rekommendera Hamrén Media!”
Susanne M.Wahlqvist, Informationsdesigner, GAIDA

Behöver du hjälp? Tryck här för att komma till vår support.

support

Redo att starta
ditt projekt?

Har ett projekt i åtanke eller idé som du vill bolla? Hör av dig! Vi ses gärna på en kopp kaffe i Norrköping eller Malmö.