Några funderingar kring responsive webdesign

Sedan w3c-specifikationen för Media Queries blev allmänt implementerad  i olika webbläsare under det senaste året så har fler och fler börjat prata om det som kallas för responsive web design(En bok i ämnet, bra beskrivning här). Något som jag tycker beskrevs allra bäst i den här artikeln från Alistapart.com. Där menar man att idén om att skapa en unik version av webbplatsen för varje enhet som surfar i praktiken blir omöjlig. Det finns helt enkelt för många olika enheter. Istället, menar man, borde man låta själva webbplatsen bli mer dynamisk och anpassa sig efter den som besöker den. D.v.s. baserat på storlek, upplösning, orientering, mobil, desktop eller liknande egenskaper. Om jag surfar mobilt är det kanske rimligt att tro att den som går in där behöver få kontakt med oss inför ett stundande besök. Skall vi i så fall lyfta upp kontaktuppgifterna bättre? Eller sitter man på bussen och läser en bloggpost, hur maximerar vi visningen av våra blogginlägg på små skärmar? Ju mer jag tänker på det blir denna idé mer och mer självklar även om den mer utgör ett förhållningssätt än någon ny revolutionerande teknik.

Låt oss för en stund jämföra med alternativen: En mobilanpassad version eller en version som passar alla enheter. D.v.s. antingen bygger vi ett unikt mobilt tema för smartphones och ytterligare ett för läsplattor vilket gör att vi har tre olika versioner av webbplatsen. Det kan vara rätt väg att gå men man skall då komma ihåg att man i praktiken har tre olika webbplatser att underhålla vilket tillför mer arbete på lång sikt. Det andra alternativet som brukar kallas för fluid eller liquid web design syftar till att använda samma version av webbplatsen för alla enheter. Något som ligger mycket närmare idén om responsive web design och i stora drag är det samma sak med undantaget att liquid web design brukar resultera i ganska tråkiga textbaserade webbplatser medalldeles för avskalad grafisk formgivning.

Det är därför jag har fastnat för idén om responsive webdesign. Den kombinerar det bästa av båda världar. På de tre webbplatser som jag hittills anpassat har jag lagt max 2 timmar per webbplats för att göra unika anpassningar för antingen smartphones eller iPad. Har man bara en hyggligt bra markup på html-koden räcker det riktigt långt med media queries för att göra en riktigt respektabel anpassning för olika enheter. Media Queries har verkligen blivit en motivator för mig att ta itu med detta. Det har helt enkelt blivit så mycket enklare att arbeta med detta verktyg. Det har förstås inte stöd på några äldre webbläsare  men det spelar inte så stor roll. Så länge man använder desktop-versionen som fallback är det enkelt att använda denna teknik för alla nya webbläsare som t.ex. smartphones eller läsplattor. Då spelar det inte så stor roll om äldre läsare stöder detta eller ej.

Media Queries i Javascript
Jag upptäckte i helgen även detta script som tillåter mig att göra media queries-frågor i Javascript. Något som blir nästan nödvändigt när man anpassar för touch-gränssnitt. Då kan man aktivera javascript som aktiverar olika javascript-baserade stödverktyg för att navigera webben. Jag undrar om man även skulle bygga ett script som skickar informationen vidare till en PHP-session så att man även på serversidan kan hålla reda på vilken typ av enhet som efterfrågar informationen så att man undvika att skicka över onödig markup för att snabba upp laddningstiden. Detta går iofs. också lösa genom att man läser in mer av innehållet med Ajax och bara renderar ramverket från serversidan. Detta måste jag fundera vidare kring.

