Tenk dynamiske løsninger, ikke et statisk canvas

Jeg har, som sagt, i denne artikkelen prøvd å sette fingeren på de mest vesentlige forskjellene mellom en grafisk designer og en webdesigner. Det første jeg kommer på, som også kanskje er den største forskjellen, er flaten man jobber på.

Grafiske designere jobber stort sett mot papir, da alt fra print annonser, brosjyrer, plakater, printpublikasjoner og postale produkter. Alt har som regel et gitt format (breddexhøyde) hvor designer selv sitter med all makten over hvordan elementene skal stå i forhold til hverandre, mengde og størrelse på tekst/bilder osv.

Nettsider derimot er ikke et gitt canvas med fast bredde og høyde. Nettsider må kunne fungere ( og vil bli besøkt ) gjennom alle mulige plattformer og enheter, og du er nødt til å tenke hvordan dette vil bli seende ut. Det er litt som en trykksak med uendelig bleed (utfallende print).
Dagens brukere sitter i stor grad med store skjermoppløsninger på jobben/hjemme, men surfer på smarttelefonen og tablets på vei til og fra jobb og i sofaen hjemme. Dette gir rom for mange spennende og kreative løsninger, men kan også gi store problemer om en ikke tenker godt igjennom dette under designprosessen. Og apropos prosess…

Design for web

Bruk Photoshop, Fireworks eller andre egnete programmer når du designer for web. Ikke bruk InDesign med høyoppløslige dokumenter. Tenk 72 dpi, riktige skjermstørrelser og jobb hele tiden i pixler – både når det gjelder formater/størrelser og fonter.
Ha fokus på strukturen i Photoshopfilen din. Prøv og optimaliser filen for utvikleren som skal motta den og bygg den korrekt strukturelt med mapper og layernavn som er i samsvar med selve løsningen. Ting til header legges i en ”Header”-mappe, meny elementer i en ”Meny”-mappe osv. Fjern også alle lag som ikke benyttes og sørg for at alt av mapper og layers har gode navn.
Er du i tvil, så snakk med de som skal implementere før du viser noe til kunden. Jeg har opplevd at en designer designet en nettside, som ble godkjent av kunden, men som har vært mer eller mindre umulig å få gjennomført av en utvikler.

En annen ting som jeg også tør å påstå er jo mer teknisk kompetanse du har, jo bedre blir løsningene du designer. Dette er også et klassisk diskusjonstema: Må webdesignere kunne noe kode (CSS, HTML, JavaScript, jQuery)?
Ja, mener nå jeg – uten tvil. En webdesigner som kan HTML, som vet hvordan CSS fungerer og hvilke CSS3-egenskaper en har til rådighet, vet hvordan javaScript og jQuery fungerer, hvordan skrive dette og hvilke muligheter alt dette gir, er uten tvil svært verdifull kunnskap for en webdesigner. Så om du vil jobbe med web, kast deg over alt som finnes av bøker, online kurs etc.

Bruk av fonter, tekst og farge

Heldigvis har teknikker som @font-face gjort at vi endelige kan bruke andre fonter enn standard webfonter. Men husk å sjekke hvilke fonter som er tilgjengelig (font shop/typekit etc) før du selger de inn til en kunde. Tenk også antall fonter som benyttes. Hver font veier litt (alt fra 30kb – 1Mb) og mange fonter med flere font-snitt vil kunne spise opp unødvendig og uheldig laste-tid.
Prøv å forenkle bruk av fonter og ikke legg opp til bruk av 5 varianter av samme font.
Tenk lesbarhet med tanke på fontstørrelse, farge og ikke minst bredden på ”boksene” de ligger i. Jeg pleier (avhengig av skriftstørrelse) og aldri la en boks med tekst være bredere enn 580-600px.

Det er også viktig å se på all tekst som dynamiske elementer. Fontstørrelser kan endre seg underveis i produksjonsprosessen eller i etterkant hos bruker. Mengde på tekst vil variere og det vil være rendringsforskjeller i forskjellige nettlesere osv. Her er vi igjen innpå dette med canvas/arbeidsområdet og innpå det som kanskje er den største fellen og største gjengangeren blant grafiske designere – innhold på web er dynamisk og ikke statisk.
Mengden av tekst og størrelsen tekst vil bli variere i størrelse, og dette må et det tas høyde for. Dersom du for eksempel ønsker at et bilde i høyre kolonne alltid skal matche topp- og bunnhøyden på tekstboksen ved siden av – så bare glem det, det vil så å si aldri kunne fungere i en dynamisk løsning.

