Lathund sundsvall.se 15 november 2006 I SiteVision
Grundprinciper...1 Vad ska vi publicera?...1 Vad är struktur?...1 Vad är användarcentrering?...1 Vad är tillgänglighet och design för alla?...1 Klassiska exempel...2 Nationell handlingsplan för handikappolitiken...2 Kommunens Handikappolitiska program...2 Webbplatsens grundlayout...3 Mall...4 Inställningar...4 Sidans namn - samma som sidrubriken...4 En textspalt i Mittenspalten...4 En vanlig sida...5 Redigeringsläge...6 Fler bilder på sidan...7 Skapa fler sidor i strukturen...8 Sortera sidorna i grupper som hör ihop - inte verksamhets-organisatoriskt.8 Fem sidor på varje nivå i menyerna syns bäst...11 Hjälp, jag hittar ingen bra menyrubrik (namn på sidan)!...11 Gör navet och häng på relaterad information...12 Dolda sidor i menyn...12 Rubrikernas textformat och användningsområde...13 Gör inga radmatningar efter rubriker!...13 Sidrubrik...13 Stor mellanrubrik...13 Mellanrubrik/Ingress...13 Underrubrik...13 Högerspaltens innehåll...14 Fakta...14 Länkar...14 E-tjänster...14 Kontakt...15 Gör e-postlänk av namnet...15 Ta bort eller lägga till färgad rubrik...16 Ta bort...16 Lägga till...16 Justera avstånd ovanför rubrikerna...16 Länkar...17 Vilka ord ska jag länka?...17 Förbjuden länkning...18 Länkar till förklaringar...18 Länkbeskrivningar...18 Exempel på länkbeskrivningar...19 Länkar i Mittspalten...19 E-postlänkar i Mittspalten...20 Länkar i högerspalten...20
E-postlänkar i högerspalten...20 Textstycke med tillhörande länk i högerspalten...21 Öppna länk i nytt fönster...21 Länkar till pdf-dokument...21 Bilder...23 Storlek på standardbild (px)...23 Kvalité på bildens utseende...23 Fotoformat och minnesstorlekar...23 Namngivning av bilder...24 Bildbeskrivningstexter s.k. Alt-taggar...24 Ange fotografens namn s.k. fotobyline...24 Bildtexter...25 Toppbild över hela mittspalten...25 Tabeller...26 Bakgrundsfärg i tabellhuvudet...26 Skriva för webben...27 Vad vill du framföra och varför?...27 Tala till läsaren i du-form...27 Det viktigaste (för användaren) ska stå först...27 Bakgrund och fördjupning sist eller som länkar...28 Fördjupningssidor...28 Skriv så att en 10-åring förstår...28 Utgå från handlingar och situationer...29 Ta reda på:...29 Gör beskrivande länkar...29 Rubriker ska fånga huvudbudskapet...30 Korta textstycken och många underrubriker...30 Punktlista ibland...30 Undvik förkortningar...31 INTE text och layout direkt från ett pappersdokument...31 Ingen löpande fetad text i brödtexten...31 Inga lösblad...31 Några skrivregler...32 Telefonnummer...32 Faxnummer...32 E-post...32 Titlar:...32 Sifferuttryck...33 Förkortningar...33 Datum...33 Förstasidan Ettan på sundsvall.se...34 Stora toppbilden i mittenspalten...34 Aktuelltspalten...34 För stort avstånd efter din artikel i aktuelltspalten...34 Om lathunden...35 Senaste versionen...35 Kontakt...35
Grundprinciper Vad ska vi publicera? Prioritera den information och de tjänster som är viktigast och används/läses mest av flest, på webben. Utgå från medborgarens behov; det som folk frågar efter och behöver veta när dom ska utföra viss handling eller befinner sig i en viss situation. I första hand kort och enkel information så att de flesta kan förstå även helt utan förkunskaper. Vad är struktur? Webbplatsens struktur är hur vi sorterat och organiserat våra sidor i förhållande till varandra. En bra struktur gör det lätt att hitta och är användarcentrerad. Funkas jämförelse: Stadens stadsplan gör det enkelt för invånarna att hitta. Webbplatsens informationsstruktur motsvarar stadens stadsplan Vad är användarcentrering? Användarcentrering innebär att vi lever oss in i användaren situation och publicerar det användaren vill ha och behöver, på ett sånt sätt så att användaren lätt kan förstå och hitta. Vad är tillgänglighet och design för alla? Principen är att det som funkar för dem som har det lite svårare, även gör det lättare för oss alla. Om vi har en webbplats som är lätt att använda så använder fler webbplatsen. Människan är bekväm. En tillgänglig webbplats ur perspektivet Design för alla innebär att: webbplatsen uppfyller vissa tekniska krav som gör den läsbar för funktionshindrades hjälpmedel. Samma teknik gör att vi kan ansluta oss till andra avancerade tjänster. 1
att webbplatsens innehåll, både när det gäller utseende, språk, disposition av text och strukturering av innehåll m.m. kan förstås av alla (de flesta). Klassiska exempel Tycker du det är onödigt att anpassa webbplatsen till funktionshindrade? De flesta är ju ändå normala, eller? Du får själv funktionshinder i form av sämre koncentrationsförmåga när du är stressad och sämre syn efter 40. Otroligt många av oss råkar kastar om bokstäverna lite när orden blir långa osv. Här är några klassiska exempel på hjälpmedel för funktionshindrade som nästan hela befolkningen använder idag - bara för att det är lättsamt: Kulspetspennan Kaffebryggaren Fjärrkontrollen Nationell handlingsplan för handikappolitiken En handlingsplan för handikappolitiken "Från patient till medborgare" antogs år 2000 och sträcker sig fram till år 2010 och involverar alla samhällsområden. De nationella målen för handikappolitiken är: en samhällsgemenskap med mångfald som grund, att samhället utformas så att människor med funk- tionshinder i alla åldrar blir fullt delaktiga i samhällslivet, jämlikhet i levnadsvillkor för flickor och pojkar, kvinnor och män med funktionshinder. Enligt handlingsplanen ska det handikappolitiska arbetet särskilt inriktas på: att identifiera och undanröja hinder för full delaktighet i samhället för människor med funktionshinder, att förebygga och bekämpa diskriminering mot personer med funktionshinder, att ge barn, ungdomar och vuxna med funktionshinder förutsättningar för självständighet och självbestämmande. Kommunens Handikappolitiska program Sundsvalls kommuns Handikappolitiska program anger att information ska vara tillgänglig för funktionshindrade. 2
Webbplatsens grundlayout Mittspalt Grundlayouten för en vanlig undersida består av två spalter; Mittspalten och Högerspalten. Högerspalt I Mittspalten finns själva innehållet och eventuell bild. I Högerspalten måste rubrikerna E-tjänster och Kontakt alltid finnas. För Högerspalten finns också de valfria rubrikerna; Fakta och Länkar. 3
Skapa ny sida För att skapa en ny sida gör du så här: Markera den sida du vill skapa en ny sida under högerklicka - välj Ny webbsida. I den dialogruta som kommer upp ger du sidan ett namn och väljer en mall (vanligen Undersida). Mall Mallen Undersida använder du nästan alltid när du skapar en ny sida. Det är den vanligaste mallen på sundsvall.se. De inställningar som finns där för avstånd och dylikt är det som gäller för de flesta sidor. Inställningar Om du blir osäker på någon inställning på den sida du arbetar med kan du alltid skapa en ny sida bara för att kolla vad som gäller. Sidan kastar du sedan bort. Sidans namn - samma som sidrubriken Sidans namn i vänstermenyn ska vara samma som sidans sidrubrik (överst). Namnet ska vara tydligt och konkret. Får inte kunna tolkas på flera sätt. Undantagsvis kan sidrubriken vara Konsumentrådgivning i Kulturmagasinet fastän sidan måste heta Konsumentrådgivning av utrymmesskäl i vänstermenyn. Det får inte råda några tvivel om att användaren kommit rätt. Läs mer under: Rubrikernas textformat och användningsområden /Sidrubrik. Skapa flera sidor i strukturen/hjälp, jag hittar inget bra menyord! En textspalt i Mittenspalten All text i Mittenspalten ska som grundregel ligga över hela Mittenspalten, utom när den ligger bredvid en bild, enligt mallen Undersida. Se under nästa rubrik En vanlig sida. 4
En vanlig sida Här ser du den vanligaste typen av webbsida på webbplatsen sundsvall.se. Det är en sida som är gjord med mallen Undersida och har sidrubrik, ingress, bild och brödtext i Mittenspalten. I högerspalten har man valt att behålla rubrikerna Fakta och Länkar, utöver de obligatoriska rubrikerna E-tjänster och Kontakt. 5
Redigeringsläge Här ser du sidan i redigeringsläge. Den är gjord med mallen Undersida. I rutan Navigator ser du webbplatsens sidor i ett navigeringsträd. vertikal (stående) Menyn Innehåll Under Innehåll till vänster visas de två spalterna, Mittenspalt och Högerspalt, och deras moduler. Här visar jag Mittenspaltens innehåll. Mittenspalten på sidan består av fyra delar: En textmodul som heter Rubrik och innehåller sidans rubrik. En textmodul som heter Ingress och innehåller sidans ingress på max 2,5 rader. En gul layout som heter Foto. I layouten ligger ett foto ( Bild 1 ) och en fototext ( Text ). En textmodul som heter Brödtext och innehåller sidans brödtext. Den gula layouten (vertikal) + brödtexten = ett set 6
Fler bilder på sidan 1. Gör ett nytt set för varje ny bild på sidan. (Under förra rubriken kan du se vad ett set är för något.) 2. Välj om bilden ska sitta till vänster eller till höger genom att justera inställningarna för Layouten med bilden i. OBS! Det är viktigt att komma ihåg att det är Layouten du sätter inställningarna på, inte själva bilden som ligger i Layouten. Se Layouten som en byrå med lådor, där du lagt bilden i en av lådorna och fototexten i lådan nedanför. Så här gör du för att bestämma om din nya bild ska ligga till höger eller till vänster på sidan. I menyn Innehåll : Markera Layouten högerklicka egenskaper. Välj Utseende till vänster i dialogrutan. Då ser du rubriken Övrigt. Under rubriken Övrigt väljer du alternativet Flöde. Välj Flöda höger eller Flöda vänster beroende på vilken sida du vill ha bilden på. Ställ in marginaler och padding för den nya Layouten på samma värden som för bilden i sidans mall, men växla sida på inställningarna för höger och vänster om du sätter bilden till vänster istället. 7
Skapa fler sidor i strukturen Sortera sidorna i grupper som hör ihop - inte verksamhetsorganisatoriskt En bra struktur gör det lätt att hitta. Detta är det allra svåraste och det allra viktigaste. Strukturen ska nämligen vara - användarcentrerad. Utgå från företeelser, situationer eller handlingar. Vad är det användaren frågar efter och behöver (veta) i en viss situation? Du inser snart att det inte behöver vara knutet till en viss förvaltning. Vi kan som exempel utgå från situationen man befinner sig i när man vill bygga nåt. Så här gör du för att skapa en bra struktur på webbplatsen: 1. Samla information: - Användarnas behov och önskemål. Ta reda på: - vem är användaren? - i vilken situation ska användaren använda lösningen? - vilka uppgifter behöver användaren lösa? - vad tjänar användaren på användandet? - hur ska användaren interagera (vad vill vi han/hon ska göra)? - Organisationens mål och önskemål - Vad finns redan publicerat? Fördelar, nackdelar? - Vad saknas? -..men fastna inte En skiss gör det enkelt: 8
2. Gruppera vilken information hör ihop? De här grupperna hittade vi i skissen: - Bygglov - Sånt som rör tomter - Vatten och avlopp - Radon - Rivningslov - Kontaktuppgifter 3. Gruppera igen kan de grupper vi fick fram, i sin tur, grupperas ihop? Bygglov, sånt som rör tomter och rivningslov förekommer allihop endast vid någon form av byggande eller ändrande på en fastighet - det kan vi gruppera ihop och lägga under en gemensam menyrubrik till exempel Bygga och ändra. Vatten och avlopp och Radon däremot, kan vara aktuellt i många andra fall än när man bygger, så det kan vi inte lägga under Bygga och ändra. Kontaktuppgifter bör finnas på varje sida. 4. Prioritera vad används/läses/efterfrågas av många, ofta? - vad är mitt emellan? vad används/läses/efterfrågas av få, sällan? (Publiceras inte eller kastas om det redan finns.) Så här blev vår rangordning under Bygga och ändra : 1) Bygglov 2) Sånt som rör tomter 3) Rivningslov 5. Rubricera - hitta bra namn på sidor (menyrubriker). Tänk på att: - Menyrubriken ska vara konkret och gärna sånt man gör. - använda vardagliga ord och uttryck - får inte kunna tolkas på flera sätt - testa om ordet är konkret och lättförståeligt, fråga ett barn. - testa med olika personer - det är svårt att hitta rätt ord - det är viktigt att det blir rätt - Läs mer under Hjälp, jag hittar ingen bra menyrubrik! Så här rubricerade vi våra tre grupper: > Bygglov > Tomter > Rivning 9
6. Vad ska ligga under och ovanför dessa sidor? Bestäm först: - vad ska ligga under dessa sidor. - gruppera, prioritera osv Bestäm sedan: - vad ska finnas ovanför dessa sidor? (I vårt exempel bör Vatten och avlopp, Radon finnas ovanför.) - gruppera, prioritera osv Så här gjorde vi under sidan Bygglov: V Bygglov > Ansöka om bygglov > Bygga utan bygglov > Handläggare och områden > Strandskydd > Vanliga frågor Sedan gjorde vi så här ovanför sidan bygglov: V Bygga och ändra > Bygglov > Tomter > Rivning > Vatten och avlopp > Radon Bygga och ändra - fick vara på nivån ovanför Bygglov och vara den rubrik som innehåller Bygglov, Tomter och Rivning. Vatten och avlopp och Radon fick vara på samma nivå som Bygga och ändra, d.v.s. också en nivå ovanför Bygglov utan att för den skull innehålla Bygglov. Vatten och avlopp och Radon kan ju även vara aktuella i andra fall än vid byggande. Så här ser hela menystrukturen ut: > Bygga och ändra V Bygglov > Ansöka om bygglov > Bygga utan bygglov > Handläggare och områden > Strandskydd > Vanliga frågor > Tomter > Rivning > Vatten och avlopp > Radon 10
Tänk på: Lätt att hitta viktigare än att det är få klick till sidan. Överst i menyn - det som är viktigast för användaren och används/läses mest av flest, på webben. Osäker, oense eller bara ambitiös? - Gör små ovetenskapliga undersökningar. Spara tid - gör en liten undersökning Du behöver bara ställa några få frågor till 8-10 personer så får du ett tydligt mönster på hur många tänker. Det går mycket fortare än att fundera och diskutera i flera veckor på kontoret. Vilka ska jag fråga? Fråga medborgarna, absolut inte anställda i verksamheten! Du kan fråga: målgruppen som dina sidor riktar sig till. en allmängiltig grupp. Välj människor som inte är insatt i det du frågar om eller i den kommunala organisationen. Då får du verkligen fram om struktur och innehåll är tydligt, konkret och lättfattligt. Mellanstadiebarn. De är en väldigt bra grupp att testa på om man vill veta vad som är logiskt och konkret. Förstår och hittar dom så funkar det för de flesta. Mall för frågeformulär Mall för frågeformulär, hjälp och tips finns hos webbredaktören: charlotte.strandlund@sundsvall.se Fem sidor på varje nivå i menyerna syns bäst 7 (+- 2) sidor på varje menynivå rekommenderar Funka Nu. max 10 sidor i menyerna, har vi som absolut smärtgräns på sundsvall.se. Hjälp, jag hittar ingen bra menyrubrik (namn på sidan)! Om du inte hittar någon passande menyrubrik enligt principerna i lathunden, är det oftast fel tänkt i strukturen. Då måste du gå tillbaka en nivå upp i strukturen och göra om grupperingarna under! Annars blir det bara värre och värre för varje sida och nivå du skapar, i slutänden en enda röra där ingen hittar. 11
Om du har en bra struktur kan du, efter lite stötande och blötande, som regel hitta menyord som är tydliga och rättvisande. Menyrubriker ska vara: Så konkreta som möjligt testa på barn. (använd aldrig ord som Fakta, Övrigt, Information, Instruktion osv.) Entydiga kan inte tolkas på flera sätt Gärna sånt man gör. Det är lättare att fylla på med nya sidor med relaterad information under ett ord som Rivning än under Rivningslov. Under Rivningslov platsar ju endast fakta om själva rivningslovet och inte t.ex. var man slänger rivningsavfall, vad man behöver tänka på när man river osv. Anta att vi under sidan Bygglov vill vi ha en sida som ger instruktioner om hur man söker bygglov. Exempel på en bra menyrubrik: > Bygglov > Ansöka om bygglov Exempel på en dålig menyrubrik: > Bygglov > Instruktioner Gör navet och häng på relaterad information Gör först och främst en sida med lättförståelig, kort och enkel information som de flesta kan förstå. Se denna sida som ett nav. Bygg ekrar kring navet av: länkar till relaterade dokument, webbplatser, e-tjänster, fördjupningssidor, bakgrundssidor. De senare kan också ligga i vänstermenyn under din navsida. Dolda sidor i menyn Dolda sidor ska alltid ha en tillbakalänk till vänster längst ner. Kopiera tillbakalänken från en sida under Aktuelltspalten på förstasidan. Klistra in tillbakalänken i en egen textmodul, längst ner i Mittspalten på sidan du tänker dölja. Den tillbakalänken pekar alltid på föregående sida oavsett vilken det var. Dölj sedan sidan i menyn genom att: Markera sidan i navigeringsträdet- högerklicka välj Dölj i menyer. 12
Rubrikernas textformat och användningsområde Det är viktigt att använda rubrikformat till text som är rubriker. Annars förstår inte funktionshindrades hjälpmedel att det är en rubrik de läser. Formatet på en text ställer du in så här: Dubbelklicka på textmodulen så att redigeringsrutan öppnas - markera den text du vill formatera - fäll ner rullgardinsmenyn längst upp i mitten på redigeringsrutan - markera det textformat du vill ha - klicka OK. Gör inga radmatningar efter rubriker! Alla rubriker har ett automatiskt avstånd efter sig. Avståndet syns inte i texten i redigeringsrutan, utan först när du klickat OK och tittar på texten på själva sidan. Fetad brödtext ser likadan ut som Mellanrubrik/ingress men har inget automatiskt avstånd efter sig. Den kan inte heller tolkas som en rubrik av hjälpmedlen. Sidrubrik Sidrubrik är namnet på textformatet för sidans översta rubrik. Sidans översta rubrik ska vara samma som sidans namn. D.v.s. om sidan heter Bygglov i vänstermenyn (menyrubriken) så ska sidans rubrik överst på sidan också vara Bygglov och vara skriven i formatet Sidrubrik. Om namnet på sidan och sidrubriken är olika kan användaren bli förvirrad. Använd formatet sidrubrik endast och alltid överst på sidan, i en egen textmodul. Skriv korta rubriker så att inte namnen på sidorna blir långa i vänstermenyn. Stor mellanrubrik Textformatet Stor mellanrubrik är näst störst och används bara när man har behov av en tredje rubriknivå mellan Sidrubrik och Mellanrubrik/Ingress. Mellanrubrik/Ingress Textformatet Mellanrubrik/Ingress är det mest använda rubrikformatet på en sida. Används i de flesta mellanrubriker på sidan och i sidans ingress. Underrubrik Textformatet Underrubrik används ytterst sällan och bara när du har behov av en fjärde rubriknivå. Kanske främst vid publicering av texter ur formella dokument. 13
Högerspaltens innehåll E-tjänster och Kontakt måste finnas på varje sida. Övriga rubriker kan du ta bort och lägga till som du vill. Observera att du måste göra vissa justeringar om du tar bort och lägger till färgade rubriker i högerspalten. Se längre ner under Lägg till rubrik och Ta bort rubrik. Ordningen på rubrikerna ska vara följande: Fakta Skriv i formatet Brödtext. Eventuella rubriker ska vara i Mellanrubrik/ingress. Enradiga rubriker är att föredra. Tänk efter noga och var mycket sparsam med texten under Fakta. Helst bara 3-4 rader. Länkar Skriv i formatet Brödtext. En radmatning mellan varje länk - Gör det lättare att undvika att två länkar får samma länkning när man gör länkningen. Plus att det är lättare att pricka rätt med muspekaren och att ser tydligare ut. Max 10 länkar på rad. 7 (+-2) syns bäst. E-tjänster Synpunkt Sundsvalls logga ska alltid finnas under den gröna rubriken E- tjänster. Loggan ska vara länkad till Synpunkt Sundsvall. Om loggan fattas kopierar du den från en annan sida. Det gör du genom att: Gå till sidan där loggan finns I högerspalten (under Innehåll) markera bildmodulen med loggan i högerklicka kopiera. Gå tillbaka till din sida där loggan fattades - Markera Högerspalt (under Innehåll) högerklicka klistra in. Loggan hamnar sist i högerspalten så du måste flytta på den. Det gör du genom att: Markera loggans bildmodul (under Innehåll) håll ner shift (pilen) håll ner vänster musknapp på den markerade modulen och dra loggan till sin plats under rubrik e-tjänster. (Du ser ett grått streck som visar var den hamnar när du släpper musknappen.) Finns det fler e-tjänster som relaterar till det din sida handlar om? Då skriver du in länkar till dem OVANFÖR Synpunktsloggan. Glöm inte att ha en radmatning mellan varje länk. 14
Kontakt Exempel: Sundsvalls kommun 851 85 Sundsvall Telefon: 060-19 10 00 För att lägga till en kontaktperson skriver du så här: Birgitta Grahn Sundsvalls kommun 851 85 Sundsvall Telefon: 060-19 13 85 Eller: Birgitta Grahn Byggavdelningen 851 85 Sundsvall Telefon: 060-19 13 85 Fax: 060-19 12 85 Gör e-postlänk av namnet I högerspalten blir e-postlänkar med hela e-postadressen utskriven (birgitta.grahn@sundsvall.se), oftast för långa och förskjuter hela högerspalten åt vänster. Gör därför en e-postlänk av själva namnet istället och var noga med beskrivningen. Exempel 1: Birgitta Grahn Byggavdelningen 851 85 Sundsvall Besöksadress: Norrmalmsgatan 4, vån. 4 Telefon: 060-19 13 85 Fax: 060-19 12 85 E-postlänkens beskrivning: E-post: birgitta.grahn@sundsvall.se Exempel 2: Byggavdelningen 851 85 Sundsvall Telefon: 060-19 13 85 Fax: 060-19 12 85 E-postlänkens beskrivning: E-post: byggavdelningen@sundsvall.se 15
Ta bort eller lägga till färgad rubrik När du tagit bort eller lagt till en färgad rubrik i högerspalten måste du justera avståndet ovanför rubriken. Ta bort Så här gör du för att ta bort en färgad rubrik i högerspalten: Markera rubrikmodulen (under innehåll) högerklicka Ta bort. Lägga till 1. Kopiera rubriken från en annan sida. Det gör du genom att: Markera rubrikmodulen (under Innehåll) högerklicka Kopiera. 2. Klistra in rubriken på din sida. Det gör du genom att: Markera Högerspalt (under Innehåll) högerklicka klistra in. 3. Dra rubriken till sin plats. Den inklistrade rubriken hamnar sist i Högerspalten så du får dra upp den till sin plats. Det gör du genom att: Markera rubriken håll ner shift (pilen) klicka på rubriken och behåll musknappen nertryckt - dra rubriken med musen tills ett grått streck visas där du vill ha den släpp musknappen. Justera avstånd ovanför rubrikerna Kontrollera att den översta rubriken i högerspalten har 0 px marginal ovanför sig. Kontrollera att de övriga rubrikerna i högerspalten har 15 px marginal ovanför sig. Det gör du genom att: Markera rubrikmodulen (under Innehåll) högerklicka Egenskaper fyll i antalet px ovanför. 16
Länkar Genom att endast läsa det länkade ordet/orden, i t.ex. en A-Ö-lista, ska användaren kunna förstå vart länken leder. Det kallas för beskrivande länkar. Tänk på att länkar: Oftast har en tom rad ovanför och under sig. Aldrig ska finnas i löpande text. Skrivs med brödtext (ej fetad) Exempel: Stadsvision Sundsvall Så ska stadsvisionen fungera Seminarium om Stadsvisionen Undantag: e-postlänk av namn i högerspalten har inget avstånd till adressuppgifterna under. Exempel på undantaget: Birgitta Grahn Byggavdelningen 851 85 Sundsvall Vilka ord ska jag länka? Gör beskrivande länkar och ha alltid samma namn på länkar som leder till samma sida. Exempel på en beskrivande länk: Tider och lokaler för skolstart Den kan stå helt för sig själv och man kan ändå förstå vad man hittar om man klickar där. Exempel på en dålig länk: Information om tider och lokaler Tider och lokaler för vaddå? Den kan du bara förstå om du först läst igenom sidans text om skolstarten. 17
Förbjuden länkning Inga länkar i löpande text. Exempel på hur du ska länka: Läs mer om Inre Hamnens detaljplan som byggavdelningen presenterade 6 juni: Inre Hamnens detaljplan Exempel på förbjuden länkning i löpande text: Läs mer om Inre Hamnens detaljplan som byggavdelningen presenterade 6 juni. Exempel på länkar som inte är begripliga när dom står för sig själva (inte beskrivande): Läs mer här, Klicka här, här och liknande. Om såna här länkar är listade i en A-Ö-lista, eller om dom läses upp av ett hjälpmedel för funktionshindrade så finns: Läs mer under L Klicka här under K osv Länkar till förklaringar Länkar i form av en fråga funkar bra till sidor som förklarar något begrepp eller företeelse. T ex vad en detaljplan är för något. Vad är en detaljplan? För att fungera bra även i A-Ö listan bör den se ut så här: Detaljplan vad är det? Länkbeskrivningar Länkbeskrivningen är den text som visas i lilla gula skylten som kommer upp när du för muspekaren över länken (i online-läge och förhandsgranskningsläge). För att skapa en länkbeskrivning måste du fylla i en länkbeskrivningstext när du gör länken. Fyll i raden som syns längst ner i dialogrutan när du skapar en länk. Länkbeskrivningen läses upp av synskadades hjälpmedel och talsynteser. Beskrivningen kan också användas för att ge mer information om länken. Se nedanstående exempel med Socialnämndens politiker. Där lägger vi till i länkbeskrivningen att informationen finns i vårt Förtroendemannaregister. 18
Exempel på länkbeskrivningar Exempel 1: Ansökan om bygglov Länkbeskrivning: Ansökan om bygglov Exempel 2: Socialnämndens politiker Beskrivning: Socialnämndens politiker, Förtroendemannaregister Exempel 3: Vägverket Beskrivning: Vägverket Exempel 4: F-skattesedel Skatteverket Beskrivning: F-skattesedel, Skatteverket Länkar i Mittspalten Lägg länkarna efter textstycket inte i löpande text. Använd Brödtext Exempel: Industrier med särskilda risker Akzo Nobel består av flera företag som har en omfattande produktion med kemiska produkter. Företagen omfattas av lagen om åtgärder för att förebygga och begränsa följderna av allvarliga kemikalieolyckor. Därför har Akzo Nobel informerat hushållen i sin närmaste omgivning om riskerna vid företagens verksamheter. De har också informerat hushållen om arbetet med att förebygga dessa risker. Akzo Nobel information till allmänheten Länkbeskrivning: Akzo Nobel - Information till allmänheten 19
E-postlänkar i Mittspalten Exempel: Du kan e-posta bygglovshandlingarna till Birgitta Grahn på Stadsbyggnadskontoret. E-post: birgitta.grahn@sundsvall.se E-postlänkens beskrivning: E-post: birgitta.grahn@sundsvall.se Länkar i högerspalten Gör en radbrytning mellan varje länk Max 10 länkar på rad Använd Brödtext E-postlänkar i högerspalten Om du skriver ut en hel e-postadress på en rad, kan högerspalten förskjutas. På grund av högerspaltens smala bredd kan du tvingas göra e-postlänkar av namn på personer, avdelningar, nämnder o.dyl. Exempel: Birgitta Grahn Byggavdelningen 851 85 Sundsvall Besöksadress: Norrmalmsgatan 4, vån. 4 Telefon: 060-19 13 85 Fax: 060-19 12 85 E-postlänkens beskrivning: E-post: birgitta.grahn@sundsvall.se Eller: Byggnadsnämnden Sundsvalls kommun 851 85 Sundsvall E-postlänkens beskrivning: E-post: byggnadsnamnden@sundsvall.se 20
Textstycke med tillhörande länk i högerspalten Lägg länken efter textstycket, även här. (D.v.s. inga länkar i löpande text.) Exempel: Läs mer om hur ett beslut kommer till: Från idé till beslut Öppna länk i nytt fönster Alla länkar där du inte ser sidhuvudet på sundsvall.se ska öppnas i ett nytt fönster. Det vill säga länkar till dokument, blanketter, andra webbplatser och program. Tänk på att: Bocka för Öppna i nytt fönster längst ner i dialogrutan när du skapar länken. Fylla i länkbeskrivningen. SiteVision automatiskt fyller i att länkar till andra webbplatser öppnas i nytt fönster och sätter en liten symbol för detta bredvid länken. SiteVision automatiskt fyller i dokumenttyp, minnestorlek och att det öppnas i nytt fönster i länkbeskrivningen. Exempel på vad du behöver skriva i länkbeskrivningen för en länk som öppnas i nytt fönster: Avfallsplan Länkbeskrivning: Avfallsplan Eller: F-skattesedel Beskrivning: F-skattesedel, Skatteverket Länkar till pdf-dokument Lägg i första hand information direkt på webbsidan och inte som ett pdfdokument. 21
Varje gång användaren måste gå över till ett annat program gör hon en bedömning av om det är värt besväret. Större publikationer som t.ex. rapporter, ska helst ha en egen sida med en sammanfattning och därifrån en länk till pdf-filen med hela rapporten. Pdf-länkar öppnas alltid i nytt fönster. Glöm inte bocka för detta i dialogrutan när du skapar länken. SiteVision gör automatiskt en liten Pdf-symbol bredvid pdf-länken. SiteVision lägger automatiskt till filtyp, om filen öppnas i nytt fönster och hur stor filen är. Länk till Acrobat Reader finns i den grå informationsrutan längst ner i Mittenspalten. Organisera dina pdf-dokument i ett filarkiv. Lägg endast till tillfälliga dokument som snabbt blir inaktuella, på själva sidan. Kontakta webbredaktören för behörighet och utbildning. 22
Bilder Storlek på standardbild (px) Standardstorlek på en bild är 190 x 130 px. Du får absolut inte göra bilden bredare än 190 px. Kvalité på bildens utseende Kvalitén på bilden ska vara god. Den får inte vara suddig eller pixlig. Motivet ska helst vara nära och fylla bilden. Inte ett hus i mitten med massor av himmel och mark runtomkring. Motivet bör inte vara exakt i mitten, varken i höjdled eller i sidled. Det gör bilden tråkig. Bilden är roligare om det händer nåt på den Fotoformat och minnesstorlekar För redigering av foton går det utmärkt att använda en billighetsvariant av bildredigeringsprogrammet Photoshop - programmet Photoshop Elements. Det kostar bara en 1/10 av vad riktiga Photoshop kostar. Använd foton med filändelsen.jpg. En sån bild kan t.ex heta. Gifsupporter.jpg. Illustrationer, loggor och annat tecknat funkar bra i.gif. 72 pixlar/tum i upplösning för vanliga webbilder. Om du använder dig av Photoshop och alternativet Arkiv - Spara för webben, får bilden automatiskt 72 pixlars upplösning. I Photoshop kan du välja format och kvalitet på bilden och samtidigt se, längst ner till vänster i fönstret, hur många kb bilden är innan du klickar på Spara. En bra minnesstorlek på bilder på sidan 10-20 kb. 20-25 kb är max. Om du lägger ut en länk till en högupplöst bild som användaren kan ladda ner ska upplösningen vara 300 pixlar/tum. En sån bild kan vara på 1.5 MB eller liknande. INGA ANIMATIONER. D.v.s. inga rörliga tecknade bilder som blinkande pilar, hoppande gubbar o.dyl bör finnas på sundsvall.se. 23
Namngivning av bilder Inte fler än 35 tecken till bildfilens namn. Undvik å, ä och ö. Bildbeskrivningstexter s.k. Alt-taggar Bildbeskrivningen behövs bland annat för att blinda som surfar via sina hjälpmedel ska få reda på vad bilden föreställer. När du skapar en ny bildmodul eller när du dubbelklickar på en som redan finns, öppnas en dialogruta. Där hittar du fliken Inställningar. Under fliken Inställningar, i fältet Använd bildbeskrivningstext, beskriver du vad bilden föreställer. Tänk dig att du ska beskriva bilden för en som inte ser. Ange fotografens namn s.k. fotobyline Fotografens namn ska stå till vänster under bilden, inte på själva fotot. Teckenformatet är Fototext. Exempel: Eller Foto: Karl Karlsson Foto: För bilderna i de sex smårutorna på ingångssidorna, lägger vi fotografens namn i bildbeskrivningstexten som syns när vi för muspekaren över bilden. Exempel: Snöskottning, foto: Ulf Wallin 24
Bildtexter Ibland kan det vara trevligt med en liten bildtext. Exempel: Livet tar fart i Sundsvall Foto: Michael Engman Observera att man måste göra manuella radmatningar för att inte fototexten ska sticka utanför bilden och skjuta bilden inåt mitten på sidan. Om man förvanskar bilden skriver man INTE ut fotografens namn. Exempel: Foto: Fotomontage Toppbild över hela mittspalten Storleken på en toppbild överst i mittenspalten är 390 x 100 px. Du får inte variera storleken över huvud taget. Bilden kan ha ett motiv eller vara ett collage av tre bilder. Lägg bilden direkt i Mittenspalten - utan gul Layoutmodul. Lägg bilden under sidrubriken och ovanför ingressen. Fotobyline och ev. fototext lägger du endast i bildbeskrivningstexten. Bilden ska ha hög kvalité både när det gäller motiv och skärpa. Tänk på att det är effektfullare med ett nära snitt ur en bild, än med hela motivet på avstånd. Du behöver ett konstnärligt öga. Här är ett fint exempel på ett snitt ur en bild: 25
Tabeller Tabeller är besvärliga - undvik dem om möjligt. Välj andra sätt att presentera fakta. För att tabellerna ska bli tillgängliga måste du fylla i många och krångliga frågerutor som kommer upp. Om du redan har gamla tabeller så låt dem för all del vara kvar så länge, men gör helst inga nya. Bakgrundsfärg i tabellhuvudet Bakgrundsfärgen är alltid vår ljusblå färg. Den som finns i sidhuvudet på sundsvall.se. Ljusblå: R 217, G 230, B 246. Rubriktext i tabellerna ska vara Mellanrubrik/Ingress. 26
Skriva för webben Vad vill du framföra och varför? Vad är sidans huvudbudskap? Tänk igenom vad du vill framföra med sidan och varför? Vad vill du att användaren ska förstå, veta och göra? Anta att vi får order om att en detaljplan ska ut på webben och att den finns på utställning också. Är huvudbudskapet att ett nytt förslag till detaljplan kommit och att det pågår en utställning? Nja Nu får vi tänka till. Varför gör vi detta? Jo för att medborgarna ska se planförslaget för ett visst område, förstå att de kan tycka till och eventuellt komma med förslag. Framgår det i rubrik och ingress? Det räcker alltså inte att presentera planen, syftet med planen och kontaktpersoner för att locka folk att komma till utställningen och dessutom förstå att de kan tycka till. Det gäller att inte förväxla sidans huvudsyfte med själva detaljplanens huvudsyfte. Tala till läsaren i du-form Sätt läsaren i centrum, inte kommunen. Det gör man genom att skriva i du-form. Tala till mottagaren som en jämlike. Det är förutsättningen för att vi ska upplevas som öppna och trovärdiga. Det viktigaste (för användaren) ska stå först Redan i sidrubriken och ingressen ska själva huvudbudskapet med sidan framgå, vad sidan handlar om. Exempel: Sopor och återvinning Hämtning och återvinning av avfall har företaget Reko hand om. Avfallstaxor, avfallshantering, turlistor för sophämtning, återvinningscentraler och mycket mer finns på Rekos webbplats. www.rekosundsvall.com Kommunen har ansvaret Kommunerna har ansvaret för insamling och omhändertagande av hushållsavfall samt ett planeringsansvar för annat avfall. I varje kommun ska det finnas en renhållningsordning med avfallsplan och med lokala föreskrifter om avfallshanteringen. Avfallsplan för Sundsvall 27
Exempel på en disposition av texten som inte är användarcentrerad: Sopor och återvinning Kommunerna har ansvaret för insamling och omhändertagande av hushållsavfall samt ett planeringsansvar för annat avfall. I varje kommun ska det finnas en renhållningsordning med avfallsplan och med lokala föreskrifter om avfallshanteringen. Avfallsplan för Sundsvall Hämtning och återvinning av avfall har företaget Reko hand om. Avfallstaxor, avfallshantering, turlistor för sophämtning, återvinningscentraler och mycket mer finns på Rekos webbplats. www.rekosundsvall.com Bakgrund och fördjupning sist eller som länkar Bakgrund och fördjupning lägger du sist på sidan eller gärna på andra sidor eller dokument som du gör länkar till. Fördjupningssidor På sundsvall.se utgår vi från att först och främst, kort och enkelt, presentera information så att de flesta kan förstå. Dessa korta, tydliga och enkla sidor är navet kring vilket vi sedan eventuellt hänger på fördjupningssidor, bakgrundssidor, relaterade dokument, länkar, lättläst, kartor osv. På fördjupningssidor kan informationen ibland vara längre och mer specialiserad för den som är särskilt insatt och/eller vill veta mer. Skriv så att en 10-åring förstår Korta och tydliga meningar. Konkret och enkelt språk. Väldigt korta textstycken med luft mellan. Exempel 1: Detaljplanen över östra Birsta ska göra det möjligt att bygga ett nytt område för handel öster om E4 i Birsta. Det nya området blir en utvidgning av det område för handel som redan finns i Birsta väster om E4. Du bör inte skriva: Detaljplanens huvudsyfte är att möjliggöra byggande av ett handelsområde öster om E4 i Birsta - som utvidgning av befintligt handelsområde i Birsta väster om E4. 28
Exempel 2: Modersmålslärarnas arbete sker i huvudsak ute på skolorna. De undervisar tillsammans ca 550 barn på 17 olika språk. Nu kan man också vid behov ta emot barn och föräldrar i egna lokaler. Du bör inte skriva: Modersmålslärarnas arbete sker i huvudsak ute på skolorna där de tillsammans undervisar ca 550 barn på 17 olika språk, men nu kan man också vid behov ta emot barn och föräldrar i egna lokalerna. Tänk också på att inte använda ord som; möjliggöres, utföres, antogs, beslutades, genomfördes, gjordes och annat som slutar på s och gör det svårt att förstå vem som gör det hela. Utgå från handlingar och situationer Vad frågar folk efter och vad behöver de veta när dom ska utföra viss handling eller befinner sig i en viss situation? Handling = att göra nåt. T.ex. tycka till om en detaljplan, flytta till Sundsvall, söka barnomsorgsplats. Situation = att vara berörd av eller i behov av nåt. T.ex. bo i detaljplaneförslaget område, vara arbetslös, vara anhörig till åldrande föräldrar som behöver stöd osv. Ta reda på: Vad är medborgarnas vanligaste frågor? Vad behöver de dessutom få veta? Vart kan de vända sig? och se till att din sida innehåller svaren, så blir den välbesökt. Det är alltid lättare att fånga användarens intresse med något som direkt berör användaren och stimulerar eller ger råd till handling. Gör beskrivande länkar Användaren ska kunna förstå länken även om den är tagen helt ur sitt sammanhang, till exempel i en A-Ö-lista. Exempel på beskrivande länk: Tider och lokaler för skolstart Den kan stå för sig själv och ändå förstås. Läs mer under Länkar/Vilka ord ska jag länka? 29
Rubriker ska fånga huvudbudskapet Genom att bara läsa rubrikerna på din sida, ska användaren förstå vad sidan handlar om. Det gäller att fånga sidans huvudbudskap. Exempel: Detaljplan för nytt handelsområde i Birsta En detaljplan över östra Birsta ska göra det möjligt att bygga ett nytt område för handel öster om E4 i Birsta. Det nya området blir en utvidgning av det område för handel som redan finns väster om E4 i Birsta. Dålig rubrik: Information om detaljplan En detaljplan över östra Birsta ska göra det möjligt att bygga ett nytt område för handel öster om E4. Det nya området blir en utvidgning av det område för handel som redan finns väster om E4 i Birsta. Undvik ordet information, allt är ju information. Korta textstycken och många underrubriker Ha massor av luft i texterna. Nödvändigt för läsbarheten på webben. Gör nya stycken väldigt ofta. Du måste dela av texten så ofta att det ser idiotiskt ut på papper men det är då det funkar på webben. Sätt många underrubriker. Det är viktigt att underrubrikerna fångar textstyckets huvudbudskap. Genom att endast läsa rubrikerna på sidan ska användaren förstå vad sidan handlar om. Punktlista ibland En punktlista kan ibland skapa variation på sidan och göra den mer lättläst. Om punkterna innehåller mycket text måste du lägga varje punkt i en egen textmodul för att få avstånd mellan punkterna. Så här: Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. 30
Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Raberber rabarber och bär. Om det är många korta punkter på rad bör du gruppera dem tre och tre i varje textmodul. Så här: filmjölk yoghurt gräddfil crème fraische kesella grädde Undvik förkortningar Skriv ut förkortningar som till exempel och bland annat. Endast i nödfall, av till exempel utrymmesskäl i högerspalten, använder vi förkortningar som t.ex. och bl.a. INTE text och layout direkt från ett pappersdokument Du måste arbeta om materialet för att få bra läsbarhet på webben! Det blir oftast för lång och för krånglig text, fel disposition av innehållet, för långa stycken, för få underrubriker, med mera Ingen löpande fetad text i brödtexten Har du behov av att feta viktiga meningar i din text? Då har du helt enkelt missat att lägga den informationen överst på sidan. Löpande fetad brödtext återfinner vi bara i ingressen. Ingressen får inte vara mer är 2,5 rader. Fetad brödtext är svårläst på skärm. Ingressen ska göras i teckenformatet mellanrubrik/ingress och får aldrig formateras genom att manuellt feta brödtext. Inga lösblad Tänk på att din sida kan hittas ensam i en sökmotor som t ex Yahoo eller Google. Då är det viktigt att användaren förstår vad sidan handlar om ändå. 31
Lägg alltså inte ut information rakt upp och ner på en sida utan förklaringar och sammanhang (eller länkar till dessa). Några skrivregler Telefonnummer Siffror i telefonummer grupperas i första hand två och två, sedan tre och tre om det är udda antal siffror. Exempel: Telefon: 060-19 10 00, 070-244 72 11 Telefon: 060-425 10, 070-276 89 90 Faxnummer Exempel: Fax: 060-18 89 00 E-post Exempel: E-post: anna.svensson@sundsvall.se E-postlänkens beskrivning: E-post: anna.svensson@sundsvall.se Titlar: Titlar i löpande text skrivs med liten bokstav. Exempel: 1. Eva Andersson arbetar som arbetspedagog på äldreboendet Aftonsången. 2. Eva Andersson, arbetspedagog Sundsvalls kommun 851 85 Sundsvall men: 3. Eva Andersson Arbetspedagog Sundsvalls kommun 851 85 Sundsvall 32
Sifferuttryck substantivering - normalt bokstäver (en sexa gin, en tolva på tipset, trea i Vasaloppet) decimaltal - alltid siffor (34,5) bråktal - oftast siffror (1/4) måttenheter - alltid siffror (3,5 mg) numrering - alltid siffror, och (nr 1) Svenska skrivregler (Svenska språknämnden, LIBER förlag) säger så här: Tal skrivs generellt med siffror i sammanhang där just själva sifferuppgifterna är det väsentliga. Det gäller exempelvis matematisk text, tidtabeller, listor, prisuppgifter, sportreferat etc. Ju mer exakt man vill vara, desto större anledning finns det att använda siffror. Om inte sifferuppgifterna är det väsentliga med texten skrivs normalt små tal med små bokstäver och stora tal med siffror i löpande text. Någon exakt gräns för när man går över till siffror existerar inte, trots att diverse tumregler ibland kan ge det intrycket. Som en riktpunkt brukar man ange gränsen till någonstans mellan 12 och 20. Förslagsvis kan man upp till siffran tolv skriva räkneordet (tolv). För högre siffror som 13 och uppåt kan man skriva räknetalet (13). Förkortningar Vid förkortningar för måttenheter, klockslag och numrering använder man siffror. Exempel: Pumpan vägde 10 kg. Den ska vi äta kl. 11.00. Klass 2. Datum Datum skrivs på läsvänligt sätt med text Exempel: torsdag 5 juni 2006 33
Förstasidan Ettan på sundsvall.se Stora toppbilden i mittenspalten Ettans toppbild är 390 x 150 px med en svart ramlinje på 1 px. Aktuelltspalten Artiklarna i aktuelltspalten bör synas på förstasidan med 2 rader i rubriken och 2-3 rader i ingressen. Observera att detta är hur de syns på förstasidan. Det ser annorlunda ut på själva sidan för artikeln. För stort avstånd efter din artikel i aktuelltspalten Blir det ett för stort avstånd mellan din artikel och den nedanför i aktuelltspalten? Det beror på att du skrivit för många bokstäver endera i rubriken eller ingressen. Detta gör att det blir en radmatning till mellan artiklarna vilket inte ser bra ut. Skriv något enstaka tecken kortare. 34
Om lathunden Många av rekommendationerna i lathunden är hämtade från Vägledning för 24- timmarsmyndigheten (Verva, www.verva.se ), utbildningar och konsultation med Funka Nu (www.funkanu.se ) och boken Tillgängliga webbplatser i praktiken (Helena Englund, Maria Sundin, Jure förlag AB, www.jure.se ) Senaste versionen Lathunden finns på KomIn under Gemensamt / Info / Handböcker. Kontakt För frågor kontakta Charlotte Strandlund, webbredaktör, på telefon 19 22 16 eller e- post charlotte.strandlund@sundsvall.se. 35