Tillgänglighet

Alla ska komma åt det.

Hur ska ett användarvänligt e-postmeddelande se ut?

Peter Dahlgren Leave a comment

Effektiva e-postmeddelande som gör det du vill kan vara svårt att bygga.

Personligen är mina favoriter Google och Amazon. Som vanligt håller de det enkelt, tydligt och utelämnar alla onödiga detaljer. De koncentrerar sig på det viktiga, det som berör mottagaren. Google skriver på svenska och Amazon på lätt och pedagogisk engelska. Längst ned skriver de också varför jag fått deras meddelande. Men Google saknar instruktioner för hur jag avslutar deras nyhetsutskick.

Exemplariskt enkelt nyhetsbrev från Google Adsense

Dessutom skriver de ut min e-postadress tydligt så att jag kan se vilken adress de skickat till (jag har flera e-postadresser nämligen).

Här hittar du några bra resurser för att bygga ditt eget e-postmeddelande:

Användbar e-post
Alla artiklar är från useit.com (såklart ;)):

  • Protecting the User’s Mailbox.

    Email is a powerful way to reach customers, but overdoing it is risky. Let users know up front that you’ll respect their mailboxes. Otherwise, they won’t give their email addresses, and you’ll lose a unique channel for marketing and customer service.

  • Mailing List Usability.

    Mailing list content must be ultra-short. Provide separate email addresses for subscribing and unsubscribing and include info on how to get off in every mailing list message. Improved usability increased subscriptions by 128% in one case study.

  • Confirmation Email, Automated Customer Service Email, and Transactional Messages.

    Transactional email can be a website’s customer service ambassador, but messages must first survive a ruthless selection process in the user’s in-box. Differentiating your message from spam is thus the first duty of email design.

Tillgänglig e-post

  • Versaler är mest irriterande i e-post visar undersökning. Ett tidigare inlägg jag skrivit om vad som är mest irriterande i e-post. Ursprungligen från IDG.se.
  • CSS and Email, Kissing in a Tree.

    Most people who’ve attempted to recreate a sophisticated design in HTML email have run into a wall when using CSS, either in the form of inexplicable mangling by email clients or a pronouncement by an email administrator stating that CSS is “against the rules.” If you’re not content to roll over and use font tags in your HTML emails, read on.

Marknadsföring i e-post

  • Email vs. Direct mail; Interrupt vs. Permission. Blogginlägg från skribenten Andrew Neitlich. Håll dig uppdaterad med hans blogg om företagande i allmänhet och marknadsföring i synnerhet.
  • Email Marketing Hints & Tips Articles.

    Read articles on the best practices of email marketing written by Michelle Keegan, our own Email Marketing Diva. Become an expert email marketer yourself by following her actionable tips and advice on everything from creating a subject line, to testing and measuring success.

  • Do-It-Yourself Email Newsletters For Businesses.

    Email newsletters might appear to be a vast terra incognita for small and medium sized businesses, even if they have marketing and technology staff. However, email is tempting. It can be a very low cost way to find and keep customers.

  • E-Mail Marketing Fundamentals.

    E-mail marketing is one of the most overlooked marketing opportunities today. Many businesses collect information about their customers and prospects and never use the information.

Underbara flash (eller hur jag lärde mig att blockera fanskapet)

Peter Dahlgren 17 Comments

Flash är ett otyg. Det är bara i vägen, suger bandbredd och saknar all form av tillgänglighet. Eller hur?

Det är därför jag blockerar flash. Folk vet inte hur det ska användas. Det används till att göra hela webbplatser i. Det är ungefär som att komma till en webbplats som säger ”för att se den här webbplatsen måste du ladda ned det här programmet och köra”.

Flash är inte webbsidor. En webbsida är en html-sida med en egen adress. På den finns det länkar som jag kan ta mig vidare på. Jag kan klicka på vilken länk jag vill, i vilken ordning jag vill och jag kan välja att öppna en länk i ett nytt fönster om jag vill. Eller kanske ”spara mål” eller lägga ett bokmärke på en speciell sida. I en flash-applikation (för det används ju ibland som applikation, snarare än ett interaktivt element) fungerar inget sådant.