Mitt råd er derfor å aldri låse designet til størrelsen på tekstbokser eller andre dynamiske elementer – slik det ofte gjøres på ting til print. Designet på din skjerm vil ofte ikke bli likt for mottageren etter implementering. Tenk at du designer maler, som vil bli benyttet av forskjellig mengde, størrelse og type innhold.

Tenk også over hvilke farger du bruker. Vi trenger ikke lenger tenkte på dette med websikre-farger, men tenk på kontrastene mellom fontstørrelse, fontfargen og bakgrunnen de ligger på. Kontrastnivåer er svært viktig med tanke på universell utforming. Jeg skrevet et innlegg om dette tidligere – du finner det her:

Interkasjon og brukeradferd

En siste, men svært viktig ting, er fokus på brukeratferd og brukeropplevelse. Vi leser/bruker en nettside på en helt annen måte enn vi leser/bruker printmateriell. Brukere på web leser ikke lineært, men skanner skjermen etter spesifikt innhold, ikoner og grafiske elementer, ord eller fraser. Brukere på web er stort sett utålmodige og på søken etter spesifikt innhold, og det er her svært mye av fokuset ligger under prosessen av å lage gode nettløsninger. Det handler om sette seg inn i målgruppens hode, prøve å skjønne hva de er ute etter og tilpasse nettsiden og innholdet etter dette. Viktige ting fremheves, mindre viktig ting tones ned (med tanke på kontrast) og alt som er unødvendig burde fjernes.
Metoder og teknikker en bruker til dette ville vært et innlegg i seg selv, men det handler stort sett om å skape kontrastnivåer, plassering av elementer og kanalisering av informasjonsflyten. Med kanalisering mener jeg at du er nødt til å tenke storytelling og tilrettelegging av innhold og elementer slik at brukerens øye vandrer slik vi ønsker. En webdesigner fokuser på hva vi ønsker at brukeren først skal oppdage for så å plassere og designe element 2,3,4,5 etc. i henhold til dette – slik at vi i størst mulig grad kan påvirke øye til brukeren og hva brukeren skal få med seg.
Det kan også her være svært verdifullt å bruke tekniske ”hjelpemidler” for at brukeren lettere skal finne det de leter etter. Som for eksempel å ha elementer som viser mer innhold ved klikk etc.

Dette punktet er i seg selv grunnlag til en interessant diskusjon mellom en grafisk designer og webdesigner – for hva er egentlig bra webdesign?
Jeg mener for eksempel at en nettside som har klart å løse selve storytellingen og har klart å oppnå det den er laget for – er en bra nettside, selv om designet kunnet vært bedre. Nå er dette helt klart ting som kan og bør kombineres, men en nettside hvor brukeren enkelt finner det de er ute etter, eller en nettbutikk som selger godt, er langt viktigere en deilige grafiske elementer.
En grafisk designer derimot ville med stor sannsynlighet foretrukket en visuelt flott nettside fremfor en nettside som fungerer til det den er laget for.
En grafisk designer vil stort sett bedømme en nettsiden utelukkende basert på det visuelle uttrykket, uten å ta med noe av det andre med i vurderingen.

MEN

Dyktige grafiske designer sitter på en mengde kunnskap om tradisjonelle grafiske designprinsipper, typografi, farger og ikke minst samspillet mellom de for å kunne skape effektive og visuelle kommunikasjonsløsninger.

Selv om mange webdesignere er grafiske designere som over tid har spesialisert seg mer mot web, er de fleste webdesignere utdannet seg gjennom faget web/multimedia. Multimedia-bakgrunnen er på mange måter en riktigere vei å gå fra starten av (om en ønsker å jobbe med web) med tanke på de tekniske aspektene dette innebærer, men jeg ser også at mange webdesignere (meg selv inkludert) mangler mye av den verdifulle tradisjonelle designkunnskapen som grafisk designere sitter på.
Webdesignere er som oftest flinkere til å ta høyde for og til å utnytte forskjellige plattformer og tekniske forutsetninger, flinkere til å tenke på korrekte og konvensjonelle interaksjonsløsninger og vi tenker alltid på sluttbrukerne og deres adferd. Men, dyktige grafiske designere er ofte flinkere til å tenke visuelt og å bruke grafisk design som et kommunikasjonsmiddel.

Til tross for våre kompetanseforskjeller og våre forskjellige syn på hva som er bra eller dårlig design for web – opplever jeg at å kombinere kunnskapen som en grafisk designer og webdesigner sitter på alltid skaper de beste løsningene.

Og her tror jeg også mange byråer i dag gjør feil. Det er så stort fokus på å fylle opp med digitale hoder, siden etterspørselen etter digitale løsninger er blitt så stor, at jeg føler man til tider glemmer hva som faktisk skal lages. Visstnok vil rene digitale hoder klare å produsere store antall korrekte digitale webløsninger, men er dette nok?

