TransOnline-bloggen: Språk, skriving og e-publisering

Archive for the ‘Webdesign’ Category

Gammeldagse skrivemaskinskrifter

leave a comment »

Jeg har funnet en Typewriter-skrift som inneholder æ, ø og å.

Den heter Typewriter New Roman og ser slik ut:

Typewriter New Roman-skrift
 
Det finnes mange gammeldagse skrifter, men ikke alle greier de norske spesialtegnene. Her er noen eksempler:

Typewriter-skrifter
 
 
Kilde: FontSquirrel

Written by Solveig Hansen

6.11.2010 at 19:40

Publisert i Webdesign

Tagged with

Mest brukte skjermoppløsning, nettleser og plattform 2007

leave a comment »

http://www.nettredaktor.no/?module=Articles;action=Article.publicShow;ID=2309 

Nettredaktor.no har laget en oversikt over hvilke skjermoppløsninger, nettlesere og plattformer norske nettbrukere benytter. Tallene er basert på 1200 norske nettsteder.

Skjermoppløsning: De fleste bruker en oppløsning på 1024 x 768. 40 prosent av brukerne kan ikke vise større oppløsninger enn dette. Bredskjermsformatene er på vei inn, med 16 prosent som kan se 1280 piksler i høyden, men ikke mer enn 800 i høyden.

Nettlesere: Hele 80 prosent bruker Internet Explorer. 10 prosent bruker Firefox.

Plattform: Windows XP og NT dominerer markedet, med en andel på 85 prosent. Apple/Mac har en markedsandel på 3,75 prosent av norske nettbrukere.

http://www.nettredaktor.no/?module=Articles;action=Article.publicShow;ID=2309 

Written by Solveig Hansen

3.10.2007 at 15:37

Publisert i Webdesign

Midtstille en webside

leave a comment »

Før CSS var det enkelt å midtstille designen på en webside. Det var bare å skrive <CENTER></CENTER>. Så kom <DIV ALIGN=»center»>. Bruker du disse i dag, vil HTML-valideringen mislykkes.

I CSS brukes «margin: 0 auto;», men dette funker ikke uten videre. Jeg har prøvd og feilet og prøvd litt til og kommet frem til følgende løsning:

Jeg setter inn «margin: 0 auto;» i hovedbeholderen for siden. Men for at siden skal vises sentrert i Internet Explorer, må jeg sette inn «text-align: center;» i Body {}. Slik:

body {
     text-align: center;
}

/*—:Beholderen der hele siden er pakket inn:—*/
.container {
     margin: 0 auto;
}

I de blokkene der teksten ikke skal sentreres, overstyrer jeg «text-align: center;» med «text-align: left (right osv.)».

Written by Solveig Hansen

4.9.2007 at 19:34

Publisert i Webdesign

Lag menyknapper med CSS

leave a comment »

Hvis du ikke vil bruke kompliserte JavaScript-baserte menyer eller grafiske menyknapper, men likevel ønsker en ryddig meny, kan du enkelt lage «menyknapper» ved hjelp av CSS:

CSS-baserte menyknapper 

Klikk her for å se hvordan menysystemet ser ut på en webside.

Du er velkommen til å kopiere kildekoden og tilpasse den slik du selv vil.

Min favorittside for mer avanserte menysystemer og andre typer skript er Dynamic Drive. Det var der jeg fant «slide-in»-menyen som jeg bruker øverst til venstre på www.transonline.no.

Written by Solveig Hansen

2.6.2007 at 18:50

Publisert i Webdesign

Lag skisser til websider i Photoshop

with one comment

Er du blant dem som går rett løs på CSS- og HTML-kodingen når du skal lage en webside, eller lager du en elektronisk skisse først?

Hvis det er en privatside du lager, har du kanskje tid til endeløs prøving og feiling og omskriving av koder. Får du derimot i oppgave å lage websider for en kunde, er tid penger, og du har en tidsfrist å forholde deg til. Kunden ber gjerne om å få et første utkast ganske raskt. En rask og enkel løsning er å lage en skisse i Photoshop før du skriver så mye som en kode:

1. Start med å ta en skjermdump av en tom side i nettleseren. Det gjør du ved å skrive «about:blank» på adresselinjen for å åpne en ny, tom side. Deretter trykker du på Print Screen-tasten.

2. Velg Fil > Ny i Photoshop. Du ser at de faktiske sidemålene allerede er lagt inn i Bredde- og Høyde-boksen. La gjerne bakgrunnsinnholdet være hvitt, og trykk på OK.

