Styleguide - AIK

Styleguide
WEBBPLATS FÖR
ALLMÄNNA IDROTTSKLUBBEN
Revision 2 av första utkastet från våren 2001
WEBB-GRUPPEN
HÖSTEN 2004

Innehållsförteckning
WEBBPLATS FÖR
ALLMÄNNA IDROTTSKLUBBEN
2004
INNEHÅLLSFÖRTECKNING 2
- OM DETTA DOKUMENT 3
- ANSVAR OCH MÖJLIGHETER
ALLMÄNT
- INLEDNING 3
- AIK:s GEMENSAMMA VÄRDERINGAR
- AIK:s ATTITYD 4
- MÅLGRUPP
INNEHÅLLET
- AIK:s FÖRSTASIDA 4
- TEXTER PÅ WEBBPLATSEN 5
- NYHETER PÅ WEBBPLATSEN
- UPPDATERINGAR
DESIGNSPECIFIKATIONER
- LAYOUT 6
- FRAMES
- FRAMES (Exempel) 7
- NAVIGATION
- TABELLER I OLIKA MALLAR 8
- TABELLER (Exempel) 9
- LAYOUTREGLER
- FÄRGPALETT
- FÄRGER
- BILDER 10
- TECKENSNITT 11
SCRIPTS 11
ÖVRIGT 11
- DOKUMENTARKITEKTUR
- MJUKVARUREKOMENDATIONER

Om detta dokument
Detta dokument utgör den dokumentation som beskriver design på AIK:s webbplats efter den omdesign som
genomfördes av den år 2000 tillsatta webb-gruppen, våren 2001. I dokumentet finns riktlinjer för hur AIK:s
profil bör kommuniceras, hur material som ska publiceras på AIK:s webbplats bör produceras för att följa den
grafiska profilen och anpassas till användargränssnittet, samt tekniska specifikationer för detta.
Dokumentet vänder sig i första hand till er som arbetar med bilder och texter som ska publiceras på AIK:s
webbplats och det är viktigt att ni känner till hur information och material ska produceras till webbplatsen.
Det här dokumentet gör det lättare för er att ta fram ett material som bättre är anpassat för Internet.
Ansvar och möjligheter
De regler som beskrivs syftar till att garantera att det material som publiceras håller hög kvalitet och följer
AIK:s övergripande profil i allmänhet och AIK:s profil på Internet i synnerhet. Om riktlinjerna inte följs finns
det risk för att materialet till slut spretar i olika riktningar. Avsändare och budskap blir otydliga och i värsta fall
svårförståeliga. Om det finns anledning att gå ifrån profilen bör det göras med försiktighet. Det är viktigt för AIK
att följa den grafiska profilen så långt det är möjligt!
ALLMÄNT
Inledning
En tydlig visuell identitet har till syfte att stödja varumärket. Designen på AIK:s webbplats ska stödja strävandet
mot att skapa och kommunicera en ny och modern bild av AIK hos allmänheten. Det är därför viktigt att
materialet och dess utförande på webbplatsen tar sin utgångspunkt i AIK:s attityd och genomgående håller en
mycket hög kvalitet. Här kan det vara på sin plats att påminna om AIK:s värderingar.
AIK:s gemensamma värderingar
1. AIK är en öppen klubb
Vi bedriver all verksamhet i ärlig anda och så att den tål ljus.
2. AIK är en sammanhållen klubb
Vi tar tillvara fördelarna med att vara verksam i flera idrottsgrenar samtidigt som vi uppmärksammar och
bemästrar nackdelarna.
3. AIK gör rätt för sig
Vi arbetar seriöst med de ekonomiska problemen bland annat genom att i stort som smått söka öka intäkterna
och minska kostnaderna.
4. AIK är en klubb med stil
Vi verkar för att göra den klassiska AIK-stilen liktydlig med föredömligt uppträdanden på och utanför plan.
5. AIK är en ungdomsklubb
Vi har fler unga spelare i fotboll och ishockey än någon annan svensk klubb och vidareutvecklar våra arbetsmetoder
bland AIK:s 1 000 unga spelare.
6. AIK är en jämställdhetens klubb
Vi fortsätter den framgångsrika satsningen på att ge fler kvinnor ledaruppdrag, att sammanhålla manlig och
kvinnlig ungdoms- och elitfotboll samt att bedriva bandy på svensk damelitnivå.
7. AIK ger seriös och högklassig underhållning
Vi verkar för att idrott utövas med stora inslag av artisteri i miljöer som ger publiken njutning och inspiration.
8. AIK är en demokratisk kraft
Vi fattar beslut på årsmötet enligt principen ”en medlem - en röst”, utser förtroendevalda och verkar gemensamt
för att fattade beslut förverkligas.
9. AIK arbetar med tydliga mål
Vi tydliggör för varje förtroendevald, ledare, idrottsutövare och anställd vad som förväntas av hans eller hennes
AIK-engagemang.
10. AIK tar samhällsansvar
Vi skolar människor i demokrati, bedriver friskvård i bred skala samt bekämpar aktivt varje ansats till kriminalitet,
rasism och drogmissbruk inte minst i den öppna supporterverksamheten.
3

