I designarbejdet forbundet med at udvikle en hjemmeside, er det vigtigt at gøre sig nogle overvejelser over hvilken optimale skærmstørrelse man designer til, da dette har konsekvens for den efterfølgende kodning, og for hvorledes siden vil tage sig ud for modtageren. Disse overvejelser bør tage udgangspunkt i statistik datamateriale vdr. Gængse skærmstørrelser, mest benyttede browsere, mm. samt i en analyse af den målgruppe ens hjemmeside henvender sig til (professionelle, det offentlige, designere, mm). Eksempelvis kan man i fald man udarbejder en side der henvender sig til designere, arkitekter mm antage at skærme med høj opløsning er udbredte, og kode derefter. Man bør samtidig have in mente, at slutbrugeren uafhængigt af skærmstørrelse kan indstille den benyttede browsers vindue så den matcher deres personlige præferencer maksimeret, smal, mm. De retningslinjer man designer efter er således og i sidste ende kun vejledende, men har til sigte at sikre slutbrugeren den mest komfortable, brugervenlige og / eller æstetiske oplevelse. Da browser vinduers maksimale størrelse er betinget af den skærmstørrelse de bliver vist på, kan man benytte standard skærmopløsninger til at gisne om den størrelse ens hjemmeside forventeligt vil blive vist med. Dette er ifølge webdesigner Jennifer N. Robbins særligt tilfældet for computere med Windows OS, da browservinduet her typisk er maksimeret til at fylde hele skærmen 1. De fleste kommercielle hjemmesider er designet til at blive vist på en skærm med en opløsning på 800x600 pixels, hvilket for år tilbage var standard skærmopløsning. Tendensen er imidlertid at skærme udvikler sig i retning af større opløsning og andre formater end tidligere (bredskærmsformat). Ifølge Jennifer N. Robbins var skærmstørrelsen 1024x768 den mest udbredte i nov. 2006. Det formodes at tendensen fortsætter, hvorfor det giver mening, at designe ud fra netop denne skærmopløsning. Det bør imidlertid haves i tankerne at designet løbende skal revideres for at matche de aktuelle skærmstørrelser / -opløsninger. Valget af denne skærmstørrelse bestyrkes endvidere ud fra den betragtning, at den målgruppe vi designer til Foreningens Nydanskers medlemmer primært tilhører 1 Robbins, Jennifer N.: Learning Web Design, s. 41
den private sektor og/eller de offentlige myndigheder, som man må formode er udstyret med opdateret edb-udstyr herunder skærme med høj opløsning. Man bør efter valget af den skærmopløsning man designer sin hjemmeside til huske på, at det skærmområde man reelt har til rådighed er en anelse mindre. Jennifer N. Robbins betegner det tilgængelige skærmområde som canvas eller lærred. Lærredets dimensioner refererer til det reelle rum der er tilbage i browseren, når man subtraherer faktorer som operativsystemets menulinje samt linjen med browserens kontrolknapper og scrollbarʼen. Robbins angiver det tilgængelige skærmområde (lærredet) på en standard skærm med en opløsning på 1024x768 på et Windows-baseret system, hvor Internet Explorer 6 benyttes til at være 1004 x 597 px. Det nævnes, at dette var den da mest populære og udbredte platform/browser kombination, hvorfor det er hensigtsmæssigt at designe derefter. I tilfælde af, at lærredets størrelse ændrer sig signifikant ved brug af Internet Explorer 7, og i takt med at brugen af denne browser udbredes, bør der tages højde for dette i designet. Det formodes at Microsoft Windows er det mest udbredte styresystem hos vores målgruppe idet større virksomheder og offentlige institutioner ofte tilkøber netop denne IT løsning. Endvidere antages det at IE er den mest anvendte browser, idet IT systemerne hos vores målgruppe ofte er låste og styret at IT afdelinger, hvorfor der som regel ikke kan installeres anden software herunder andre browsere. På baggrund af ovenstående betragtninger har vi valgt at redesigne FNʼs hjemmeside til en forventet skærmstørrelse på 1024 x 768 px, hvilket betyder at vi reelt designer til en lærredstørrelse på 1004 x 597 px. TYPOGRAFISKE BETRAGTNINGER En stor del af vores side, kommer til at bestå af tekstmateriale og en stor del af vores design kommer derfor også til at tegne sig gennem vores typografiske valg. Typografien har både en sproglig og en visuel funktion. Den skal mere en bare at være læsbar. Typografien skal understøtte sidens visuelle profil og informationsarkitekturen ved at tegne et skarpt visuelt hierarki, der gør det muligt for brugeren at identificere og adskille
forskellige typer af indhold efter emne og relevans. Skrevet kort skal vores valg af typografi skabe en klar visuel logik. I udformningen af teksten bør man have både læsbarheden, der beskriver hvor vanskelig teksten i sig selv er at læse (udtrykkes gennem læsbarhedsindekset lix) og læseligheden, der udtrykker den visuelle oplevelse af den typografiske opsætning. Det sidste giver læseren et indtryk af tekstens tilgængelighed. Til grund for vores valg og overvejelser må vi lægge både videnskabelige undersøgelser mht. læsbarhed, tekniske overvejelser mht. browser-teknologi og overvejelser over hvilke signaler typografien sender i forhold til vores afsender og målgruppe. Vores forside kommer til at indeholder flere elementer, som typografien kan være med til at adskille. Derudover kan typografien hjælpe os til at differentiere vores kommunikation til de tre forskellige målgrupper. Den konkrete typografi må selvfølgeligt udarbejdes og afprøves i det konkrete design, men nogle af de aspekter, man bør holde for øje, gennemgår jeg i det følgende. Skriftfamilie Hvilken familie skal man vælge? Serif, sans-serif, oldstyle eller modern? Der er nok at vælge imellem. Vores udgangspunkt er imidlertid at den skal være let at læse på en skærm, og at den skal findes blandt standardfamilierne på de gængse styresystemer. Derudover bruger foreningen selv skriftfamilien Meta i deres logo og trykte materiale (nyhedsbrevet). Vores valg af skriftfamilie skal således findes ud fra disse tre parametre. I forhold til at den skal passe til skærmen ligger det lige for med en sans-serif, da skærme med lavere opløsning kan have svært ved at tegne fødderne ordentligt. Derudover er det oplagt at vælge en sans-serif der også er designet med skærmen for øje. Her er de tre oplagte muligheder, Verdana, Tahoma og Trebuchet. Tahomas typer kan være en anelse for sammenknebne, således at større mængder tekst kan være vanskelige at læse. Hvis valget så står mellem Verdana og Trebuchet er sidstnævnte klart mest harmonis i forhold til Meta som anvendes i logoet. De har en især det åbne lille 'g' tilfælles. Derudover er Verdana efterhånden den allermest brugte skriftfamilie på nettet, hvorfor det kan være hensigtsmæssigt at forsøge at skille sig en smule ud. Derudover er knibningen ved Trebuchet en smule mindre end Verdana (om end ikke så stor som Tahoma), hvilket gør den en smule mere elegant (se eksempler nederst i dokumentet). Umiddelbart peger det således på Trebuchet til brødtekst og Meta til faste elementer som titler, overskrifter menuer o.l. Da Meta ikke er en standardfont bør de sættes ind med billeder. Skriftgrad og linjeafstand
Med hensyn til størrelsen på skriften (graden) og linjeafstanden viser undersøgelser, at de fleste finder det lettest at læse en skriftgrad 11 pt med en afstand på 13 pt (Webstyleguide kap. 8). Det er imidlertid i høj grad op til browseren, hvordan graden og afstanden bliver vist. Man kan således selv eksempelvis forstørre sin skriftgran til 15 pt. og har man så en fast afstand på 13, kommer linjerne til at overlappe hinanden. Grad og afstand bør derfor bestemmes med relative værdier. Grundlinje Man bør sørge for at al tekst på siden følger samme grundlinje således, at teksten i forskellige bokse eller kolonner ikke 'hopper' i forhold til hinanden. Knibning og Spatiering (mellemrummet mellem bogstaver) I og med at mellemrummet mellem bogstaverne i Trebuchet er ikke så stort ved eksempelvis Verdana kan man godt arbejde med, at øge mellemrummet (spatiere) visse steder for at ændre karakteren på skriften. Det kan eksempelvis bruges til at fremhæve teksten centrale steder. Afsnitsafstand Mellemrum mellem afsnit fungerer bedre end indryk på skærme. Justering Både brødtekst og overskrifter bør venstrestilles for at holde en harmonisk orden på siden. Lige marginer er vanskeligt at arbejde med, da man ikke kan arbejde effektivt med orddeling i browseren. Kolonner Bredden på kolonnerne eller tekstbokse har betydning for, hvor mange anslag teksten har per linje, og i tilrettelæggelsen af den må man igen tage browserindstillingerne med i betragtning. På skrift er det optimale antal af anslag per linje omkring de 65, men på skærmen er det en smule mindre omkring 50 anslag. Med en kolonnebredde på 365 px opnår man ca 50 anslag ved browserens standard skriftgrad. Funktionelle ændringer Når man designer til nettet åbner der sig nye muligheder for typografien. Typografien behøver således ikke at være lige så statisk som ved trykte medier. I den forbindelse skal man også overveje, hvorledes vi eksempelvis fremhæver links før og efter. Eksempler: Obs. de kan ikke læses.
Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Der kan afsluttes uden løse ender, og de kan optimeres fra oven af at formidles stort uden brug fra presse. I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Vi flotter med et hold, der vil rundt og se sig om i byen. Det gør heller ikke mere. Men hvor vi nu overbringer denne størrelse til det den handler om, så kan der fortælles op til 3 gange. - ARIAL Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Der kan afsluttes uden løse ender, og de kan optimeres fra oven af at formidles stort uden brug fra presse. I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Vi flotter med et hold, der vil rundt og se sig om i byen. Det gør heller ikke mere. Men hvor vi nu overbringer denne størrelse til det den handler om, så kan der fortælles op til 3 gange. - TREBUCHET Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Der kan afsluttes uden løse ender, og de kan optimeres fra oven af at formidles stort uden brug fra presse. I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Vi flotter med et hold, der vil rundt og se sig om i byen. Det gør heller ikke mere. Men hvor vi nu overbringer denne størrelse til det den handler om, så kan der fortælles op til 3 gange. - VERDANA Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Der kan afsluttes uden løse ender, og de kan optimeres fra oven af at formidles stort uden brug fra presse. I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Vi flotter med et hold, der vil rundt og se sig om i byen. Det gør heller ikke mere. Men hvor vi nu overbringer denne størrelse til det den handler om, så kan der fortælles op til 3 gange. - TAHOMA Farvevalg Som udgangspunkt har vi valgt nogle af de farver som Nydansker bruger i forvejen. Vi har valgt at bruge en rød header med piktogrammer og tekst der er hvid. Den røde er en af de varme farver der kan bruges til at fange blikket med det samme. Derudover er den røde og hvide farve også et symbol på Dannebrog. Som baggrundsfarve i containeren bruger vi den grå blå farve som også er på foreningens nuværende hjemmeside. Udover at være er en af de kolde farver der trækker sig tilbage i billedet bliver blå associeret med troværdighed, succes, seriøsitet,
professionalisme og er den farve der mest taler Nydansker s primære målgruppes sprog. Da hjemmesiden skal appellere til virksomheder er blå en oplagt farve.. For ikke at få for mange forskellige farver vil vi arbejde med nuancer af denne farve i de andre tekstbokse. Den blå er også god som baggrundsfarve hvis vi skal have mange informationer på siderne