Kategoriarkiv: CSS och 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

25% mobila besökare på responsiva Webbkomet.se

Du har väl inte missat att Webbkomet.se funkar lika bra i mobilen eller surfplattan som på datorn? Anledningen är att sajten är byggd med så kallad “responsive web design” som automatiskt anpassar sajten efter storleken på webbläsaren (prova att ändra fönsterstorleken på sajten så ser du vad som händer).

Vi surfar mer och mer på både mindre och större enheter än en “vanlig” dator (t ex kommer 25% av besökarna på Webbkomet.se från mobila enheter). Självklart vill vi då inte zooma in och ut tills fingrarna blöder, eller mötas av en begränsad mobilsajt och tvingas växla över till “desktop-läge” för att göra det vi kom för. Med responsive web design kan du som sajtägare se till att dina besökare får en bra upplevelse oavsett vilken enhet de använder.

Bara början på Loopias responsive-satsning

Webbkomet.se lanserades i slutet av sommaren, och självklart är detta bara starten på Loopias responsive-satsning. Bakom kulisserna påbörjade vi för en tid sedan arbetet med att göra om alla våra sajter. Det är ett omfattande arbete som kräver stora förändringar av framför allt kundzonen för att fungera oavsett skärmstorlek. Räkna dock mer att vi kommer snacka betydligt mer om “responsive web design” här på bloggen framöver :).

Dela: Facebooktwittergoogle_pluslinkedinmail

Vilka delar av HTML5 och CSS3 vågar du använda?

Det finns mycket härliga och efterlängtade funktioner i HTML5 och CSS3, men även om stödet i de flesta moderna webbläsarna är stort så är det långt ifrån hundraprocentigt. Dessutom vill du troligtvis att sajten ska se ok ut även i något äldre webbläsare.

I många fall räcker det att vara medveten om hur sajten ser ut i en äldre webbläsare (det kanske inte är hela världen om knapparna inte har runda hörn för vissa besökare).

För att du snabbt och enkelt ska se vilka webbläsare som har stöd för vad finns det några riktigt bra webbtjänster:

En av alla webbtjänster som hjälper dig att välja vilka delar av HTML5 och CSS3 som du vågar använda.

  • When Can I use… har kompabilitetstabeller för CSS, HTML, SVG med mera, även för mobila webbläsare.
  • HTML5 Please hjälper dig även att implementera alternativ och reservlösningar för de webbläsare som ej har stöd.


Vilka delar av HTML5 och CSS3 vågar du använda när du designar sajter, dela gärna med dig i kommentarerna?

Dela: Facebooktwittergoogle_pluslinkedinmail

WordPress-tips: Twenty Eleven för lata

Är du, liksom jag, en aning för lat för att orka göra din WordPress-blogg lite mer personlig? Då ska du prova detta ovärderliga tillägg: Twenty Eleven Theme Extensions (av MozTools)! Tillsammans med WordPress senaste standardtema Twenty Eleven fungerar detta tillägg som en hjälpande hand då det kommer till att justera färger, höjd på din header och andra finesser – utan att ens röra stilmallen!

Bland mina inställningar har jag bland annat valt att sidopanelen alltid ska vara synlig även om jag byter sida på bloggen – något som inte är standard i Twenty Eleven-temat. Jag har också justerat höjden på min header till 400 pixlar då jag behövde få rum med lite mer än vad standardmallen tillät (standardmåtten ligger på 1000 x 288 pixlar).

På samma sida kan du också välja att lägga in din egen CSS-kod utan att den påverkas negativt när du uppdaterar WordPress eller Twenty Eleven-temat. Tidigare har du som användare varit tvungen att skapa ett så kallat child theme för att förhindra förlust av egen designad kod vid uppdateringar. Nu är det ett minne blott! Med andra ord ännu bättre för oss latmaskar!

När det kommer till färgjustering finns det oändligt med möjligheter att anpassa färgerna till din bloggdesign. Du kan exempelvis ändra länkfärg, menyfärg, bakgrundsfärg och mycket mer. Och precis som tidigare kan du med ett enkelt knapptryck välja vilken sida du vill ha din sidopanel eller om du inte vill ha någon sidopanel överhuvudtaget.

Så om du är en lat blogganvändare kan jag bara rekommendera att du inställerar Twenty Eleven Theme Extensions omgående. Mycket nöje!

Text: Hanna Gustavsson, tokitoki.se

Läs mer om WordPress-tillägget här.


Dela: Facebooktwittergoogle_pluslinkedinmail

Hanna ger dig tips för att snygga till din sajt

Idag har vi glädjen att presentera en ny inspirerande gästbloggare. Hanna Gustavsson kommer att dela med sig av kreativa tips och tankar kring både det ena och andra här på Loopia-bloggen. Vem hon är? Det berättar hon bäst själv...

Jag heter Hanna. Bakom namnet döljer sig en 26-årig kontrollmänniska som försöker kombinera mammaroll, samboliv, läraryrke, bloggstress och kreativ ångest till en, så när som på, fungerande vardag. Jag älskar bloggdesign, fotografi, illustrationer och alla andra digitala kreativitetsområden du kan tänka dig. I och med detta har jag det senaste året startat upp tokitoki.se där jag delar med mig av mina mer eller mindre digitala illustrationer för hem och högtider.

Mitt stora data/IT-intresse kommer från min kära far som på det glada 90-talet byggde ihop min första egna dator. Ni vet en sån där dator med Windows 95, tjockskärm och mus utan scrollfunktion?

Ja, precis en sån.

