Kategoriarkiv: Responsive web design

Fälttyper som underlättar för mobilbesökaren

Det virtuella tangentbordet på en smartphone med touchskärm har både för- och nackdelar. Troligtvis kan de flesta skriva snabbare på ett fysiskt tangentbord, men å andra sidan kan det virtuella tangentbordet ändra skepnad för att passa den situation du är i.

Detta är något som du som webbutvecklare kan utnyttja genom att ange passande fälttyper för dina formulär.
Olika fälttyper som underlättar för besökare från mobila enheter.

Om du har ett formulär för kortbetalning kan det vara smidigt att låta det numeriska tangentbordet poppa upp för besökaren när kortnumret ska fyllas i. Det gör du genom att ange type=”number” i input-taggen enligt följande:

<input type="number" name="cardnr" />

Det numeriska tangentbordet ser olika ut beroende på om du har t ex en iPhone eller Android (se bilden nedan), och personligen föredrar jag att använda type=”tel” istället då detta fungerar bättre för de som använder iPhone. Beroende på vilka tecken besökaren behöver tillgång till kan detta dock vara fel, så prova dig fram.

Numeriskt tangentbord på iPhone till vänster och Android till höger.

Numeriskt tangentbord på iPhone till vänster och Android till höger.

Några av de fälttyper du kan ange:

  • number – Numeriskt tangentbord.
  • tel – En variant av det numeriska tangentbordet för telefonnummer (som faktiskt funkar bättre än “number” på en iPhone om du endast är ute efter siffror).
  • url – Visar tangentbord med knappar som “.”, “/” och “.com”.
  • email – Ser till att bl a “.” och “@” är lättillgängliga.
  • date – Plockar fram en datumväljare.

För att se alla fälttyper och hur du använder dem, besök gärna w3schools.com.

Kompatibilitet

De flesta moderna webbläsare har stöd för många av fälttyperna, och om de inte har stöd så kommer de att agera som type=”text”. Med andra ord får alla besökare med kompatibla webbläsare en bättre upplevelse, och de utan märker inga konstigheter.

Vill du se vilka webbläsare som stödjer vad, ta gärna en titt på Caniuse.com som vi tipsat om tidigare. Informationen är tyvärr inte fullständig, så det bästa är att prova sig fram.

Stäng av autokorrigering

För att ytterligare förbättra formulärupplevelsen för de besökare med iOS (iPhone/iPad) så kan du stänga av autokorrigering och automatisk stor bokstav i början av ord i de fält du önskar.

Har du till exempel ett inloggningsformulär kan det vara superirriterande om telefonen hela tiden försöker rätta ditt användarnamn genom att sätta stor bokstav i början och köra rättstavning.

<input type="text" name="username" autocorrect="off" autocapitalize="off" />

Har du fler tips på hur man enkelt kan förenkla för mobilbesökaren? Tipsa gärna i kommentarerna.

Vill du skapa en egen mobilanpassad hemsida?

Prova på att skapa din egen mobilanpassade sajt med något av de hemsidesverktyg som Loopia erbjuder. Läs mer om de hemsidesverktyg som erbjuds, och missa inte övriga inlägg om mobilanpassad webbdesign på vår blogg.

Dela: Facebooktwittergoogle_pluslinkedinmail

Rätt innehåll på rätt sätt – ett lyft för din hemsida

Böcker om innehållsstrategi för att producera rätt innehåll till din hemsida.Det spelar ingen roll hur glassigt du förpackar din tjänst eller informationen på din hemsida, om innehållet inte håller måttet kommer besökaren inte att komma tillbaka (eller kanske inte ens hitta dit första gången).

Ändå är det lätt att glömma bort hur viktigt det är att lägga in relevant innehåll, ta bort det som är överflödigt och “massera” det befintliga.

En grundregel är att innehållet ska vara ändamålsenligt för ditt företag/din tjänst, för kunden och för sammanhanget kunden befinner sig i. Läs mer

Dela: Facebooktwittergoogle_pluslinkedinmail

Tänk på mobilbesökaren först

