I det siste har eg lagt merke til stadig fleire designshowcaser og bloggar som benyttar seg av eit flytande grid av små boksar som på dynamisk vis fyller skjermen med innhald. Dette var iallefall ei webdesigntrend i 2009 og er nok det enda, men  ikkje like “ny”. På disse tider for eit år sidan var denne trenden nevnt som “unusual layouts” i nokre større webdesignmagasin. Tanken var å publisere dette innlegget i fjor, men bloggpausen vart lengre enn planlagt. Men no sjølv om det ikkje er “siste nytt” benyttar eg dette utkastet til å “sparke” meg i gong med blogginga igjen! Dog med ei litt endra førstesetning (sjå over).

Joshua Davis er ikkje kjent for å være ein følgjar og ( dette utan å ha håndfastbevis ) det er ikkje urimeleg å tenkje at han var ein av dei som starta denne trenden.

Dette formatet egner seg best dersom du skal vise bilder og ikkje ha hovedfokuset på tekst. Det er ein fin måte å sleppe å måtte skrive mykje tekst for å fylle opp “spalteplass” mellom visuellearbeid. Dei variantane som har minst tekst har statisk størrelse på høgda til boksane sine, medan dei med litt meir tekst stort sett har dynamisk høgde på boksane sine. Dette skaper to ganske ulike uttrykk inanfor same trend, dei heilt statiske rutenetta mot dei meir organiske og rotete rutenetta.

Farger

Det går stort sett i et monotone fargekart på disse sidene. Dei fleste er grå med kvite boksar, sjølvsagt med nokre unntak.

Den mørke bakgrunnen med lyse innholdsboksargjer at kjem godt fram frå bakgrunnen. Sjå eksempelet her korleis innholdet kjem mot deg på den lyse(over) og forsvinn på denne mindre utbredte mørke varianten (under).

Det minnar om noko…

Kan det være oppslagstavla det minnar om? Tumblr-temaet "PhotoBoard" gir utan tvil assosiasjonar til oppslagstavler i kork.

I tillegg til oppslagstavler trur eg det er inspirert av det stadig tilbakevendande trendikonet: Polaroid. Dette bildeformatet med ei kvit ramme rundt bileta med ekstra stor ramme nedst for å kunne holde i og beskrive biletet skulle vel være eit velegna format på nettet også.

Nokre dømer på Flytande grid layout webdesign:

Publik: Også nettbutikkar har nytta denne layouten.

Sunday Vision: Eksempel på negativ fargebruk

Next Century Modern: Eit av få eksempel med andre fargar enn dei ein finn frå svart til kvitt.

Norske eksempler

Sidan dette er ein norsk webdesignblogg har eg spora opp nokre eksempler innen webdesign frå Norge også, her er to som er merka med grid fra Webdesignmagasinet.

Sommerseth Design har fulgt denne trenden til punkt og prikke.

I kommentarene til Sommerseth Design på Webedesignmagasinet ble det nevnt en annet norsk eksempel på grid layout:

Arngren har jo nokre fellestrekk med trenden, men må trekke den litt for mangel på noen basisregler for design som de andre eksemplene også benytter seg av.

Tar like godt med Norges beste webdesign 2009 (i følge leserne til Webdesignmagasinet) som også er basert på flytande grid layout. Det er jo passande at dette som heilt klart var ei trend i 2009 også fekk sin plass i historiebøkene:

Sjølv om denne nettsida også følg trenden så er denne utført med eit av dei meir originale utrykka.

“Stjel stilen”

Tenkte å avslutta i god “trendartikkelstil” med å ei oppfordring om å prøve trenden sjølv. Ønsker du å teste det ut kjapt på WordPress? Grid-A-Licious er eit bra wordpress-tema å teste ut.

Kom gjerne med innspel og tankar om denne trenden, har du også nokre tankar om kvifor og korleis trenden oppsto? Skriv ein kommentar i felta under.

Og eg set pris på å få litt deleglede sidan dette er første bloggpost på lenge, om du vil dele ligg det eit knippe deleikoner nedst.

