nrk.no

NRKbeta i ny drakt!

Kategorier: NRK, NRKbeta & Webutvikling

NRKbetas mobiltilpassede design i 2013

Det var vel kanskje på tide. Vi har i lengre tid jobbet med et nytt design på NRKbeta, som i dag endelig er på plass. Det kommer helt sikkert til å være noen barnesykdommer, men NRKbeta er nå responsivt og lettere enn før.

Responsivt design

Det er over tre år siden det forrige designet rullet inn på skjermen din, og mye har skjedd på webutviklingsfronten siden da. Responsive nettsider er kanskje det mest nevneverdige, og noe som mange har savnet på NRKbeta. I dag har vi lansert et design som skal fungere fint på både desktop, nettbrett og smarttelefoner, og som skal være lettere enn det forrige.

Utformingen er også ganske annerledes enn forrige versjon, kanskje best illustrert med den venstrejusterte menyen på desktopversjonen. I dagens 16:9-verden har vi ofte god plass i bredden, og det har vi prøvd å utnytte.

Designet er laget av tidligere NRK-medarbeider Martin Berglund for en god stund siden, men på grunn av diverse prosjekter som har holdt flere i NRKbeta-redaksjonen opptatt med andre ting gjennom året, har vi ikke fått lansert det før nå.
Likevel: En stor takk til Martin for godt arbeid!

Barnesykdommer

Designet har helt sikkert flere barnesykdommer, og vi skal få utbedret disse i løpet av uken. Vi er klar over at det ser dårlig ut i både IE7 og IE8, og vi lover (å prøve) å få orden på dette. 🙂

Hva synes du om det nye designet? Skrik gjerne ut om eventuelle feil!