Websider er ikke lenger magi – alle kan skru sammen en nettside. Men ikke alle byråer kan lage virkelig gode nettløsninger som også ser smashing ut.
Vi webdesignere har mye å lære av arbeidsprosessen til grafiske designere. Prinsippene de jobber etter, nøyaktigheten i deres arbeid og fokuset på å skape noe unikt og annerledes – noe som uten tvil også er svært viktige for design av webløsninger. Det handler om å forstå hverandres forskjeller, skjønne hvordan gjøre hverandre bedre og hvordan omgjøre dette til kick-ass løsninger for sluttbrukerne. Dette tror i alle fall jeg er oppskriften for morgendagens beste webløsninger.

Uten å ha noen kunnskap overhodet om hvordan Flashback-trojaneren fungerer eller angriper maskinen din, utnytter den visstnok en svakhet i Java i operativ systemet ditt. Flashback-trojaneren lagrer seg da lokalt på maskinen din, som igjen laster ned ”ondsinnet” kode fra forskjellige eksterne kilder.

Det har lenge vært slik at Mac sjelden eller aldri har hatt problemer med virus og såkalte trojanere. Men med det økende antallet av Mac-brukere kan det jo fort være at Apples produkter etter hvert vil bli mer attraktivt for nettopp dette.
Men, her er en super enkel måte å finne ut om din maskin har blitt rammet.

Slik sjekker du om du har blitt “smittet”

Åpne programmet Terminal.
Skriv så inn følgende, og trykk på enter:

Skriv så inn følgende og trykk enter:

Om du får tilbakemeldingene:

…så er ikke maskinen din rammet.

Den beste måten å sikre seg mot denne trojaneren på er å oppdatere operativsystemet ditt (til versjoner som ble lagt ut etter 3. April 2012), da den fungerer på eldre versjoner av Mac OS.

Har blitt angrepet?

Dersom du skulle være så uheldig å være rammet, ville jeg aller først opprette en ny bruker på maskinen (siden Flashback Trojan kun fungerer på aktive brukerkontoer), deretter kun benyttet denne. Den nye kontoen vil da ikke være infisert av trojaneren. Så burde du oppdatere OS’et ditt til siste versjon.

Om du sitter på gamle OS versjon og ikke gidder å kjøpe Lion, kan du sikre deg ved å slå av bruken av Java (evt. slå det på hver gang du trenger det, for eksempel når du bruker nettbanken). Du kan lese mer om dette her :

Det kan jo være at jeg opplever det hele så oppløftene nå fordi jeg generelt sett har følt at utviklingen av HTML og CSS har gått utrolig tregt. Med tanke på hvor rigid og håpløst HTML/CSS var i 2000 (da jeg begynte med dette) var det ingen annen måte å lage gode visuelle løsninger på enn å kaste seg inn i Flash-sfæren. En sfære som jeg har klamret meg til frem til for to år siden, da Flash plutselig ble myrdet av Apple og iOS.

Men, samtidig skjedde det noe veldig interessant. CSS3 begynte å etablere seg, sammen med gode JavaScript rammeverk (som jQuery), så kom HTML5 som en deilig og naturlig forlengelse på utviklingen. I tillegg har årene fra internettets fødsel frem til i dag gitt oss stor empiri rundt brukerforståelse, adferdsmønstre og psykologiske aspekter som sammen med de teknologiske fremskrittene gir oss (som lever av å lage nettløsninger) en verktøykasse fylt til randen.
En verktøykasse som gjør det langt enklere og mer effektivt å lage gode nettløsninger som faktisk fungerer. Og det er her, under skapelsen av de gode brukeropplevelsene, hvor all moroa ligger. Da både for de som besøker nettsidene, men også for meg som streber etter å lage de.

Fokus på å skape gode brukeropplevelser

Selv om målet på en måte alltid har vært å lage gode brukeropplevelser er det først nå det for alvor blitt ett av mine viktigste fokusområder i alt jeg lager. Det som for meg gjør det mest interessant er kompleksiteten i det. Det er så mange elementer som bidrar til å skape en god brukeropplevelse, da alt fra god innholdsstruktur, riktig design og god teknisk funksjonalitet, men fundamentet består alltid av to ting: forståelse for det som skal formidles og forståelse av den det skal formidles til.

Det handler om ”story telling” – hvordan kommunisere for å lure seg inn i hodet på brukeren av nettstedet og hvordan så påvirke de til å gå den retningen en ønsker at de skal.

