Texter man så ofta glömmer att ge design

När man ska bygga en ny webbplats så är det inte helt ovanligt att man har en duktig designer med i projektet som gör fina bilder på hur webben ska se ut. Sedan tar ofta en gränssnittsprogrammerare vid och gör dessa bilder till kod och själva webbplatsen tar form. När vi kommer på utbildningen, oftast ganska nära lansering av webben så upptäcker vi väldigt ofta att man har missat att designa en hel del element. Om missen ligger i designskisser eller i själva kodningen låter jag vara osagt.

De saker som man ofta missar är de saker som ligger i editorn. Där finns ju en himla massa knappar som man som redaktör kan trycka på och alla dessa finns sällan med i några designskisser. Hur många gånger har du sett en vanlig informationssida med alla rubriknivåer, layout på bilder, tabeller m.m. För att underlätta för framtida projekt delar jag därför med mig av listan över saker som så ofta glöms bort. Ta med den till din designer nästa gång du ska göra en ny design.

I EPiServer CMS är det möjligt att ha olika CSS till olika mallar och olika editor-fält. Detta ger möjligheten att med samma sidmall ändå variera utseendet väldigt mycket. Det är viktigt att man i läser in rätt CSS till rätt Editor i CMS så att det blir en WYSIWYG-känsla för redaktören.

Det är fullt möjligt att ha flera varianter av nedanstående element om så önskas. Exempelvis en tabell som inte har ramar, medan en annan har det. Ett annat vanligt exempel är olika färger på rubriknivåer.

Allt man kan göra i CSS, kan man också ge varje redaktör möjligheten att använda. Därmed lämnar man ansvaret för innehållets utseende till redaktören, men denne gör jobbet med färdiga förslag på utseenden. Det är ett utmärkt sätt att ge flexibilitet men samtidigt hålla en genomtänkt design över hela webbplatsen.

Numer finns också flera färdiga moduler/block som man också missar att designa. Denna lista sammanfattar de flesta av dem.

I brödtext vill man ibland kunna markera ett avsnitt som extra viktigt genom att göra en box runt med en eventuall bakgrundsfärg. Man sätter detta class-värde på <p> normalt sätt. Vanliga värden att ha med är ramstorlek, ramfärg, bakgrundsfärg, avstånd från ram.

Det är vanligt att man har mer än ett (1) alternativ till färdig design på tabell. Det bör vara möjligt att lägga in en tabell helt utan layout, dvs utan ramar och färger på text och bakgrund. Det bör också vara möjligt att kunna välja på en eller flera layouter för hela tabellen, men en även för enskild rad och/eller cell.