Bild på en mobil som lyfts fram och påvisar vikten av att använda tankesättet Mobile first.Antalet besökare via mobila enheter ökar drastiskt på Loopia.se för varje månad som passerar, men detta är självklart inget unikt för våra sajter. Du har säkert sett samma trend på din besöksstatistik? Som vi tidigare berättat har vi snickrat om alla våra sajter med responsive web design för att de ska fungera lika bra oavsett vilken enhet du använder.

Du kanske har hört om begreppet “Mobile first”? Mobile first är ett tankesätt som innebär att du utgår från den mobila besökaren i första hand när du utformar din sajt. Även om besökarantalet från traditionella datorer kommer att vara betydande lång tid framöver så finns det stora poänger med det tankesättet. Det tvingar dig till exempel att prioritera vilka delar och vilken information som är viktigast och som ska framhävas först. Läs mer

Dela: Facebooktwittergoogle_pluslinkedinmail

Bygg din sajt med Responsive web design så den funkar bra i alla enheter – det gör vi!

Att bygga mobila webbsidor blev högaktuellt i och med att Iphone lanserades år 2007 och för första gången gjorde det riktigt smidigt att surfa med mobilen (eftersom den saknade 3G var det outhärdligt att surfa där man inte hade w-lan, men ändå). Sedan dess har det mobila surfandet fullkomligt exploderat och trenden pekar på att det inte är långt borta innan mer webbtrafik sker via mobila enheter än via datorer.

Många skyndade ivrigt att ta fram mobila versioner av sina sajter för att möta den växande mobila målgruppen. 2010 vände dock webbdesignern Ethan Marcotte upp och ner på allt när han myntade begreppet “Responsive web design” (RWD) i en artikel på A list a Apart. “Följsam webbdesign” som man fritt skulle kunna översätta begreppet till använder använder CSS Media Queries och andra befintliga webbtekniker för att göra så att din sajt automatiskt anpassar sig efter storleken på webbläsarfönstret på den enhet besökaren använder.

Inget mer frenetiskt zoomande eller begränsade mobilsajter

Fler och fler använder mobilen eller surfplattan som huvudsaklig surfenhet vid fler och fler tillfällen, dessa besökare accepterar inte en nedbantad mobilversion av din sajt, eller en desktop-version där de konstant måste zooma in och ut. De vill kunna göra ALLT och de vill kunna göra det smidigt – utan att plocka fram datorn.

Använder du dig av RWD laddas samma html- och css-filer oavsett vilken enhet besökaren av din sajt har. Besökaren får alltid samma innehåll (såvida du inte väljer att dölja det) och du slipper att ta fram olika versioner av din sajt för olika skärmstorlekar på mobiltelefoner, surfplattor, laptops och gigantiska desktop-skärmar.

Våra sajter blir responsive

Som vi har nämnt tidigare håller vi på att bygga om Loopia.se samt vår kundzon och åf-zon med RWD, och vi kommer snacka mycket mer om vårt arbete med det här på bloggen, Facebook, Twitter och Google+ framöver. Vi kommer även att skriva mer om begrepp som “mobile first” och “content first” som hänger tajt samman med en bra upplevelse på mindre skärmar (men egentligen är lika viktigt på stora skärmar).

Ethan Marcotte's bok om Responsive web design.Då det är ett omfattande projekt att se till att våra sajter efterföljer dessa riktlinjer kommer inte allt ske på en gång, och vi kommer under tiden att dela med oss av vårt arbete för att ni ska kunna ta del av våra erfarenheter och för att få er input.

Grunderna i Responsive web design är dock enkla, och vill du själv komma igång kan jag varmt rekommendera Ethan Marcottes bok “Responsive Web Design”. Vill du ha inspiration från hur andra har gjort kan du hitta ett stort antal RWD-sajter på mediaqueri.es.

Läs även gärna följande relaterade artiklar:

…du vet väl förresten att det två senaste grundmallarna i WordPress, TwentyEleven och TwentyTwelve, är responsiva?

Dela: Facebooktwittergoogle_pluslinkedinmail