Jeg er stadig ikke helt tilfreds med designet på bloggen. Det betyder ikke så meget at den grafiske WOW-effekt ikke er der. Det der er vigtigt for mig er at siden er nem at overskue. Det synes jeg ikke selv den er. Derfor vil jeg fortsat eksperimentere med designet indtil jeg synes den del sidder i skabet.

Den næste uges tid vil jeg tage jer med på turen i den proces jeg gennemgår hver gang jeg laver ændringer i designet.
Læs resten af dette indlæg »

Som du kan se ser bloggen lidt anderledes ud. Jeg syntes sitet trængte til lidt farve. Jeg valgte en dæmpet grøn farve og en kraftig bå farve. Derudover har jeg lavet et par små tilføjelser.

Links

Man kan nu rent faktisk se om man har klikket på et link. Jeg har ikke observeret at der har været nogen der har haft problemer med det, men efter at have tænkt over det besluttede jeg mig for at det var mere brugervenligt at man kunne se hvilke indlæg man havde læst.

Tilgengæld har jeg fjernet adskillelsen mellem navigationen og teksten. Før var der en prikket streg, nu er der ikke noget. Da jeg kiggede ned over siden synes jeg at der var en god adskillelse fra teksten alene, derfor synes jeg ikke der var behov for stregen.

Kode

Jeg har gjort layoutet flydende og afsat en lidt større andel af siden til tekst. Nu håber jeg så at undgå at kode og lister løber ud over det afsatte område. Jeg har også lavet lidt fancy formatering af code tagget. Det kan du se her.

sådan kommer tekst i code tagget til at se ud

Der er stadig et par småting jeg kigger lidt på men overordnet er jeg ganske godt tilfreds.

Yessir!!

Jeg har været i gang med det mere eller mindre siden i går. Bortset selvfølgelig fra da jeg sov og da jeg var på arbejde. Det vil altså primært sige i aftes, i toget og her til aften, men nu er det her altså. Der er runde hjørner og jeg har bibeholdt rollover effekten, men jeg har stadig prøvet at holde det rimeligt enkelt.

Men jeg skal ikke udsætte spændingen mere, her er det.

Det er ikke ekstremt avanceret, men jeg er faktisk ret glad for det. Jeg har overvejet at lave gradienter, men jeg kan faktisk godt lige det enkle farvetema.

Websikre Farver

Temaet er lavet udelukkende med websikre farver. Det betyder at jeg kan være sikker på at farverne vil blive vist ens på i alle browsere. Der er ikke brugt noget som helst javascript til det her theme. Det ser jeg som et absolut plus. Ikke at der er noget i vejen med javascript, men man skal efter min mening ikke bruge det mere end højst nødvendigt. Jeg har brugt gif billeder til hjørnerne, en meget almindelig teknik. Hvis det har interesse vil jeg meget gerne vise hvordan det gøres ved lejlighed.

Fra html til Wordpress theme

Det næste skridt er jo at lave det om til et wordpress theme. Det vil jeg bruge de næste dage på. Det er en god øvelse og da jeg sysler med tanken om en e-bog om det at lave et Wordpress Theme vil jeg gerne have en håndfuld op på siden som kan downloades.

Er der interesse for en version med gradienter? Det er ikke så svært at lave så hvis interessen er der gør jeg det gerne.

Faktisk er det den skabelon jeg har tænkt mig at arbejde ud fra i et stykke tid til forhåbentlig flere nye layouts. Det er nemlig ret praktisk at have en stabil skabelon at arbejde ud fra når jeg nu igen vil begynde på nogle mere praktiske øvelser. Du kan se et billede af skabelonen nedenunder.

Som du kan se er det en meget enkel skabelon med et meget simpelt layout og en masse “dummy” tekst. Det er selvfølgelig ikke sådan jeg regner med at det skal se ud når det er færdigt, mere om det om lidt. En lille fin detalje er når man bevæger musen over menu kassen til venstre på siden. Du kan godt nok ikke se musen på billedet. Den kommer ikke med på et screenshot. Jeg kan fortælle dig at den er over punktet Amazon, der så bytter rundt på tekst- og baggrundsfarven.

