Svanströms El & VVS jobbar främst med eljour och rörjour över stockholm och lägger därför stor vikt på tillgänglighet.

När det är bråttom vill man inte behöva zooma, markera och kopiera telefonnummer

Svanströms gör det lätt för sina kunder

Ett rör brister. Panik. Vem ska jag ringa? Vattennivån på nya golvet stiger och du behöver hjälp omgående. När du  sedan söker efter en rörmokare via din närmast tillgängliga enhet med tillgång till internet (vanligtvis en rektangulära saken som ligger i fickan) är det förmodligen viktigare att komma i kontakt på snabbt som möjligt snarare än att jämföra hantverkare.

Löfte och leverans

Genom att positionera sig med SEO och PPC på Google under sökord som “rörjour” så leder Svanströms in sina kunder på en responsive hemsida som alltså funkar i 99% av alla enheter. Den stora knappen med telefonnumret går inte att misstolka, och genom click-to-call länken räcker det med ett tryck för att komma till jouren. Löftet att vara så tillgänglig som möjligt uppfylls alltså med råge genom en enkel funktion.

Så här ser Svanströms sida ut på en liten skärm, med ett tryck blir kunden kopplad till växeln.

Liten investering med stor effekt

Min poäng med det här inlägget är att pusha för vikten av att företag som hotell, jourverksamheter, bärgningsstationer o dyl har väldigt mycket att vinna på att strömlinjeforma sin mobila webb för att erbjuda en service som snart kommer förväntas av den breda massan.

Continue reading →

Vill du ha en hemsida som fungerar klockrent i iPhones eller andra smartphones? Gratis? Det är faktiskt möjligt – för ett tag sen släpptes tjänsten Onbile med sin slogan “create your free mobile website” och tjänsten är faktiskt överraskande bra för att vara en gratisprodukt utan spärrade funktioner som ska locka dig att uppgradera till ett betalkonto. Tjänsten går ut på att du skapar en mobil hemsida i fyra enkla steg, utan några som helst krav på tekniska förkunskaper.

Den idiotsäkrade processen består av att fylla i några formulär med content-texter, adress, telefonnummer, och allting uppdateras live på en förhandsvisning av den färdiga sidan. Du kan välja mellan 12 olika templates som du till viss mån kan konfigurera (färger, bilder och logotype) för att passa din egna grafiska profil. Slutprodukten du får fram 15 minuter senare är en gratis mobil hemsida som med lite tweaking passar de flesta privatpersoner och mindre företag.

Här följer en genomgång av processen som du kan kika igenom innan du bestämmer dig för att prova själv.

0. Onbile huvudsida

När vi går in på www.onbile.com så får vi idag upp detta:

1. Välj användarnamn och ange mail

Tummen upp för så lite registreringslidande som möjligt. Se till att ange en e-postadress som du har tillgång till eftersom Onbile mailar en kodsträng som behövs för att aktivera din mobila när den är klar.

2. Välj tema och justera utseende

Här får du lite olika teman och ikonuppsättningar att välja mellan. Du kan även justera alla färger för att skapa en starkare återkoppling till din ordinarie hemsida.

Teman som finns tillgängliga idag (2011/09/03):

3. Content

I det tredje steget fyller vi på med innehåll för sidan. Texter för start- och undersidor redigeras enkelt i en liten wysiwyg-redigerare där du även kan lägga in bilder. Essentiella funktioner som Google Maps, click-to-call nummer och länkning till sociala medier finns inbyggt som egna rutor från start. Extremt svårt att misslyckas om du bara fyller i de formulär du har framför dig.

4. Publicera

När du fyllt i allt innehåll och känner dig nöjd med utseendet på din mobilsida är det sista steget att lägga in en kod på din ordinarie hemsida som automatiskt växlar över till din mobila motsvarighet när du får besök av en mobilanvändare. Instruktionerna mailas till dig och efter du lagt in koden är du klar! Nu har du en fräsch hemsida som fungerar i de flesta smartphones.

Ifall du glömt adressen till onbile är det onbile.com.

 Sammanfattning

