Responsive webdesign giver dig ét site til alle platforme
Konceptet "responsive webdesign" har for nyligt vundet stor popularitet blandt webdesignere, og i stigende grad også blandt dem, der får bygget nye websites — og med god grund.
Det er nemlig en smart måde at konstruere et website, således at det er pænt og brugervenligt på alle skærmstørrelser, lige fra en håndholdt smartphone til den bredeste computerskærm på et skrivebord.
Inspireret af fleksibel arkitektur
Det var webdesigneren Ethan Marcotte, der opfandt begrebet, inspireret af tankerne bag "responsive design" i arkitekturen, hvor rum og materialer tilpasser sig deres omgivelser. På samme måde bør websites flydende tilpasse sig den skærm og den enhed, de skal vises på, argumenterede han.
Det argument er ganske overbevisende, nu hvor vi snart krydser grænsen og surfer mere fra mobiltelefoner end fra desktop computere. Og de af os, der har surfet på nettet fra en iPhone eller en Android telefon må jo indrømme, at websites der tilpasser brugeroplevelsen specifikt til smartphones helt sikkert har den bedste brugervenlighed.
Med et responsive webdesign er der kun ét site, og derfor lander alle brugere automatisk på det rigtige site.
Slip for særskilte siloer
Jagten på mobiloptimering har ført til at mange sites har opdelt brugeroplevelsen i flere forskellige siloer, der hver især serverer en delmængde af "hovedsitets" indhold i en form, der er målrettet en meget specifik målgruppe.
Hvis man vil tjekke dagens nyheder fra Danmarks Radio kan man på sin computer loade dr.dk. Hvis man derimod vil tjekke nyhederne på sin mobiltelefon har DR lavet en version på mobil.dr.dk. Hvis man dog har en mobiltelefon af nyere dato, så kan man få en lidt bedre brugeroplevelse på mobil.dr.dk/smartphone. Men hvis man alligevel har en smartphone kan man også overveje at downloade DRs app til sin telefon - som naturligvis findes i både en iPhone og en Android variant.
Det er klart at det er både dyrt og langsommeligt at skulle opdatere indhold i så mange forskellige siloer på samme tid. Og med de mange nye telefoner og tablets, der lanceres i øjeblikket, så er det ikke holdbart i længden at skulle oprette nye små sites til hver ny kategori af enheder og skærmstørrelser. For slet ikke at nævne hovedpinen i at skulle viderestille brugeren til det site, der passer bedst til hans enhed - og brugerens potentielle frustration i at lande på et indholdsfattigt og afskrællet mobilsite uden mulighed for at komme tilbage til det "rigtige" site med det fulde indhold.
Alle brugere ser det rigtige website
Med et responsivt webdesign er der kun ét site, og derfor lander alle brugere automatisk på det rigtige site. Og samtidig får de alle en brugeroplevelse, der er optimeret til netop deres omstændigheder. Det lyder utopisk, men det er faktisk ganske enkelt.
Kernen i et responsivt design er, at et websites layout skal være fleksibelt, så det dynamisk tilpasser sig browservinduets størrelse. I stedet for at definere i sit stylesheet at et website består af to kolonner tekst, der hver er 450 pixels brede, så definerer man at de hver fylder 50% af den tilgængelige bredde. Hvis browservinduet (eller skærmen på en tablet) så er mindre end 900 pixels, så bliver indholdet ikke beskåret, men blot indsnævret til den tilgængelige plads.
Det løser dog ikke alt, da indholdet hurtigt kommer til at se klemt ud. Det er her at "media queries" kommer ind i billedet. Ved hjælp af dem kan man i sit stylesheet for eksempel definere, at de store reklamebannere øverst på en side skal skjules hvis browservinduet er mindre end 768 pixels (som er bredden på en opretstående iPad). Eller at de to kolonner tekst skal vises i forlængelse af hinanden i stedet for ved siden af hinanden, hvis skærmen er 480 pixels bred eller derunder (som er størrelse på en iPhone).
Fremtidens website
Koblet med teknikker til dynamisk at skalere billeder, så de følger med tilpasningen, så har man grundstenen til et responsivt website, der tilpasser sig sine omgivelser. Det kræver naturligvis noget tid at få det til at være både pænt og funktionelt på flere forskellige størrelser af computerskærme, tablets og smartphones - men det er langt nemmere og mere brugervenligt end at bygge forskellige sites til hver målgruppe.
Prøv for eksempel at trække lidt i kanten af dit browservindue på dette website, så det bliver gradvist mindre. Er dét måske ikke fremtidens website?
Til top