LAYOUT, med BILD, TEXT och  FORMGIVNING för nätet:

Åter till början av denna sida

Text: Lathud för webbskribenter hos myndigheter Råd till dem som gör text för internet via webbpennan, inkl nyhetsbrev Inspirerat av Johan T (journalist): Bra texter uppstår alltid ur en vilja och glädje att berätta - förmedla, inte ur kunskapen om vad ett adverbial är. All bra text börjar med valet av bra ord.  Ett ord som betyder exakt det du menar, låter bra och ger rätt associationer. Att välja ord till en text på nätet är om möjligt ännu viktigare. Stryk ned texten: Vi läser 25% långsammare på skärm än i tidning. Dessutom är vi otåliga på nätet. 79% av användare läser ej utan "skannar" texten efter vissa väntade ord. Gör sådana lämpade ord markerade, exv med fet stil. Sätt in tydliga mellanrubriker. Skriv enkelt, ej bisatser. Bildspråk är mindre lämpat för internet då det lätt missuppfattas. Undvik utslitna ord, men uppfinn gärna nya ord. Texter på nätet ska vara hälften så långa som motsvarande pappersversion.  Men tänk hellre att du slipar fram din vackraste textdiamant än att du tvingas stryka sådant läsarna skulle haft nytta av. Rubriker ska vara tydliga = "tråkiga". Nätrubriker uppträder ofta utanför sitt sammanhang.  Därför får de inte vara kluriga.  Snarare ska de ha karaktär av överskrift. Gärna viktigaste ordet först = syns bäst i sökmotorlista. Låt informationen börja med mikrosammanfattning 100 tecken efter rubriken då detta avsnitt gärna följer med till sökmotor. Därefter riktig sammanfattning. Checklista för rubrik: Vad ger det mig Täckning i texten = påstå Hellre aktiv än passiv Hellre påstående än fråga Inte lustig Hantverket: Formulera först texten, lär att skriva kort - skriv om det som det handlar om - skriv ej kronologiskt ty det blir för långt - börja med det viktiga, sedan det generella. Avsluta med stavnings- och grammatikkontroll. Ej så mycket länkar i texten. Det ska vara lättläst för otåliga - dela upp texten i allmän del, gärna en kommenterande del med personliga erfarenheter, faktaruta. Skicka vykort är bra form för notis på nätet. Personlig hörna är bra ty inget är så opersonligt som lnternet.  Våga därför träda fram och säga: "Här är jag, det här menar jag är viktigt och det här tycker jag är kul." Det ger tyngd åt sidan och skapar trovärdighet.

Åter till början av denna sida

