Webbredaktörens test av responsiv design

Skriver ett litet testprotokoll inför att VGR ska få en responsiv webbplats. Tänkte att våra webbredaktörer ska veta vad de ska leta efter när deras webb får responsiv design. En webbredaktör har oftast begränsade möjligheter till att påverka en design, men nedan är vad jag kunde komma på att en webbredaktör kan titta efter.

Bakgrund

Poängen med responsiva webbsidor är att försöka få webbplatsen att se bra ut, och vara användbar, på alla de olika storlekar av skärmar som finns idag. Vissa skärmar ska pekas på och de klassiska datorerna styrs med en muspekare – din webbplats ska fungera oavsett vad din besökare väljer att använda.

Testa din webbplats

På nedan testpunkter ska du kunna svara ja på så många punkter som möjligt. Under varje punkt finns lite observationstips om du känner dig osäker på vad du ska leta efter.

Många problem kan du säkert fixa själv efter eget omdöme, men om du är osäker så skapa gärna ett dokument där du sparar adressen till sidan och en kommentar om vad som behöver fixas. Dessa kommentarer kan du sedan skicka till din kontaktperson i webbförvaltningen.
En vanlig lösning på redaktionella problem är att sätta relativa mått, istället för pixlar bör man använda procent, på tabellers bredd exempelvis. En mobilskärm behöver oftast 100 % på en bild eller tabell.

Att testa på en mobiltelefon, och gärna även på en surfplatta, i stående läge:

  1. Skrolla igenom hela sidan. Ser designen klok ut, fungerar bilder och är all text läsbar?
    Observera: det kan ha smugit in konstigheter på enskilda sidor som syns först på en mobil skärm, exempelvis om formatering följt med när man kopierat text från Word. Gå gärna ut i solen för detta test, ännu hellre gör du testet gåendes i solen.
  2. Kan besökaren uppfatta vad sidan handlar om utan att börja skrolla neråt?
    Observera: är rubriken tydlig nog, inga utsmyckningsbilder innan meningsbärande innehåll etc.
  3. Kommer det viktigaste innehållet först?
    Observera: ibland ligger det viktigaste materialet i högerkolumnen vilket gör att det inte syns utan ganska mycket skrollande då högerkolumner oftast placeras sist på sidan för en mobil besökare.
  4. Tog det mindre än 5 sekunder att ladda in sidan?
    Observera: försök uppmärksamma hur lång tid första besöket tar på en undersida, ett återbesök på en undersida ska gå väsentligt mycket snabbare än det första. Många eller tunga bilder är vanliga bekymmer som påverkar laddningstiden.
  5. Kan en besökare med touchskärm använda allt som erbjuds?
    Observera: inte sällan finns funktioner man upptäcker först genom att dra musmarkören över dem, så kallad hovring, hjälpande information som dyker upp bara genom hovring. Har du inbäddade externa webbsidor, så kallade iframes, är de värda att testa extra noga.
  6. Är det enkelt att träffa rätt länk/knapp på första försöket?
    Observera: titta särskilt efter länklistor där länkarna staplats vertikalt. Tänk dig att besökaren försöker träffa rätt länk sittandes på en skakig buss.
  7. Innehåll är stödjer olika skärmstorlekar?
    Observera: tabeller på tre eller fler kolumner är ett vanligt problem på små skärmar. Finns sidor med formulär behöver dessa tittas igenom.
  8. Innehåll, särskilt i bildpuffar, har tillräckligt högt kontrastförhållande och textstorlek?
    Observera: har du text i bilder, om ja gå ut i solen och se om det är rimligt lätt att läsa.
  9. Redaktionell text är utformad med varierande spaltbredd och höjd i åtanke?
    Observera: rubriker, innehåll i punktlistor och länkar radbryts märkligt eller faller utom synhåll. Testa mjukt bindestreck (Ctrl+bindestreck) där avstavning görs på önskad plats om det behövs. Undvik onödiga styckeindelningar eller väldigt långa ord, det slösar med värdefullt skärmutrymme.
  10. Text är skriven utan referenser till vad som ligger till vänster eller höger?
    Observera: inte sällan hänvisar man i text till bilder och var de ligger i relation till texten man läser. Problem uppstår på en responsiv webbplats då man inte riktigt vet var bilden visas.

Test att göra på en klassisk dator:

  1. Testa igenom webbplatsen med de webbläsare du har. Fungerar det bra?
    Observera: ofta är det värt att titta extra noga på hur bra det fungerar i Internet Explorer.
  2. Justera sakta webbläsarfönstrets bredd från fullskärm till så smalt det går. Känns det som att designen flyter med? Fungerar punkterna för mobiltestning även nu?
    Observera: kontrollera att övergången mellan dator- och mobil-version fungerar, att viktiga saker inte försvinner.

Tycker du att det saknas något viktigt? Alla tips mottages tacksamt.

Leave a Reply

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