Hur ska då flash användas? Jag tycker att flash ska användas för att göra något som inte kan göras med webbsidor. En animation. En bilmotor som visar hur cylindrarna arbetar. När man behöver det där lilla extra helt enkelt. Att bygga en webbplats i flash är inte ”det där lilla extra”. Det är ren idioti.

Ställ dig en enkel fråga innan du lägger till flash på din webbplats:

Kan jag göra det här lika bra med html i stället?

Ett bra exempel:

Animation som visar hur en bilmotor fungerar och dess cylindrar.

Ett riktigt dåligt exempel:

Bredbandsbolaget kör med splah-screens i flash. Det kan likaväl göras i vanlig html.

Tillgänglighet är mer än teknik

Peter Dahlgren Leave a comment

När man pratar om tillgänglighet tänker man oftast på att inte använda ramar, nyttja alt-texter och skriva rätt doctype. Men tillgänglighet är inte bara teknik.

Så här skriver Susning.nu om tillgänglighet:

…kvalitetsmått för hur välanpassad en person kan känna sig i en viss miljö eller med en tjänst.

Därför kan man konstatera att tillgänglighet är helt beroende på målgruppen. Om vi ska bygga en webbplats som är maximalt tillgänglig så ska den i princip finnas på alla språk i alla möjliga format. Det brukar varken vara möjligt eller speciellt praktiskt.

Ett bra exempel är Sveriges Radio. Deras sändningar kan bli mer tillgänglig om de sänder ut en starkare signal. Deras sändningar kan också bli mer tillgängliga genom att sända på fler språk. Fast de är ganska duktiga ändå, de täcker in oss som bor i Sverige: nyheterna finns på svenska, finska och ”i klartext” (lättare svenska). Tillgänglighet handlar alltså inte bara om teknik.

Sammanfattningsvis kan vi konstera två saker:

  1. Tillgänglighet beror på målgruppen. Vi behöver inte anpassa för blinda om det inte finns några blinda i målgruppen.
  2. Tillgänglighet är inte bara teknik. Det skrivna ordet (eller lästa…) är minst lika viktigt för att öka tillgängligheten. Som vi lärde oss så handlar tillgänglighet om att inte sätta upp hinder för användaren.

Nyttan med alt-texter i snyggt exempel

Peter Dahlgren 5 Comments

Ibland kan det vara bra att visa vanliga problem med exempel. Att alt-texter ska använvdas för att förbättra tillgängligheten för blinda är det många som vet. Men det underlättar också för oss som är seende.

Smålandsposten är i blåsvädret igen. I en filmrecension för Så som i himmelen har recensenten gett filmen ett betyg. Det är ett enkelt sätt att skilja bra filmer från sämre.

Men vad de gjort är att visa betyget som en bild. Som inte finns och saknar alt-text. På detta sättet är det totalt omöjligt att veta vilket betyg de gett filmen.

Viktig alt-text saknas, filmbetyg går inte att utläsa

Så här ser deras html-kod ut:

<img src="/images/lowest_betyg.gif" width="" height="" border="0">

Det enda betyget vi kan gissa oss till är tack vare att bildfilen heter lowest_betyg.gif (exemplarisk svengelska för övrigt). Troligtvis är det fråga om lägsta betyg. Men det hela hade enkelt kunna undvikas genom att lägga till följande lilla kod:

<img src="/images/lowest_betyg.gif" width="" height="" alt="Betyg 1 av 5" border="0">

Alt-texter ska alltid anges på bilder. Fyller bilden ingen mer funktion än att bara vara snygg, så ska du skriva alt="" eller ännu hellre använda css. Då slipper blinda höra den i sin skärmuppläsare.

En annan rolig sak är att attributen width och height är tomma. I Microsoft Internet Explorer får därför alt-texten ingen effekt, utan bilden visas med storleken 1 x 1 pixel. Det går alltså inte att läsa alt-texten som annars visas samtidigt.

Detta problemet hade aldrig behövt uppstå om de valt att följa standarden för att utveckla webbsidor. I xhtml 1.0 ska koden se ut som följande:

<img src="/images/lowest_betyg.gif" alt="Betyg 1 av 5" />

Eftersom width och height inte har något värde måste de plockas bort. Attributet border tar vi också bort eftersom det kan vi sköta med css i stället. Sedermera lägger vi till ett avslutande snedstreck eftersom alla taggar måste ”avslutas”.