Formgivning  Din webbplats, råd om: bästa presentation av innehållet, samt hur Din organisation bör se ut (från Rosenbads konferenscenter) Microsoft om typografi för webben Typografisida Sammanfattning efter tidningen PC+ nr 4, april 2000: God formgivning skall vara nödvändig, användbar och vacker och kan delas upp i 4 delar: text bild layout färg 1/ Text: Textlängd: Skriv lagom - inte för långt - inte för kort. Om artikeln är mer än 1000 ord lång, stycka hellre upp den i två delar. Mindre än 400 ord ger ej den informationsmängd som behövs. Skriv korta artiklar, korta stycken och korta meningar. Var flitig med mellanrubriker, max 10-25 rader mellan varje mellanrubrik. (Prova automatisk (!) textsammanfattare för längre texter på Internet här).  Teckensnitt: Ange teckensnitt eftersom användaren kan ha gjort förinställningar som ger helt fel utseende på din sida. I html 3.2 gjordes detta inne i själva html-koden, men i och med html 4.0 ska all formatering ligga i CSS. Teckensnitt kan vara linjära (exv Arial, Tahoma, Verdana, Mac: Helvetica) med jämntjocka tecken, samt antikva (exv Times, Garamond) med "fötter" = serifer och bågformer däremellan (konsoler). På grund av skärmens lägre upplösning blir antikvorna gryniga och är därför ganska opraktiska för webbruk. Läsbarheten varierar med upplösning och skärmstorlek, men teckenstorlek på 8-12 punkter kan ända vara ett gott riktmärke. För lättläst brödtext anävnd linjärt snitt. Speciellt Verdana är en bred och öppen linjär som är mycket lättläst. Den och Georgia (se rubriker nedan) kan saknas i vissa versioner av Windows. Det kan därför vara lämpligt att göra en länk på sidan till Microsoft, där Verdana kan hämtas hem fritt under adress: http://www.microsoft.com/typography/fontpack/ . För rubriker och mellanrubriker använd som kontrast antikva. Motsvarigheten till Verdana heter Georgia och lämpar sig mycket bra för teckenstorlekar över 14 punkter. Kägel och spalter: Med kägel menas radavstånd. Den ska vara teckenstorleken + 2 punkter. Spaltbredd normalt på papper 60-40 tecken för serifer som stabiliserar texten minskas till 25-50 tecken för att kompensera för linjärens lägre läsbarhet. Spaltens bredd beror naturligvis på teckenstorleken. Ett vanligt knep är att kompensera alltför breda spalter genomm att öka kägeln. Spalter över 80 tecken i bredd kan ej räddas oavsett kägel. CSS textdefinition: Definition av brödtext i CSS kan se ut så här:    p {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; text-indent: 10pt; margin-top: 0pt; margin-bottom: 0pt}  . Detta ger även indrag 10 punkter vid varje stycke . För rubrikdefinition görs rubriknivå sex (lägsta nivån) 12 punkter större än brödtexten. Öka för varje rubriknivå med 2 punkter. Det brukar räcka att använda 2-3 storleksnivåer. Följande storlekar är bra: Bildtexter: 8 pt, brödtext: 10 pt, rubrik 6: 18 pt, rubrik 5: 28 pt, rubrik 4: 46 pt. Ovanför varje rubrik ska man ha ett avstånd som motsvarar brödtextens storlek. Det skadar inte att även ha några punkters luft under rubriken. CSS-definitionen kan se ut så här:  h6  {  font-family: Georgia, "Times New Roman", Times, serif; font-size: 18 pt; font-weight: bold; margin-top: 10pt; margin-bottom: 3pt}  . Detta ger Georgia som huvudteckensnitt, finns ej detta teckensnitt hos användaren fås Times Now Roman, i 3:e hand fås Times, i 4:e hand någon annan antikva (=serif). Rubrikerna visas i fetstil. 2/ Bild: En htmlsida bör vara max 35 kbyte stor inkl bilder och andra filer.  Bakgrundsbild: Något som kan vara snyggt är att lägga en liten bild i två färger längst upp i höger hörn på en gif som är 2000x1000 px stor. Bilden blir då ej mer än 10-15 kb. 3/ Layout: Som huvudregel justeras alla element på en sida efter dess kanter eller individuellt, undvik alltså centrerad text annat än som en undantagseffekt. I html version 3.2 används tabeller för sidlayout vilket ger ett fyrkantigt utseende. Fördelar är harmoni på sidan oavsett skärmupplösning. Vanligt är flytande tabeller, exv med 1:a och 3:e spalten 200 px bred, medan mittenspalten ej får något breddmått. Därigenom får mittenspalten dynamisk bredd och skärmen blir alltid fylld. I html version 4.0 används i stället lager som kan placeras var som helst på skärmen. Fungerar perfekt på Internet Explorer 4 och 5, men med vissa problem för Netscape. 4/ Färger:  Varje färg har en ljushet som sätts mellan 0 och 100 (ibland 0 - 10) där 0 är vit och 100 är svart. Färgerna är rött, grönt, blått, samt genom additiv blandning av dessa gult (av rött + grönt), magenta (av rött + blått), cyan (av grönt + blått). Måttlig kontrast gäller för textfärg mot bakgrundsfärg. Exv är svart text på ljusgul botten lättläst, likaså mörkblå text på vit botten. Obs att länkar ofta är blåa, så om du väljer blå bakgrundsfärg så välj kontrasterande länkfärg.

Åter till början av denna sida
Åter till startsidan