VG Nett informerar i disse dagar annonsørane sine om den nye forsida til vg.no som får nytt design tirsdag den 24. november. Dei opplysar også at artikkelsidene vil inntil vidare være de samme. Du kan få ei forsmak på nye vg.no i ein presentasjon dei publiserte på VG Annonseinfo under overskrifta: “Velkommen til et bredere VG Nett!” Her følgjer nokre utdrag frå presentasjonen og mine tankar kring nye vg.no:

Bredda vert no endra frå 800px(sjå under) til 1200px(sjå over)

Dei tek vekk sidestolpen til venstre, og fordelt tema navigeringa til toppen og ein breiare sidestolpe til høgre:

Dei endrar også på mange av annonseformata sine, Netboard får ny størrelse 580*500. Og dei tilbyr “Sticky”-annonser

Sjå meir om nye VG-Nett på VG Annonseinfo. Denne informasjonen er no fjerna frå VG Annonseinfo.

For meg framstår framleis VG som ei uoversikteleg og rotete nettavis. Ein skulle nesten tru det var kvadratmeter-pris på nettsida. Men sakene har fått litt betre plass, ved at venstre sidestolpe er fjerna. Men ved å bruka meir luft i designet ville det heile sitt meir oversikteleg ut. Det er kanskje oppskrifta for å få nøgde annonsørar – å lage alt like støyande, slik at det er vanskeleg for brukarane å skille mellom redaksjonelt innhald og annonser.

Edit: No er den nye fronten til VG Nett på plass, les meir om den hos VG.no

Adobe har utvikla ein aplikasjon i Flex som let deg enkelt teste nettsider i fleire nettleserar, med testing så er det snakk om at det blir teke skjermskudd av ei nettside i dei forskjellige nettlesararne. Det har vore eindel tenester før som tilbyr det same.

Det som gjer BrowserLab betre er at den lar deg legge to ulike nettlesar skjermskudd oppå kvarandre slik at du på ein rask og effektiv måte kan finne avik mellom dei ulike nettlesarane. Dette har også vore mogleg med IE Netrenderer, men då kun mellom ulike versjonar av IE. Adobe BrowserLab har med følgande nettleserar Internet Explorer 6 og 7 på Windows XP, Firefox 2 og 3 på Windows XP og Mac OS X og  Safari 3 for Mac. Dei har planar om å legge til fleire nettleserar. Å få med Opera må jo være eit klart mål, der skjer det jo ofte litt av kvart.

Adobe kunngjorde i går at selskapet har gjort en tidlig versjon av selskapets BrowserLab-tjeneste tilgjengelig for testing. Dette er en Flash-basert løsning som kjøres i brukerens nettleser, hvor designere og utviklere kan se og sammenligne hvordan websider ser ut i ulike nettlesere, uten å måtte forlate nettleseren man normalt bruker.

Les meir om BrowserLab på Digi.no

Preview and test your web pages on leading browsers and operating systems – on demand. Adobe BrowserLab makes it easier and faster than ever before to see how your designs appear to your customers and audience. Get your results in real time, from virtually any computer connected to the web

Les meir om Adobe BowserLab hos Adobe

NB. Tenesta er no stengt for nye medlemmer i prøveperioden..

Nokon Kvittra meg om Cúfon ein ny metode for å inkludere spesialfontar i webdesign. Tidlegare har jo sIFR hatt monopol på å benytte trykkfonter på overskrifter og liknande på nettsider. Men sIFR er og blir litt tungvint å implentera i webdesign, ein må til dømes inn i Flash for å klargjere fontfilene før dei kan brukast.

Men Cúfon verkar mykje enklare å implementera, og framstår som eit godt sIFR alternativ. Eg har testa det på bloggen her no, med “Helvetica Neue Ultra Light”. Denne fonten har alltid vore tiltenkt som font i overskriftene, men eg orka ikkje å byrje på nok ein sIFR implementasjon (ikkje at det er forferdeleg mykje jobb, det er berre litt “tetak”). No har eg ila. 30 minutt lese det eg treng å vite om Cúfon, lasta ned javascriptet, generert fontfiler og implementert det i bloggdesignet. 30 min. frå start til slutt på å installere, implementere og teste “text-replacement-script” det kan ein like!