For meg er denne grensegangen mellom visuelt design og de psykologiske aspektene rundt adferdsmønstre, kognitive og emosjonelle reaksjonsmønstre utrolig interessant. ”Emosjonelt design” er en terminologi jeg ikke hadde hørt om før i fjor og som fikk stor oppmerksomhet blant webdesignere i 2011.
Jeg anbefaler alle som er interessert i dette å lese boken ”Designing For Emotion” fra A Book Apart og i utgangspunktet alt dere kan komme over av artikler av psykologen (og ekspert og forsker innenfor kognitiv vitenskap) Don Norman. Intervjuer av Apples sjefsdesigner Jonathan Ive er også et must å få med seg.

Så fremover vil jeg i definitivt ha fokus på å designe løsninger med emosjonelle virkemidler.

Responsive webdesign og mobile enheter

”Responsive webdesign” var også et hot tema i 2011 og vil definitivt fortsette å påvirke meg i 2012. Om dette er et ukjent begrep for deg, finnes det sikkert tusenvis av gode artikler om dette, men jeg kan anbefale deg å ta en titt på: AListApart og ThinkVitamin…og ikke minst, kjøp boken Responsive Web Design (nok en fantastisk bok fra A Book Apart).

Kort oppsummert handler responsive webdesign om å fokusere på de forskjellige enhetene/skjermene som nettsiden skal vises i. Responsive løsninger er designet og implementert på en måte som gjør at innholdselementene er ”flytende” og tilpasser seg skjermstørrelsen på laptoppen, tablet’n og smartphonen kun basert på CSS variasjoner og bruk av media queries. På denne måten vil nettsiden din være optimalisert/tilpasset den enheten den vises på uten at det koster spesielt mye ekstra tid og penger å utvikle.

Slik jeg ser det vil sikkert selve terminologien ”Responsive webdesign” fades ut, da teknikken etter hvert vil bli en selvfølgelighet. Ikke en selvfølgelighet at alle nettsider i fremtiden må være responsive (dette er ikke alltid den optimale løsningen), men at det vil være en selvfølgelighet at alt som lages fremover også fungerer på smartphones og tablets. Bruken av smartphones og tablets til konsumering av webinnhold vil uten tvil fortsette å øke. Det estimeres at mobil surfing vil øke med 10% i 2012 og at surfing på mobile enheter vil passere ”PC-surferne” i 2014.

Så fokus på tilgjengelighet og optimalisering for mobile enheter vil være en viktig faktor for løsningene jeg skal kose meg med i 2012.

HTML5 og CSS3

Som jeg sa innledningsvis og som du sikkert kjenner til, så er HTML5 og CSS3 nå endelig blitt såpass godt støttet, at det bare er å kjøre på. Jeg har tidligere også laget en artikkel som viser 10 CSS3 egenskaper som er temmelig trygt å bruke.
Nå har det seg jo slik at det i en god stund fremover vil være mange brukere som sitter med gamle nettlesere som ikke støtter alt det sexy som puttes inn i de nye nettsidene dine, men min innstilling til dette er ”synd for de”.
Sørg selvfølgelig for at nettsiden din er funksjonell og at den ”fungerer” for de som sitter på utdødde nettlesere, men ikke la de legge listen for hvordan nettsiden visuelt skal se ut.

Alt jeg lager fremover (more or less) vil være i HTML5 og jeg er sikker på at vi fremover vil få mange deilige eksempler på hvilke muligheter HTML5 åpner opp for. Spesielt ønsker jeg å utforske mer rundt mulighetene som ligger i Canvas elementet. Andre aspekter i HTML5 som jeg har lyst til å titte mer på er Geo-location feature, offline lagring, skjema validering, microformats og å forbedre søkemotoroptimaliseringen. Jeg syns også det er svært spennende med alle mulighetene som CSS3 åpner for, da spesielt med tanke på CSS animasjoner.

Om jeg skal favorisere én CSS3 egenskap, så må det være @font-face.
Jeg har så lenge jeg har plundret i HTML vært på desperat jakt etter måter å kunne bruke andre fonter enn Verdana og Arial. Middelmådige teknologier som FLIR, sIFR, Cufon har vært hyppig brukt (med sine fordeler og ulemper), men ingen ting slår @font-face. Helt nydelig, temmelig trygt og et ufattelig viktig løft for oss som designer.

Jeg så også en økende trend i 2011 rundt minimalistisk design.
Med dette mener jeg nettsider som hadde en veldig spisset kommunikasjon, få ”unødvendige” innganger og få men store og tydelige virkemidler som skapte god kontrast og balanse. Det dukket også opp mange nettsider som hadde svært gode typografiske virkemidler og jeg tror alle disse tingene vil være en økende trend i 2012. Jeg tror også vi kommer til å få se mange løsninger med mye rundere former enn løsninger som til nå har vært veldig firkantete.