AIK:s attityd
AIK:s attityd ska avspegla våra gemensamma värderingar i samtliga aktiviteter som AIK genomför, vilket naturligtvis
i allra högsta grad även inkluderar webbplatsen.
Målgrupp
AIK har allmänheten som generell målgrupp. Våra mest trogna besökare kommer ur alla samhälls-, ålders- och
yrkesgrupper men delar alla samma kärlek till klubben i sitt hjärta. För dessa människor gör vi webbplatsen.
Dock besöks aik.se även av andra grupper.
Media - svensk press och etermedia inhämtar idag dagligen information från webbplatsen och den har i stigande
grad accepterats som AIK:s officiella kanal ut mot media. Inte sällan ser man direkta citat från webbplatsen
i tidningarna och det får väl betraktas som den högsta formen av smicker. Av denna anledning blir det
också extra viktigt att den information som lämnas på webbplatsen alltid är korrekt och håller en hög text- och
bildkvalitet såväl som att den alltid kommunicerar en ståndpunkt som kan anses vara AIK:s.
Om och när personliga åsikter yttras, som inte nödvändigtvis behöver vara klubbens, bör detta därför klart och
tydligt anges i direkt anknytning till texten. Vidare skall aik.se, liksom AIK, å det bestämdaste ta avstånd från
alla kränkande, rasistiska och i övrigt överdrivet generaliserande åsikter.
Motståndare - andra föreningars anhängare besöker frekvent webbplatsen för att läsa AIK:s åsikter i allt från
senaste värvningen till kommentarerna efter den senaste matchen. Av samma anledningar som de under media
uppräknade bör därför webbplatsen bemöta våra motståndare med all respekt de förtjänar och aldrig förfalla till
enögd fanatism och kränkande formuleringar. Givetvis ska, och bör, vi skriva tillspetsat, underfundigt och roligt
om våra antagonister men gränsen för kränkande ton får aldrig överskridas.
INNEHÅLLET
AIK:s förstasida
På webbplatsens förstasida bör information om aktuella händelser i de olika sektionerna få ett stort utrymme.
Förstasidan ska användas som exponeringsutrymme och skyltfönster för det som precis hänt eller precis ska
hända i de olika sektionerna. Under fotbollssäsongen ligger av naturliga skäl tyngdpunkten på just fotboll
medan vintern i högre grad bör fokuseras på AIK:s hockey, bandy, innebandy och handboll.
Navigationen skall alltid vara tydlig, oavsett var någonstans man befinner sig. I detta ligger också att tala om
för besökaren var någonstans man befinner sig och hur man går tillbaka ett eller flera steg. Detta säkerställs
genom den så kallade tillbakanavigationen högst upp på varje sida.
Förstasidans högermarginal innehåller dels annonser för våra sponsorer och samarbetspartners och dels puffar
för redaktionellt material. Innehållet bör hållas samman av en enhetlig grafisk utformning och styras av de
regler som webbgruppen tagit fram för detta ändamål.
Texter på webbplatsen
Information som publiceras på AIK:s webbplats ska vara enkel och kortfattad för att intressera alla kategorier
av människor. Att det är ansträngande att läsa mycket text på skärmen gör också att informationsmängden på
övergripande sidor bör hållas nere. Däremot ska fördjupning erbjudas i massor för den verkligt intresserade.
Datorskärmens låga upplösning medför att det lätt blir ansträngande att läsa stora mängder information.
Långa texter kan vara mycket trevliga och underhållande att läsa i en tidning eller i ett magasin, men på Internet
är det viktigt att informationen användaren ska ta del av är kort, vilket också kräver att den är koncis och
kärnfull. Är informationsmängden för omfattande tröttnar användaren snabbt och väljer hellre att smita iväg
till andra webbplatser.
Hemligheten är alltså att uttrycka sig enkelt och direkt. Då är chansen större att fånga läsarens intresse.
Skriv gärna text som lätt kan delas upp i stycken. Det gör det lättare att läsa. En relativt lång text som delas
upp i flera avdelningar med mellanrubriker, bilder etc. upplevs som betydligt kortare och man kan läsa texten
i sjok, från mellanrubrik till mellanrubrik. En tumregel kan vara 150-200 ord per skärmsida. Undantag får
självklart finnas, speciellt vad gäller fördjupningssidor.
4

