Det finnes mange webdesign-nettsteder som prøver å oppsummere året, og trekke ut trender innen web design. Det har ikke jeg tenkt å gjøre her. Men da jeg gikk igjennom Web Designer Wall sin Best of design 2010, som forøvrig inneholdt mange inspirerende nettsteder, så snakket de om “Responsive Web Design” som det neste store innen web design.
Såvidt jeg vet så var det Ethan Marcotte som introduserte begrepet “Responsive Web Design” tidligere i år i en glimrende artikkel på A List Apart.
Enkelt fortalt så betyr “Responsive Web Design” at en nettside tilpasser seg enheten man surfer på, uten at man trenger å lage enhets-spesifikke versjoner av en side. En måte å gjøre dette på er med “Media Queries“. Som W3C sier det:
“by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.”
Moderne nettlesere som Safari 3+, Chrome, Firefox 3.5+, og Opera 7+ har støtte for “Media Queries“. Dette vil også bli støttet i Internet Explorer 9. Med andre ord er dette noe vi kan ta i bruk i veldig nær fremtid.
Her er to eksempler fra “Best of design 2010“-listen som viser samme side i to veldig forskjellige skjermoppløsninger:
Her er noen flere eksempler på slike nettsteder. Prøv å endre skjermstørrelsen og se hvordan disse sidene oppfører seg:
Jeg synes ideen bak “Responsive Web Design” er veldig interessant, og jeg gleder meg til å prøve det ut. Men jeg tror dette vil påvirke hvordan vi jobber både som webdesignere, webutviklere og webredaktører.
Utfordringen tror jeg er at som webdesigner så må man tenke endel annerledes enn man gjør idag. For webutviklere så betyr det også en utfordring, siden dette stiller andre krav til HTML og CSS, spesielt hvis man velger full fleksibel bredde og bildeskalering.
Jeg tror de viktigste endringene for disse vil være:
For webredaktører så tror jeg de trenger å fokusere mer på hva de vil at nettstedet skal gjøre, i de enkelte bruker-situasjoner. Og da tenker jeg på bredden av enheter med alt fra mobiltelefoner, smarttelefoner, spillkonsoller, iPad o.l. til hjemme-pc’er med stor skjerm. I følge statistikk referert til i artikkelen på A List Apart så vil mobil-surfing gå forbi PC-surfing i løpet av 3-4 år, så dette må man forholde seg til uansett om ikke så lenge.
Hvis dere har tid, så kan jeg anbefale både Best of design 2010 og Responsive Web Design.
Vet dere om noen norske nettsteder som bruker “Responsive Web Design“?
Kreativ utvikler, IXD
Synes webdesign og webtypografi er kjempetøft. Mener i tillegg at avrunda hjørner er noe av det største som har skjedd de siste årene. Jobber hos IXD med å lage fin html-kode og gjennomgripende stilark. Jobbet før det skikkelig lenge i Gazette med akkurat det samme. Utdannet Grafisk Høyskoleingeniør, og stolt av det. Er ellers stor fan av Streken.
Følg meg på Twitter
Kuttisme.no er drevet av
9 kommentarer til "Responsive Web Design"
[...] This post was mentioned on Twitter by Ørjan Clausen, Hjörtur Scheving and Eric Haidara, Roger Guttormsen. Roger Guttormsen said: Har du noe tro på at "Responsive Web Design" vil bli det neste store innen webdesign? http://bit.ly/fulO13 [...]
Jeg må innrømme at jeg syns framtiden ser lys ut for designere som skriver egen HTML&CSS og også designer i nettleseren. Jeg tror at det blir stadig mindre konstruktivt med en prosess der designer leverer skisser fra Photoshop til en programmerer.
Gode innspel! Hvis media queries kan bidra til meir HTML-prototyping, så er det i seg sjølv gevinst nok til å ta det i bruk.
Ei viktig utfordring blir å serve opp riktige bilder og hindre lasting av unødvendige javascript. Korleis skal ein sørge for at mobilbrukarar (som foreløpig har både treig og dyr bandbreidde) får laste bilder som er fornuftig komprimert, medan desktop-surfarar får the real thing? Stoler ein på hard komprimering og skalering i nettlesaren, eller må ein lage fleire versjonar av eit bilete, og la media queries avgjere kva bilete som vert brukt?
Angåande JS, er situasjonen kanskje litt enklare: http://www.quirksmode.org/blog/archives/2010/08/combining_media.html
Hemningslaus sjølvreklame: eg har lagt opp min eigen nettstad til å justere seg avhengig av tilgjengelig bredde, frå ~1400px til ~300px. Eg har dog ikkje tatt hensyn til at mobilbrukarar må laste ganske tunge bilete, i og med at det er ei portefølje. Dette er eit enkelt eksempel, men det inneheld nokre typografiske detaljar.
Takker for kommentarer, sånn rett før jul :-)
@Elisabeth: Helt enig! Jeg har mye mer tro på å komme tidlig i gang med en HTML-prototype, og så designe rett i den. Men dette vil sette større krav til den grafiske designeren, eller i det minste til mer tettere samarbeid mellom designer og utvikler.
@Asgeir: Viktig poeng du nevner, det med bilder. Vi har diskutert litt her på kontoret rundt dette med skalering av bilder, men siden vi ikke har gjort det før så blir det mye synsing. Men ser frem til å teste det ut. Ellers synes jeg nettsiden din er et bra eksempel på responsive-web-design.
Dette er et kjempeinteressant tema. Oppfordrer dere til å uttype det mere!
Synes dette virker veldig interessant. Dette er definitivt noe jeg kommer til å sjekke ut mer!
Takk for godt innlegg. Jeg lurer litt på hvordan dette spiller sammen med krav til tilgjengelighet og forsåvidt synlighet? Noen som vet?
W3spor: angåande synlegheit, så vil ikkje bruk av media queries spele ei stor rolle, då markup’en i stor grad vil være uforandra. Ei positiv bieffekt kan jo vere at responsive web design aukar fokuset på kvalitet på innholdet, og mengda, og at ein dermed vil sjå meir søkevenlige sider i framtida.
Hjertens enig med Roger og Ethan. Du etterlyser norske nettsteder, følg med, Epinova vil om få måneder lansere nye, norske nettsteder med denne metoden.