38 kommentarer

  1. Hans Fredrik Nordhaug

    Jeg syns det nye designet var fint. Det er fortsatt NRKbeta, men responsivt og moderne.

    To problemer: Fonten («Open Sans») ser ikke bra ut i Chrome. I mobilvisning blir «Hopp til innhold»-lenka synlig (over logoen) når man velger menyknappen.

    Svar på denne kommentaren

    • Henrik Lied (NRK) (svar til Hans Fredrik Nordhaug)

      Hei, Hans Fredrik, og takk for innspill!

      Ser ikke umiddelbart problemet med Open Sans her – har du mulighet til å sende et screenshot?

      «Hopp til innhold» skal fikses!

    • Odin Hørthe Omdal (odinho/Velmont) (svar til Henrik Lied)

      Problemet med Open Sans er at han alltid ser so inst liten ut! WordPress brukar denne skrifttypa over fjøla no til dags, og det er ganske vanskeleg å lesa. Dessutan er det ei ekstrem forskjell på regular og bold. Eg lurer på om ikkje Chromium-motoren vel feil vekt på skriften. Eller condensed.

      Korkje gamle Opera (12) eller Fx viser det same problemet. So er nok ein irriterande Chromium-feil.

      Bilete: http://odin.s0.no/rot/anna/nrkbeta-opensans-liten.png

    • Odin Hørthe Omdal (odinho/Velmont) (svar til Henrik Lied)

      Eg byrja sjå litt meir nøye på det, og det ser ut til å ha vera ein Chromium-bug som treng eit litt spesiellt oppsett for å reprodusera! Eg hadde Open Sans Condensed installert, men ikkje Open Sans. Ttydelegvis får ikkje mange den feilen fordi det er normalt å anten ha båe installert, eller ingen av dei 🙂 So det ser betre ut no, var ikkje dykkar feil 🙂

      optimizelegibility gav ei mikroendring, men sikkert lurt å ta det vekk att. Er betre å bruka standardval når det ikkje er ein god val for å gjera anna 🙂

  2. Ble positivt overrasket i morges da jeg så at dere hadde fått en langt bedre layout for mobiler, det er definitivt noe jeg har savnet. Så langt ser også desktop-versjonen veldig bra ut. Eneste jeg kan foreslå er å flytte tekstspeilet litt mer mot venstre for å få litt mer luft på høyre side, eventuelt å ha litt bredere marg på høyresiden.

    Men som sagt, veldig bra!

    Svar på denne kommentaren

    • Odin Hørthe Omdal (odinho/Velmont) (svar til Øystein)

      Einig med dei tri siste. Kva med å setja ein max-width på høgrespalta med siste kommentarar osb, og ha den liggjande til høgre på skjermen. Og so bruka all den ekstra plassen på å stadig fylla ut meir og meir kvit plass på kvar side av artikkelen?

      Eg har no sopass liten skjerm at det ser greit ut her då 🙂 Det er absolutt fint (utanom Chromium-problemet med skrifttypa).

      (Kommentarfeltet hugsar meg ikkje lengre)

  3. Gratulerer! Lyst og luftig – jeg liker det. Synes forresten det er kjekt med sånne deleknapper under hvert innlegg, jeg, slik at man enkelt kan kvitre om artikler som inspirerer. Bare et innspill!

    Svar på denne kommentaren

  4. Gisle Enåsen

    Footer eller hva en jeg skal kalle det for oppfører seg litt merkelig på tablet:

    Ruller jeg helt ned så er den hvit i et par sekunder før den blir mørklagt: http://b-real.org/wordpress/wp-content/uploads/2013/08/Screenshot_2013-08-19-17-00-09-1024×640.png

    Når jeg skriver kommentarer så hopper dette feltet oppover og hindrer meg å se navigasjon:http://b-real.org/wordpress/wp-content/uploads/2013/08/Screenshot_2013-08-19-17-05-11-1024×640.png

    Svar på denne kommentaren

  5. Etter at man har scrollet nedover på siden, virker høyre side så tom. Det er et stort grått felt der, som ikke brukes til noe. Hvis høyre»menyen» (eller deler av den) kunne fulgt med videre nedover, hadde det forsvart det gråe feltet mye bedre. Hvis ikke er det bare å utvide den midtre delen til å vises helt ut til høyre der det nå er tomt. 🙂
    Ellers må jeg bare si at ellers er jeg meget fornøyd med ny side, og flott at en mobilversjon endelig er på plass. 😀

    Svar på denne kommentaren

  6. Håvard Pedersen

    Designet som helhet var nydelig. Det eneste jeg reagerte på var selve innholdet i høyre sidebar. Hovedoverskriftene (titlene til WP-widgetene?) var mindre enn underoverskriftene (innlegg-titlene), og det gjorde at jeg måtte scanne sidebaren både en og to ganger før jeg skjønte strukturen i innholdet der.

    Svar på denne kommentaren

  7. Joakim Tønnesen

    Nydelig design! Samme stil som Smashing Magazine, bare dere har gjort det mye bedre. Liker spesielt godt at nettsiden ikke breier seg for langt ut på min 27″ skjerm. Synes alt for mange nye nettsteder har alt for stor spredning av innhold. Her ligger alt innholdet fint og konsist til venstre. Da kan jeg bruke høyresiden av skjermen min til Twitter-feed eller andre ting.

    Hvilket standpunkt tar dere rundt debatten om å måtte støtte IE7 eller ikke? Jeg ser dere skriver at også IE8 er nedprioritert her i første omgang. Jeg mener dette er et steg i riktig retning. Trendsettere (må vel være lov å kalle dere det i denne sammenheng?) som NRKbeta er viktige i denne diskusjonen. Har dere planlagt å ha 100% støtte for IE7 på dette prosjektet, eller er det andre ting som har høyere prioritet?

    Svar på denne kommentaren

    • Henrik Lied (NRK) (svar til Joakim Tønnesen)

      Takk, Joakim!

      Ut i fra nettleserstatistikken har vi valgt å ikke legge spesielt stor vekt på IE7, som den siste måneden står for 0.2% av alle besøk på NRKbeta. IE8 står for cirka 3%, IE9 står for 4.5% og IE10 for 7.5%.

      Siste versjoner av Chrome og Safari står for 49% av alle besøk i samme periode, og da er viktig at siden fungerer over gjennomsnittlig godt der.

      Og, ja: For NRKbeta, med kanskje norges mest teknisk oppegående lesere, er det lov å være litt kresen på nettleserstøtte. 🙂

  8. Frode Evensen

    Liker det nye utseende deres godt, så gratulerer med ny drakt 🙂

    Men savner knappen for å like en artikkel på Facebook. Dere har en knapp for å dele, men den enklere varianten å bare like eller anbefale skulle jeg gjerne hatt tilbake 🙂

    Svar på denne kommentaren

  9. Andreas Hesselberg

    Selv er jeg bare relativt fornøyd med det nye designet. Men anyway: Kanskje dere kan integrere kommentarfeltet med Disqus istedenfor å bruke WordPress sitt eget kommentarsystem? Gir bedre integrasjon og flere muligheter.

    Svar på denne kommentaren

  10. Eirik Opsanger

    Trenger man egentlig «Forsiden» i menyen? Er vel bortimot standard etterhvert at et trykk på logoen bringer deg tilbake til førstesiden?

    Synes også bold-skrift blir litt for fet. Spesielt når det er linker midt inni tekst..

    Ellers fiiiint!

    Svar på denne kommentaren

    • Henrik Lied (NRK) (svar til Daniel Bakke)

      Takk, Daniel!

      Når man er innlogget i WordPress, får designet en liten administrasjonstoppstripe som ikke nødvendigvis ser så veldig pen ut. I stedet for å logge ut ble det enklere å bare ta screenshot i Incognito-modus. 🙂

    • Vebjørn (svar til anonym)

      Er litt einig her. Spesielt framsida verkar ganske tung og rotete. Siste-kommentar-boksen til høgre tek for mykje merksemd og i alt synes eg det er for lite luft (betre inne på artiklane). Likar forresten godt at de tek i bruk responsivt design, og mobilversjonen ser svært bra ut!

  11. Vidar Andreassen

    At kategorien «Siste webfunn» er skilt ut for seg kan for så vidt være en god idé, men for disse sakene kan man ikke lenger se om det har kommet nye kommentarer uten å gå inn på hver enkelt sak.

    Som dere selv har påpekt flere ganger, det dukker jevnlig opp interessante kommentarer her – disse kan fort gå uoppdaget for disse sakene sin del.

    Svar på denne kommentaren

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *. Les vår personvernserklæring for informasjon om hvilke data vi lagrer om deg som kommenterer.