3. Velg Rediger > Lim inn. Du har nå et arbeidsunderlag:

Skisse til webside

4. Sett inn logo, skriv inn tekst, lag fargede ruter, alt på hvert sitt lag, slik at du kan bearbeide hvert element på siden uavhengig av de andre. Bruk lagpaletten i Photoshop til å legge til nye lag (ikonet ved siden av papirkurven nederst til høyre på paletten), vise og skjule lag (øyeikonet). Flytt designelementene rundt om på skjermen for å finne ut hvor de passer best. Lagre som en Photoshop-fil (PSD), så har du skissen for hånden.

Lagpaletten og tilhørende bilde:

Lagpaletten i Photoshop

Skisse til webside

Arbeidet med de faktiske sidene går utrolig mye raskere når du har gode skisser som underlag. I eksemplene ovenfor har jeg brukt Internet Explorer. Lag skisser både i Explorer, Opera og Firefox mens du er i gang.

Written by Solveig Hansen

17.12.2006 at 19:55

Publisert i Webdesign

Lag papir med avrevne kanter i Photoshop

leave a comment »

Her har jeg brukt Photoshop til å lage en papirlapp med avrevne kanter. Jeg begynte med å lage papireffekten ved først å bruke et støyfilter og deretter et krysskraveringsfilter. Så rev jeg av kantene med lassoverktøyet, gned dem ut med fingerverktøyet og en liten penselstørrelse og la til skygge langs høyre og nedre kant.

Papir med avrevne kanterVeiledning (norsk): Lage papir med avrevne kanter i Photoshop

Veiledningen er skrevet av Janee Aronoff, myjanee.com. Jeg har fått tillatelse til å oversette og publisere Photoshop-veiledningene hennes. Så langt har jeg oversatt Gul lapp-veiledningen i tillegg til denne.

Written by Solveig Hansen

5.10.2006 at 19:31

Publisert i Webdesign

Lag gule lapper i Photoshop

leave a comment »

Bruk Photoshop til å lage «gule lapper i mange farger», som noen kaller dem. Tegn en gul firkant, legg til ankerpunkter, dra disse til siden for å få til den karakteristiske bøyen, mal på «limet» øverst på lappen, og lag skyggen ved hjelp av en svart firkant, et uskarphetsfilter og viskelæret. Vær så god:

Gul lapp

Veiledning (norsk): Lage Post-it-lapper i Photoshop

Veiledningen er skrevet av Janee Aronoff. Ta en titt på myjanee.com. Her lærer du å lage oppslagstavler, tegnestifter, virtuelle flaskeetiketter, regndråper, krøllet papir, fotoeffekter m.m. i Photoshop. Anbefales!

Flere av Janees veiledninger kommer snart på norsk. Jeg har fått tillatelse til å oversette og publisere dem. Det er bare å stikke innom. 

Written by Solveig Hansen

22.9.2006 at 13:45

Publisert i Webdesign

Skalerbare skriftstørrelser i CSS-filer

leave a comment »

Vanlig brukte skriftstørrelser på websider er 10px og 12px. Standard skriftstørrelse i nettlesere er 16px = 100 %. Hvis du vil bruke 12px som standard (i «body») i CSS-filen, men la størrelsen være skalerbar, bruker du en størrelse på 75% eller 0.75em. Regnestykke: 12 / 16 = 0,75 = 75 %. Vil du bruke 10px, blir prosenten 62,5.

10px: font-size: 62.5% eller font-size: 0.625em

12px: font-size: 75% eller font-size: 0.75em

Bruker du 10px i «body» og senere vil bruke 12px for eksempel i en overskrift, angir du 120% eller 1.2em.

Regnestykke: 10px = 100 %. 12 / 10 = 1,2.

Hvorfor ikke bare bruke de faste størrelsene 10px og 12px? Svar: Av hensyn til brukervennligheten. Brukeren vil kanskje ikke kunne overstyre/skalere skriftstørrelsen i sin nettleser hvis du bruker faste skriftstørrelser i CSS-filen.

Kjapp oversikt:

6pt = 8px = 0.5em = 50%

7pt = 9px = 0.55em = 55%

7.5pt = 10px = 0.625em = 62.5%

8pt = 11px = 0.7em = 70%

9pt = 12px = 0.75em = 75%

Written by Solveig Hansen

11.9.2006 at 19:59

