Mostly Client Side

Som navnet antyder er bloggen på engelsk. Den vil nok være lidt mere kode orienteret end hjemmesidedesign var. Fokus vil være på egne projekter og de ting der dukker op i forbindelse med mit arbejde…og så diverse andre ting. Anyway, du er velkommen til at kigge forbi.

Hvis du har læst denne blog fast så har du bemærket at der ikke er kommet nogle nye indlæg de sidste par dage. Det er fordi jeg har fået mit eget domæne. Hjemmeside Design bloggen er flyttet til http://hjemmesidedesign.com/

Jeg håber du har lyst til at følge med på den nye adresse. Bloggen på denne adresse vil ikke blive opdateret mere, men der vil dagligt ske nye ting på den nye adresse. Jeg håber vi ses dér!

Jeg skal være den første til at indrømme at jeg troede jeg havde ganske godt styr på css inden jeg gik i gang med det her projekt. Hvor tog jeg fejl! Godt nok havde jeg ingen problemer ved at bygge et fasttømret css design, der beholdt sin størrelse stort set uanset hvad brugeren gjorde for at tilpasse det. Den form for layout giver den ultimative kontrol over udtrykket, men hæmmer også læserens muligheder.

Et andet alternativ er et flydende design. Det giver fuld fleksibilitet. Layoutet tilpasser sig hele tiden browserens størrelse. Desværre betyder det også at programmøren mister kontrollen over layoutet. Designeren kan prøve at fortælle browseren hvor han som udgangspunkt gerne vil have sidens elementer placeret, men ligeså snart brugeren hiver i browseren eller skifter skærm opløsning så vil vores design ændre sig.

Den nyeste opdagelse jeg har gjort er elastisk design. Det er desværre ikke min idé, men det gør den ikke mindre genial. forestil dig at man ved hjælp af css afgør hvor de forskellige elementer skal være placeret på siden. Når brugeren ændrer vinduets størrelse så bliver elementerne det samme sted. På grund af den css kode vi har skrevet så ændrer hele designet størrelse, men det gør det på en måde så forholdet mellem elementerne altid vil være det samme. Det er da css når det er best.

Jeg må indrømme at jeg ikke helt har styr på elastisk layout endnu, men det får jeg. Jeg er igang med at arbejde videre på det html template jeg har lavet: Et Jule eventyr. Mit må er ved hjælp af css at gøre det elastisk. Jeg synes det er fantastisk med en teknologi der giver os mulighed for at have fuld kontrol over vores design samtidig med at vi giver brugeren fleksibilitet. Det kan da ikke blive meget bedre.

Fremtiden for css er lys. Vi benytter os i øjeblikket af CSS 2 og CSS 3 er under udvikling. Når vi i dag vil give vores tabeller runde hjørner gør vi det ved hjælp af grafik filer. Når version 3 bliver tilgængelig kan vi lave runde hjørner direkte i vores editor ved hjælp af koder. Jeg ser frem til den nye version og de muligheder den giver mens jeg glæder mig over de muligheder jeg allerede i dag har med css.

Jeg bryder mig ikke om programmer der skriver html koden for mig. Et af mine yndlingsprogrammer er det jeg faktisk bruger til at skrive dette indlæg. Det er et program som langt de fleste har adgang til. Det hedder notepad. Notepad er et fortræffeligt værktøj til at udvikle html kode i.

Notepad har et par enkelte mangler der gør at det ikke er optimalt. Det er rarest at have et værktøj der som minimum har det man kalder syntaks highlighting. Syntaks highlighting betyder at html koder bliver vist i en anden farve en den tekst du skriver i din html. Det er rart at have og hjælper utroligt meget til at give overblik over koden.

Der findes mange rigtig gode billige værktøjer på nettet. Mit yndlings værktøj hedder EditPlus og giver også mulighed for direkte ftp adgang til mine domæner på nettet. Jeg ved ikke om EditPlus er så meget bedre end mange af de andre programmer der findes, men det er det program jeg har vænnet mig til at bruge. Det er absolut ikke revolutionerende men det kan lige præcist det jeg ønsker i et html værktøj.

Jeg vil sige at minimumskravet bør være syntaks highlighting, men udover det behøver du faktisk ikke så meget mere i en html editor. For mange funktioner kan efter min mening være et problem. Få et enkelt værktøj og skriv din egen kode, det får du mest ud af i længden.

Det er vigtigt at vi tænker på de forskellige farvers betydning. Det er et spørgsmål om farve psykologi. Noget der ligger lidt uden for vores område. Derfor må vi søge hjælp andet steds. Det kan vi eventuelt gøre i Jørgen Carlsen’s blog om psykologi. Han har et glimrende indlæg om farve psykologi. Det kan vi udmærket tage udgangspunkt i når vi skal diskutere farver.

Farvevalget vil ofte handle om psykologi. Hvilke følelser vil skal vores web design give brugeren. Det afhænger meget af hvem vores kunde er. Hvis kunden er en bank handler det om stabilitet og pålidelighed. Hvis det til gengæld er en side til et diskotek er det nogle helt andre signaler vi skal sende. Et diskotek er et sted hvor man morer sig, hører musik, drikker og møder potentielle udkårne. Derfor vil vi med hjælp fra farve psykologien komme frem til nogle helt andre valg.

Hvilke valg vi kommer frem til vil jeg diskutere i fremtiden. Det er nemlig planen at jeg vil gennemgå hver farve en ad gangen så vi får et godt overblik over hvilke betydninger den kan have.