Jeg husker godt hvor utrolig deilig det var å se Google+ circles som skilte seg visuelt fra alt annet jeg hadde sett til da. Og ikke minst den fantastiske måten det tekniske/funksjonelle harmoniserte med det visuelle. Etter det har den sirkulære formen stadig dukket opp som meget gode og vellykkete grafiske elementer og jeg har selv som mål å finne meg et bra prosjekt hvor jeg kan få eksperimentere med dette.

Påvirkning av sosiale medier

En siste ting som jeg også la merke til i 2011, som jeg tror vil fortsette å påvirke oss og løsningene som lages mot web, er diverse sosiale medier. Da både det sosiologiske aspektet, men også hvordan løsningene kommuniserer.
Som nevnt har vel aldri fokuset rundt brukervennlighet og brukertilpassede løsninger vært så stor som nå, og det er de sosiale mediene som ligger i front for hvordan de best burde løses. Jeg vet i alle fall ikke om andre nettsider og nettløsninger som endrer seg så hyppig som nettsidene og produktene til for eksempel Facebook og Twitter. De er konstant under utvikling og tilpasser seg nye brukervaner og funksjoner hele tiden.

Jeg jobbet for eksempel store deler av 2011 på en stor intranettløsning for en bedrift med 550+ ansatte hvor vi ga prosjektet den naturlige arbeidstittelen ”Det sosiale intranettet”. Det er liten tvil om at et godt intranett er ett nettsted for og av dens brukere og ikke et nettsted hvor en administrator bestemmer hva du skal lese og hvor.
Mer eller mindre alle de ”sosiale”-aspektene rundt det intranettet var inspirert av funksjonalitet og løsninger vi i dag finner i Facebook og Twitter etc.
Jeg ser også stadig løsninger med sterke design- og funksjonalitetslikheter med for eksempel Twitters applikasjonspregete design. Dette tror jeg også at vi vil se mer av i 2012.

Men, dette var meg og mine tanker.

Om du har gjort deg noen tanker om hvordan websider anno 2012 vil se ut, og evt. hva du selv fokuserer på i dag så del gjerne i kommentarfeltet under.

Du har sikkert testet den selv, hvis ikke bør du teste den ut.
Spillet går enkelt ut på at du får oppgitt tre ord, hvor du skal velge ett av de som du ønsker å tegne. En motspiller får presentert en film av din tegning og skal prøve å gjette hva du tegner – så vice versa.
Dette høres kanskje ikke ut som det morsomste spillet eller den mest avhengighetsskapende aktiviteten, men da tar du feil – i alle fall om vi ser på veksten av antall brukere. OMGPOPs DrawSomething er for øyeblikket tidenes raskest voksene app.

Etter 10 dager rundet DrawSomething 1.2 millioner nedlastninger og toppet listene over mest populære spill i flere europeiske land. De brukte noen få kroner de første dagene på å promotere appen, noe som fort resulterte i 40 000 nedlastninger.
Etter at de nådde 100 000 nedlastninger tok jungeltelegrafen over og antall nedlastninger, antall brukere og antall tegninger eksploderte.

De registrerte fem millioner nedlastninger etter bare tre og en halv uke og etter fem uker rundet de hele 20 millioner nedlastninger, hvorav 12 millioner er aktive brukere. Antall nedlastninger har nå rundet 30 millioner.
Etter fem uker toppet DrawSomething applisten i 79 land og de rundet en milliard tegninger. For øyeblikket registreres det 3000 tegninger hvert eneste sekund, noe som tilsvarer i underkant av 260 millioner tegninger om dagen.

Til sammenligning tok det Foursquare 3 år å få så mange brukere – Instagram halvannet år.

OMGPOP opplyste i går (19.mars 2012) at de kvelden før mellom klokken 20 og 21 hadde over 4.5 millioner mennesker som aktivt satt og spilte og at de uken før var nevnt i 1% av alle tweets på Twitter.

Selv om betalversjon av appen kun koster 7 kroner, sier det seg jo selv at OMGPOP tjener ok med penger på denne appen. 12 mars opplyste OMGPOP at de håver inn et sekssifret beløp hver dag (merk dollar), og at de har tjent mer på DrawSomething på fem uker, enn hva de totalt tjente året før.

Den finnes i en gratis versjon med annonser, men som sagt koster betal-versjonen kun 7 kroner. Om dette ikke er noe du har testet ennå, så anbefaler jeg å gi det et forsøk. Selv har jeg nok tegnet noen hundre tegninger den siste uken, men må innrømme at antallet sakte men sikkert daler – men moro er det i alle fall.
Appen finnes til både iPhone og iPad (og i Android Market), og selv anbefaler jeg iPad versjonen sammen med en stylus. Da får du litt større flate å tegne på og en stylus er noe mer presis en enn finger.

