Responsiv design på ett dåligt sätt

Här följer några exempel på hur man tycker sig ha följt det nya buzzwordet men inte nått hela vägen fram. SVT har gjort det nu och då blir det ofta legitimt att alla andra följer efter – särskilt de statliga organisationer som vill ligga i framkant.

Man kan säkert tolka innebörden av responsiv design på många sätt, men om man utgår från Ethan Marcotte som trots allt myntade uttrycket så är grunderna vi alla verkar vara eniga om:

  • A flexible, grid-based layout.
  • Flexible images and media.
  • Media queries.

Med andra ord ska det vara ett kolumn- och rutsystem som flyter över tillgänglig yta, bilder och annan media ska vara flexibelt över tillgängligt utrymme, och sist men inte minst har man brytpunkter satta för hur layouten anpassar sig inom vissa storleksintervall.

Några andra nyckelingredienser han tar upp i sin bok Responsive Web Design är:

  • Välj inte ett canvas – du gör inte en tavla på en duk av absolut storlek (sida 2).
  • Tänk mobile first – annars riskerar man att visa massor med innehåll på grund av att det går på en stationär dator och göra mobilwebben som en eftertanke (sida 112).

Att följa denna hypade filosofi innebär att man fortfarande måste ta samma hänsyn som tidigare. Responsiv design är inte en ursäkt för att göra en tveksam webb. Nedan har jag plockat fram några kända som okända exempel på responsiv design och pekat på vad man kunnat göra bättre.

Staffanstorps responsiva webbplats har helt missat målet med prioriteringarStaffanstorp

Staffanstorp var förmodligen först ut bland kommunerna med att jobba responsivt och har gjort ett bra resultat för sitt tidiga försök.

Men hur de kom fram till att 60-årsfirandet skulle drabba mobilbesökare övergår dock mitt förstånd, åtminstone delen att det inte gick att förklara för vem som nu bestämde det hela att det var en mycket dålig idé. Nu liknar deras startsida något som påminner om 90-talets förskräckliga splashsidor – alltså introsida som glatt hälsar dig välkommen och annat som inte gynnar besökaren.

Både har och jobbar för närvarande inom en politikerstyrd organisation. Det behövs inte särskilt stor fantasi att tänka sig att _all_ extern kommunikation _måste_ primärt förklara denna högtidshändelse för kommunen – oavsett om du egentligen har alldagliga ärenden som berör dagis eller sophämtning så får du under hela 2012 inte missa 60-årsfirandet.

Gissa vad som händer om du klickar på 60-årsbannern? Jo, sidan laddas om och ser precis likadan ut vilket belyser felet med att ha en sådan enorm puff där, man förstår inte nödvändigtvis var man kom.

Positivt:

  • De var tidigt ute och många sidor fungerar bra.
  • Gridsystemet är i huvudsak väldigt följsamt och de har inte valt en stor eller liten version via media queries.

Negativt:

  • Glömt att prioritera den mobila användarens behov framför att de råkar fira 60 år.
  • Laddar in jQuery först en gång själva via Google CDN, sedan en gång till tack vare Meltwater-integrationen. Välj leverantörer som inte dubblerar din trafik när du bör kunna instruera dem att anropa samma, cachade, skript.
  • Laddar in 420 Kb javascript och 200 Kb CSS vilket är lite väl mycket.
  • Startsidan använder 19 bilder som sätts via CSS. Det borde gå att effektivisera med CSS Sprites.

Titta på staffanstorp.se

Bonnier låter dig ladda hem 2,5 Mb innan sidan är klarBonnier

På Bonniers webbplats möts man av “Continuously reinventing media” och visst är de relativt tidiga för sin bransch med att bygga en webbplats på detta vis.
Det är uppenbart att de kämpat på med något stilrent som ändå ska sticka ut.

Skulle gissa att de tycker man ska få surfa på deras webb även i fullskärm. Här sitter undertecknad på 2560 x 1440 pixlar vilket gör bilderna så klart ganska oskarpa. Man kan inte vänta sig annat.

Notera hur de slitit för att få en titthålsfunktion på vissa bilder som egentligen ligger i bakgrund. Det är inte lätt att testa det där i alla tänkbara upplösningar så det inte uppstår underligheter.

Positivt:

  • Väldigt följsamt gridsystem.
  • Av den saftiga mängden bilder som laddas hem är de trots allt hyggligt optimerade. Optimeringspotentialen är bara 5% vilket är rätt bra.

Negativt:

  • 2,5 Mb är ganska mastigt att ladda hem med tanke på vad man ser på skärmen.
  • Flertalet underligheter uppstår på grund av titthålsfunktionen. Till deras försvar så är det hyggligt intuitivt att försöka se vad man söker, exempelvis deras VD på ett sätt som inte är halshuggande.

Titta på bonnier.com

Webbfunktion.com via Twitter Bootstrap

Märkligheter med media queries i Twitter BootstrapTar min egen sajt som exempel bland många som förlitar sig på ett designramverk som inte riktigt håller måttet utan massiva justeringar. Här talar jag om ramverket Twitter Bootstrap som visserligen har en hel del förtjänster men som döljer komplexiteten i att göra ett gott hantverk med designen.

Det man lätt luras till med dessa ramverk är att det knappt kräver någon ansträngning, alternativt halvvägs in i ett projekt nöjer sig med att ha en brytpunkt för Iphone, en för Ipad och en för desktop-datorer. Det är inte direkt responsivt om man ska hårddra det. Se bildexemplet, massor med oanvänt utrymme genom någon bugg i media queries och det blandas friskt i antalet kolumner inom den enda huvudsakliga kolumnen.

Positivt:

  • Snabbt att komma igång och se hur bra det fungerar.
  • Bra med stöd genom javascript-tillägen för exempelvis slå samman menyn om utrymmet börjar bli snålt.

Negativt:

  • Har i praktiken 2 canvas, en för Iphone upp till Ipad och en för stationär dator med minst 1200 pixlars bredd. Har du annan upplösning kan det se bra märkligt ut.
  • Gott om standardupplösningar som inte riktigt fungerar eller där tillgänglig yta inte används trots att ytan är relativt liten.
  • Det blir _väldigt_ mycket overhead-kod som man inte använder men skickar ut till besökaren.

Sen har jag förmånen att känna en del 90-talister som är ganska svåra att göra nöjda med en webbplats, åtminstone när den körs via en mobil. En av dem, Linus, sa något med denna andemeningen tidigare angående responsiv design:

“Kul, kul, åtminstone för er halvblinda gamlingar som kör Iphone med liten skärm. Normalt sett är den vanliga webben mer användbar så ge mig för tusan chansen att zooma ut och bestämma själv vad jag får se.”

Vad tycker du om responsiv design? Lämna din kommentar, var nu kommentarsfältet ligger i din webbläsare 🙂

2 thoughts on “Responsiv design på ett dåligt sätt

Leave a Reply

Your email address will not be published. Required fields are marked *