Cúfon baserar seg på javascript og rendringa til nettlesarane i staden for flash-rendring slik som sIFR gjer det. Og er støtta av følgjande nettlesarar* (visse avvik sjølvsagt):

• Internet Explorer 6, 7 and 8
• Mozilla Firefox 1.5+
• Safari 3+
• Opera 9.5+
• Google Chrome

Korleis installerar ein Cúfon?

1. Last ned scriptet
   Det vert anbefalt å bruke den komprimerte versjonen av scriptet
2. Generer fontfiler ved å laste opp dine filer og køyre dei gjennom generatoren til Cúfon.
   Hugs å sjekke rettighetane for implementering på internett for fonten din før du laster opp.
3. Last opp cufon.js-fila og din-font-fil.font.js-fila til nettsida di
4. Inkluder javascriptene i <head>-seksjonen i filene dine
5. Oppdater nettsida di.

Kan noko so enkelt verkeleg ha teke 3o min?! Dette brukte eg omlag 30 min. på første gong eg testa det

Men eg har 2 ting som eg ikkje var nøgd med.

1. Lastinga, det tek litt lang tid før den “bytter” fontent din frå standard webfont til spesialfonten. (omlag 1 sek)
2. Den lagar innrykk(på 3-5px)  i 1. linja til overskriftene i Firefox

Punkt 1 blir forhåpentleg forbetra, kanskje det tom. er noko eg har gått glipp av i dokumentasjonen?
Punkt 2 kan være noko i stilsettet til bloggen min, dette skal eg prøve å sjekke opp i kjapt.

Dette er på ingen måte ein grundig test av Cufon, men ein kort introduksjon og test frå mi side. Kom gjerne med dykkar tilbakemeldingar på Cufon her. Eg vil ha den installert på bloggen i minst. 1 månad, med mindre noko er frykteleg gale for nokre av brukarane..

Les meir om Cúfon her
Generer Cúfon fontfiler her

Eg skreiv for ei tid sidan “PHP knuser andre programmeringsspråk” basert på undersøkinga “The state of the web 2008″. I dag las eg på Computerworld at nok ei undersøking stadfestar det same, utviklarar likar best å jobbe i PHP.

Les artikkelen til Computerworld her og kik på undersøkinga sjølv her

Eg har i det siste jobba med lage samlande nettside for webdesign i Noreg. Det finnes jo altfor mange webdesign galleri frå før, men eg saknar stadig eit galleri for norsk webdesign eller webdesign frå Noreg.

Dette behovet er no kokt i hop til Webdesignmagasinet, BETA versjonen er klar sånn omtrent. Det gjenstår litt arbeid med å få til automatisk generering av skjermskudd. Men det fungerar manuelt bra slik det er no.

Eg håpar at du tek deg tida til å kike innom, teste litt og gi tilbakemeldingar på kva som fungerar bra og kva som fungerar mindre bra (funksjon, konsept og visuelt).

Og tips for all del om bra webdesign i norge, det er jo fordi det er så vanskeleg å finne bra norsk webdesign at webdesignmagasinet er satt i gong. Og me slit litt med å finne alle godbitane der ute..

Folka bak SXSW konferansen har avhelde ei spørjeundersøking i web-bransjen, undersøkinga var open i 3 veker, og over 1200 deltok. No er resultata lagt ut på nettet, les nokre utdrag og dei komplette resultata her.

Det er mykje spanande lesing i resultata av undersøkinga. For eksempel 1.22% av alle som jobber i industrien, bruker IE6 som hovudnettlesar! Gamle “gode” HTML har fortsatt ca 20% som heller brukar det i staden for XHTML. Positivt at antallet på personar som validerar sidene sine er oppe på 36%. Og jQuery ser ut til å bli industristandard for Javascript på nettet. Og eit slag i trynet for alle som meinar at PHP er på veg ut, 63% brukar PHP som utviklingsspråk for systemtuvikling for nettet (webutvikling?).

