Kategoriarkiv: HTML

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.

Verktygen som hjälper dig animera med HTML5

HTML5 omtalas ofta som Flash-dödaren, och även om det kanske är att hoppas på för mycket så kommer HTML5 alldeles säkert ersätta mycket av det som Flash används för idag.

Men för att du som webbkreatör ska ha möjlighet att börja jobba på allvar med den nya standarden så krävs att det kommer bra verktyg som gör arbetet hanterbart.

Adobe själva har såklart insett att det inte finns någon poäng med att krampaktigt hålla fast vid Flash som enda alternativ, utan istället anpassa sig till framtiden och fortsätta tjäna pengar även efter Flash eventuella död ;-) . De har därför redan presenterat prototyper av två verktyg som ska hjälpa dig att skapa HTML5-upplevelser på ett enkelt sätt:

  • Flash till HTML-konverteraren är ett verktyg för att konvertera befintliga Flash-animationer till HTML5 helt automatiskt.
  • Med Edge ska du kunna skapa animeringar, övergångar och viss logik med hjälp av ett enkelt gränssnitt. Allt sparas sedan i snygg HTML-kod.

Självklart är inte Adobe ensamma om att vilja vinna din gunst när det gäller att bygga HTML5-animationer. Uppstickaren Sencha var troligtvis först ut med en skarp produkt när de för ett par veckor sedan släppte Sencha Animator – men fler lär komma.

I dagsläget fungerar HTML5 endast i de webbläsare som är baserade på Webkit, det vill säga Safari, Chrome, Android-telefoner och iOS-enheter (iPhone, iPad, iPod Touch). Men de kommande versionerna av Firefox och Internet Explorer är inte så långt borta, och då är alla stora webbläsare med på HTML5-tåget.

Läs mer om HTML5 och CSS3 i tidigare blogginlägg

* Begreppet HTML5 inte är helt korrekt använt ovan då det snarare är en samling av tekniker och standarder som gör ovanstående möjligt. Men i det här inlägget får det för enkelhetens skull agera som ett gemensamt namn för rubbet.

CSS3 och HTML5 – webbframtiden är ljuv

CSS3 och HTML5 kommer att innebära ett stort framsteg för webben i stort och dessutom göra livet som webbdesigner mycket trevligare.

Några av de många nyheterna i HTML5:

  • Data kan lagras lokalt i en databas, vilket gör att du även utan uppkoppling kan komma åt och redigera t ex Google Docs-dokument (Google har en egen lösning för detta redan Google Gears).
  • Videouppspelning direkt i webbläsaren utan plugins som Flash, Silverlight eller annat.
  • Formatera text (t ex fetstil, kursiv, färg) utan tunga javascriptlösningar som idag krävs för att skapa textredigering i stil med den som används när du t ex redigerar inlägg i WordPress.
  • Canvas-element gör det möjligt att skapa avancerade gränssnitt utan t ex Flash eller Silverlight.

Som du kan se kommer många av de saker som idag kräver tunga och plattformsberoende plugins finnas direkt i alla webbläsare.

Nyheterna i CSS3 gör att ännu större del av formen kan placeras direkt i CSS istället för i bilder. Det blir på så sätt mindre data att ladda och mycket enklare att anpassa sidan för olika kanaler (storlekar på datorskärmar, mobiltelefoner, utskrift mm).

Några av nyheterna i CSS3:

  • Skuggor. Det går fint att lägga till skuggor på text eller andra objekt direkt i koden.
  • Rundade hörn. Det krävs inte längre ett gäng bilder för att göra en ruta med rundade hörn.
  • Opacitet. Äntligen en enhetlig standard för att göra färger och objekt halvtransparanta.
  • Övertoningar. Tona från en färg till en annan utan att blanda in Photoshop.
  • Fler bakgrundsbilder. Varje objekt kan innehålla fler än en bakgrundsbild.
  • Kolumner. Webbläsaren klarar automatiskt av att hantera kolumner, inget mer manuellt brytande av flödande text.

Trots att standarderna inte är spikade än så har de stora webbläsarna börjat implementera många av komponenterna i både CSS3 och HTML5. Undantaget är (som vanligt?) Microsoft Internet Explorer som har väldigt svagt stöd på båda fronterna i version 8. Som tur är är Explorer 9 på god väg och där lovar Microsoft att istället ligga i framkant (kolla in betan här).

