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!
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.
Open Sans ser flott ut i Chrome hos meg. Jeg har OSX 10.8.4, og Chrome 28. Funker fint også på Retina.
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!
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: odin.s0.no/rot/anna/nrkbeta-opensans-liten.png
Det ser ikke helt ideelt ut nei, Odin. Prøvde nå å legge til
text-rendering: optimizeLegibility;
– utgjør det noen forskjell?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 🙂
Det kan man løse med `local(‘☺’)` hacken
Fint design! Men jeg syns det er litt rart når det virker som om nesten 50% av siden er dedikert til søk og siste kommentarer.
Ser bra ut! Men savner link på toppen av hver sak for å hoppe rett til kommentarene. Ellers er jeg enig med Simen over her, siste kommentarer blir kanskje litt dominerende.
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!
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)
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!
Takk, Synne!
Deleknapper er på vei!
Er det bare meg eller har det sneket seg inn et smilefjes her oppe til høyre? cl.ly/image/1x1F2o0l0v3g
Smilefjeset finnes på de fleste nettsider/blogger laget med WordPress og brukes av WordPress Stats til å finne ut hvor mange som besøker siden. Så det er helt normalt.
en.support.wordpress.com/smiley-on-your-blog/
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
Glemte og oppgi hardware info: Android 4.3, Chrome 29 Beta. Nexus 10.
+1
Zooming gjør også så menyen på venstre side går helt bananas…
Enhet: [email protected] Tab10.1
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. 😀
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.
Hei, Håvard!
Skjønner hva du mener – skal se om det er mulig å gjøre noen justeringer.
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?
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. 🙂
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 🙂
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.
Hei, Andreas!
Skrik gjerne ut hvis du har tanker om noe som kan forbedres.
Disqus-integrering ligger på blokka. 🙂
Problemer med fullskjerm youtube i artikkel om Garmin kamera:
dl.dropboxusercontent.com/u/8497433/NRKbeta%20youtube%20fullskjerm.jpg
Kjører Chrome (28.0.1500.95 m) på Win8
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!
[…] Nytt antrekk for NRKbeta. Fin kjole og nok et eksempel på at venstremenyen gjør comeback. […]
Flott redesign! Lurer på om det var noen spesiell grunn til at skjermbildet ble tatt i en incognito-tab?
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. 🙂
Da er det bare å få chromecast-støtte bygd inn i NRK TV-appen for Android så er alt perfekt 🙂
+1
Ser ut som om sia e tilpassa Touch, hovedsaklig.
Kan dette stemme?
forferdelig design. komplisert, tungt, rotete og forvirrende. alt trenger ikke se ut som en nettavis.
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!
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.
Noen som kan svare på om NRK har noen seriøse planer med å lage støtte for Chromecast på sine apper?