Det er sjølvsagt berre eit lite utdrag av bransjen, men eg kjenner meg iallefall igjen i mange av resultata her.

Les alle resultata her

Dei siste 2 månadane har ein fått lese mange “Best of …… 2008″-artiklar, eg har heile tida tenkt at dette bør eg også skrive. Men av tidsmangel velgjer eg å heller skrive ei oppsummering av alle dei ulike 2008 oppsummeringane eg har vore gjennom – som er interessant for “webfolk”.

Oppsummering? Det blir vel meir ei lita liste over gode 2008 oppsummeringar, mykje god lesing her:

1. webdesignerwall.com – Best of css design 2008
2. noupe.com – 50 most beautiful icon sets created in 2008
3. noupe.com – 2008 most popular design posts tutorials and resources
4. aytemir.com – Best of 2008 for designers tips tricks resources and inspirations
5. aytemir.com – Best of 2008 for developers tips tricks scripts and sources
6. aytemir.com – Best of 2008 for bloggers 1600 tips tricks advices and strategies
7. toxel.com – Top 75 best design resources of 2008
8. nettuts.com – The best tutorials and freebies of 2008

Det finnes nok mange eg ikkje har kome over også, del gjerne din eigne funn med ein kommentar

Eg tykkjer alltid det interessant å sjå kva verktøy og metodar andre webdesignerar brukar. Så her kjem mine topp-10 mest brukte og nyttige verktøy i min jobb som webdesigner.

1. Firefox

Mitt første val for nettleserar, Firefox er utvilsomt den det er kjekkast å kode ei nettside til. Og i kombinasjon med to viktige programtillegg: Firebug og Web Developer blir det eit svært nyttig verktøy til å feilsøke kode og kle av ei nettside ned til minste detalj. Last ned Firefox her om du ikkje alt brukar den!

2. Internet Explorer

Mitt siste val av nettlesar, lite intuitiv, ustabil og full av overbeskyttande sikkerhetsfunksjonar som hemmar surfegleda mi. Men det er nok den viktigaste nettlesaren ein kan ha om ein skal drive med webdesign. Internet Explorer troner framleis over dei andre nettlesarane blant brukarar flest, og vil nok gjere det så lenge Microsoft er markedsleiar på operativsystem. Derfor må nettsida du lagar fungere i denne nettlesaren. Og det er ofte litt frustrerande –  særskild IE 6, IE 7 er betre og IE 8 virkar lovande, men det  tar nok nokre år før versjon 8 er den mest brukte nettlesaren blant IE brukarane.

3. Safari

På dei fleste prosjekta eg jobbar med er det safari so kjem som nummer 3 blant nettlesarane til brukarane. Eit tips for å feilsøke i Safari er å låse opp Safari sin eigen “debugger”. Den minnar om Firebug og er integrert i Safari men den må låsast opp først. Du kan lese korleis du låser opp debug i safari her.

4. Opera

Opera er den nettlesaren som oftast ligg på 4. plass. Sjå øvrige punkter.. Og ja, no er eg ferdig å ramse opp nettlesarar. Men enn må ha dei store nettlesarane og teste nettsidene frå start til slutt for å skape  webdesign som held mål.

5. Blyant og papir

Genialt enkle verktøy som mennesker har brukt i lang tid. Dei fleste gode webdesign startar som enkle blyantstrekar på eit papir. Frimerkeskisser er ein god start, då skisser ein alle ideane ein kjem på når ein går i gong med eit prosjekt som små skisser på mlag 3x4cm. Deretter lagar eg meir detaljert skisse av dei frimerkeskissene ein tenkjer at fungerte. For å byrje rett i eit grafisk-program som photoshop og likande på ein datamaskin er ofte hemmande for den kreative starten i eit prosjekt.

6. Illustrator