Redan tidigt började jag bygga mina egna hemsidor (i HTML) som då berörde diverse tjejbaserade pop-band från Storbrittanien. Jag chattade i mIRC och skapade kontakter över hela världen. Kontakter som jag tyvärr nästan helt har tappat idag.

När jag blev äldre blev jag lat. Det gick ju så mycket fortare att göra hemsidor i program som Frontpage eller Dreamweaver –  istället för att skriva all HTML själv! Detta ångrar jag bittert idag. Nu känner jag mig låst till hjälpmedel och mina tidigare baskunskaper i HTML börjar kännas minst sagt daterade. Men jag skäms inte för att ta till lite hjälp så därför tänkte jag i ett första inlägg här i Loopias blogg tipsa om hur ni andra latmaskar därute kan göra era WordPress-sidor mer personliga – utan att skriva en enda kod!

Framöver kommer jag även att dela med mig av matnyttiga gratissidor för bloggtillbehör (bakgrunder, ikoner m.m) samt även en mer begrundande krönika berörande föräldrarskap och dagens teknikanvändning.

Mer om mig och min så kallade ”fungerande vardag” kan ni läsa om på min privata blogg: ourfamily.se.

Snygga till din design – helt gratis!

Trots att jag googlar på ”gratis bloggbakgrunder” dyker det ändå upp flertalet sidor med dolda avgifter eller tvång på att du ska registrera dig för att få ladda ner deras bakgrunder. Sånt avskyr jag. Jag vill inte vara registrerad på tusentals webbplatser som kan välja att använda min information till vad de än behagar (för vem orkar läsa igenom Terms & Conditions egentligen?). Men med lite tålamod går det att hitta guldkorn i Googles sökresultat. Nedan listar jag mina tre favoriter som har hjälpt mig att utforma mina bloggar och hemsidor de senaste åren: Läs mer

Dela: Facebooktwittergoogle_pluslinkedinmail

Full koll på CSS-koden med Espresso för Mac

Som webbdesigner är det viktigt med ett bra verktyg för att redigera och hantera CSS-kod. Det finns oändligt med alternativ men en favorit som jag använt under lång tid är CSS Edit för Mac, numera inbakad i den mer kompletta kod-editorn Espresso.


Det fina med Espresso är, framför allt om du har två skärmar, att du ser ändringarna på sajten direkt medan du grejar i CSS-koden. Du kan också hitta vilka stilregler som påverkar ett speciellt objekt på sidan genom att klicka på det. Lite som webbläsarpluginet Firebug fast med fördelen att du kan spara dina ändringar direkt.

Några schyssta features i Espresso:

  • Se dina CSS- och HTML-ändringar på webbsidan samtidigt som du gör dem
  • Visuella verktyg för att ange CSS-kod (även CSS3 som skuggor, toningar etc)
  • Synka och publicera filer mot ditt FTP-konto automatiskt (om du önskar)
  • Smidigt att växla mellan olika filer som berör webbsidan medan du redigerar
  • Färgkodning, automatisk komplettering för HTML5, CSS3, Javascript, PHP, Python mm.

Programmet kostar $79 (ca 500 kr), men du kan ladda ner och prova programmet gratis i 15 dagar.

Vilket är ditt favoritverktyg för CSS-kodning (gärna tips för Windows och Linux)?

Dela: Facebooktwittergoogle_pluslinkedinmail

Muse och Edge – webbdesignerns bästa vänner?

En formgivare och en utvecklare är inte ofta samma person… eller ja, tyvärr ÄR det alldeles för ofta samma person på webben. Som det ser ut idag måste webbdesignern lära sig åtminstone HTML och CSS för att hanka sig fram. Men det är något som Adobe vill råda bot på med programmet “Muse”. Till skillnad från t ex Dreamweaver ska du som formgivare inte behöva bry dig om en enda rad kod, och det som kommer ut ska vara kompatibelt med alla vanliga webbläsare, och samtidigt utnyttja CSS3 och HTML5 där det är möjligt.

Det låter ju bra så långt, tyvärr känns risken stor att det kommer med för stora kompromisser, men det återstår att se. Muse finns redan idag i en gratis beta-version, så du kan provköra kostnadsfritt ända fram till den skarpa versionen släpps (tidigt 2012 lovar Adobe).

Under den korta tid vi har hunnit prova Muse så har vi fått uppfattningen att gränssnittet är trevlig att arbeta med, och är du van att arbeta med Adobes designprogram för print, Indesign, så går det ganska snabbt att komma in i arbetsflödet. Du kan förutom alla “vanliga” verktyg t ex arbeta med sidmallar och formatmallar på ett sätt som liknar Indesign. Helt utan inlärningskurva är det dock inte eftersom mycket trots allt är webbspecifikt, och därmed inte finns i Indesign.

Ett nytt grepp med Muse är prissättningen, istället för att du köper en licens, betalar du en löpande kostand på $15/månad eller $180/år så länge du vill använda programmet.

Edge – Adobes egna Flash-dödare

Utöver Muse så håller Adobe också på att utveckla verktyget Edge, som kan sägas vara lite en “Flash-dödare” (även om de själva säger att Flash och Edge kompletterar varandra). Målet är att kunna producera webbsidor, webbspel, webbannonser på ett sätt som liknar Flash, men som istället bygger på HTML5, CSS3 och Javascript. Även Edge går att ladda ner och prova gratis.

Har du provat Muse och/eller Edge? Kommentera gärna och berätta vad du tycker.

Dela: Facebooktwittergoogle_pluslinkedinmail