Nytt rammeverk for nettsidene

Rammeverket er de forskjellige kodene (CSS) som styrer utseendet på nettsidene våre. Oppdateringen gjør det først lettere å følge de nyeste standardene for kode, noe som vil gjøre utvikling lettere. Det nye rammeverket vil gjøre nettsidene raskere å laste, og bidra til et lavere klimaavtrykk for nettstedet vårt.

I forbindelse med at vi bytter rammeverk har vi utnyttet muligheten til å gjøre noen justeringer i designet på nettsidene. I en overgangsperiode vil det være nettsider som ikke er like godt tilpasset det nye designet, men det er noe vi kommer til å jobbe med fremover.  Alle publisister bør også se gjennom sine sider og se hvorvidt det er ting som bør gjøres. Se en oversikt over hva du som har ansvar for nettsider kan gjøre litt lenger ned på siden. 

Her er en liten oversikt over det som er nytt: 

Menyen

Den største forandringen er nok at menyen har blir annerledes: 

• "Globalmenyen" med forskning, studier, om osv. som tidligere lå øverst på alle siderer nå flyttet til en "hamburgermeny"
• Venstremenyen som man tidligere fant på nettsider lengrer ned i strukturen, og som viser mapper på samme nivå i strukturen har blitt til en horisontal meny, som ligger under ingressen.
• I tillegg har sider fått brødsmulesti. 

Nye farger

Vi har tatt i bruk noen flere av fargene fra designmanualen: rødfargen "korall" og gønnfargen "sjøgrønn". Disse vil du hovedsakelig kunne se i bruk på kampanjebokser på forsidene. 

Se for eksempel den grønne boksen om etter- og videreutdanninger på forsiden av hiof.no

Nye bildeformat

Vi har endret bildeformatet vi bruker på nettsidene fra 4:3 til 16:9. 16:9 har mer bredde, men litt mindre høyde. 16:9 er  format som er godt tilpasset de fleste skjermer og som brukes i sosiale medier som f.eks. YouTube og Instagram.  

De anbefalte bildestørrelsene til bruk på nettsidene er også endret, siden bl.a. det å fjerne venstremeny på nettsider har frigjort mer plass. 

Se oversikt over nye bildestørrelser her

Større tekststørrelse

Vi har justert opp tekststørrelsen litt. Selv om den gamle fontstørrelsen også var innenfor kriteriene for Universell utforming er den nye varianten litt større og fetere og tydeligere å lese. 

Endringer på studieprogramforsidene

• Vi gjør noen endringer på studieprogramforsidene:
  • Faktaboks og toppbilde flyttes, tidligere lå faktaboks til høyre og toppbildet øverst, nå ligger begge to under tittel og i hovedinnholdsfeltet på siden. 
  • Ny måte å legge til kontaktinfo for studieveileder.

Ny visning av studiekatalog

• Vi har oppgradert Studiekatelogen til den nyeste versjonen i Vortex. Dette er en fellesløsning for alle institusjonene som bruker Vortex. Den inkluderer fritekstsøk og mulighet for bilder i utlistingen. 

Forsider

• Justeringer i noen instillinger for forsider og komponenter til artikler, blant annet ny utforming av forsidebokser med mulighet for å sette forskjellig bakgrunnsfarge på rader. 
• Mulighet for fullbreddebilde eller video som går helt til toppen av forsiden (denne er kun ment å brukes på hovedforsiden på engelsk og norsk, og ikke tilgjengelig på andre sider). Andre sider kan bruke en variant hvor fullbreddebilde eller video går kant i kant med toppmenyen. 

Se alle innstillinger som kan legges til i forsider og artikler her

Artikler

Den vertikale varianten av prosessveiviseren har blitt avviklet, men vi har beholdt den horisontale 5-stegs varianten. 

Faktaboks til bruk i artikler har fått seg en oppjustering.

Se alle innstillinger som kan legges til i forsider og artikler her

Samarbeidssider og konferanser

Vi har justert litt i utformingen for samarbeidssider eller konferanser som skal ha en litt  nedtonet HiØ-profil.  Dette er forbeholdt spesielle unntak hvor nettområder skal fristilles fra menyen til nettsidene, avhengig av HiØs eierskap i forhold til temaområdet. Egen veiledning for dette kommer senere. 

