Etikettarkiv: mobilanpassa

Mobilanpassa din hemsida i Loopia Sitebuilder

Nu lanserar vi möjligheten att mobilanpassa din hemsida i Loopia Sitebuilder.

sitebuilder-nu-aven-mobil

Med tanke på det kraftigt ökande mobilsurfandet är det väldigt viktigt att du erbjuder dina besökare en bra upplevelse även via mobilen. Därför lanserar vi nu möjligheten att göra en mobilanpassad version av din hemsida genom att uppgradera till Loopia Sitebuilder XLarge.

Uppgradera nu direkt och…

  • Välj bland ett stort antal proffsigt utformade mobilanpassade mallar.
  • Återanvänd innehållet från din befintliga Loopia Sitebuilder-hemsida på mobilsidan.
  • Förhandsvisa mobilsidan i olika enheter och i stående eller liggande läge.
  • Publicera mobilsidan och gör den ökande skaran mobilbesökare nöjd!

Testa gratis nu direkt

  • Har du redan byggt en hemsida med Loopia Sitebuilder kan du logga in och bygga din mobilanpassade version direkt. När du är nöjd med resultatet och vill publicera mobilsidan uppgraderar du till Loopia Sitebuilder XLarge (149 kr/mån) med bara några klick. Logga in »
  • Är du inte Loopia-kund ännu kan du självklart testa Loopia Sitebuilder inklusive möjligheten att bygga mobilanpassade sidor helt utan kostnad. Testa här »

mobile-editor

Fälttyper 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.

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" />

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

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.

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.

Anpassa din sajt för mobiler

iphone_heroVi lever i en tid då fler och fler surfar med sina mobiltelefoner, och den utvecklingen lär knappast stanna av. Därför blir det allt viktigare att mobilanpassa din webbsida för att inte missa en allt större del av dina potentiella besökares surftider.

Även om mobiltelefoner som t ex Iphone hanterar fullstora sidor på ett schysst sätt trots sin lilla skärm så finns det stora fördelar med att anpassa din sajt. Dels slipper användaren zooma in och ut frenetiskt, men framför allt så kan du hålla ner tyngden på sidan och på så sätt göra det drägligt att surfa på den även med låga uppkopplingshastigheter (utbyggnaden av snabba mobilnät har ju en bit kvar för att vara helt tillfredsställande).

De stora problemen när man ska anpassa sin sajt för mobiltelefoner är den hejdlösa mängden storlekar på skärmar och den otroligt varierande kvaliteten på webbläsarna.

Det är helt enkelt ett offantligt arbete att se till att sidan fungerar på alla upptänkliga mobiltelefoner. Därför är det smart att börja med att anpassa efter de telefoner som användas mest för att surfa med. Om man får tro den statistik jag hittat på nätet från t ex IDG.se och Webbdevelopersnotes.com så står Iphone och Ipod Touch just nu för 50-70% av allt mobilt surfande. Detta kommer självklart att ändras med tiden då fokus hos många tillverkare ligger på att få till en bättre surfupplevelse i mobilen. Men genom att anpassa din sajt för Iphone så kommer den att fungera bra i många andra moderna mobila webbläsare också.

  1. Det första du bör göra är som sagt att se till att sidan inte är tungladdad. Strukturera om och ta bort så mycket överflödiga element som möjligt. Man bör även passa sig lite för javascript, dels är stödet lite si och så (även om det fungerar i princip smärtfritt i just Iphone), men det kan även tynga ner sajten rejält.
  2. Med hjälp av metataggen ”viewport” kan du sedan se till att bredden på sidan anpassas efter skärmen på telefonen. Många moderna webbläsare har stöd för viewport, t ex de i Iphone, Android, Blackberry samt Opera Mobile.
    <meta name=”viewport” content=”width=
    device-width, initial-scale=1.0″/>
  3. Akta dig sedan för att sätta fasta storlekar på objekt på sajten, använder du istället procentsatser kan sidan anpassa sig riktigt bra efter olika skärmars storlekar.
  4. Sedan 2006 finns en toppdomänen ”.mobi” som enbart är tänkt för mobilsajter. Så när du ändå är igång, passa på att regga ditt namn även som .mobi (119:-/år) och styr den till din nya fina mobilsajt. Med hjälp av tipslänkarna nedan kan du dessutom automatiskt peka om de som besöker din vanliga sajt från en mobiltelefon till den mobilanpassade sidan.

Länkar till flera tips i ämnet:

Lycka till!

Ni som redan har mobila sajter, kom gärna med tips och lägg upp länkar till era sajter i kommentarerna som inspiration.