Kilder:
5-Week-Old App Draw Something Hits 20 Million Downloads And Generates 6-Figures Per Day
Draw Something Is Pummeling Zynga’s Top Mobile Game
Last Night, Between 8 And 9 PM, 4.5 Million People Played Draw Something

Men, dette kan du som sagt enkelt fjerne ved å legge til følgende i CSS filen din:

Dersom du skal fjerne denne rammen rundt en embeded flash, kan du bruke følgende:

I eksemplene over, vises denne prikkete linjen kun ved fokus og aktivisering av elementet. Men når jeg lager HTML nyhetsbrev (e-post) hvor jeg ofte har klikkbar grafikk, vises bilder knyttet til <a> med en utrolig stygg og dominerende blå outline i samtlige versjoner av Internet Explorer (IE5, IE6, IE7, IE8 og IE9). Dette vises også når elementene ikke er aktive eller i fokus.
Dersom du skal fjerne dette må du setter border:none (outline vil ikke fungere her);

Når jeg setter opp HTML som skal sendes ut gjennom et e-postutsendelsesprogram setter jeg alltid all CSS inline. Dette er jo veldig gammeldags og tungvindt, men det er den eneste måten som gjør at jeg er sikker på at det fungerer bra i alle e-postklienter.
Du må også huske på å legge inn denne koden i selve ‘<img>’ elementet, og ikke i ‘<a>’, altså slik:

Tenk deg om før du fjerner dette

Nå er det jo en grunn til at nettlesere har dette som default, og det er med tanke på tilgjengelighet og universell utforming. Det finnes mange brukere der ute som eksempel trenger å navigere seg rundt på en nettside uten mus (ved bruk av piltastene på tastaturet) – og da er det jo kjekt å få en indikasjon på hvor en befinner seg.
Derfor vil jeg likevel anbefale deg å vurdere å legge på en form for markering på objekter som er aktive og i fokus. Men dette kan du style og kontrollere selv ved å legge til følgende i CSS filen:

På denne måten fjerner du den stygge blå rammen i IE, samtidig som du kan påvirke hvordan denne markeringen skal se ut slik at det passer mer inn i løsningen, som da er til stor hjelp for de som trenger det.

Nå er det stor variasjon i hvor langt dette trekkes. Noen siter har haugevis av elementer som påvirkes ved scrolling, mens andre kun har noen få og hvor alle elementene ligger på samme “dybdenivå”.

Selv om jeg finner mange gode eksempler på bruk av parallax scrolling kommer jeg også stadig over løsninger som ikke er fult så bra og hvor dette burde vært ungått. Det er enkelte ting en burde tenke på dersom en velger en slik løsning, da blant annet tung lasting, problemer rundt ytelse og tilgjengelighet og generelle navigasjonsprinsipper.

Parallax scrolling bruker JavaScript til å manipulere posisjonen til elementer i henhold til sidens scroll. Disse kalkuleringene utføres for hver eneste pixel som scrolles, noe som i de verste tilfellene krever at kaluleringene utføres 100-vis av ganger i sekundet (selvfølgelig avhengig av hvor fort brukeren scroller). I verste fall kan dette skape en hakkete opplevelse som igjen vil kunne gå utover brukeropplevelsen.

Slike løsninger er også ofte svært tunge (med tanke på filstørrelse).
De er som regel satt sammen av mange grafiske filer, gjennomsiktige png osv., som lastes inn før du kan begynne å scrolle. Dette bryter jo litt med dagens tankesett hvor hastighet har stort fokus. Mange ganger må jeg vente med å kunne bruke siden til alt er lastet, mens flere av disse løsningen også har preeloaders i god gammel flash stil.

En annen ting som en også burde være klar over, er at parallax scrolling ikke fungerer på enheter med iOS (iPhone, iPod og iPad). På disse enhetene utføres ikke handlinger under scrolling (for å beholde god ytelse), men handlingene utføres først når scrolling er ferdig. Dette resulterer i at denne teknikken ikke fungerer på enheter med iOS (usikker på Android, dette har jeg ikke testet).
Uansett, dersom du velger en slik løsning, burde du også ha fallbackløsninger for slike enheter.

Men, selv om parallax scrolling har noen tekniske utfordringer og negative aspekter ved seg, skaper det likevel veldig kreative og engasjerende løsninger. Nesten alle nettsider som bruker denne teknikken har en “wow faktor”.
Og som story telling teknikk fungerer det utmerket – som for eksempel i Dangers of Fracking og Ben The Bodyguard. Jeg syns også at denne teknikken fungerer meget bra som alternativ til Flash med tanke på kommersielle kampanjesider etc. hvor det er lov at ting tar litt mer tid og hvor jeg i større grad forventer å bli underholdet.