Nu har vi konstaterat två saker:

  1. Alt-texter är viktiga, både för seende och blinda.
  2. Följ standarden, annars fungerar inte webbsidorna likadant överallt. I teorin i alla fall.

Planera för en webbplats med Skoldatanätet

Peter Dahlgren Leave a comment

Surftips: Planera för en webbplats.

Beskrivningen lyder som följande:

Om du funderar på att göra eller beställa en webbplats eller kanske bygga om din gamla webbplats har du nytta av detta material. Här kan du läsa om hur du gör din webbplats användarvänlig och tillgänglig. Du får bland annat råd om hur du gör webbsidor läsbara och underlättar för användarna att hitta på din webbplats.

Det är Skoldatanätet, Myndigheten för skolutveckling, som står bakom den webbplatsen.

Skoldatanätet har många intressanta och nyttiga tjänster. En klassiker är ordlistan Lexin som finns på flera språk. Den använder jag nästan dagligen när jag stöter på främmande ord.

Tummen upp för skolutveckling!

Plocka bort en bit av adressen och hamna högre upp

Peter Dahlgren Leave a comment

Låt säga att du har en adress på din webbplats som ser ut som /bilar/kombi/volvo/v70/. Den säger ju allt om innehållet. Men vad den också ska göra är att fungera i en hieraki.

Om du plockar bort v70 från slutet så ska alltså alla Volvobilar dyka upp. Och likaså om du tar bort en nivå till så ska samtliga kombibilar visas upp. Det är maximal tillgänglighet (och användbarhet) om man utifrån adressen kan navigera sig genom en webbplats. För vem vet, du kanske letar efter en kombi, fast en Saab i stället? Då är det ju bara att testa /bilar/kombi/saab/.

Om det är enkelt så innebär det att vi hittar det vi söker. Hittar vi det vi söker blir vi glada. Blir vi glada blir vi mer benägna att köpa. Köpa är bra. Då tjänar man pengar.

Alltså: enkelt för kunden = mer pengar till företaget. Tänk vad enkelt det är. 😉

Håll det enkelt och det fungerar för alla

Peter Dahlgren Leave a comment

Här kommer ett av mina hemliga tips som jag lovade.

Håll dig till det gamla. När det gäller nätet kan det vara bra att vara gammalmodig. Om du hela tiden använder den senaste tekniken (vad sägs om css 3 med xhtml 1.1?) så kommer inte alla att kunna använda dina webbsidor. Det är inte bra.

Men om du håller dig till gamla, beprövade metoder behöver du inte oroa dig. Det innebär inte automatiskt att du ska använda html 1 (som visserligen funkar överallt med absolut säkerhet), utan exempelvis vanliga länkar (<a href=””>Klick!</a>) i stället för en javascript-variant (<span onclick=””></span>). Det finns fler exempel, men lite får du ju faktiskt tänka själv. 😛

Enkelhet innebär ofta tillgänglighet. Ju enklare något är, desto mindre kan gå fel.

Håll koll på din statistik och lär dig besökarnas vanor

Peter Dahlgren Leave a comment

Det är många av er som har försökt komma åt www.backendmedia.se/tillganglighet. Den sidan har aldrig funnits, men jag har ändå lagt till en ompekning från den till www.backendmedia.se/category/tillganglighet. Då hamnar ni ju rätt oavsett hur ni gör (det gäller alla andra kategorier också för den delen).

För det gäller att ha koll på statistiken. Inte minst för att se hur många besökare man har (det är ju trots allt bara siffror). Utan även för att se vad besökarna faktiskt sysslar med.

Därefter får man anpassa som jag gjort. Om många personer väljer att göra något som inte stöds av webbplatsen, varför inte lägga in detta stödet?

Ett enkelt sätt att testa din webbplats tillgänglighet

Peter Dahlgren 4 Comments

Är din webbplats tillgänglig?

Ett enkelt sätt att testa det är att se hur den ser ut enbart med text. Då ser du den ur en sökmotors synvinkel, och även blinda.

Testa Lynx Viewer, den fungerar ungefär som den gamla hederliga webbläsaren Lynx, som bara visar text.

På måndag får du ytterligare ett av mina hemliga knep om hur man enkelt kan hålla en hög tillgänglighet. I helgen ska jag jobba innan jag tar semester.