Kom i gang.

1. Start med at beskrive formålet med det nye websted.

Når du skal beskrive formålet med det nye websted kan det måske hjælpe dig at stille spørgsmålet: "Hvilken effekt skal webstedet have på den besøgende?"
Fx: Efter at have besøgt webstedet skal den besøgende:

• blive inspireret til at lave "Ikea hacks", dvs. lave personlige og tilpassede møbler ud af Ikea standardprodukter,
• vide hvordan man i egen kommune bedst genbruger husholdningsplastik,
• dele information om hvordan man promoverer biodiversitet i tæt-bebyggede områder og få lyst til at besøge webstedet igen,
• vide at Socialistisk Folkeparti aldrig løber tør for andre folks penge så længe de sidder i opposition,
• købe mere lokalproduceret modetøj - og helst fra din webshop.
• ...

Når du kender formålet med dit nye websted og ved hvilken effekt du ønsker, at det skal have på den besøgende, så bliver det også meget lettere at forblive fokuseret i dit budskab og sikre at informationen og funktionalitet er relevant for den besøgende.
Det bliver måske også lettere at svare på det næste spørgsmål:

2. Hvem er dit publikum - hvem skal webstedet henvende sig til?

Med reference til punkt 1. så kan du måske udvide dine svar lidt på effekt-spørgsmålet, fx:

• Efter at have besøgt webstedet skal gør-det-selv folk og andre kreative sjæle blive inspireret til at lave "Ikea hacks", dvs. lave personlige og tilpassede møbler ud af Ikea standardprodukter,
• Efter at have besøgt webstedet skal borgere i Aarhus kommune vide hvordan man i egen kommune bedst genbruger husholdningsplastik,
• Efter at have besøgt webstedet skal børn, unge og miljøbevidste medborgere dele information om hvordan man promoverer biodiversitet i tæt-bebyggede områder og få lyst til at besøge webstedet igen,
• Efter at have besøgt webstedet skal ansvarsbevidste samfundsborgere og politisk interesserede unge vide at Socialistisk Folkeparti aldrig løber tør for andre folks penge så længe de sidder i opposition,
• Efter at have besøgt webstedet skal moderne og ressource- og miljøbevidste kvinder købe mere lokalproduceret modetøj - og helst fra din webshop.
• ...
   

3. Start med en analog tegning før du laver dit digitale design: 
    Tegn nogle blyantsskitser i hånden, suppler med nogle få ord, piktogrammer og ikoner på en notesblok.

 

1. Tegning: Start med at tegne en forside; layout i form af hvor teksten skal placeres, hvor billeder skal indsættes og hvad indholdet skal være (blot i stikordsform), så du får en fornemmelse af hvad du arbejder hen imod. Husk på, at dit websted formentlig vil have flere sider, så du skal ikke forsøge at få det hele med på forsiden. Men forsiden skal indeholde dit hovedbudskab. Brug også gerne ikoner eller piktogrammer til at symbolisere og/eller supplere indhold,
2. Noter: Gør nogle noter om hvilke informationer, der skal findes på de øvrige sider - suppler igen gerne med ikoner eller piktogrammer til at symbolisere indhold.
3. Sidehoveder (Headers): Overvej om alle siderne skal have samme header, eller der skal være en individuel header til alle siderne eller blot nogen af dem: Du kan kombinerer Headere, så alle sider, der omhandler et emne eller emneområde, har samme Header. Altså at Headere kan anvendes som en slags visuel kategorisering af siderne.
4. Skabeloner: Overvej om nogle af siderne layout eller indholdsmæssigt ligner hinanden så meget at det giver mening at lave en skabelon (template). Skabeloner kan være med til hurtigt at oprette sider med tilnærmelsesvis samme struktur, indhold eller layout. Hvis du laver en side, som du gerne vil bruge som skabelon for andre sider, så kan du med få klik gøre netop denne side til en skabelon. Der er ingen begrænsninger for, hvor mange skabeloner du har i systemet eller hvor mange af dem, der er aktive og kan ses direkte i Editoren.
5. Undermenuerpunkter: Hvis flere sider knytter sig til samme emne eller emneområde kan du overveje at lave direkte links til dem på navigationsmenuen, evt. som undermenupunkter, eller under-undermenupunkter.
   
    

4. Byggegrunden til etablering af nyt websted: Registrer et domæne og lej et webhotel eller sæt dit eget miljø op.

Der er nogle få grundlæggende krav til dit websted - uanset om du får det hostet på et kommercielt webhotel eller på din egen server:

1. Miljøet skal understøtte Microsoft .NET
2. Webserveren skal helst være Microsoft Internet Information Service (IIS) ver. 7 eller nyere
3. Du skal have adgang til en MySQL eller MariaDB database server og have rettigheder til at oprette en ny database (instans) til dit websted.
   
   Hvis du vælger et kommercielt webhotel, så skal du vælge en løsning med en Windows webserver.
    