Dersom ein skal forsikre seg om at nettsida blir optimalt bør ein ta steget over i Adobe Illustrator for å reinteikne skissene meir konkret som “wireframes” eller strukturskisser. Dette er eit godt utgangspunkt for å være sikker på at ein får med den riktige informasjonen som er viktig å få med. Mot kundar er det også supert med tanke på at dei ikkje heng seg opp i at “knappane er grønne” sjølv om kunden likar betre “raude knappar”. Og ein sparar faktisk tid på kor ting skal være når ein går i gong med det detaljerte designforslaget.

7. Photoshop

Det detaljerte designforslaget lagar eg utelukkande i photoshop. Det er det “fotoredigeringsprogrammet” eg har brukt heilt sidan Photoshop 4.0 i 1998(?) så det er for meg utenkeleg å bruke andre verktøy til dette. Men det finnes sikkert gode alternativer til Adobe Photoshop.

8. HTML- & CSS-editor

Her er det mange verktøy å velgje mellom, på jobb brukar me stort sett Dreamweaver, det har eit utmerka “Code-view” som me brukar. Dettte programmet følgjer også med Adobe Design Premium som mange kjøper. Men heime likar eg best TextMate, då det er eit mykje lettare program som ikkje lastar alle dei unødige WYSIWYG-funksjonane til Dreamweaver. Noko min litt eldrande mac tykkjer om. For at eg skal jobbe effektivt er det viktig at det er mange “snippets” (kodesnuttar som du aktiverar med hurtigtaster), og at dei har oppslagsverk på CSS-reglane eg ikkje brukar dagleg. Smultron og Aptana er forresten gode gratis alternativ til TextMate og Dreamweaver.

9. FTP-klient

Når ein er ferdig å planlegge og bygge webdesignet og feilsøkinga i nettlesarane er gjort er det på tide å laste opp “rammeverket” eller malen til nettsida på internett. Her brukar eg Transmit på mac og WinSCP på windows. Dei støttar dei fleste ftp-tilkoblingane og begge to let deg redigere filene på server direkte og enkelt.

10. Publiseringsløsning

Eit heilt uvurderleg verktøy for vellykka webdesign, ei nettside som ikkje held seg oppdatert blir fort ei utdatert nettside. Så å sørge for at kunden eller andre som skal vedlikehalde nettsida har gode verktøy for å publisere innhald på ein ikkje teknisk måte er uvurderleg. Her svergar eg “sjokkerande” nok til publiseringsløsninger me har utvikla på jobb: Argo Publisering til avanserte prosjekter og Argo Start til enklare prosjekter. Dei gir mange avansert moglegheiter i oppsett. Men for kunden er dei like enkle å bruke som å skrive dokumenter i Word eller likanande.

Men dersom du ikkje har budsjett på eit prosjekt og ynskjer å bruke mykje tid å ressursar på å installere og konfigurerer ein publiseringsløsning sjølv, kan eg anbefale WordPress som kan være mykje meir enn berre eit blogg-verktøy.

Og du då?

Håpar du fann det interessant å lese kva eg vektlegg i mine prosessar. Del gjerne dine eigne synspunkt og unnværlige verktøy:

Plutseleg såg eg det, eg anar ikkje kor lenge det har vore slik men eg trur ikkje det er så lenge. Dagbladet.no har redesigna webdesignet på nettavisa si. Det er noko blått øverst på nettsida, og nokre nye knappar ein kan skifte bakgrunnsfarge med. Rimeleg unyttig tykkjer eg akkurat disse knappane, eg ville heller hatt knappar for å gjere bredden større eller fjerne annonser, litt vel håpefull den siste der.

Men dei let deg altså berre endre bakgrunnen til høgre, lyse grå, grå, gråare – BLÅ! Eg velgjer å tru at dei planlegg å bli ei “blå” avis og tek det forsiktig, med å antyde den nye kursen på menyar og kanskje tom. sjekke kor mange som vil ha blå bakgrunn. Enden på visa blir nok et blått Dagbladet. 

Eller er dette berre for å gi oss eit frampeik på ei nettavis som let brukarane tilpassa korleis dei skal bruke ho?