Mine soleklare favoritter

Ascensión Latorre

Comfort hotel Xpress

Smokey Bones

Nike Better World

Iutopi

Nydelig story telling

Dangers of fracking

Ben The Bodyguard

Beetle

Lost World Fairs

Generelt bra

Launch Factory

Gidsy

Laurentius Wonen

Cultural Solutions

Reverend Danger

The Art Of Flight

Grind

Rtraction

Smart USA

Ikke akkuratt parallax scrolling, men fine one-page-websites

Demi Creative

Warehouse Twenty one

Rodesk

House Creative

Design Embraced

Free Range Designs

Revolver Studio

Hvilken var din favoritt?

Her er listen over tidenes dyreste salg av domenenavn.

*Solgt for €1 960 000 i 2008, som etter daværende kurs var det samme som $2 858 945

Dyreste salg av domenenavn i 2011:

*Solgt for €500 000 i 2011, som etter daværende kurs var det samme som $725 000

Listen er, uten den store overraskelsen, dominert av .com domener.
Men det som kanskje er litt interessant er at på listen for 2011 så finner vi både ett .xxx  og ett .me domene. Kanskje de mest profitable domenesalgene i 2012 vil være preget av andre domener enn .com?

Nå har det seg kanskje slik at det etterhvert er blitt få gode .com domener å investere i.
Men ved å ta en titt her (nettside som lister ut ledige .com domener – i alle fall ledig det sekundet de legges ut) så kan det jo være at du kommer over ett eller annet som en dag vil gjøre deg rik

Kilder:

• http://www.businessinsider.com
• http://www.businessinsider.com
• http://www.businessinsider.com
• http://most-expensive.net

For eksempel poster vi over 98 000 tweets og det opprettes over 320 nye twitter kontoer. På Facebook postes det nesten 700 000 statusoppdateringer, nesten 80 000 veggposter og det blir lagt igjen over 510 000 kommentarer.
YouTube vokser med mer enn 600 filmer, vi utfører 694 000 Google-søk, vi laster ned over 13 000 iPhone apps og 2 millioner av oss ser på porno.

Ta en titt på illustrasjonene under for å se flere tankevekkende fakta (Klikk på de for å se større versjoner).

Det eneste man burde være litt obs på er å sende bilder/video gjennom iMessage om man er i utlandet. Siden mobiloperatørens datatrafikkpriser i utlandet er relativt dyrt vil slike tilfeller fort bli langt dyrere enn å sende gjennom vanlig SMS/MMS.

Neven Mrgan, en grafisk designer, postet en artikkel som hvor han viser sitt eget SMS-forbruk før og etter lanseringen av iOS5 og iMessage. Her kommer det tydelig frem kun én måned etter lansering, at hans SMS-forbruk gjennom mobiloperatøren ble redusert med 90%.

Det er klart at én persons SMS-vaner, som har mesteparten av sitt nettverk i et Appledominerte miljø, ikke er særlig representativt. Men, dette gjorde meg nysgjerrig og jeg oppdaget at dette gjaldt også meg. Kanskje ikke i like stor grad, men etter å ha gått igjennom SMS-listen min ser jeg at ca.  70-90 prosent av alle meldingene jeg sender nå er gjennom iMessage.

iMessage gjelder jo kun for eiere av iPhone, iPad og iPod-touch med iOS 5, men det finnes også andre tjenester som gjør det samme. For eksempel Apple og Android appen Viber, som sender SMS og ringer gjennom WIFI/datatrafikk. Jeg er ganske sikker på at det vil poppe opp enda flere slike tjenester fremover og det blir spennende å se hvordan dette vil påvrike mobiloperatørens forretningsmodeller.

I følge en artikkel i Aftenposten 20. mai 2011 sendte vi i Norge 6,85 milliarder SMS-meldinger i 2010 – i gjennomsnitt 104 meldinger i måneden pr. abonnent. Selv om dette var 173 millioner færre meldinger enn i 2009 og selv om dette tallet blir mindre for hvert år, utgjør SMS-forbruket vårt likevel en ganske fin profit for mobiloperatørene. Inntektene for SMS-meldinger i 2010 var på 2 milliarder kroner. Når statistikken viser at vi at vi sender færre meldinger tror jeg ikke helt at dette er tilfelle. Det er fult mulig vi sender færre SMS-meldinger, men med den økende dominansen av smartphones og økende antall mobilbrukere, tror jeg heller årsaken er at vi bruker andre alternative kanaler til å kommunisere gjennom enn tradisjonell SMS – som for eksempel gjennom mail og tjenester knyttet til sosiale medier.