5. Installer n-gen.net CMS.

Denne opgave er ret enkel og kan let gennemføres, hvis du følger installationsproceduren på denne installationsside. 

 

6. Fortsæt med fokus på sidernes Header.

Når du har installeret dit n-gen.net CMS (og du har gennemført post-installationsopgaverne), så bør du ikke straks kaste dig over din første side.  Begynd i stedet med at redigere den eksisterende standard Header (default), så den får det udtryk, som du ønsker, på din forside. Hvis du ønsker forskellige Headere på dine sider, så er der ikke noget til hinder for at lave flere Headers allerede nu. I princippet er der ingen begrænsninger i antallet af Headere, som du kan oprette, så hvis du om foråret vil have en Header med et vår-grønt farvetema og om efteråret vil have en Header med brunlige jordfarver, så kan du sagtens det. Men en side kan kun have én Header tilknytte ad gangen, mens den samme Header kan tilknyttes mange sider.

Indholdet af Headers redigeres på samme måde, som dine sider: Gennem WYSIWYG Editoren fra CKEditor. For at spare skærmplads  vises Headeren ikke når siden er i mobil-tilstand, så overvej hvilke informationer, du vil have i din Header. Helt generelt bør din Headers højde ikke overstige ca. 250 pixels. Husk på, at jo højere din Header er, jo mindre plads får du til dine (vigtige) budskaber. Prøv derfor at lave en Header på ca. 80 - 140 pixels i højden. Vær også opmærksom på, at sidens Footer optager ca. 40 - 60 pixels, afhængig af størrelsen på dit skriftsnit (font). Så hvis du har en header på 250 pixels og en Footer på 50 pixels, så går der 300 pixels fra det område hvor dit hovedbudskab skal stå. I praksis, så betyder det, at hvis du viser et maksimeret browservindue på en HD skærm, så har du brugt ca. en tredjedel af det rådige areal til Header og Footer.

Lad være med at indsætte funktionalitet eller vigtig information i din Header, som ikke kan tilgås andre steder fra, da Headeren ikke vises på de fleste mobilenheder.

 

7. Templates (skabeloner)

Med stor sandsynlighed vil nogle af dine sider have tilnærmelsesvis samme layout eller indhold. Hvis du har sider, der ligner hinanden meget giver det mening at lave en skabelon (template). Skabeloner er et værktøj til hurtigt at oprette sider med tilnærmelsesvis samme struktur, indhold eller layout. Når du har lavet en side, som du gerne vil bruge som skabelon for andre sider, så kan du med få klik gøre siden til en skabelon 0 direkte fra Editoren. Alternativt kan du anvende Template Editoren og starte forfra med en blank side skabelon.
Der er (næsten) ingen begrænsninger for, hvor mange skabeloner du har i systemet eller hvor mange af dem, der er aktive og kan ses direkte i side Editoren.

 

8. Nu er det tid til at lave siderne.

Hvis du har laver sidehoveder (headers) og skabeloner (templates),  så har
du formentlig allerede stiftet bekendtskab med WYSIWYG Editoren.
Hvis det ikke er tilfælde kan de se denne korte (engelsksprogede) video introduktion.
Brug ikke tid på at formatere tekst med skriftsnit, størrelser og farver. Og pas på med at lave dit layout med tabeller. Hvis du anvender tabeller til layout - som du sagtens kan gøøre - så sørg at sætte relave bredder på kolonnerne, så de også kan vises på mobile enheder. Fokuser i stedet for at lave indhold: Lav logisk struktur i din tekst og indsæt billeder, der understøtter dit budskab de rigtige steder. Hvis ikke dine billeder er klargjort til web (tilpasset i dimensioner og filstørrelser) så indsæt blot en beskrivende tekst hvor billedet skal være, så du senere selv ved hvad billedet/grafikken skal illustrere.
Hvis du hen ad vejen kan se at der er mange sider, der ligner hinanden enten i indhold, struktur eller layout, så kan du altid lave en skabelon - det er aldrig for sent at lave en skabelon (template) ud af en eksisterende side - det kræver kun tre klik.  

 

9. Opret navigationsmenuen. 

The navigation is essential to the visitor of your page. That is why the navigation should create a logical structure to your pages. And no information should be more the a couple of clicks or taps away from your front page.

 

10. Test dit arbejde

I takt med at du udvikler din hjemmeside bør du regelmæssigt kontrollere om den virker efter hensigten. Prøv at indlæse den på forskellige devices.
Teknisk kan du test med et værktøj du finder på her PageSpeed Insights (web.dev)