Några enkla regler:
• Presentation - sidor för överblick och navigation. Använd endast mycket korta texter. Rubriker, ingresser och
intresseväckare.
• Information - sidor för fördjupad information. Här kan längre texter accepteras. De bör vara anpassade för
utskrift.
• Interaktion - sidor där besökaren får tjänster utförda, t ex försäljning av årskort. Bör göras starkt faktaorienterade:
övertydlighet, pris, var-när-hur köpa?
• Skriv enkelt - AIK:s webbplats ska vara intressant att besöka för alla kategorier människor. Undvik att
använda ovårdat språk eller alltför mycket slang. Var konkret och faktabaserad, men samtidigt intresseväckande,
spirituell och rolig.
• Skriv inte - ”under konstruktion” eller liknande. Vänta hellre med att lägga ut informationen till dess den är
fullständig och korrekt. Att skriva ”under konstruktion” ger ett ofärdigt och spretigt intryck, vilket helst ska
undvikas.
• Skriv helst inte - ”klicka här”, ”klicka på länken för att…” eller liknande. Om användaren har hittat AIK:s
webbplats har hon eller han redan listat ut hur hypertextlänkar fungerar och hur länkar är markerade och sammankopplade.
Länkar till andra webbplatser skall alltid öppnas i ett nytt fönster.
Nyheter på webbplatsen
På webbplatsens förstasida samt sektionernas förstasidor finns stort utrymme avsatt för att med några enkel
rader och rubriker presentera de senaste händelserna i föreningen. Rubriker, länkpilar och eventuellt bilder
ska sedan länkas och leda direkt till den redaktionella texten i sin helhet. Nyheterna som presenteras på förstasidan
ska givetvis uppdateras så snart en ny redaktionell text finns att läsa.
Uppdateringar
AIK:s webbplats ska ständigt vara aktuell, uppdaterad och spännande. Det är därför ett måste att det material
som publiceras på webbplatsen ska uppdateras med jämna mellanrum. Nytt material ska också tillföras och
material som är inaktuellt ska givetvis tas bort.
Det går aldrig att nog poängtera hur viktigt det är att informationen håller hög kvalitet och är av senaste
datum. Inaktuell information ger inte ett seriöst intryck och besökaren förväntar sig att ett media av det här
slaget ska tillhandahålla information som är färsk.
DESIGNSPECIFIKATIONER
Skärmupplösning
Skärmytan har utformats och anpassats till 800 x 600 pixlars upplösning. Designen har anpassats till denna
upplösning med bakgrund av att statistik visar att huvuddelen av användarna har denna upplösning eller
högre. I framtiden kan detta komma att ändras eftersom den nu vanligaste upplösningen är 1024x768 pixlar
men fortfarande finns en del användare med mindre skärmar (exempelvis många mindre bärbara datorer) med
den lägre upplösningen.
Frames
Grundlayouten är uppdelad i tre ramar eller frames som illustrationen på sidan 7 visar: den översta ramen
(vars frame heter topnav), huvudramen samt den nedersta ramen (vars frame heter cookiebar).
Huvudramen är i sin tur uppdelad i två ramar: navigationsramen (vars frame heter leftnav) och huvudramen
(vars frame heter main).
Topnav - sidans huvud som ligger i topnav innehåller AIK:s emblem och en för varje sektion uppbyggd grafisk
identitet som talar om för besökaren under vilken sektion man är. Här finns också hjälpruta och en sajtkarta
för enkel navigering om man söker efter något speciellt. Sajtkartan visar en grafisk översikt över hela webb-
5