Designutmaningar
Den kanske största utmaningen men denna typ av approach är att det gör livet miserabelt för våra grafiska formgivare. Det som tidigare handlade om att skapa en photoshop-fil med 980 pixlars bredd börjar mer och mer känns som en klumpig arbetsmetod. Samtidigt handlar ju formgivning ganska ofta om att maximera kreativiteten inom en begränsad yta. Det blir enklare att formge med en tydlig begränsning. Men med denna approach måste man i praktiken sätta en grafisk form för varje enhet. Är det istället så att grafiska formgivare för webb kanske inte bara måste hantera indesign eller photoshop utan också måste behärska CSS och enkel HTML-programmering. På samma sätt som en arkitekt måste hantera CAD? Jag tror det. Detta är förstås en enorm utmaning och kommer nog kräva ett generationsskifte för att på allvar slå rot. Än så länge jobbar t.ex. vi fortfarande med photshopmallar även om vi ofta kompletterar dessa med formgivning av allmänna element och allmänna riktlinjer för grafisk form på en webbplats så att en gränssnittutvecklare med dessa riktlinjer själva kan ta arbetet vidare. Det är en väg att gå men jag skulle gärna se att ett större ansvar låg hos formgivaren att inte bara leverera grafisk form utan att även utveckla den första mockupen.

Till sist
Hur som helst är detta mycket spännande och det känns lite som att det är invasionen av smartphones och läsplattor av alldeles för många tillverkar som driver på detta. Idén om att vi kunde identifiera en uppsättning riktlinjer i form av en maxbredd på en webbplats börjar mer och mer kännas som något ur det förgångna.

Telefonen har slutat ringa… på ett bra sätt

Jag noterat en förändring de senaste månderna. Jag kunde se en antydan till den strax före jul och den har blivit än tydligare nu under våren. Det ringer inte lika ofta i telefonen längre. Den vanliga förklaringen till när detta inträffar är att företaget går på lågvarv. Det är jul, påsk, industrisemester eller allmänt dåligt med kunder. Men det stämmer inte. Det finns inga naturliga ”lov” just nu och vi har mer att göra än någonsin. Det skall sägas att min mailbox aldrig varit så full som nu. En normal arbetsdag kan bestå av upp till 100 mail(varav 40-50 automatgenererade) mot tidigare 40-50 som maxtak.

Jag kan bara tolka denna förändring som att mer och mer av min affärsmässiga kommunikation sker via mail, Skype och Twitter. D.v.s. de som kontaktar mig anser att mail är det bästa sättet att få tag på mig. De vet att jag i regel svarar inom 4 timmar och att om jag inte kan svara just nu så läser jag i regel ett mail före jag lyssnar av ett mobilsvar.

Det skall också sägas att jag uppmuntrar denna förändring. Jag tycker det är skönt att ha ”svart på vitt” vad man sagt i en diskussion och att den finns lagrad vilket inte är fallet med de ofta bristfälliga anteckningarna under telefonmöten. Telefonen använder jag numera i störst utsträckning när vi har telefonmöten. Jag ringer fortfarande kanske 15 samtal(oftast interna samtal) per dag i snitt varav 2-3 st på minst 30 min(telefonmöten). Men det är inte så många som ringer mig. Det är oftast jag som tar initiativet.

Jag vet inte om detta är en övergripande trend i samhället(jag tror det) eller om det bara gäller mig men jag brukar ganska ofta mötas av nickande huvuden när jag frågar min omgivning hur de gör. Jag tycker det är ganska skönt i alla fall. Det gör att man får färre avbrott i arbetsdagen och kan jobba mer fokuserat.

Shopkick, en spännande hybrid av FourSquare och Groupon

När jag var i New York förra veckan noterade jag en spännande webbapp, Shopkick, som mer eller mindre är en hybrid av typ FourSquare och Groupon. Det är en checkin-app som ger mig rabatter i olika butiker. Men inte genom att köpa rabattkuponger som man gör på Groupon utan genom att checka in på plats i butikerna ungefär som i FourSquare. När man väl checkar in så får man ”hämta upp” poäng eller erbjudanden.

Genom att bara besöka butiken får man något som kallas för ”kickbucks”, en sorts virtuell valuta som man sedankan byta in mot värdecheckar eller annat godis. Ett spännande koncept som mycket väl kan komma att sno marknad från Groupon. Det här känns spännande.

Funkar bara i USA än så länge.