Riktlinjer för framtagning av Mallar

Det går att byga mallar med valfri form i Dynamix CMS. Vi har dock ett par rekommendationer som vi tycker man bör följa.

Separera form och innehåll

HTML är en språk för att bygga strukturerad information. W3C tycker därför att tabeller enbart skall användas för att formatara data som behöver delas upp i kolumner och rader såsom exempelvis en prislista eller telefonlista. Många gränssnittprogrammerare tycker om att använda tabeller för att bygga layouter men det finns många nackdelar med detta tillvägagångssätt. Förutom att man enligt W3C använder HTML fel så kan layouter som är tabelluppbyggda försvåra tillgången till en sida för personer med hjälpmedel såsom talsyntes eller brailleskärm.

Hur skall man då bygga en layout. Genom att använda divar som flyter på korrekt sätt i förhållande till varanda eller positionerade divar kan man lösa samtliga layouter.

Exempel gamla sättet att skapa en 3 kolumns-layout med marginaler:

  1. <table width="320" height="100" cellpadding="0" cellspacing="0">
  2. <tr>
  3. <td width="100" bgcolor="lightgreen">
  4. Left
  5. </td>
  6. <td width="10">
  7. </td>
  8. <td width="100" bgcolor="pink">
  9. Middle
  10. </td>
  11. <td width="10">
  12. </td>
  13. <td width="100" bgcolor="gray">
  14. Right
  15. </td>
  16. </tr>
  17. </table>
Left Middle Right

 

Utan tabeller:

CSS:

  1. <style type="text/css">
  2. #leftCol
  3. {
  4. float:left;
  5. width:100px;
  6. height:100px;
  7. background-color:lightgreen;
  8. }
  10. #middleCol
  11. {
  12. float:left;
  13. width:100px;
  14. height:100px;
  15. background-color:pink;
  16. margin-left:10px;
  17. }
  20. #rightCol
  21. {
  22. float:left;
  23. width:100px;
  24. height:100px;
  25. background-color:gray;
  26. margin-left:10px;
  27. }
  29. </style>

HTML:

 

  1. <div id="leftCol"></div>
  2. <div id="middleCol"></div>
  3. <div id="rightCol"></div>
Left
Middle
Right

 

XHTML 1.0

Vi rekommenderar att ni bygger era mallar på standarden XHTML1.0 med det är inget krav.

Detta innebär följande:

  • All text måste nästlas korrekt

  • Taggar och attribut i gemener

  • Alla taggar måste stängas

  • Tomma element stängs också (ex <br />)

  • Attribut alltid inom citationstecken

  • ID ersätter namn-attributet

  • Inga attribut utan inskrivet värde, dvs:

  • <input readonly> (FEL)

  • <input readonly=”readonly”> (rätt)

HTML XHTML
Compact compact="compact"
Checked checked="checked""
Declare declare="declare"
Readonly readonly="readonly"
Disabled disabled="disabled"
Selected selected="selected"
Defer defer="defer"
Ismap ismap="ismap"
Nohref nohref="nohref"
Noshade noshade="noshade"
Nowrap nowrap="nowrap"
Multiple multiple="multiple"
Noresize noresize="noresize"

XHTML - mimimumkod

  1. <!DOCTYPE Doctype goes here>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Title goes here</title>
  5. </head>
  6. <body>
  7. Body text goes here
  8. </body>
  9. </html>

Exempel på doctype:

  1. <!DOCTYPE html PUBLIC
  2. "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 Se till så era egna innehållstyper klarar validering från http://validator.w3.org

Om mallarna innehåller speciallogik baserat på nivå i navigation etc så bör ni se över så att mallar klarar av att placeras på valfri nivå i webblösningen. En mallsida bör inte generera felmeddelanden för att någon redaktör råkar flytta eller kopiera in den på en annan nivå.

Utskrift

Skapa speciella CSS-stilar för utskrift. Undvik att ta fram specifika mallar för utskrift. Om du gör det se till så att sökmotorer inte följer dessa så ni i praktiken får flera sidor som har samma innehåll vilket kan medföra sämre indexering hos sökmotorerna.

Teckenkodning

Använd UTF8 som teckenkodning för dina filer.