iAllenkelhet er firmabloggen til Netlife Research. Vi lager slanke, lettstelte og effektive interaktive løsninger som gjør at du oppnår dine mål og får fornøyde brukere.
Nå som du akkurat har lagt ned wap-sidene, startet å sende alle smarttelefoner til touch.ditt-nettsted.no og endelig fått godkjent appen din av Apple, så er det plutselig enda en ting du må fikse: Responsiv design.
Slitsomt? Vi forstår deg.
Responsiv design handler i utgangspunktet om å skrive HTML og CSS slik at nettstedet fungerer best mulig i alle mulige situasjoner.
Å følge standardene for HTML og CSS har lenge vært et bra prinsipp. Når offentlige nettsteder kjemper om å oppfylle Difi-kravene som gjelder disse standardene, er det for eksempel bra for både brukere med skjermlesere og søkemotorer.
Responsiv design gir oss en enkel måte å få samme side til å fungere bra i alle mulige skjermstørrelser. Det å følge standarder handler ikke bare om at nettstedet skal se bra ut i både Firefox og Safari, men også om å støtte utallige mobiltelefoner og andre dingser som brukerne i økende grad besøker nettstedet ditt med.
Mobilguru Luke Wroblewski og vennene hans har filosofert rundt situasjonen vi er i og kommet med en oppfordring: «Think and behave in a future-friendly way»
Responsiv design fungerer i dag, er fremtidsvennlig, men også en vennlig gest til brukerne dine. Tenk «følge standarder» i stedet for «nymotens tåkeprat», så høres responsiv design litt mindre ut som en hype.
På flere norske nettsteder kommer i dag 4-5% av besøkene fra ulike mobiler og nettbrett. Mange med mobilbesøk i denne størrelsesorden vurderer å tilpasse nettstedet til mobil eller har gjort det. Offentlige nettsteder får til og med stjerne i margen av Difi. Andre har så mye som 25% mobiltrafikk uten at nettstedet er tilpasset eller fungerer spesielt bra på små skjermer.
Vår erfaring er at brukerne stort sett vil det samme uavhengig av om de sitter på mobil eller foran en PC-skjerm. På toll.no er årsavgiften like populær på mobil som på PC. Mobilbrukere er litt mer interessert i alkohol- og tobakkskvota, mens PC-brukere sjekker tolltariffen litt oftere.
Hvis dette også gjelder nettstedet ditt, bør du ikke gi mobilbrukere en strippet versjon av nettstedet som bare inneholder litt av det de har behov for. Med responsiv design kan brukere på mobil og nettbrett få tilgang til hele nettstedet ditt.
Det er ikke bare hva folk bruker nettstedet til, men hva folk bruker det med som bestemmer om nettstedet ditt blir bedre med responsiv design eller ikke.
Da Apple lanserte iPhone i USA i 2007 var det uten App Store, og ikke mulig å installere flere programmer enn de som fulgte med. Alternativet Apple gav brukerne var å kjøre programmer i nettleseren, altså programmer bygd med HTML, CSS og Javascript.
Det har selvfølgelig forandret seg totalt med App Store, som nå inneholder over 550.000 apps.
Verken Apples «Web Apps»-alternativ fra 2007 eller responsiv design kan erstatte alt det en app kan gjøre. Men med mindre brukerne dine trenger tilgang til spesiell funksjonalitet i telefonen (for eksempel kameraet), er det ikke sikkert at du må lage en app.
Å ha en app i dag gjør deg ikke kul eller til kongen på byen. I noen uheldige tilfeller gjør det deg til en irriterende masekopp. Den eneste fordelen med å laste ned appene til Failblog og IMDB ser ut til å være å slippe å bli spurt om å laste ned appene:
I motsetning til disse appene er responsiv design ikke bare fiffig, det er også veldig lite irriterende.
Audun jobber mest med innhold på nett. Han stiller alltid spørsmålet «hvorfor det» når noen vil legge ut nye artikler.
I juleferien skisset jeg og et par kollegaer raskt opp en alternativ forside til sas.no. Hvorfor i all verden gjorde vi det? Jeg er en ganske alminnelig SAS-kunde. Jeg liker å fly med SAS, men jeg liker dårlig å forholde meg til nettstedet sas.no. Det jeg liker minst er at det er synonymt med umulig [...]
I mars går Difi i gang med å kvalitetsvurdere 700 offentlige nettsteder i Norge. Og til høsten avsluttes det med konferanse, stjernedryss, premiering og fest. Men alt er ikke rosenrødt med Kvalitet på nett. Kanskje det er på tide med noen endringer.
Martin Berglund, 26.01.2012 12:40 am
Skjermstørrelse er kanskje den forskjellen på ulike enheter som er lettest å forstå. Det er også den egenskapen som oftest trekkes frem når vi diskuterer «Responsive Web Design» (RWD). Likevel kan det være greit å trekke frem andre egenskaper som også spiller en rolle i RWD: «Touch», «gestures», pikseltetthet, støtte for GPU-akselerert CSS-animasjoner, avspilling av video, osv.
Det er masse nytt og spennende vi må settes oss inn i, og jeg tror det vil skje en enorm utvikling i tiden fremover.
Spørsmålet om App eller webapplikasjon er interessant og vanskelig å vurdere. Jeg mener det er nyttig å vurdere begge deler. Kanskje en responsiv nettside kan dekke bredden av et produkt, mens en App/webapplikasjon kan fokusere på å løse et begrenset antall oppgaver?
Audun Rundberg, 26.01.2012 8:23 am
@Martin: Enig i at valget mellom app og responsiv design ikke er krystallklart alltid og at de kan dekke forskjellige oppgaver. Jeg tror det er veldig lurt tenkt at responsiv design bør være utgangspunktet. I flere prosjekter vi jobber med lager vi mobilversjon først. Vi prototyper i HTML og jobber med responsiv design helt fra starten av. Da får man konsentrert seg om det som er viktigst på nettstedet. Å jobben på den måten gjør også at mobiltilpassing blir noe mer enn et tilleggskrav i en allerede lang kravspesifikasjon.
Martin Berglund, 26.01.2012 8:47 am
@Audun: «Mobile First» er absolutt en fornuftig ende å starte i når nettsiden skal være RWD. Kanskje ellers også ;) Det er en uvant øvelse synes jeg, og det tar tid å «skrive over» gamle vaner.
Hva tenker du om nettaviser og lignende redaksjonelle sider og RWD?
For eksempel forsiden til NRK eller P3.
Pål Erik Bruserød, 26.01.2012 12:57 pm
Takk for bra innlegg og et viktig tema.
Vi er i gang med å bygge nye nettsider og tenker selvfølgelig på RWD og mobile first. Men jeg har et spørsmål som vi ikke har helt klart å få finne noe gode svar på. Vil dere anbefale å designe siden ut ifra 960 grid 12 kolonner eller 16 kolonner?
Ole Fredrik Lie, 26.01.2012 1:19 pm
@Pål Erik: Hele poenget med responsivt design er jo nettopp at griden skaleres i forhold til størrelse på skjerm. Jeg ser derfor liten gevinst i å låse max-størrelse på designet til 960px. Jeg har brukt å ta utgangspunkt i 1140 cssgrid. Det er et superenkelt css rammeverk tilpasset 1280 skjermstørrelse og skalerer helt fint ned til mobil. Sjekk ut og last ned gratis: http://www.cssgrid.net
Det er dog en rekke ting en må huske på når en jobber med responsivt design; rekkefølge på elementer, skalering av tekststørrelser etc. Dessuten er det desto viktigere å huske på at viktige interaksjoner ikke baseres på mouseover events.
Min erfaring er at det er moro og utfordrende å designe for flere enheter og skjermstørrelser samtidig. Sjekk gjerne ut denne landingssiden som et eksempel: http://offers.sandviks.com/no/Disney/biler.html
Pål Erik Bruserød, 26.01.2012 2:04 pm
@Ole Fredrik: Vi har vært mye frem og tilbake på hva vi skal bruke. En av grunnen til at vi havnet på 960 er http://960.gs/ oghttp://www.designinfluences.com/fluid960gs/16/ også syntes jeg at ved hjelp av http://www.getskeleton.com/ brytes sidene ned på en bra måte.
Har gjort en del research rundt dette og ikke funnet noen gode forklaringer på hva som er anbefalt, men dette er hovedgrunnen til valg av 960. Men takk for bra tilbakemelding.
Audun Rundberg, 26.01.2012 2:33 pm
@Martin: Hvis mye av innholdet på nettstedet er bilder eller video, så er det litt mer å tenke på enn om det meste er tekst. Det er nok en relevant problemstilling for sidene til NRK?
En side med mange store bilder tar lang tid å laste ned på en mobil hvis forbindelsen er treg. Noen mener det er et problem at selv om man skjuler bilder med display: none i CSS i et responsivt design, så bruker telefonen tid på å laste ned bildene. jeg tenker at man ikke bør skjule bilder som faktisk er en del av innholdet, men heller se på hvordan de kan gjøres mindre på andre måter hvis det er viktig. Nå har mange telefoner (fra iPhone 4 og senere) en veldig høy oppløsning som egner seg godt til bilder, så aller helst burde kvaliteten være høy på mobilbildene også.
En del saker i nettavisene har mye mer bilder på www-utgaven enn mobilutgaven, og det synes jeg er litt rart. Disse bildene er jo der fordi de bygger opp under innholdet i saken.
Lyd- og videoavspilling må også gjøres slik at det fungerer på andre enheter enn PC, og nødvendigvis uten Flash for å fungere på iPhone og iPad. Så hvis man har en avspiller som ikke fungerer på mobil må man nødvendigvis gjøre noe med det.
Her er masse linker om disse og noen andre problemstillinger: http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
Arve Hinna, 26.01.2012 2:47 pm
Hei
Jeg blir vel ikke så populær her nå, men jeg skrev for en tid tilbake et innlegg med momenter jeg anser som dårlig med responsiv design. Se gjerne http://blog.inbusiness.no/2011/11/hvorfor-tilpasset-laout-ikke-alltid-er-like-lurt
Antar mange er uenige?
Vilda Buhs, 26.01.2012 3:45 pm
Takk for et aktuelt innlegg. Deler en lenke med mange flotte eksempler på responsiv design til illustrasjon og inspirasjon http://mediaqueri.es/
Audun Rundberg, 26.01.2012 7:17 pm
@Arve Tror ikke du gjør deg upopulær. :-) «Verktøykassen» responsiv design løser ikke alt, tilpassing av bilder og unødvendig nedlasting gjør at man må tenke seg litt om. Det finnes ikke like elegante løsninger på det enda, men kanskje det kommer? Jeg synes likevel grunntanken – å basere seg på standarder og ikke låse seg til én skjermstørrelse eller enhet – er veldig god.
@Vilda Mye bra eksempler der!
Martin Berglund, 26.01.2012 9:06 pm
@Audun: Takk for lenker!
Håndtering av store mengder video, bilder og lyd er absolutt en relevant problemstilling for NRK. Reklame er også et interessant område, men ikke så relevant for NRK.
Jeg har lovet et par av dine kollegaer at det kommer en bloggpost på NRKbeta om hvordan vi i NRK har håndtert bilder i vårt arbeid med responsiv design. Tiden strekker ikke helt til, men jeg skal rope ut når mine flinke kollegaer har fått tid til å skrive om prosessen og teknikken.
De utfordringene jeg er mest opptatt av – som du er inne på i din kommentar – er de redaksjonelle valgene som er så direkte knyttet opp til dagens layout og design. Sakene som plasseres på forsiden prioriteres og justeres for å tiltrekke seg den oppmerksomheten journalistene og desken mener er riktig. Bilder og tekst spiller sammen. Desken justerer bredder, høyder og tekststørrelser på det meste av innholdet på forsiden. En slik detaljstyring gjøres hos de fleste store og små nettaviser i dag. Jeg tror det kan være vanskelig å fortsette slik dersom prinsippene for responsiv design skal være førende.
Da Aftenposten lanserte sitt redesign, var det noen som lurte på hvorfor sidene ikke fulgte «den nye moten».
Jeg håper nye tanker kan erstatte noen av de grepene som brukes i dag, men sliter litt med å argumentere for hva kan de tankene være? Er det så viktig for sluttbruker at linje nummer to i overskrift nummer tre har litt større tekststørrelse enn tittelen forøvrig? Må sak to og tre stå ved siden av hverandre?
Torstein Helleve, 26.01.2012 10:32 pm
Trur, som nokre alt har vore inne på, at prioriteringa av innhaldet er like avgjerande som det tekniske for at responsivt design skal fungera, i alle fall på innhaldsrike nettstader.
På http://www.hioa.no/ forsvinn “Ny student våren 2012?” til botnen på sida når vinduet vert smalt nok. Det uheldige med det er at “Ny student våren 2012?” er typisk innhald som ein gjerne vil at brukaren skal oppdaga, men som brukaren ikkje nødvendigvis er klar over eksisterer. Men ein har tilsynelatande ikkje tenkt over at ei plassering som kan fungera på vid skjerm ikkje gjer det på liten.
Audun Rundberg, 27.01.2012 8:45 am
@Martin Det du skriver om vitner om at dette er en prosess som ennå ikke er over.
Men vi har jo til dels gitt slipp på kontrollen allerede, for eksempel vet man jo ikke helt hvordan disse RSS-feedene blir presentert for brukerne. Deling til Facebook og Twitter er et annet eksempel der innholdet blir vist for andre uten at de som har laget innholdet har 100% kontroll på hvordan det vil se ut og hva som blir delt. Så har du også tjenester som Instapaper og«Leser»-knappen i Safari.
Forsiden er jo fremdeles viktig siden mange går direkte til den, så får vi se hva som skjer. Heldigvis er denne bloggposten skrevet i WordPress og ikke hugget i stein. :-)
@Torstein Bra eksempel! Dersom ein skulle ha laga hioa.no på nytt, så kunne ein kanskje laga mobilversjonen først?
Så måtte ein først finne ut om «Ny student» er noko mange kjem dit for å finne og om det er ein inngang som fungerer for dei som vil ha bruk for innhaldet på den sida. Basert på det ein finn ut kan ein kanskje prioritere opp «Ny student», noko som ein då sikkert burde gjere både på mobil og PC.
Eit anna alternativ, dersom «Ny student» ikkje er så viktig for folk, er å leggje lenkjer frå undersider som er meir besøkt. Til dømes kan sidene for eit enkelt studium få ei oppfordring om å sjekke «Ny student»-sida, hvis ein finn ut at dei aller fleste forsøkjer å finne det faget dei skal studere først.
Martin Berglund, 27.01.2012 1:39 pm
Responsiv design (og nett generelt) er definitivt en pågående læringsprosess. Diskusjoner som den vi har her i kommentarfeltet fører forhåpentligvis til mer nysgjerrighet og læring rundt emnet.
@Audun: Godt poeng med API-er og RSS-feeds, det er også områder vi må ha et forhold til.
Torstein Helleve, 27.01.2012 8:28 pm
@Audun: “Ny student” er typisk informasjon som institusjonen gjerne vil ha fram til målgruppa (for då minkar rennet på studentinfoskrankene), men som ikkje målgruppa veit eksisterer. Få nye studentar vil leita etter “Info til nye studentar”, dei vil leita etter “kart”, “timeplanar” osv. (eg er ved Universitetet i Oslo, vi driv med det same der).
Så dette er noko ein må skuva i augo på målgruppa for at dei skal få det med seg, det er ei støtte/eit tilbod som dei oftel ikkje er klar over finst.
Men eg avsporar litt, merkar eg – poenget er i alle fall at ein må ta omsyn til kva som skjer med dei ulike informasjonselementa når dei flyttar på seg, ei utfordring som er større på nettstader med mange ulike oppgåver, som hioa.no.
(meir avsporing er at HIOA godt kunne klart seg utan å bruka så mykje plass på at Håvard Tjora trivst som lærar, det har vel dei fleste fått med seg, og brukt den plassen meir fornuftig. Men eg er ikkje ute etter å dissa HIOA som på ein del område kan sjåast på som ein konkurrent til UiO – eg synest det er rosverdig at dei har teke fyrste steget. Dei har nokre steg att, men dei er i gang og vil sikkert justera etter kvart som dei gjer seg meir erfaringar)
Anders Matre Gåsland, 28.01.2012 1:18 pm
Mange gode eksempler her også:
http://webdesignerwall.com/trends/inspiration-fluid-responsive-design
Jørgen Stensrud, 30.01.2012 7:49 am
Å lage sider med Responsive er såpass enkelt at man strengt talt bare burde hatt det som standard utgangspunkt for alle sider man lager. Tilpasningene i de fleste tilfeller er såpass små at det koster så lite i forhold til innsats og penger at det bare er å tilby det som standard (for oss som er i konsulentbransjen). Det vil selvfølgelig alltid være tilfeller der man vil kreve mye mer av en mobilversjon enn det som enkelt kan justeres med css, men i veldig mange tilfeller så er det relativt liten innsats som kreves for å få en bra mobil/pad-versjon med bakgrunn i det man har.
Vi har også forsøkt oss på et par forskjellige grid-rammeverk. Sist brukte jeg BluCSS som jeg i alle fall synes fungerer relativt bra. Skulle gjerne ha sett den som 12-grid, men det går jo an å bygge et selv.
Vi er definitivt i et paradigmeskifte når det gjelder tilpasset innhold på nett vs mobil. Blir spennende å jobbe med fremover nå som også jQuery mobile også slenger seg med som et nytt verktøy som blir gøy å kombinere med RWD.
Kåre Garnes, 31.01.2012 8:29 am
noen burde lage olabukser i responsiv design. #stadigfeitere
Audun Rundberg, 31.01.2012 9:15 am
@Anders: Takk for link!
@Kåre: Behovet melder seg raskere enn man tror.
Per Allan Johansson, 31.01.2012 10:16 am
Burde ikke denne bloggen her hatt responsivt design? Det finnes noen fine pakker til WP som enkelt lager mobilutgave av siten :)
Eirik Hafver Rønjum, 01.02.2012 1:07 pm
Smart hvis brukeren kan deaktivere responsiv design selv? Heller mot ja, men diskuterer med meg selv. Sjekk http://toolboxdigital.com/2011/06/making-responsive-web-design-optional/
Hva tycks?
Audun Rundberg, 01.02.2012 10:31 pm
@Per Allan: Ikke bare er olabuksa ikke responsiv, den er visst også nede på knærne. Vi ser på saken!
Per Allan Johansson, 02.02.2012 9:26 am
Jeg er enig med deg @Eirik. Det bør være en mulighet for brukeren å velge “full site” når man browser med en mobil eller brett, helt klart. Jeg gjør det aldri selv, men har hørt om andre som “vil” ha muligheten. Lurer på om de klikker på den :)
Torstein Helleve, 02.02.2012 1:08 pm
@Eirik: funksjonen burde kanskje liggja i Preferences i nettlesaren og ikkje på nettstaden?
Martin Berglund, 02.02.2012 10:41 pm
@Audun: Jeg har satt sammen en kjapp justering av CSSen denne siden bruker. Du kan teste for å se om den fungerer som «Quick Fix» for responsiv blog :)
http://dl.dropbox.com/u/5385004/screen-blog.css
Ida Aalen, 06.02.2012 4:48 pm
Hvis det er nødvendig å velge “full site” på en responsiv web design, så har man jo ikke laget et responsivt web design. Da har man jo laget en begrenset, kjip mobilside, bare ved å bruke media queries i stedet for nettlesersniffing.
Bør ikke være nødvendig med “deaktivering” om man har laget et godt responsivt design..
Per Allan Johansson, 07.02.2012 11:22 am
@Martin
Ser ut som du mangler en } helt i bunnen av fila, for å lukke det siste media-queriet :)
/per allan
Martin Berglund, 07.02.2012 2:29 pm
@Per Allan: Det ligger en } helt i bunnen (linje 1739). Mangler jeg flere?
CSSen er et resultat av et par timers knotting på en fredag kveld, så den er ikke produksjonsklar :) Jeg så på dette som en fin øvelse for å finne ut hvor mye jobb det var å endre layouten.
Pingback: → Visitnorway.com er nå tilpasset mobil | visitnorway.com – bransjeblogg og lab
Audun Rundberg, 13.02.2012 10:51 am
@Martin Kult! Testet det først på forsiden, og da var det noe som ikke funket helt. Men ser det fungerer adskillig bedre på blogginnleggene. Fredag kveld er perfekt for litt knoting. :-)
Pingback: → 3 myter om mobil — iAllenkelhet
Pingback: → Piksler og prosent i responsive web design — iAllenkelhet
Pingback: → Buzzword-bingo med Jeremy Keith — iAllenkelhet
Pingback: → Hvorfor lagde vi en iPad-app? — iAllenkelhet