Onbile är ett bra verktyg att använda för dig som har en begränsad budget och/eller begränsad kunskap om webbutveckling. Priserna hos svenska leverantörer som erbjuder mobila hemsidor ligger vanligtvis mellan 5-20k SEK, och med tanke på att de inte erbjuder något större mervärde rent funktionellt är Onbile värd både en och två tankar när du planerar en mobilanpassning.

Fördelar med Onbile

• Lättanvänt
• I princip omöjligt att få något annat än en funktionell hemsida med de viktigaste funktionerna
• Snabbt, en mobil hemsida blir klar på ~15 minuter
• CMS som utveckals centralt, lätt att göra ändringar utan teknisk kompetens

• Väldigt begränsad frihet vad det gäller layout och teknisk anpassning
• Tredjepartsleverantör – du förlitar dig på att tjänsten ligger kvar och förblir gratis
• Begränsat antal mobila templates – ifall tjänsten får större spridning kommer man börja känna igen gratismallarna

Continue reading →

Under de senaste åren har den mobila webbanvändningen ökat så kraftigt till den grad att webbutvecklare och formgivare inte längre har råd att ignorera det. I rika länder har tronskiftet underblåsts av snabbare mobila anslutningar och billigare datatjänster. I utvecklingsländer har en växande skara hoppat över att köpa datorer helt och istället gått direkt till en smartphone, som i princip har samma funktionalitet.

Tyvärr introducerar den mobila arenan ett lager av komplexitet som kan vara svårt för utvecklare att ta till sig. Mobil utveckling är mer än att skapa en brygga mellan webbläsare, det bör vara plattformsoberoende. Det stora antalet mobila enheter gör noggranna tester en praktisk omöjlighet, vilket får utvecklare att fälla en tår av nostalgi då man blickar tillbaks på fornstora dar då microsofts webbmonopol tillät dig att skita högaktningsfullt i något annat än den dominerande webbläsaren.

Förutom att stödja olika plattformar kan varje enhet använda ett obegränsat antal mobila webbläsare. Till exempel kan en Android-användare komma åt din webbplats med hjälp av den inbyggda Android-webbläsaren, men kan också ha installerat en tredjepartsbrowser som Opera Mini eller Firefox Mobile. Det går bra så länge smartphone använder en progressiv webbläsare (och man kan med gott samvete säga att de flesta webbläsare är progressiva nuförtiden), men det finns inte några garantier.

Den mobila webben återinför flera frågor som i stort sett ignorerats de senaste åren. För det första, även hos smartphones med anslutning till 4G-nät blir bandbredden en allvarlig fråga för mobila konsumenter. Dessutom har mobila enheter en betydligt mindre skärmstorlek, som presenterar skärmytefrågor som vi inte sett sedan projektorernas glada dagar. Kombinera dessa problem med plattformsberoende kompatibilitetsproblem så är det inte svårt att se hur mobil utveckling just nu är som att ta ett ordentligt steg bakåt i tiden. Så låt oss ta itu med dessa frågor en i taget och skapa en färdplan för mobil webbutveckling:

- Hur du implementerar mobila stylesheets / CSS

- Vad du vill ändra i dina mobila stylesheets

- Bortom stylesheets

Hur du upptäcker en mobil enhet och implementerar dina mobila stilmallar

Det första steget för att adderas mobilt stöd för din webbplats är bland annat en speciell stilmall för att justera sidans utseende för mobila enheter:

Server-side metoder & UA String

Ett sätt att integrera mobila stilmallar är att upptäcka “user agent”-strängen (UA-sträng) med ett server-side språk som PHP. Med denna teknik upptäcker webbplatsen när en mobil enhet försöker ladda sidan och erbjuder antingen en lämplig formatmall eller omdirigerar användaren till en mobil subdomän som till exempel m.aftonbladet.se. Server-side-metoden har flera fördelar: den garanterar den högsta nivån av kompatibilitet och tillåter också webbplatsen för att erbjuda spececifika mark-ups och innehåll till mobila användare.

