Nytt artikkeldesign på Db.no
I dag lanserte vi steg 2 i prosjetet vi kaller Redesign2010. Dette innebærer først og fremst helt nye artikler, men også undersider og fronter blir gjort om til samme layout som forsiden på Dagbladet.no.
Jeg ønsker å fokusere litt på artiklene, og trekke fram det som er nytt etter omleggingen. Nederst finner du en komplett liste over alle endringene. Den gjennomsnittlige brukeren vil nok ikke umiddelbart tenke at det er masse nytt her, og det er heller ikke poenget. Vi ønsker kun å lage en bedre opplevelse. Dette gjør vi ved å gi mer plass til både tekst og bilder, samt flere veier videre innen artikkelen. Nå kan du også klikke på alle bilder og få dem i stor størrelse, noe vi ikke har hatt tidligere.
Det vi har laget er et fleksibelt og rent design, samt mange nye verktøy journalistene kan bruke for til formidle nyheter og historier. Hovedfokuset har vært å få mer plass til innholdet som hører til artikkelen, bilder, video, tekst, fakta og mye mer. Titler er blåst opp, tekst det samme. Bildene inne i teksten kan nå bli så mye som 480px brede, der de før kun var 320px, om man ville ha tekst ved siden av. Det har vært viktig at dette ikke skulle gå utover tekstbredden, som vi har klart å øke med 70px på det smaleste feltet. Man kan selvølgelig også bruke full bredde i tekstfeltet til bilder.
Verktøylinja øverst i artikkelen har vi forenklet veldig mye. Knappene har blitt større, ikonene renere, og de er lettere å bruke.
Nå som vi har økt fontstørrelsen i brødteksten til Arial 15px, er behovet for å blåse den opp mindre, derfor har vi fjernet dette valget. Brukere som har virkelig dårlig syn vil uansett ha justert sin nettleser til å vise større tekst over det hele. Twitter-knappen vår var tidligere kun en funksjon for å forkorte url til artikkelen. Både twitter og andre twitterklienter har nå egne måter å gjøre dette på, så behovet er nesten borte for denne funksjonaliteten, dermed fjernet vi denne også. Det mange kommer til å savne er nok konvolutten (e-post), og jeg er ikke helt sikker på at den ikke gjøre et comeback senere. Saken er bare den, at vi i snitt har 25 klikk pr dag på denne, og det kan ikke forsvare å ha den der. Som vi vet gir færre valg totalt sett flere klikk, derfor er vi strenge i utvelgelsen. Vi kunne lagt inn en slags samleknapp, men igjen, flere trinn gjør også at vi mister bruk av knappene. Siste ord er nok ikke sagt her…
Selv jubler jeg nok aller mest for publiseringsdatoen, som vi nå har lagt på samme linje som verktøyene, istedet for å gjemme den i bunnen.
Våre største nye designelementer er dypetset bilde og sitatbokser. Dypetset bilde med flytende tekst rundt har vi hatt liggende i en skuff veldig lenge, men ikke før nå har vi funnet en måte å få det til å fungere som vi ønsker i artiklene. Sitatbokser er noe veldig mange har, og det er et pent element, som papiravisa bruker mye. Vi kommer nok til å bruke mest på nett ifbm magasinet m.m. Det er veldig opp til journalistene å prøve seg fram her.
Jeg kommer til å skrive et eget lite innlegg om hvordan vi løste dypetset bilde mht html og css på siden litt senere.
Layouten på siden var en liten utfordring i begynnelsen, og jeg tror ikke vi har knekt koden helt ennå, men kommet et skritt nærmere. Først ville vi gå i full bredde, alt skulle være så stort som mulig. Noen snakket til og med om å gå utenfor breddene, men det syns ikke jeg er noe poeng. Tekstfeltet er allerede mer enn bredt nok, og når vi feks har saker fra NTB, uten bilder og annen info, kan det være litt ubehagelig å lese så bredt. Dermed ble høyremargen med henvisninger liggende. Under artikkelen ligger siste saker fra gjeldende seksjon, og aller nederst gjentar vi forsidas første 4 hele rader. Dette for at man skal slippe å gå tilbake til forsida hele tiden, og ikke skal gå glipp av nye store toppsaker, om man velger å surfe i sirkel i stedet for å gå frem og tilbake mellom forsida og artikler.
Det at vi har lagt flere saker nederst i artikkelen vil nødvendigvis også gå noe utover forsidetrafikken vår, men vi syns det er verdt det, og jeg håper brukerne er enige!
Annonseproduktet på de nye artiklene er sterkt forbedret. Det er færre og tydeligere annonseflater. I tillegg er det nå de samme mulighetene for spesialprodukter som hestesko og L i toppen, slik som på front. Man kan dermed kjøpe en pakke som går tvers over Dagbladet.no. Vi hadde tidligere en annonse i artikkelteksten som var 300×250, og en på siden som var 180×500. Disse er nå slått sammen til en stor annonse midt i skjermbildet, øverst i teksten, noe annonsørene har etterspurt. Denne plassen kollapser dersom den ikke er solgt, noe som fungerer veldig godt både for leser og annonsør.
Her er en liste over alle endringene:
- Toppbildet økes fra 960 til 978px.
- Default tittel økes fra 60px til 75px.
- Ingress økes fra 18px til 26px.
- Det er gjort plass til flere bylines samtidig enn tidligere.
- Sist oppdatert – dato er flyttet til toppen, rett før brødteksten starter.
- Verktøylinja er halvert fra 8 til 4 valg, med større og tydeligere grafikk.
- Brødteksten fra 12px verdana til 15px arial, for bedre lesbarhet.
- Klikk for å zoome bilder i artikkelen
- Facebook Liker-knapp er lagt nederst i artikkelen.
- Emneord er flyttet nederst under saken, sammen med geo-tag.
- Den smaleste bredden på brødteksten er utvidet fra 180px til 250px, bredde ved faktabokser er hele 400px, samt at på lange artikler kan teksten gå i full bredde.
- Bildetekstene fra 11px verdana til 14px arial.
- Vi har gått fra 2 til 1 annonse sammen med teksten. 180×500 og 300×250 har blitt til 468×400.
- Alle bildeformater i artikkelteksten har økt med ca 150-200px.
- Alle bilder i stor størrelse ved klikk.
- Dypetset bilde med tekst rundt.
- Sitatbokser med rødt hermetegn.
- Justert design på faktabokser, rød tittel istedet for hvit.
- Grå linje under alle bilder for å skape mykt skille.
- Emneord og geotag har fått fast plass nederst i artikkelen.
- Facebook “Like-knapp” nederst i alle artikler (ikke det samme som Del på Facebook som ligger øverst).
- Et eget annonseformat for kommentarfeltet.
- Siste nytt fra seksjon under artikkelen, sammen med annonse.
- Første 4 rader på Dagbladet.no-forsida gjentas nederst i artikkelen.
- Annonseskin som hestesko og L nå også for artikler (som på forsida).
Stikkord: dagbladet.no, db.no, design, farge, font, redesign
Del på Facebook | Skriv en kommentar
Kort-URL for denne bloggposten: http://mkzxe.th8.us
Jeg liker veldig godt db.no sine nettsteder. Størrelsen på font og bilder gjør at man slipper å bruke forstørrelseglass for å kunne lese/se. Jeg vil anta nræmest også blinde kan lese fontstørrelsen på db.no. Samtidig er det veldig greit med forstørring av bilder. Utfordringer blir jo at når man leser en ca. 10 nettaviser daglig så ser man hvor dårlig medianorge sin mal blir i forhold til dem som utforsker WEB2.0 design. Og når halvparten av landets nettaviser bruker samme mal/lest, ja da blir det rett og slett amatørmessig og kjedelig. Dem deler på alle artikler – dvs drøvtygging av nyheter. EBAY.com har nettopp redesignet sin startside, dem har gått fra horisontal meny til vertikal meny – er man på vei tilbake!? Det er jo nettopp dette db.no har gjort motsatt, nemlig fjernet vertikalmenyer, og satset på horisontalmeny. Noe som ikke var så bra var tekst som følger bildet. På min 27″ IMAC med SAFARI så flyter bokstavene inn på selve bildet, og det er ikke enkelt å lese tekst opp på bilder. Jeg anntok at less is more, keep it simple og det enkle er ofte det beste: ikke samsvarer med at tekst følger bildeform? Dersom man ser på REMA1000 som har slagordet “det enkle er ofte det beste”; så driver dem å profilerer logo og butikk mer og mer avansert – da faller jo hele konseptet bort..
Hei Jan,
Dette setter jeg veldig pris på. God anmeldelse og bug-tips
Skal sjekke den bildefeilen med en gang jeg, for du har rett i at det ikke skal være slik. Teksten skal flyte pent og pyntelig rundt kantene.
Mht horisontal og vertikal meny så er jeg også veldig spent på hva som skjer. Jeg merker at flere og flere sider begynner å kombinere de to også. Menykoden er definitivt ikke knekt ennå.
Hei,
Sentrering av artikkel fungerer ikke for meg. Laptop, 1280×800, Chrome+XP-oppsett. Forsiden ligger pent plassert til venstre. Artikler blir sentrert og en reklame som delvis forsvinner ut til høyre. Horisontalt scrollefelt er ikke særlig trivlig:)
978px artikkelbilde? Hva er vitsen med det? Dagbladet har lenge hatt en usmart fetisje som går ut på at jeg trenger et bilde som voldtar halve skjermbilde før man kommer til selve innholdet. Innhold fremfor digre bilder takk! Hadde dette vært flickr så hadde det vært et poeng men jeg leser aviser fordi jeg ønsker innholdet de publiserer og det gagner ikke saken om hovedbildet er digert – tvert om senker det lesbarheten fordi det forsinker fremvisningen av innholdet i artikkelen. Jeg syns dette er like irriterende på en 15″ laptop som på min 24″ stasjonære skjerm. Det sier litt.
Jeg har selv vært designer i nettavis og på ulike kommersielle portaler og det er like frustrerende hver gang fordi designet som regel eksisterer på annonsørenes premisser, dette gjør at det nesten er umulig å designe en nettavis eller en annonsedrevet portal 100% i god design ånd. Det blir simpelthen for mange kompromisser som ødelegger for visualiteten og estetikken, jeg tror alle som jobber med web design kan si oss enig i at svært lite av det vi produserer kan sies å være 100% i korrespondanse med hvordan vi EGENTLIG kunne tenke oss å gjøre ting. Dette vil alltid være et dilemma innen web design, i tillegg har vi aspektet med gal bruk av publiserinsverktøy og innholdsleverandører som forer sites fra eksternt hold – alle potensielle farer for at et design skal holde seg over tid.
Ingen lett oppgave:)
Hei Per Hanssen,
Vi har altså kun ført bilde ut til kanten for å matche vår nye sidebredde etter omleggingen tidligere i høst. Vi holder oss fortsatt innenfor 1024-skjermene med vårt redaksjonelle innhold.
I dette redesignet syns jeg vi har jobbet veldig godt sammen, og jeg er strålende fornøyd med resultatet. Vi har fått færre annonser inne i artikkelen, store anonser holdes på utsiden, og annonseplasser som ikke er solgt vil forsvinne, istedet for å vise såkalt overskuddstrafikk. Men ja, det er alltid en stor utfordring å få annonser og design til å spille på lag. Den viktigste jobben vi gjør er å skape en balanse som fungerer for alle parter.
Først: Vi har lenge hatt full bredde på toppbildet i sakene våre, og dette har de siste par årene vært 960px, det er 18px økning etter gårsdagen, og bør knapt være merkbar
Så: Som du sier jobber vi veldig tett med annonsørene. Det er fordi leserne ikke ønsker å betale for nyheter i kontanter, og noe må vi leve av. Det kjenner sikkert du til
Takk for tilbakemeldingene, setter stor pris på det!
Liker den nye layouten svært godt. Virker dere forholder dere kun til at dere kan bruke en dypetset per artikkel, ved at dere setter bildet som bakgrunnsbildet på en artikkel.
Derfor fikset jeg en løsning som gjør det mulig å bruke flere slike per artikkel: http://goliath.terran.no/~mads/art/
Mvh,
Mads
Jeg syns Dagbladet bruker altfor store artikkelbilder, det burde være et varsko når man feks. må skrive “artikkelen fortsetter under artikkelbildet”. Jeg mener, hva er viktigst, innhold eller et digert bilde? Det er ingen god start på en artikkel at et bilde (som i sin tur sjeldent er noe mesterverk fotografi akkuratt) stjeler så mange høydepiksler som det gjør. Jeg hadde personlig vraket disse megaformatene og heller latt dette være et brukervalg, hvilket dere merkelig nok delvis har gjort selv ved å la bruker klikk et bilde større. Da har man liksom delvis selv sagt seg enig men gjort to motsettende ting samtidig. Ganske ulogisk.
La oss være ærlig her. Dagbladet, Aftenposten, VG … dette er ikke akkuratt noe god mal for hvordan et godt og estetisk design skal være. Nettaviser er og blir stygge i sin form, mye med opphav i det jeg tidligere skrev om annonsører som delvise premissgivere. Nettaviser som er populære slipper gjerne lettere unna med et lite estetisk preg fordi de har et godt innhold, og således har man jo på ett viktig punkt oppnådd mye. Men sett fra et rent designmessig faglig ståsted som skriker det “a biig no-no” når jeg er innom for å lese en av de store avisene. Der må jeg si at Dagbladet har lykkes best på papir faktisk.
Når det gjelder designet versus annonser så bruker jeg Operas glimrende funksjon for å blokkere disse, dere burde ta en nærmere titt på hvordan ting ser ut visuelt under slike forhold også. Bare et tips. Tror mange bruker ulike ad-blocks der ute nemlig:)
Stå på videre. Å designe nettaviser er og blir et digert kompromiss uansett.
PS: Store nyhetsformidlere som CNN, BBC osv bruker alle kompakte bildeformat på nett, noe som gir et langt bedre totalpreg og kortere vei til innholdet. Skjønner ikke hvor denne megapikslel fetisjen til VG og Dagbladet kommer fra egentlig.
Hei Mads,
Men se her har du jo kommet opp med strålende løsning. Når ting roer seg litt her skal jeg kikke på hvordan vi kan få dette inn i resten av flyten, hvis det er ok for deg 
Vi har en del utfordringer mht redigering av bokser og artikkelelementer i forhold til disse bildene, men det forbauser meg ikke om dette vil funke bedre på den fronten også. Takker og bukker!! 
Wow! Det stemmer det. Vi har kun lagt opp til ett bilde om gangen
Hilsen Elisabeth S
Kjære Per Hanssen,
Jeg setter pris på en god og konstruktiv diskusjon, men jeg tror ikke det er noe stort poeng å diskutere mer med deg. Vi kommer aldri til å fjerne store bilder i artiklene våre, så du kan spare de kreftene dine til andre diskusjoner. Det beste jeg kan gjøre for deg er å anbefale RSS-lesere for norske aviser.
Uansett, takk for engasjementet.
Mvh Elisabeth Svendby
Kjære Elisabeth Svendby.
Mitt mål er ikke å overbevise deg eller andre som jobber med design i Dagbladet at dere bruker for store bilder, det jeg gjør her er å bidra i en debatt som du SELV har invitert til via dagbladet.no – med mindre den avkortes for folk med andre meninger enn dine egne da selvsagt?
Hei Per Hanssen.
Forstår at du kan bli provosert over at vi bruker store bilder, men begrunnelsen er enkel. Store bilder inneholder informasjon, mens små blir mer som ikoner og ikke har samme dokumenterende effekt som de små.
Vi har hele tiden vært i forkant med å bruke store bilder på web, og vi er ganske trygge på det vi gjør.
Vi har blitt kopiert av de fleste store nordiske nettavisene hver eneste gang. Både da vi over natta 16-doblet størrelsen på bildene i artiklene og da vi begynte med store bilder på front.
Det samme gjelder når vi la en stor videospiller som bilde inn i artikkelen.
Dette er blitt standard på nett i de nordiske avisene.
Men der altså lov å mene at de burde vært små.
Jon R. Hammerfjeld, kanalsjef Dagbladet.no
Ja, bilder er viktige. De kan fortelle en historie i seg selv, men er også med på å sette stemninga i artikkelen. Men klart, design er subjektivt, og alle skal få ha sin mening om bildebruk
Jon,
Det at de norske nettavisene kun følger hverandre av grunner som har med usikkerhet å gjøre er ikke det samme som at Dagbladet skal ha blitt premissgiver for godt design. Hvis du ser på de virkelig store nyhetsformidlerne på nett, slik som BBC og CNN (kunne nevnt mange her) så ser du at dette med digre bildeformat er fraværende i fysisk sammenheng med artikler. Det vil ikke si at de ikke benytter seg av fotografier som en storyteller, men da gjør de det på en måte som er langt mer brukervennlig, enten i regi av et avsatt galleri eller lignende. Med andre ord får jeg SELV velge om jeg syns at artikkelbilder er interessant eller ikke.
Jeg må få sagt i samme vending at jeg ikke syns Dagbladets artikkelbilder er videre fantastiske, iallefall ikke så gode i seg selv at de trenger SÅ stor plass. Mange av bildene er jo bare “knipse-bilder” tatt i farten av en travel journalist, enten det gjelder deres egenproduserte bilder eller når dere kjøper de fra et nyhetsbyrå. I 9 av 10 tilfeller snakker vi ikke akkuratt om noe gripende grafikk som understøtter stoffet på en spesielt positiv måte.
Når det gjelder hva nordiske nettaviser gjør i helhet så topper de lista over stygge sites, nettopp fordi de bare følger hverandre og ikke bidrar med noe nytt. Da holder ikke bare å si at man har mye trafikk som forsvar for sine designmessige grep, et godt eksempel på dette er jo Aftonbladet. Blant mange av oss designere et mareritt av en nettavis, kanskje den styggeste av dem alle? Så vidt jeg vet har de flere brukere enn noe annen avis i norden. Så, design vs brukermasse er et tema i seg selv for avisene, nettopp fordi brukerne har et så sterkt forhold til innholdet. Det er jo ikke tilfeldig at det er aviser som topper TNS Gallups liste over mest besøkte nettsteder her til lands. Avisene slipper enklere unna et lite estetisk design. Det er jo innholdet som derfor alltid må være i fokus. Det ligger implisitt i det sistnevnte at et labert fotografi ikke gagner stoffet men bare utsetter tiden det tar for meg å komme til det.
Til slutt: Bilder som ikke har en bredde på massive 978px kalles ikke ikoner Per. Jeg håper da inderig dere ikke lever i det landet.
Hei Elisabeth!
Det er helt OK for meg at dere bruker min løsning. Med min løsning vil det også være mulig for søkemotorene å indeksere bildene, siden den bruker img-taggene
Mvh,
Mads Erik Forbeg, http://twitter.com/forberg