Publisert i Webdesign

Skjermoppløsning

leave a comment »

Når jeg lager websider, tester jeg dem ved 800 x 600 og 1024 x 768 i Internet Explorer, Firefox og Opera. Der stopper stort sett min kvalitetssikring.

Jakob Nielsen er heldigvis ikke så uenig, viser det seg. I sin Alertbox for juli 2006 sier han at vi bør optimalisere websider for 1024 x 768, men bruke en flytende layout som skaleres automatisk etter oppløsning, fra 800 x 600 til 1280 x 1024.

1024 x 768 er den vanligste skjermoppløsningen i dag. Ifølge Nielsen er 60 prosent av alle skjermer innstilt på denne oppløsningen. 17 prosent bruker 800 x 600. Det betyr ikke at vi skal ignorere disse 17 prosentene, sier han. Sidene skal se best ut og fungere best ved den vanligst brukte oppløsningen, men de bør også se rimelig bra ut og fungere rimelig bra ved andre oppløsninger. Den viktigste informasjonen bør plasseres så høyt på siden at man ikke trenger å rulle for å se den.

VG har valgt en vanlig brukt løsning. Forsiden deres er delt i fire spalter. Ved en oppløsning på 800 x 600 fyller tre av spaltene hele skjermen, og man må rulle horisontalt for å se spalten ytterst til høyre. Ved 1024 x 768 vises alle fire spalter.

Inkludert i skjermoppløsningen er menylinje, verktøylinje, rullefelt og andre skjermelementer, så selve websiden er litt mindre. Vanlig brukte bredder og høyder for websider er 760 x 420 (for 800 x 600) og 955 x 600 (for 1024 x 768).

Written by Solveig Hansen

10.9.2006 at 17:54

Publisert i Webdesign

De fire grunnleggende designprinsippene

leave a comment »

Tenk: C-R-A-P. Det står for Contrast, Repetition, Alignment og Proximity. Disse prinsippene brukes på alle veldesignede sider, det være seg på papir eller web.

Contrast/kontrast: Unngå elementer som er nesten like. Hvis noen av elementene på siden (skriften, fargen, størrelsen, linjetykkelsen e.l.) ikke er helt like, så gjør dem helt forskjellige. Eksempler på kontraster: kjempestor og liten skrift, lett Garamond (serif) og fet Helvetica (sans serif), tynn og tykk linje. Ikke vær pysete. En 12-punkts og en 14-punkts skrift danner ingen kontrast. Det gjør ikke mørkebrunt og svart heller. Vil du at et bilde skal gå utenfor høyre- eller venstremargen, la det gå så langt utenfor at det ikke ser ut som om du bare har bommet litt på plasseringen.

Repetition/repetisjon: Repeter visuelle designelementer. Du kan for eksempel gjenta en farge, en bestemt form eller figur, en fet skrift, en tykk linje og så videre for å organisere siden og gjøre den mer enhetlig.

Alignment/justering: Ingenting bør plasseres vilkårlig på en side. Hvert element bør ha en visuell forbindelse med noe annet på siden. Dette gir et rent utseende, med en usynlig linje mellom elementene.

Proximity/nærhet: Elementer som hører sammen, bør plasseres nær hverandre. Da danner de én visuell enhet i stedet for flere løsrevne biter. Siden får en klarere struktur og blir lettere å lese. Opplysninger som navn, adresse, telefonnummer og e-postadresse hører naturlig sammen i én gruppe.

Spesielt for websider: Repetisjon er det viktigste prinsippet for websider fordi det gjør det mulig for de besøkende å se at de fremdeles er på samme nettsted. Navigasjonssystemet bør være likt og plassert på samme sted på alle sidene, og den grafiske stilen bør også være lik på alle sidene. Stikkord: gjenkjennelighet. La de samme knappene, fargene, skriftene o.l. gå igjen.

Contrast, Repetition, Alignment, Proximity: C-R-A-P. Det var teorien. Så er det bare å bryte reglene. Det er lettere når man kjenner dem.

Kilde: «The Non-Designer’s Design Book» av Robin Williams. Anbefales for alle ikke-designere som har behov for å utforme websider, brosjyrer og annet. Williams har også skrevet «Design Workshop», «The Non-Designer’s Web Book», «Web Design Workshop» og «The Non-Designer’s Type Book».

Written by Solveig Hansen

6.9.2006 at 20:45

Publisert i Webdesign

%d bloggere like this: