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.

Följande HTML-element bör ha design

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.

  • <H1> Rubrik nivå 1
  • <H2> Rubrik nivå 2
  • <H3> Rubrik nivå 3
  • <H4> Rubrik nivå 4
  • <H5> Rubrik nivå 5
  • <H6> Rubrik nivå 6
  • <ul> Punktlista
  • <ol> Sifferlista
  • <li> Listalternativ
  • <hr> Linje
  • <table> Tabell
  • <th> Rubrikcell
  • <tr> Rad
  • <td> Cell
  • <a> Länk
  • <a name> Ska normalt skilja sig från <a href> eftersom man använder <a name> till bokmärken.
  • <p> Paragraph, Tänk på linjehöjd, avstånd före och efter.
  • <blockquote> Citat

Anpassade CSS-klasser som är vanliga

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.

Bilder

För bilder som ska placerar i Editorn är det vanligt att man skapar flera olika visningsalternativ. I dessa visningar är det redan satt avstånd från text, placering och ev. andra detaljer som man vill ha med. Vilka man väljer är självklart beroende på design. Vanliga alternativ är:

  • Bild i topp, höger
  • Bild i topp, vänster
  • Bild med ram
  • Bild med skugga

Boxar

I brödtext vill man ibland kunna markera ett avsnitt som extra viktigt genom att göra en box runt med en ev. 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.

Tabeller

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.

Mer information

Mer information om hur man gör för att få in klasserna som alternativ i editorn finns här: http://world.episerver.com/Documentation/Items/Tech-Notes/EPiServer-CMS-6/EPiServer-CMS-6-R2/TinyMCE-Developers-Guide3/