Responsive design

Det ser rigtig godt ud.
Flot arbejde .

Lidt firkantet set var det vel A List Apart, der skabte hele denne "Responsive Webdesign" bevægelse og de har lavet denne bog der nok er den bedste reference lige pt;A Book Apart - den korte introduktion til det kan læses og ses som eksempel her på A List Apart

Det hidtil bedste eksempel jeg har set på implementationen af det er Jyske Banks hjemmeside så mon ikke der også kan findes lidt kodeinspiration dér.

Tak Daniele, det er nu bare et helt almindelig Wordpress setup

Tak for det Kim den vil jeg kigge på. Ja har også stødt på Jyske Bank som eksempel et par gange nu.

Jeg har ikke læst A List Apart's bog om responsive webdesign, men deres bog om CSS3 var meget velformuleret og rigtig nem at gå til, så hvis resten af deres bøger er i samme stil er den helt sikkert værd at købe.

Derudover så har Smashingmagazine og for nyligt fået nyt design hvor de gør bruge af responsive webdesign, og jeg synes at de gør det virkeligt godt. Webdesignerwall.com har også haft et responsive design i et godt stykke tid og er et rigtig fint eksempel på at man sagtens kan få et website til at se godt ud til trods for at det ikke er ens.

Du kan også kigge lidt på Mark Boulton's artikel A Richer Canvas, han har en fin indgangsvinkel og generelt er det han skriver meget velovervejet og det skinner tydeligt igennem at man ved hvad han taler om (og reflekterer over det han laver!).

Som jeg ser det, handler det (meget groft sagt) jo om at man i dén grad kan finde ud af bruge HTML semantisk og CSS til design-delen således at man med flere stylesheets kan få det samme indhold til at gøre sig godt på forskellige opløsninger.

Få forfatteren til at læse korrektur på webbet, hvis web tekst er fejlfyldt, kan det afspejles til bogen.

/J

Et andet simpelt og vel-implementeret eksempel er www.trentwalton.com - Hans kollega fra paravelinc.com Dave Rupert har desuden lavet en del javascript libraries (primært jQuery plugins) som hjælper med forskellige problemer i forhold til responsivt design; særligt fitvids og fittext. Hans github: https://github.com/davatron5000

A book apart bogen er et godt køb hvis man vil have en overordnet introduktion. De 9 dollar er givet godt ud for ebogen. http://www.abookapart.com/products/responsive-web-design . Hvis du er meget stærk i CSS vil du ikke få nogen aha-oplevelser - men den kan tjene som reference og inspiration - selv for en gammel CSS haj.

Ulemperne ved "responsive design" er at implementere det ordenligt. Der er mange faldgrupper, som folk desværre tit ikke tænker over. En af de typiske eksempler er billeder. Hvis du serverer det samme billede for de største desktop versioner som mobilversionerne vil du enten få grimme billeder i de store opløsninger eller alt for datatunge billeder for mobilen.

Praktisk talt, så bygger responsive design på brugen af CSS media-queries som bruges til at justere CSS i forhold til forskellige parametrer. Ulempen er at ældre browsere ikke understøtter det - men der findes Javascript polyfills der kan kompensere for det.

Lidt flere links til dybere studier af emnet:
A list apart artikel: http://www.alistapart.com/articles/responsive-web-design/
CSS-tricks artikel: http://css-tricks.com/css-media-queries/

Forskellige andre ressourcer:
Bookmarklet til test af responsive designs: http://www.benjaminkeen.com/misc/bricss/

Skeleton responsive boilerplate: http://www.getskeleton.com/
Goldilocks responsive boilerplate: http://goldilocksapproach.com/ - Har ikke prøvet nogen af dem - men jeg har bookmarket dem på et tidspunkt og de kan måske tjene som et udgangspunkt for nogen der tager de første steps ud i responsive design.

Respond.js: https://github.com/scottjehl/Respond - mediaquery polyfill for IE6-8