Det er en meget almindelig effekt på hjemmesider. Jeg vil også bruge den effekt mit layout, men nok ikke helt i den form der er vist her. Det er ikke noget der efter min mening er særlig godt til alle de muligheder der som regel er i en blog’s sidebar.

Min blog’s grafiske design

Det jeg rigtigt godt kan lide ved det her layout er al den plads der er til teksten. Mit nuværende layout synes jeg selv er blevet alt for smalt. Det er selvfølgelig en smagssag, men det er min mening. Til gengæld er skabelonens grafiske design jo pænt kedeligt.

Det skal peppes op!!

Jeg vil gerne afprøve nogle web 2.0 effekter. Det drejer sig i første omgang om nogle friske farver og lidt runde hjørner. Der er rigtig mange rigtig smarte ting man kunne putte ind i et design, men man skal også passe på at designet ikke kommer til at tage fokus væk fra indholdet. Når det kommer til stykket er det jo indholdet det drejer sig om.

Farve skal der til

Jeg har sådan set allerede besluttet mig for farve temaet til mit nye design. Det ser du mere til i de kommende dage, men jeg har brug for at øve mig i at lave themes. Derfor kunne jeg godt tænke mig hvis du kom med nogle forslag til farvekombinationer du godt kunne tænke dig at se.

Planen er at det gerne skal udmunde i at jeg kan give mulighed for at i kan få komme til at downloade og bruge mine themes. Altså dem af jer der har lyst, jeg vil jo helst undgå at tvinge jer til noget i ikke har lyst til.

Overskriften siger faktisk det hele. Kan det lade sig gøre at lave et multi column layout med css? Altså uden at bruge tabeller. Mit svar er at ja, det skal kunne lade sig gøre. Også uden at man er tvunget til at gå på kompromis med det grafiske design.

Hvordan gør man så? Jeg må erkende at lige nu ved jeg det faktisk ikke, men jeg nægter at give op. Det skal ganske enkelt kunne lade sig gøre.

En klar målsætning

Jeg har været i gang i et stykke tid, men hver gang jeg har fundet frem til en mulig løsning er jeg rendt ind i problemer af forskellig art. Enten har jeg været tvunget til at gå på kompromis med det grafiske design eller også har det ikke virket i alle browsere. Det er ikke godt nok. Derfor inden jeg kaster mig over udfordringen igen tror jeg det er tid til at beskrive målsætningen meget klart.

Inden for IT branchen kalder man sådan en beskrivelse for en kravspecifikation. Det er altid et meget vigtigt udgangspunkt. På den måde kan jeg sikre at det endelige resultat lever på til de krav jeg har stillet. Jeg har tidligere kaldt det design jeg arbejder på for et kode venligt design. Hvis du har lagt mærke til tidligere kode eksempler her på bloggen vil du have bemærket at der har været problemer med pladsen. Det er netop det jeg håber på at undgå med et flydende layout. Jovist, der vil stadig være nogle ting der er defineret i forhold til størrelse, men med en vis skærm opløsning, 1024 x 768 og større, burde man sjældent løbe ind i det problem med mit nye layout.

Det kode venlige layout - En kravspecifikation

Det er faktisk ret enkelt, men lad mig beskrive det i nogle få punkter.

• Et flydende layout der tilpasser sig skærm opløsningen
• To Kolonner
• En Header
• Ingen begrænsninger til de grafiske elementer
• Det skal kunne centreres

Fem enkle punkter, der alle skal opfyldes. Du må endelig ikke forveksle den her kravspecifikation med den design manual jeg lavede for et par dage siden. Kravs specifikationen er meget enklere, men samtidig også en anelse mere teknisk. Jeg kunne sagtens sammenlægge dem hvis jeg ville, men i øjeblikket føler jeg de er uafhængige af hinanden så jeg holder dem hver for sig.

Det var det for i dag, men bare rolig du kommer til at høre meget mere om det her.