2002 var inte min starka sida att skriva snygg klientsidekod utan sidorna består av ett hopkok av inline-css och tabeller. Målet nu är att helt skriva om den klientkod som systemet genererar samt till viss del ändra upplägget av serverdelarna. Optimalt vore kanske att skriva om allt från början och då utveckla helt efter exempelvis en MVC-modell, men med tanke på att det till dags datum är nergrävt över 3000 mantimmar i systemet så känns det inte allt för inspirerande att börja om på ny kula.

Denna gång kommer jag att fokusera en hel del på de administrativa delarna av systemet och eliminera dagens behov av att manuellt editera konfigurationsfiler och sätta upp filstrukturer. Tanken är att allt detta på ett enkelt sätt ska skötas via en administrationsmiljö. Dock har jag märkt att de mer avancerade användarna uppskattar möjligheten att kunna sköta mycket av arbetet direkt i filstrukturen varför fokus också kommer att vara på bakåtkompabilitet och jag kommer fortfarande att tillåta manuell editering av den numera klassiska inställningsfilen _setup.php.

Jag blev i samband med att jag började göra om layouten på systemet tipsad om Alessandro Fulcinitis sida Layout Gala som utifrån en enkel och logisk grundstruktur i XHTML visar på olika sätt att styra layouten. Jag rekommenderar skarpt att kika lite snabbt på sidan och ett bokmärke till den.  Jag efterlyser samtidigt liknande sidor. I och med en bättre användning av CSS/XHTML på sidorna kommer det också att vara möjligt att skriva nya teman till systemet och jag funderar lite löst kring att utlysa en tävling i att skapa snygga teman kring kurshemsidorna, alternativt integrerar detta som en laboration i de inledande kurserna.

Bilden ovan visar ett smakprov på hur det kan komma att se ut. Inga stora förändringar men en hel del moderniseringar. Upplägget på sidorna som det är idag har visat sig fungera mycket bra och vara logiskt så det blir inga större förändringar där. 

Så för att engagera dig som läsare, du som är eller har varit student och använt dessa sidor eller på annat sätt arbetat med systemtet. Vad skulle du vilja se för förändringar?

Regel 2) Markera alltid aktivt menyval

Bakgrund:

I princip samtliga webbapplikationer kräver någon form av navigationssystem, webben bygger trots allt på användarens möjlighet att navigera via hyperlänkar. Vad skiljer då ett bra navigationssystem från ett mindre bra? Jakob Nielsen (Nielsen, 2001:188) sammanfattar att ett navigationsgränssnitt måste besvara tre grundläggande frågor för användaren:

• Var är jag?
• Var har jag varit?
• Vart kan jag gå?

Vidare menar Nielsen att den första frågan är den viktigaste. ”Var är jag?”. Nielsen menar att för att få en förståelse för en webbsidas struktur krävs det att vi vet var i strukturen vi befinner oss.

Man måste vara medveten om att användare idag väldigt ofta dyker rakt in i vår webbapplikation ”utan att passera Gå”, det vill säga, utan att först besöka startsidan för att sedan följa en av oss utstakad väg till aktuell sida. Istället trillar användare ofta in mitt i vår applikation på grund av sökningar i sökmotorer, inlänkningar från andra webbplatser eller besök via bokmärken. Av denna anledning är det viktigt att vår webbplats tydligt förmedlar användarens aktuella position i förhållande till: (Nielsen, 2001:189)

• Webben som helhet
• Wepplatsens struktur

Den första punkten trycker på vikten av att användaren oavsett vilken undersida man är inne på, tydligt kan se vilken sajt man besöker. Något som ofta är problematiskt i frameade lösningar.

Jag ska dock fokusera denna artikel på vikten av att klargöra var användaren befinner sig i förhållande till webbplatsens struktur.

Varför markera aktivt menyval?

Det finns många fördelar med att markera aktivt menyalternativ. Först och främst så har vi redan nu klargjort vikten av att låta användaren tydligt veta var denne befinner sig för att lättare få en överblick över
webbplatsen men det finns även andra finesser med att markera menyalternativet.

Den ouppmärksamme
Om webbplatsen följer konstens alla regler och använder en enhetlig layout på samtliga sidor och dessutom är snabb för användaren att ladda in så kan effekten bli att användaren klickar på en länk i menyn men inte hinner uppfatta att innehållet laddats in. Om då inte det aktiva menyalternativen är markerade är risken stor att användaren klickar flera gånger på samma länk innan användaren uppmärksammar att man faktiskt redan bytt sida.

Den noggranne
Många användare söker systematiskt igenom webbplatsen, menyalternativ efter menyalternativ, för att hitta vad som söks. Om då aktivt menyalternativ inte är markerat i kombination med en större meny och att det inte finns något som utmärker redan besökta sidor kan användaren ha svårt att indentifiera vilket som är nästa länk i ordningen.

Den upptäckande
Användare som navigerat till den webbplats via till exempel en sökmotor har stor hjälp av att veta vilken sida som man befinner sig på i menyhierarkin. Användaren har i detta fall inte själv gjort valet av att klicka på menylänken och har därför ingen möjlighet att veta var man befinner sig.

