Ny design lanserad på www.kth.se

Ny grafisk design för www.kth.se

Den nya designen har tagit avstamp utifrån enkelhet för att få den tillämpbar inom fler olika områden, neutral för att göra den tillämpbar på innehåll med olika användare, användbar och tillgänglig för att stödja så många som möjligt, standardiserad för att formen ska gå att använda i fler tjänster, responsiv för att göra den användbar i mobila enheter, modern men framförallt hållbar över tid och sist men inte minst redaktörsoberoende vilket har som syfte att stödja fler redaktörer som innehar olika kunskapsnivåer.

Generella förändringar

För att uppnå ovan nämna delar har vi generellt breddat sidan till 1228 pixlar, ändrat fonterna till Open Sans och Georgia samt ökat fontstorlekarna i samtliga element som rubriker, ingress, brödtext, puffar etc. Det sammantaget har ökat läsbarheten vilket har varit en viktig del i den nya designen.

Intranätet har också fått ett annat utseende jämfört med den externa webbplatsen för att våra besökare enklare ska kunna särskilja dessa två siter.

Mobilanpassningar och responsivitet

När det kommer till mobila enheter som mobiltelefoner och surfplattor har vi gjort ett grundligt arbete där vi har jobbat efter devisen ”mobile first”. För att skapa en bättre upplevelse som helhet har vi förbättrat navigationen, arbetat fram en tydlig grid med genomtänkta ”break points” (där sidan ändrar utseende), samt addera responsivitet bilder och fler element.

Tillgänglighet

Tillgänglighet är en viktig del av denna uppgradering och har tagit avstamp i WCAG2 som är en ny lagstiftning sedan årskiftet. Vi har använt oss av olika verktyg som Webbtillgänglighetskollen, Google Chromes plugin Tota11y samt Lighthouse som numera är inbyggt i vår utvecklingsprocess. Mer om tekniken senare för den som är intresserad av det.

Helt nytt sätt att distribuera färg och form på KTH med ”KTH Style”

För att öka kvaliteten och igenkänningen på KTH.se har vi under en tid arbetat med ett initiativ som internt kallas för KTH Style. Syftet med KTH Style är att vi på en central plats, effektivt ska kunna utveckla och underhålla vår grafiska profil. Detta för att tillgängliggöra den i fler applikationer och på så sätt höja nivån av design, användbarhet, tillgänglighet, läsbarhet, responsivitet o.s.v. men också för att förenkla det faktiska arbetet så att det lättare ska gå att få till KTH form i våra digitala miljöer på webb.

Teknisk sätt har vi gjort följande…

KTH har ett CMS som bygger upp större delen av den centrala webbplatsen och det är där merparten av arbetet har lagts tillsammans med utvecklingen av KTH Style som centralt designpaket. I CMS:et har vi byggt om alla utmallar, d.v.s. all HTML, alla stilmallar där vi har bytt ut all LESS till SASS. Vi har dessutom byggt om sid- och fragment-cache för att öka prestandan för våra besökare.

Vi har även rensat i kod och mallar som inte längre ska vara kvar men här har vi mer att göra men när vi är klara kommer förvaltningsbarheten att vara bättre och vi kommer har ett system som är mindre komplext.

Det finns mycket kvar att göra

Med detta sagt så finns det mycket kvar att göra. Dels kommer utvecklingen av KTH Style att fortsätta för att bredda dess användningsområde men också för att öka kvalitén.  Vi kommer också utöka dokumentationen för att tillämpningarna ska bli enklare att följa och förstås.

Vi har i dagarna även påbörjat utvecklingen av ett nytt KTH-tema för våra bloggar (inkl. denna som du just nu läser) i WordPress. Vi kommer ha samma fokus och ta avstamp från KTH Style med utgångspunkt när det gäller enkelhet, användbarhet, responsivitet, tillgänglighet m.m.

Sist men inte minst…

…vill jag framhäva och tacka alla som arbetat med detta. Från teknik och UX till systemspecialister och ansvariga. Tvärfunktionellt arbete med engagerade personer som besitter olika sorters kunskap kompletterar varandra väldigt bra. Detta har åter igen visat sig vara ett lyckat koncept.