Bra verktyg för test av responsiv webb

Person som surfar med smart mobiltelefon. Foto: (Public Domain)

Den digitala sfären är full av förkortningar. En som varit “het” länge är RWD, “Responsive Web Design” (1), dvs programmering, formgivning och funktionsanpassning av webbsidor för webbläsare i smarta mobiltelefoner.
Ibland även kallat “mobile first”, där mobil(skärm) snarare än datorskärmen bildar utgångspunkten för en responsiv design för alla skärmstorlekar (2).

77% av Sveriges befolkning har smartphone och drygt 60% använder Internet dagligen via sin smarta mobiltelefon (3). Med andra ord, chansen är t ex stor att många söker just nu med mobilen efter aktuellt utbud, öppettider och telefon- och kontaktuppgifter för besöksmål och museer..

En väsentlig del av utvecklingen av webbplatser för mobil användning, handlar om att testa webbsidorna praktiskt för att vara säker på att sidorna fungerar på mindre skärm och med touch-navigation, snarare än med mus och tangentbord..

Genom att som webbutvecklare använda universella koduppsättningar som t ex HTML5 (4), CSS3 (5), Bootstrap (6), Foundation (7) JQuery (8) med flera, ökar möjligheten att webbsidorna fungerar som de ska på olika mobilplattformar, samt i olika mobila webbläsare.

Vid responsiv webbproduktion är det självklart att testa med en smartphone eller surfplatta hur olika sidor beter sig, och justera vid behov under utvecklingsprocessen.

Ett annat bra hjälpmedel kan vara att testa sin mobila webbplats på datorn med hjälp av en sk. “emulator” (9), det vill säga genom ett program som imiterar webbläsare i en smartphone.

Windows Phone emulator på Mac-dator

Emulatorprogram finns både som nedladdningsbara applikationer, som webb-/molnbaserade tjänster online eller som insticksprogram för webbläsare som Firefox (10) eller Chrome (11). Bland emulatorer finns dessutom hela skalan från kompletta programverktyg för utvecklare, till visningsprogram för enklare tester av webbsidor.

Fördelen med “mobil-emulatorer” är att det ofta finns möjligheter att ändra olika värden i programmet, för att efterlikna upplösningar och beteenden hos olika bärbara enheter, t ex en iPhone eller en Android-platta. Vilket är bra om man inte själv har tillgång till olika mobilvarianter.
Med en emulator är det även ofta enklare att ta skärmbilder på dator och dela med sig av dessa till andra som deltar i utvecklingsprocessen.

Startbild i programmet "Opera Mobile Classic Emulator"

MuseiTeknik:s mobilversion visad i "Opera Webb Classic Emulator"


Snabbt mobilvänlighetstest

Ett exempel är kostnadsfria “Opera Mobile Classic Emulator” (12). Ett användarvänligt program som har funnits i ett par år, men som tyvärr inte har inbyggda iPhone-profiler att testa mot vilket kräver viss kunskap för att kunna lägga till.

Google:s “Mobilvänlighetstest” (13) är ytterligare ett användarvänligt alternativ värt att utforska. Tjänsten lanserades i maj och är ett resultat av att Google har anpassat sin söktjänst efter det ökande antalet mobila webbanvändare världen över (14).

Mobilvänlighetstestet kombinerar en grafisk emulator med ett sorts diagnostiskt verktyg.
Mata in en adress i sökrutan och programmet simulerar dels hur en webbplats ser ut i en mobil webbläsare, dels talar den om vilka funktioner som eventuellt kan förbättras eller som saknas för att sidan ska fungera som webbplats på smartphones.

Några typiska fel som tjänsten identifierar är om webbplatsens har för bred satsyta för att kunna visas på mobil skärm, om sidan kräver externa insticksprogram, om textstorleken är låst och för liten för att vara läsvänlig. Eller att länkar på sidorna är för tätt placerade för touchskärm-navigering. Information som är värdefull och ett smidigt verktyg även för den som inte i första hand arbetar med webbkodning.

Bild av resultat från Google:s mobilvänlighetstest

Som ett enkelt test av det responsiva läget, provade jag att mata in webb-adresserna till Sveriges 25 länsmuseer (15) i Google:s verktyg.

13 museer godkändes positivt nog av verktyget, ett bra uppdaterat webbläge med andra ord! Vissa av länsmuseerna använder även extrasajter för sina digitaliserade samlingar, vilka ofta klarade mobilformatet, även om inte huvudsidan gjorde det. Även länsmuseernas sociala mediasidor som Instagram och Facebook klarar sig utan problem, eftersom dessa tjänster byggts som responsiva från starten.

Vad Google:s mobiltest däremot inte kommenterar, är hur en sida eventuellt upplevs eller hur den ser ut. Även om den kodmässigt sett kan vara korrekt.

En startsida utan tydlig grafisk logotyp eller något synligt namn skapar t ex inte omedelbar kontakt med den mobila webbesökaren… Och kanske kunde det vara trevligt om söksidor till webbsamlingar gjordes mer inbjudande för mobilanvändare, där endast sökmenyer presenteras?

Mobilvänligt, ja, men visuellt inbjudande? Skärmbilder från Google:s mobilvänlighetstest

MuseiTeknik:s mobilanpassade version kunde däremot inte Google tolka…Hm.. det blir till att ta en extra titt “under huven”. Till hösten…

RWD (Responsive Web Design)

Google Mobilvänlighetstest 

Se även:
PWA (Progressive Web App) 

 

FacebookTwitterGoogle+Share
Publicerat under rubrikerna: 06: Digitalguider & mobilt07: Webb & sociala medier Comments Off