platsen i stora drag. Här återfinns framför allt de ”tabbar” som ger åtkomst till AIK:s olika sektioners startsidor
samt indikerar vilken sektion man befinner sig under. Slutligen finns här också en meny för språkval.
Cookiebar - sidans fot innehåller copyright- och kontaktinformation till den aktuella sektionen och laddas om
för varje ny sektion man navigerar till. Här finns också en epostlänk till webmaster. Den gula sidfoten ligger
alltid synlig längst ner på sidan. Dessutom innehåller sidfoten diverse script som behövs för webbplatsens
funktion.
Leftnav - navigeringen som ligger i ”leftnav” är alltså placerad i en egen frame. Den byggs upp för varje sektion
och kan därför innehålla olika menyval och länkar beroende på vilken sektions navigering som laddats.
Överst ligger en bild och en rubrik som indikerar vilken sektionsnavigering som laddats. Vissa menyval har
en pil i högerkant som visar att det finns en undernavigation som fälls ut om man klickar på menyvalet. När
musen förs över de olika menyvalen ändrar dessa färg för att ge besökaren feedback på att han eller hon faktiskt
är över ”rätt” länk. Dessutom är det snyggt...
Main - Det stora området däremellan utgör också en egen frame. I den laddas alla sidor som användaren väljer
ur navigeringen. Detta är webbplatsens huvudfönster.
Navigation
Användargränssnittet och navigationen är utvecklade efter principen att det ska vara lätt att röra sig mellan
olika delar av informationen på webbplatsen. Navigationen har samlats till ett område, till skillnad mot två
eller flera som man ibland kan se på andra webbplatser. Att samla navigationen till ett område underlättar
navigeringen för besökaren eftersom det då bara finns ett ställe att leta på. Navigationen byggs upp specifikt
för varje sektion. Exempelvis finns informationen om matchrapporter för AIK:s fotbollsherrar endast att hitta
under fotbollssektionen medan historiklänken under bandysektionen givetvis går till bandyns historiksidor.
Användaren ska lätt förstå var i strukturen hon eller han befinner sig genom att varje steg ner i strukturen
redovisas överst på varje sida. Detta är nödvändigt eftersom webbplatsen innehåller en oerhörd mängd information.
Navigationen är uppbyggd med en teknik som heter JavaScript. Varje meny består av en bild. Behöver texten
eller navigationen i menyn ändras måste alltså bilden och koden ändras. Teckensnitt och storlek finns beskrivet
längre fram i dokumentet men ändringar i navigationen bör göras av någon som är bekant med detta.
Tabeller i olika mallar
Layouten på sidorna har skapats med tabeller. Dessa tabeller skall kodas efter följande specifikationer (se
illustrationerna på sidan 7-8):
Tabellmall-1 (Allmänna sidor)
Table: 760 (110, 10, 475, 30, 135)
Tabellmall-2 (Sektionernas startsidor)
Table: 760 (110, 10, 475, 30, 135)
Tabellmall-3 (Matchreferat)
Table: 760 (110, 10, 475, 30, 135)
Vid vissa speciella tillfällen kan det tänkas att dessa tre tabellvarianter är otillräckliga. Då finns alltid möjligheten
att frångå dessa mallar, men först efter att ha konsulterat någon av de ansvariga för formen på webbplatsen
och med den yttre breddgränsen på maximalt 760 pixlar.
Layoutregler
Layouten är mycket enkel och därmed mycket flexibel och lätt att använda. Huvudregeln för sektionernas
startsidor är att bilder placeras överst i varje spalt, att brödtext placeras i spalterna och att annonser, puffar
och eventuell annan information placeras i högerspalten, längst till höger. Texten kan flöda runt frilagda bilder
som placeras i brödtexten, men bilderna ska vara helt frilagda om de placeras inne i brödtextblocket.
6