Jeg lurer da på hvor lang tid det vil ta før det meste av telefonsamtaler vil gå igjennom datanettet?
Problemet i dag er jo at mobilnettet ikke har klart å holde det samme utviklingstempoet som mobiltelefonene. Den økende bruken av smartphones belaster mobilnettet langt mer enn hva det egentlig er rustet til å klare, og med mindre Telenor og Netcom bruker litt kroner og ressurser på å oppgradere mobilnettet vil nok dette ta tid. Men på den andre siden, hvorfor skulle de stresse med dette dersom det betyr en reduksjon i inntekter ? Jeg antar at de ønsker å melke dette lengst mulig

Facebook har på syv år fått 600 millioner brukere, blitt verdens mest besøkte nettsted og har gått fra å være et prosjekt på gutterommet til et selskap verdt mer enn 50 milliarder dollar. Om du tror Facebooks vekst er i ferd med å snu, må tro om igjen – Facebooks vekst har så vidt begynt – Facebook vil ta over verden!
Les innlegget her »

Lag ditt eget favicon

Å lage ditt eget unike favicon er i utgangspunktet veldig enkelt. Det finnes en rekke online tjenester som konverterer grafikk til små 16×16 px favicon for deg. Men svært ofte vil dette føre til middelmådige resultat. Det beste resultatet får du dersom du lager det selv i Photoshop.

Les innlegget her »

10 CSS3 egenskaper du trygt kan bruke

Takket være CSS3, er det nå endelige gøy og ikke minst befriende å designe og å produsere nettsider i HTML. Fortsatt er mange skeptiske til å benytte CSS3 når de produserer nettsider, ofte grunnet bekymring for bakover-kompatibilitet, varierende nettleserstøtte eller at de ønsker å avvente til CSS3 er ordentlig etablert. Selv mener jeg dette bare er tull og en bråte dårlige unnskyldninger – det er bare å kjøre på, i hvert fall med de 10 egenskapene jeg går igjennom her.

Les innlegget her »

10 tips for design og utvikling av HTML e-post

Som webdesigner har jeg designet og satt opp mange HTML baserte e-postmaler. Jeg har sikkert tilsvarende antall ganger irritert meg over hvor rigid og begrenset HTML mulighetene er, når det skal tilpasses til e-postklienter. Her er 10 tips som har gjort jobben enklere for meg, og som forhåpentligvis også vil kunne være nyttig for deg.

Les innlegget her »

Norsk ordbok i pages

Ved å bruke cocoAspell kan du enkelt få norsk bokmålsordbok til å fungere i Apples Pages. Denne løsningen er ikke like tilfredsstillende som bokmålsordboken i Microsoft Office, men cocoAspell er i alle fall bedre enn ingen ting.

Les innlegget her »

Det siste tiårets beste viralkampanjer

10 år med viralmarkedsføring slik vi kjenner det har passert, og det har vært mange gode og minneverdige kampanjer som fortsatt fungerer og inspirerer den dag i dag. Her har jeg, for hvert av de siste ti årene, filtrert ut de kampanjene jeg mener er verdt å huske.

Les innlegget her »

Projection-mapping, fremtidens reklame

Augmented Engineering, Projection mapping , 4D video mapping, 3D video projektering eller Projection Advertising? – kjært barn har mange navn, selv aner ikke hva som er denne korrekte terminologien. Hva det heter spiller egentlig ingen rolle, for denne presentasjonsformen er utrolig virkningsfull, oppsiktsvekkende og svært engasjerende. Selv om dette kom for fullt i 2009, er det foreløpig ukjent for de aller fleste av oss.

Les innlegget her »

Vis og skjul usynlige filer på mac

Det er som regel helt greit at alle “skjulte”filer er “usynlige” i Finder på Mac’n. Men enkelte ganger, slik jeg opplevde nylig, vil det oppstå behov for å se de slik at du kan slette/endre på de. Dette er utrolig enkelt å fikse og det tar deg kun 10 sekunder med Terminal.

Les innlegget her »

Firefox addons jeg ikke hadde klart meg uten

Vi har i dag mange svært gode alternative nettlesere. De blir stadig raskere, mer stabile og ser ut til å gradvis tilnærme seg en felles enighet i hvordan HTML burde rendres da spesielt med tanke på nye W3C standarder. Hvilken nettleser du burde bruke er jo opp til deg selv å avgjøre, men for meg handler det nesten ene og alene om graden av merverdi i form av add-ons; og her er Mozillas Firefox kongen på haugen.

Les innlegget her »

Har egentlig iPad noen konkurrenter?

2010 var uten tvil det store tablet-året, og “alle” spådde stor konkurranse for Apple og deres iPad i 2011. Men hvor stor konkurranse snakker vi egentlig om?

Les innlegget her »