Den handikappade
Vissa former av kognitiva funktionshinder kan leda till att användaren har svårt att navigera i tid och rum. Detta gör det extra viktigt för oss att ge användaren tydlig information om var denne befinner sig.

Bakåtsträvaren
Om en användare navigerat under en tid på din webbplats och sedan vill backa tillbaka till en sida som denne läst tidigare är det mycket lätt att följa det markerade menyalternativet i takt med att man klickar på tillbaka knappen. Givetvis är det också viktigt att använda tydliga sidtitlar så att användaren direkt kan välja en tidigare sida med avseende på dess titel, men det är en helt annan historia.

Plus många, många fler anledningar till att markera aktivt menyval…

Hur bör ett markerat menyval se ut?

Med anledningarna till att ha väl markerade menyalternativ klargjorda kan vi nu gå över och titta på hur menyvalen ska utformas.

Det viktigaste är att det aktiva menyvalet klart och tydligt skiljer sig från mängden. Jag har en svag förälskelse i flikmenyer då dessa är mycket tydliga på denna punkt. Inte bara kan man se till att färgen skiljer sig åt, man kan även skapa effekten av att aktiv flik befinner sig framför de övriga menyalternativen. Betrakta följande bild som är tagen från en kurshemsida skapad av Mats Loock:

Här råder det ingen som helst tvekan om vilken sida som användaren besöker just nu. Lite mer tvekan är det dock på undermenyn. Är användaren inne på ”Laborationsuppgifter” eller ”Stegtest”? Rätt svar i detta fall är ”Laborationsuppgifter”.

När man använder färger för att särskilja menyalternativ gäller det dock att man är uppmärksam på hur dessa färger uppfattas om i svartvitt. Alltså vilken kontrast som färgerna har i förhållande till varandra.

Betrakta följande exempel:

Här är det väldigt svårt att se skillnad på de olika färgerna när man ser dem i svartvitt medan de i färg är tydliga. Cirka 10% av männen och ett fåtal procent av kvinnorna (Surfa utan hinder) har svårt att urskilja färger på ett eller annat sätt, även kallat färgblinda. Det är därför viktigt att ha tydliga kontraster mellan alternativen. Betrakta istället följande meny:

Här ser vi att alternativen tydligt är skilda från varandra oavsett om menyn är i färg eller i svartvitt.

Hur du väljer att utforma din markering av aktivt menyval är helt upp till dig själv så länge som det är tydligt vilket val som är aktivt.

Tekniskt

Hur går man då tillväga rent tekniskt för att uppnå detta. Vanligast och helst uppnår man dessa effekter med hjälp av CSS. Typiskt gör man det genom att i sin HTML-kod tilldela aktivt menyalternativ en CSS-klass som man sedan låter överskugga övriga menyalternativ.

HTML:

<ul>
	<li><a href="sida1.html">Sida 1</a></li>
	<li><a href="sida2.html">Sida 2</a></li>
	<li class="active">Sida 3</li>
	<li><a href="sida4.html">Sida 4</a></li>
</ul>

CSS:

.active {
  background-color:#125471;
}

Observera att jag här även valt att ta bort länken från aktivt menyval. Det gör att detta menyval inte heller är klickbart om man redan besöker sidan. Bonusen här är att menyalternativet även blir markerat då man besöker sidan utan stilmallar.

Det finns andra sätt att uppnå ovanstående effekter på. Bland annat skriver Jeffery Zeldman om ett angreppssätt som lämpar sig bättre då man har dynamiskt genererat innehåll. (Zeldman 2007:268)

Källförteckning:

Nielsen, Jakob, 2001. Användbar webbdesign. Stockholm: Liber

Zeldman, Jeffery, 2007. Designing with web standards second edition. Berkeley: New Rider

Tidigare artiklar:

Regel 1) Se till att ha tydliga rätt- och felmeddelanden

CSS Naked day är, för tredje året, dagen då webbsidor visar vad de går för och helt enkelt strippar ända ner till den nakna <body>n. Är man en god webbutvecklare har man självklart redan i utvecklingsfasen testat sin sida tusentals gånger utan stilmallar, så att klä av sidan naken och visa upp sin (X)HTML-kod i all sin prakt borde vara en fröjd för alla ögon som faller på den.
För utvecklare som är skolade i gamla tabell- och framesuppbyggda lösningar blir det dock något pinsamt och man skyler sig nog gärna med en handduk eller behåller åtminstone font-attributet på.

Ett utmärkt initiativ tycker jag och hade gärna, här och nu, kastat mina stilmallar för att se vad WordPress går för. Tyvärr har jag inte den möjligheten just nu men inom en snar framtid kommer jag att byta host för att få kontroll över min blogg .

Hur som helst så uppmanar jag alla att kontinuerligt kontrollera sina webbsidor så att de är moderna och följer de riktlinjer som finns. Det gör webben till en bättre värld för oss alla, oavsett om vi är webbutvecklare, användare, funktionshindrad, en sökmotorer eller en indexeringstjänst.

Separera: Innehåll från utseende och uppförande på klienten. (XHTML separad från CSS med javascript som en krydda på det hela)

Om inte förr: www.csszengarden.com

(PS. Kan någon vettig människa förklara för mig hur man stilar om bilden ovan enligt: ”float:left; margin:5px;” i WP?)