Endringer som kommer senere

Endringene vi gjorde i denne omgangen er som sagt bare mindre justeringer på innholdselementer vi har fra før. Senere kommer en løsning for bedre visning av utvekslingsavtalene våre. Det skal også settes i gang et arbeid med å se på nettsidene for forskergrupper og prosjekter, tidsplan for dette er ikke fastsatt. Alt dette er prosjekter som er fellesutviklingsprosjekter for de institusjonene som deltar i Vortex-samarbeidet (se neste avsnitt), hvor vi samarbeider om utvikling og deler kostnader. 

Det vil også jobbes med å få tatt nye bilder til studieprogramsider, da vi ønsker å gå bort fra de sammensatte bildestripene vi bruker i dag. En grunn til det er at disse fungerer veldig dårlig på mobil, men enda viktigere er det at vi er nødt til å bytte ut mange av bildene vi har i dag pga. GDPR og strengere krav til personvern og samtykke. 

Hva trenger du å gjøre?

Innholdet på sidene er det viktigste, og det er heldigvis akkurat som før. Husk at designelementer, bilder, bokser og lenker er der for å løfte frem eller tydeliggjøre innholdet.  Det er ingenting du må gjøre med en gang. Men under er en liste over ting det kan være lurt å sjekke og utbedre på sikt:

Menyer : innholdet i menyene er nøyaktig det samme som før. Forskjellen er at nå ligger de horisontalt. Det vil da bli mye tydeligere hvis du har mapper som vises der som kanskje ikke bør vises (f.eks. mapper med bilder, dokumenter osv. ). Skjul mapper du ikke ønsker å vise i menyen.

Engelsk: Alle nettsider har nå en knapp for å bytte mellom norsk/engelsk. Om det ikke er lagt inn lenke til engelsk innhold vil det komme en beskjed om at innholdet ikke finnes på engelsk. Om du vet at du har en engelsk versjon av en nettside, er det et eget felt hvor du kan du legge inn lenke nederst i alle artikler. Husk at alt engelsk innhold skal ligge i "English" folderen til fakultetet, instituttet osv. Engelsk innhold skal ikke ligge i den norske sidestrukturen. 

Knapper: har du brukt flere enn en av den store grønne knappen (handlingsknapp) på en side? Disse vil nå ha blitt hvite. Benytt gjerne anledningen til å endre alle boksene til vanlige lenker. Knapper er kun til for å fremheve spesielt viktige handlinger på nettsidene - hvis alt er spesielt viktig forsvinner den visuelle effekten av det. 

Vertikale "prosessveivisere" har blitt borte. Det betyr at det som står igjen nå bare er teksten. Denne kan heller endres til en vanlig liste.  Pass også på at du ikke har gjemt spesielt viktig informasjon bort i trekkspillmenyer. 

Bilder: Siden vi har endret bildeformater anbefaler vi å se om du trenger å justere bildene til nye størrelser. 

En del andre instillinger og komponenter, som f.eks. bildegalleri har blitt endret, og må oppdateres. Husk at bildegalleri først og fremst er ment til å brukes i artikler, og ikke på forsider. 

Trenger du hjelp til noe av dette, ta kontakt med din enhets publiseringsansvarlige. 

For hjelp til redigering, se Veiledninger i nettsideredigering

Vortex-samarbeidet

Vortex er også en fellesløsning som brukes av flere andre universiteter og høgskoler, hvor en del funksjonalitet utvikles ut fra felles behov i sektoren og i samarbeid mellom institusjonene. Hittil har noen av institusjonene vært på forskjellige versjoner av Vortex-rammeverket. NIH og UiA har allerede lansert nettsider på det nye rammeverket, og HiØ, HiMolde, samt Design- og arkitekturhøgskolen i Oslo lanserer på dette rammeverket i 2024, mens Høgskolen på Innlandet og UiO skal over i løpet av 2025. At alle institusjonene etterhvert er på samme rammeverk vil gjøre utviklingen rundt fellesløsninger mye lettere.