Även om denna teknik är perfekt för webbplatser på företagsnivå finns det praktiska problem som gör det svårt att genomföra på många andra sidor. Nya UA-strängar kommer ut nästan dagligen, så att hålla UA listan aktuell är näst intill omöjligt. Dessutom är framgångsfaktorn i denna teknik starkt beroende av enhetens “ärlighet” för att kunna förmedla dess sanna user agent. Ett flertal stora webbläsare har trots allt förfalskat sina UA-strängar för att komma runt denna typ av identifiering i det förflutna. Till exempel börjar de flesta UA strängar med “Mozilla” för att kunna passera de Netscape-kontroller som användes flitigt under 90-talet och under flera år låtsades Opera vara IE. Som Peter-Paul Koch skriver:

“It’s an arms race. If device detection really catches on, browsers will start to spoof their user agent strings to end up on the right side of the detects.”

Client-side metoder och media queries

Ett alternativ är att upptäcka den mobila enheten på klientsidan. En av de tidigaste teknikerna för att använda mobila stilmallar innebär att dra nytta av stilmallens mediatyp, till exempel:

<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" /> 

I exemplet har vi inkluderat två stilmallar, den första som heter “site.css ” riktar sig mot stationära och bärbara datorer “screen” som mediatyp, medan den andra mallen mobile.css riktar sig mot mobila enheter med hjälp media-typen “handheld”. Även om detta kan vara en superb metod för att tillgodose båda enhetstyperna, är frågan ifall enheten stödjer tekniken en helt annan. Äldre mobila enheter tenderar att stödja den handhållna mediatypen, men de varierar i genomförande: vissa inaktiverar formatmallar definerade som “screen” för att istället bara läsa “handheld”, medan andra läser in båda.

Dessutom har de flesta nyare enheter eliminerat skillnaden mellan handhållna och stationära plattformar helt och hållet, för att kunna ge sina användare fullutrustade webbplatser istället för simpla mobila layouter. För att stödja nyare enheter måste vi använda oss av media queries, vilket tillåter oss att rikta våra stilmallar baserat på enhetens skärmbredd (du kan se en annan praktisk anpassning av mediernas frågor i Ethan Marcotte s artikel Responsive Web Design). Eftersom mobila enheter vanligtvis har mindre skärmar kan vi rikta vår anpassade stilmall till handhållna enheter genom att upptäcka skärmar som är 480px och mindre:

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)" />

Detta kommer fungera i nästan alla nyare smartphones, men äldre enheter saknar ofta stöd för media queries, så för att vara på den säkra sidan bör vi satsa på en hybridlösning för att ha största möjliga genomslagskraft.

Vi börjar med att definera två stilmallar; “screen.css” för webbläsare på vanliga datorer och “antiscreen.css” för att skriva över de stilar som du inte vill använda i mobila enheter. Knyt samman dessa två i den separata stilmallen “core.css”:

@import url("screen.css");
@import url("antiscreen.css") handheld;
@import url("antiscreen.css") only screen and
(max-device-width:480px);

Slutligen definerar vi en sista stilmall döpt till “handheld.css” med specifika stilar för mobila webbläsare, för att sedan länka in dom från huvudsidan:

<link rel="stylesheet" href="core.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld,
only screen and (max-device-width:480px)"/>

Den här approachen kan tyckas vara något krånglig, men ovanstående metod är långt ifrån perfekt. Många mobila enheter har displayytor som är bra mycket bredare än 480px vilket tar luften ur vårt försök att erbjuda en mobilanpassad upplevelse för till exempel iPad-användare. Lyckligtvis behöver surfplattor och större mobila enheter inte en komprimerad mobil layout, men det är viktigt att komma ihåg att du bör tänka igenom ordentligt vilka enheter din hemsida kommer användas ifrån. Sannolikt kommer det dyka upp fler enheter som inte går att serva med en standardlösning. Det är olyckligt att vi just nu inte kan framtidssäkra våra webbplatser redan nu, men eftersom vi befinner oss en tid då nya standarder håller på att formas får vi gilla läget och försöka hänga med i utvecklingen istället.

Ett sista problem med media queries är att vi inte har någon kontroll över själva innehållet på hemsidan. Visst, vi kan väldigt enkelt dölja innehåll som text och bilder för mobilanvändare via en speciell css-mall – men vi kan inte hindra enheten ifrån att ladda ner den bakomliggande koden vilket innebär att du levererar en hemsida som äter upp onödig tid och bandbredd för användaren.

Användarinitierad metod