Eftersom det fortfarande är många webbläsare som inte stödjer en stor del av de nya standarderna så kan det vara bra att använda dem med måtta. Använder du rundade hörn och skuggor på vissa objekt på din webbsida får du leva med att de blir kantiga och skugglösa för en ganska stor del av besökarna än så länge.

Det finns massor av roliga och bra exempel på nätet vad de nya standarderna kan prestera. Här följer ett par (många av dessa kräver Apple Safari eller Google Chrome för att fungera i dagsläget – ett perfekt läge att prova en ny webbläsare om den du kör idag inte har hängt med i utvecklingen  ;-) ):

Hur mycket använder du dig av HTML5 och/eller CSS3 idag, och till vad?

Klättra på sökmotorernas listor

Att hamna högt upp på sökmotorernas listor är otroligt viktigt då en väldig stor del av all trafik på internet drivs den vägen (hur många gånger om dagen ”googlar” du själv på något?).

Sökmotoroptimering är en hel vetenskap, men här kommer i alla fall några enkla tips att börja sin klättring upp för sökmotorlistorna med:

  • Självklart ska du anpassa metataggarna (title, description och keywords) med ord som är relevanta för att besökaren ska hitta er. Se även till att orden förekommer på själva sajten.
  • Metataggarna bör anpassas för varje undersida med vad som är relevant för just den sidan. Sätt t ex huvudrubriken på respektive undersida som ”title”.
  • Använd <H1>-taggar på huvudrubrikerna.
  • En sajtkarta är aldrig fel, det är smidigt för besökaren, men sökmotorerna tycker också att det är ”najs”.
  • Se till att länkar innehåller relevanta sökord, inte ”klicka här”.
  • Håll sidan uppdaterad, sidor som är ”döda” rasar fort i sökmotorernas medvetande
  • Undvik att använda bilder som länkar i t ex menyer. Försök hellre att ha en bakgrundsbild med text ovanpå.
  • Använd inte bilder som rubriker. Visst det är tråkigt att inte kunna använda ”rätt” typsnitt, men det är ännu tråkigare om ingen hittar till sajten.
  • Er sajt rankas högre om många andra länkar till den. Byt gärna länkar med andra sidor som kompletterar ert innehåll.
  • Sociala medier är väldigt viktigt eftersom ni kan få många länkar på bloggar, mikrobloggar, forum och communities.
  • Flashsidor är ofta trevliga att se på, men de indexeras inte speciellt bra av sökmotorer även om det börjar dyka upp teknik för att få det att fungera något bättre.

Det finns såklart otroligt mycket information på nätet om sökmotoroptimering, eller SEO (Search Engine Optimization) som begreppet kallas på engelska, men ska man tipsa om något så är det väl om den största av de storas tips om det hela. Här kan du hitta Googles riktilinjer för webbansvariga.

Dessutom finns det massor för företag som inriktar sig på att hjälpa kunder med sökmotoroptimering, men istället för att jag ska tipsa om några så tycker jag du ska göra en sökning efter dem. De som hamnar högst upp i din sökning lär ju vara duktiga på sitt jobb ;-)

Anpassa din hemsida för skrivaren

Alla som byggt en hemsida från grunden vet att själva formgivningen görs med CSS medan själva innehållet hanteras av HTML (eller XHTML). Det många inte tänker på är att CSS inte är bundet till formgivning just för skärmen, utan låter dig formge även för andra media.

Ett av dessa är skrivaren, något som kan vara mycket intressant för just hemsidesskapare. Läs mer →

Snabbare hemsida med sprites

I datorspelens och datorgrafikens barndom var användandet av stora bildfiler innehållandes en mosaik av småbilder stor. På så vis kunde man minimera antalet bildfiler och mängden utnyttjat RAM-minne. Eftersom allt går i cirklar är nu denna teknik i viss mån på väg tillbaka, fast den här gången beror det inte på våra datorer, utan på sådant som webben och små bärbara enheter med begränsade resurser (tänk din mobil).

När det gäller kommunikationsnätverk som Internet går det i många fall betydligt snabbare att ladda hem en stor fil än många små. För en hemsida med många småbilder och ikoner kan det därför vara en idé att klumpa ihop dessa till en så kallad sprite map för att på så vis kunna erbjuda en snabbare hemsida och en bättre webbupplevelse för ens besökare. Läs mer →