Planlegging og forberedelse av XHTML/CSS malverk

Bakgrunn

Epinova lanserte ny hjemmeside på EPiServer CMS6 23. mars 2010. 50 dager før lanseringen startet vi med daglige blogg innlegg om hvordan vi gjennomførte prosjektet:

• markedsstrategi for internett, brukskvalitet og innhold for web
• hjemmesiden i forhold til andre kommunikasjonskanaler og sosiale medier
• teknisk implementering i publiseringsløsningen EPiServer

Trinn 30: Planlegging og forberedelse av XHTML/CSS malverk

Web design utviklet i PhotoShop skal være ferdig ryddet og organisert i tydelige lag. For å kunne implementeres i en pulibseringsløsning som EPiServer må designet først konverteres til vanlige HTML-sider. All definisjon av utseende legges i Cascading Style Sheets (CCS):

• plassering og størrelser på blokker, designelementer, bilder og tekst
• typografi
• bruk av grafiske filer til strukturelle elementer, listelementer, ornamentering o.l
• farger

XHTML brukes kun til å strukturere dokumentet. Og noe eksempelinnhold legges inn i HTML-filene for å gi et realistisk inntrykk av ferdig webside.
 
Denne fasen er broen mellom design og implementert publiseringsløsning. Personene som koder malverket opererer under ulike betegnelser:

• grensesnittprogrammerere
• front-end utviklere
• interaksjonsutviklere

Front-end fordi det er den del av en webserver som møter brukerne, i motsetning til systemutvikling som skjer på serversiden. 

Hvordan har designer tenkt ?

Ved mottak av et ferdig design må man vurdere om alt lar seg implementere og til hvilken kost. I vårt konkrete eksempel har vi vært deltakende i hele designprosessen og vi visste derfor nøyaktig hva vi fikk. Mye av det videre arbeidet var derfor allerede klarlagt. I godt samarbeid med designer kan vi få felles forståelse av viktige problemstillinger:

Ekspandering

Hvordan elementene skal kunne utvides? Er det f.eks gradering på farge, hva skjer da når innholdet blir lenger enn på skissen? Og hva skjer med alle elementene rundt? Brukerne skal kunne velge skriftstørrelse selv og dermed tar all tekst mer plass en det skissen viser.

Klikkbare elementer

Hva er klikkbart på siden? Dersom dette ikke er tydelig ut fra skissen, er ikke de klikkbare elementene godt nok designet. Hvordan skal elementene se ut i de ulike tilstandene?

Feilhåndtering

Hva skjer dersom bruker gjør noe feil? 

Meny

Hva skjer ved klikk på elementene i en meny, hvordan ser man hvor man er etc? Tar menyen høyde for det reelle innholdet?

Hvordan skal utvikler implementere malverket?

Det finnes mange måter å kode XHTML/CSS. Det først vi gjør i starten av html-kodingen er planlegging og diskusjon med utvikler om hvordan vi skal løse oppgavene.

Eksempler på avklaringer:

• Hvordan skal de ulike elementene brukes av redaktøre? Hvilke muligheter skal redaktøren ha?
• Hva skal kodes statisk og hva venter vi med til etter teknisk implementering? Noen elementer venter vi med slik at vi unngår dobbelarbeid.
• Hvordan løser vi innhold som er avhengig av f.eks javascrpt, flash etc? Hva skal fallback være for de brukerne som ikke har mulighet til å se det?

Det meste kristiske punktet for front-end-utviklerne er å lage noe som faktisk lar seg implementere i vår publiseringsløsning EPiServer. Vi ønsker alltid å lage våre løsninger mest mulig dynamiske slik at redaktørene får stor frihet. Med det menes ikke frihet til å endre designet, men frihet til å velge hvor mye innhold som skal være med og til dels også hvor dette skal plasseres på siden. Dette krever dynamisk malverk.
 
I denne fasen bestemmer vi oss også for hvilke nettlesere vi skal velge å støtte. Mer om dette senere.