Med UA-detektionens brister och media queries fallgropar i beaktning så har många företag (exempelvis IKEA och Expressen) valt att låta användaren själv bestämma ifall den mobila versionen av hemsidan skall visas istället för den ordinarie. Den uppenbara komplikationen som denna metod bär med sig är extra användarinteraktion, vilket kan upplevas som analogt av våra upplysta smartphoneanvändare. Det är däremot ett lågt pris att betala för en idiotsäkermetod som gör användaren till kung och säkerställer möjligheten att få en fläckfri upplevelse av din hemsida oavsett vilken enhet som den öppnas ifrån. Det är dessutom den minst tids- och resurskrävande detektionstekniken.

Metoden innebär kort och gott att en länk med texten “besök vår mobila hemsida” dyker upp överst på sidan och skjutsar kunden vidare till din mobila subdomän. Som sagt så är ingen metod perfekt, och denna är inte heller nnågot undantag. En nackdel kan t ex vara att användaren missar länken eller inte förstår vad den innebär. En annan är att datoranvändare kan klicka på länken och få fram något som i regel ser ut som Jimi Hendrix knackat ihop under en mindre nykter episod. Men som sagt är den starkaste fördelen med denna metoden att användaren själv får ta beslutet att navigera en mobilanpassad eller vanlig hemsida.

Vad du vill ändra i mobila stilmallar

Nu när vi implementerat våra mobila stilmallar är det dags att kika på vad vi faktiskt vill ändra.

Ändra och ta bort onödiga element

Det primära målet med mobila stilmallar är att optimera layouten för en mindre skärmyta. Först och främst innebär det att vi spolar multikolumnslayouter till förmån för en ensam kolumn. Eftersom de flesta mobilskärmar är vertikala så blir det horizontella utrymmet mycket mer dyrbart och en designer har sällan råd med mer än en kolumn i sin mobila layout. Därefter skalar vi ner innehållet till det mest essentiella genom att dölja överflödiga element genom att sätta “display: none;” i CSS-mallen. Slutligen sparar vi ytterligare pixlar genom att reducera marginaler och padding och får en tightare layout.

Reducera bandbreddsanvändning

Att annat mål med mobila stilmallar är att minska dataanvändningen för långsammare mobila nätverk. Börja med att försäkra dig om att inga onödigt stora bakgrundsbilder visas via din mobila CSS, särskilt om du använder en enda stor bakgrundsbild. Var också noga med att dölja bilder som inte är livsviktiga för att användaren ska förstå ditt innehåll. Om din sida använder bilder som knappar eller meny så kan du överväga att ersätta dom med vanlig text eller CSS-kodade motsvarigheter.

Övriga ändringar

Utöver skärmyta och bandbredd finns det några andra saker som ska justeras i mobila stilmallar. Du kan för det första öka läsbarheten på dina texter genom att använda större teckensnittsstorlek på all brödtext.

För att göra det lättare för dina användare att klicka rätt på sina touchdisplayer kan du också förstora den klickbara ytan på knappar och länkar genom att lägga till “display: block” och padding för dina klickbara element.

Element som är justerade med “float”-inställningen i din stilmall kan ställa till problem, så överväg att spola dom ifall de inte är absolut nödvändiga. Kom ihåg att du har väldigt lite horizontellt utrymme, varför du bör optimera allt innehåll för vertikalt scrollande.

Slutligen så fungerar inte mouseover-funktioner i mobila enheter, så var noggrann med att du har ordentliga definitioner av “:active”-states. Om du använder dig av “:hover” i din design så kommer en mobil enhet bara activera “:hover”-stadiet när användaren klickar på objektet, vilket gör funktionen meningslös. Förlita dig därför inte på :hover i viktiga element som drop-downmenyer. Använd istället en meny som är permanent expanderad för mobila enheter.

Mobilanpassade funktioner

Utöver dina mobila sitlmallar kan vi addera ett antal specialfunktioner för mobilanvändare genom html-markups

Hur du gör klickbara telefonnummer (click-to-call)

Tro det eller ej – de flesta smartphones har kapacitet att ringa samtal. Som företag har du mycket att vinna på att göra det så enkelt som möjligt för dina användare att komma i kontakt med dig, så låt oss ta en kik på hur vi kan åstadkomma detta:
<a href="tel:46771365365" class="phone-link">0771-365 365</a>