Jeg har netop læst en artikel på A List Apart, den er skrevet af Jeffrey Zeldman og hedder “Understanding Web Design”. Jeg må advare om at den er på engelsk, men selvom man ikke er vant til at læse på engelsk er det helt klar besværet værd at kæmpe sig igennem den.

Zeldman’s konklusioner er spændene og udfordrende, måske endda rigtige.  Som en håbefuld skaber af web designs giver artiklen håb og øger forståelsen for mediet, men den øger også presset.

Zeldman’s konklusion er at internettet som medie vil have sider der består af headers, kolonner og footers. Det skal viære at acceptere og så gøre hvad vian for at få skabt det udtryk vi gerne vil have.

Accepterer vi Zeldman’s konklusion?

Hvis svaret er ja så er vi kommet et skridt videre. Vi har accepteret at mediet vi arbejder med nu engang er som det er. Til gengæld øger det vel også presset på os. For med den accept er vi begrænset til at være innovative inden for nogle bestemte rammer.

Nærhed er et spørgsmål om at gruppere elementerne i vores layout logisk. Det er vigtigt at sørge for en sammenhæng mellem de elementer på siden der hører sammen. På hjemmesider sker det meget naturligt. Husk på at et web site er et medie i sig selv. Det kan ikke sammenlignes med aviser, brochurer, plakater eller andre medier. Den naturlige opdeling af sider på internettet vil tit være en titel, kolonner til navigation og indhold, samt evt. en footer i bunden af sitet. Det betyder at sidens elementer i forvejen vil være samlet i logiske enheder.

Hvor nærheden skaber en naturlig logisk sammenhæng mellem elementer sørger justeringen for at give sitet som helhed en sammenhæng. Det er derfor utroligt vigtigt at kigge efter de usynlige linier mellem elementerne. Ligesom der også er vigtigt at være meget bevidst om teksternes justering. Hold generelt den samme justering sitet igennem. Det er i orden eventuelt at centrere titlens justering, men lad for dine læseres skyld være med at centrere brødteksten.

Gentagelse giver den besøgende en større tryghed. Hun vil føle sig tryg ved at hun ikke er kommet til at bevæge sig uden for dit site. Det er samtidig også med til at forstærke dit brand. Gentagelse handler om skrifttyper, former og farver. Sørg for at der er en god ensartethed. Sammen med de to foregående principper vil det give dig et godt og sammenhængende layout.

Kontrasten bruger vi til at lede vores potentielle kunder i den rigtige retning. Endnu vigtigere er det dog at vi fanger kundens blik, hvis vi ikke er i stand til det vil vi helt sikkert ikke få solgt nogle af vores produkter. Det gælder om ikke at være bange af sig. Dit layout vil ikke tage skade af det så der er ingen grund til at være en forsigtigper.

Det er i virkeligheden ikke så meget der skal til. Fire principper vil sikre at du laver et bedre layout af dit web site. Det vil ikke i sig selv gøre dig til en superdesigner, men det vil sikre at du ikke ryger i de mest almindelige faldgruber.

Vi vil gerne skabe kontrast for at lede læserens øjne derhen hvor vi ønsker, men kontrast handler sådan set ikke om at bryde med de andre 3 principper. Det er et spørgsmål om at styre læsningen af vores layout. Samtidig er det også et spørgsmål om i det hele taget at få læseren til at læse vores layout.

Det gælder om at være lidt modig. Hvis man skal skabe kontrast skal man gøre det ordentligt.

På nettet vil det være oplagt at bruge kontrast til overskrifterne for rigtigt at fange opmærksomheden.

Husk at kontrast handler om farver, former, tyngde og og retninger. En lodret streg danner for eksempel kontrast til vandret tekst. Der er mange måder at skabe kontrast på. Brug det til at lede læserens opmærksomhed og hold dig ikke tilbage de steder du vælger at bruge det.

Det er klart at oplevelsen bliver påvirket af det visuelle layout, men hvis vi glemmer at få “designet” teksten til at være en del af oplevelsen går vi galt i byen. Mange steder er tekster som “Indsend” eller “Opdater” nærmest uden at tænke over det indsat på et site. Det er ikke altid at så formelle tekster passer til den oplevelse brugeren gerne skulle få.

Når vi laver et design er det en god idé at tænke lidt over teksterne på vores knapper og menupunkter. Hvis du vil læse mere om emnet er der denne her artikel på A List Apart der beskriver idéen ganske godt.

http://www.alistapart.com/articles/learntowrite

A List Apart er i øjeblikket et af mine absolutte yndlingssteder på nettet. Jeg synes der er rigtig mange fremragende artikler, der spænder alle de områder der er relateret til hjemmeside design. Det er en side jeg helt klart kan anbefale at man kigger på i ny og næ.

Et styk jule html template.

Det kan også ses online på web-construction.

Det er et ekstremt simpelt template. Det er en rød header med titlen i, en grøn sidebar der skal indeholde navigationen og et stort tekstområde i midten. Det er et flydende layout. Det vil sige at det følger med i størrelsen når du ændrer vinduets størrelse. Det fylder i øjeblikket det meste af siden, men med få ændringer kan man centrere det mere.

Jeg har testet det i firefox 2.0.0.10 og internet explorer 7. Jeg har desværre ikke en mac (i er velkomne til at donere en ) så jeg har ikke haft mulighed for at teste det dér.

Kommentarer og tips er mere end velkomne. I stedet for at prøve at lave det til et wordpress template lige med det samme vil jeg hellere gå ind i nogle af de problemer jeg løb ind i undervejs. Det vil jeg gøre de næste par dage.