122
*
16
l e f t n a v
115
Framemall-1 (Huvudframe)
760
Tabellmall-1 (Sektionstabell)
110 10
475 30 135
l e f t n a v
s p a c e r
t o p n a v
m a i n
c o o k i e b a r
m a i n
m a i n
110 650
760
*
s p a c e r
7
r i g h t

Tabellmall-2 (Sektionstabell med två spalter)
110 10
475 30 125
l e f t n a v
s p a c e r
m a i n l e f t
225 15
225
m a i n
s p a c e r
110 650
760
m a i n r i g h t
110 10
390 30 220
l e f t n a v
s p a c e r
Tabellmall-3 (Sektionstabell för matchrapport)
m a i n
m a i n
110 650
760
s p a c e r
s p a c e r
r i g h t
8
r i g h t

På startsidan har varje sektion sin egen rubrik som alltid placeras högst upp för att indikera att texten som
följer under rubriken hör till en specifik sektion. Likadant används rubriker för olika ändamål på sektionernas
startsidor. Exempelvis används rubriken ”Matchen” när texten behandlar matchrelaterad information och
rubriken ”Laget” används på samma sätt när texten exempelvis handlar om en spelare. Om du önskar en ny
rubrik är det bara att säga till så fixar de layoutansvariga en åt dig!
Färgpalett
Färger
Den profil som AIK önskar kommunicera ska till viss del byggas upp genom ett mera genomtänkt, konsekvent
och mer generöst användande av ljusa och klara färger, vilket bidrar till att stärka den mänskliga prägeln.
Av den anledningen har svart som dominerande färg slopats och istället har tonvikten lagts på vitt som basfärg,
med blå och gula nyanser som komplement.
Färgpaletten ovan innehåller samtliga färger som används på webbplatsens grafiska element, så som knappar,
ränder, tabeller och liknande. Samtliga färger är plockade från Netscapes färgpalett med webbsäkra färger
och visas korrekt i samtliga webbläsare, med ett undantag, nämligen den AIK-gula färgen med beteckningen
#FFEE00. Denna lösning blev vi tvingade till eftersom de webbsäkra färger som fanns dåligt stämde överens
med AIK:s gula färg. Dock är avvikelserna knappt märkbara på olika plattformar och i olika webbläsare.
Nedan anges färgerna med både RGB- och Hexadecimalangivelser.
Mörk blå R: 0, G: 0, B: 102 #000066
Mellanblå R: 0, G: 0, B: 153 #000099
Gul R: 255, G: 204, B: 0 #FFCC00
AIK-gul R: 255, G: 237, B: 0 #FFEE00
Vit R: 255, G: 255, B: 255 #FFFFFF
Ljus grå R: 204, G: 204, B: 204 #CCCCCC
Ljus mellangrå R: 153, G: 153, B:153 #999999
Mellangrå R: 102, G: 102, B: 102 #666666
Mörk grå R: 51, G: 51, B: 51 #333333
Svart R: 0, G: 0, B: 0 #000000
9