Nu kan dina användare klicka direkt på telefonnumret för att ringa det, men det är några saker som är viktiga att känna till. Första två siffrorna (46) i telefonnumret är landskoden för Sverige, och eftersom webben är internationell skall den alltid inkluderas.

Länken är också klickbar oavsett om det är en mobil eller dator som använder sidan så när vi inte använder server-side metoden som beskrevs ovan döljer vi helt enkelt länkens klickbarhet via klassen “phone-link” i screen.css, och inkluderar den i de mobila stilmallarna.

Speciella input-typer

När det kommer till mobilsurfande är det betydligt svårare att mata in text på den lilla touchdisplayen jämfört med ett traditionellt skrivbord. Men vi kan göra det enklare för våra användare genom att utnyttja speciella typer av HTML5-input.

input type="tel" /
input type="email" /

Dessa input-typer trollar fram ett kontextuellt skrivbord som är relaterat till input-typen. I exemplet ovan triggrar type="tel" en numerisk tangentuppsättning med stora knappar som gör det enklare att trycka in en nummerserie, och type="email"@ och . så du slipper gå in på menyn för specialtecken.

HTML5 erbjuder browservaliderad datainmatning, och eftersom webbläsare som saknar stöd för HTML5 nergraderas alltid den angivna typen av input till input type="text", så du kan använda funktionerna igenom hela din webbsida utan att oroa dig för kompabilitetsproblem. Se en fullständig lista över HTML5 inputs.

Viewport-dimensioner och skärmorientering

När moderna mobila enheter renderar en webbsida skalar de ner innehållet för att passa deras viewport (visad skärmyta). Även om standardvisning i de flesta fall fungerar helt ok är det ofta nyttigt att justera viewporten. Detta görs enklas med hjälp av en meta-tagg som från början introducerades av Apple och därefter plockats upp av de flesta mobiltillverkare. Inom head-taggarna kan vi peta in denna rad:

meta name="viewport" content="width=320"

I exemplet ovan sätter vi viewporten till 320, vilket innebär att 320 pixlar av sidan kommer visas över hela skärmen på enheten.

Vi kan också låsa möjligheten för användaren att zooma in eller ut på hemsidan för att behålla vår layout intakt:
meta name="viewport" content="width=320,user-scalable=false"

Men precis som med att stänga av möjligheten att scrolla på vanliga hemsidor bör denna begränsning bara användas när det verkligen behövs eftersom du begränsar användarmöjligheterna

Med hjälp av att ställa in skärmorientering kan vi bestämma ifall den mobila hemsidan skall visas vertikalt eller horizontellt på smartphonens skärm, oavsett hur användaren håller mobilen.

För att upptäcka skärmorientering kan vi använda oss av en media query som liknar client-side metoden för device-detektion som nämndes tidigare. I din stilmall inkluderar du:

@import url("portrait.css") all and
(orientation:portrait);
@import url("landscape.css") all and
(orientation:landscape);


I exemplet används portrait.css som stilmall för vertikala enheter och landscape.css för horizontella.Media queries för skärmorientering har inte stöd hos alla enheter.

Slutsats

Världens teknikskifte mot det mobila fortsätter, handhållna enheter kommer bli viktigare och viktigare. Förhoppningsvis har det här inlägget inspirerat dig och erbjudit en del av den kunskap som krävs för att kunna optimera din hemsida för mobilanvändande.

Även om mobilt surfande har ätit upp en väsentlig del av världens internetanvändandning så är teknologin fortfarande kvar i spädbarnsstadiet. Precis som standarder har utvecklats för datorsurfande håller standarder för det mobila på att utvecklas för att så småningom sammanlänkas till mer universella lösningar. Det innebär att teknikerna som beskrivs i artikeln är högst temporära, så kika på datumstämpeln innan du bestämmer dig för vad som är bäst att tillämpa i din utvecklingsplan. Det är ditt ansvar som designer eller utvecklare att hänga med, faktiskt är den enda konstanten inom webbutveckling det ständiga behovet att fortsätta lära dig!

Continue reading →