Bilder
Behovet att med bilder (fotografier och grafik) illustrera föreningens olika händelser blir allt större och bör
naturligtvis prägla även kommunikationen på Internet. Således ska webbplatsen sträva mot en hög grad av
bildtänkande vilket skapas genom användning av bilder av hög kvalitet, såväl konstnärlig som teknisk.
Bilderna bör ha en modern prägel och bör samtidigt vara anpassade till Internet som medium.
Samtliga bilder ska hålla en upplösning på 72 dpi, varken mer eller mindre. För att hjälpa webbläsare med
renderingen är det viktigt att bildens höjd och bredd anges i pixlar i koden. Dessutom ska bilder alltid anges
med taggen BORDER=”0”, vilket är extraviktigt när det gäller bilder som länkas eftersom de annars får en ful
och störande ram. Vidare bör åtminstone viktiga bilder förses med en så kallad Alt-tag; information om vad
bilden föreställer för synskadade.
Bilder kan erhållas från webbgruppen samt en samarbetande bildbyrå eller fotograferas av dig själv, exempelvis
vid intervjuer. Ta dig i så fall tid att arbeta fram ett bra slutresultat innan bilden publiceras så att bildens
kvalitet motsvaras av det övriga bildmaterialet på webbplasten.
AIK har också en egen bildbank som innehåller bilder på anläggningar och spelare inom föreningen. Kontakta
någon av de webbansvariga för tillgång till dessa bilder.
Bilder på startsidorna läggs in med en maximal bredd på 225 pixlar. På referatsidorna kan den maximal bredden
ökas till 370 pixlar.
Frilagda små bilder kan med fördel läggas i brödtexten och texten kan då flöda kring dessa.
Teckensnitt
För texter i grafik, som rubriker etc används Trade Gothic Bold, (se figur 1). Är rubriken vit kan en svart skugga
läggas under för att öka kontrasten mellan bild och text. Skuggan bör inte vara större än två pixlar.
På vissa knappar och i navigeringen används LipoD i storleken 10 p (Se figur 2). Observera att detta typsnitt
ska användas utan kantutjämning, så kallad anti-aliasing.
LipoD finns att hämta på internet på följande adress: >> http://www.fountain.nu/catalogue/lipod.asp
På webbplatsen appliceras HTML-typsnitt automatiskt genom användande av StyleSheets (CSS).
För att mallen ska appliceras korrekt ska alla stycken markeras med paragraftaggar. , mellanrubriker
markeras med och stora rubriker markeras med
. Bildtexter och vissa mindre texter markeras med
Rätt teckensnitt kommer sedan att automatiskt appliceras efter mallen.
För vissa specifika sidor tillämpas speciella regler, exempelvis för Gnagis-sidorna eftersom barn behöver större
text för att kunna läsa.
10

Figur 1.
För texter som rubrik på bilder bör Trade Gothic Bold användas.
Figur 2.
På knappar och i navigeringen används Lipo D, 10 p.
Här används ingen kantutjämning (Anti-aliasing).
Figur 3.
På webbplatsen appliceras i första hand HTML-typsnittet Verdana.
Ange inte andra teckensnitt eller storlekar.
SCRIPTS
JavaScript finns på alla sidor och innehåller funktioner för att visa och navigera i menyn, öppna fönster, ladda
in rätt ramar till sektionerna etc. I scripten finns också en funktion för att se till så att man alltid får upp
framesettet, oavsett om man blir länkad direkt till en speciell sida utifrån eller inte.
ÖVRIGT
Dokumentarkitektur
Dokument ska döpas med namn som återspeglar deras innehåll och datum och placeras på logiska ställen i
strukturen.
Alla bilder ska placeras i mappar och mappen med bilder ska helst ligga på samma nivå i stukturen som det
dokument som refererar till bilderna gör.
Exempelvis bör ett dokument som innehåller matchreferatet från herrfotbollsmatchen mellan AIK och Gif
Sundsvall den 3:e april 2004 döpas till: ref_040319.html och placeras i mappen referat i mappen 2004 i
mappen fotboll.
Mjukvarurekomendationer
Allt grafisk material bearbetas i bildbehandlingsprogrammet Adobe Photoshop eller motsvarande.
Bilderna sparas i filformaten GIF (grafik) eller JPEG (grafik med skuggor eller övertoningar samt fotografier).
Uppdateringar görs helst i riktiga HTML-editorer, exempelvis BbEdit, CuteHTML eller liknande. Dessa kan
köpas eller i många fall laddas ned från Internet. Hjälp till detta finns att få från webbgruppen.
För överföringar till servern behövs ett FTP-program. Även dessa kan i många fall laddas ned från Internet.
11