Kategoriarkiv: CSS och design

Fixa en mobilanpassad meny på din sajt

En utmaning med att skapa sajter för små skärmar är att ta fram en meny. Här presenterar vi två olika lösningar. Dels den lösning vi själva har valt att använda på Loopia.se, men också den allt mer populära variant som används av Facebook, Youtube och många andra.

Vilken lösning som passar din sajt bäst beror självklart på sajtens innehåll och hur dina besökare enklast navigerar i den typen av innehåll.

1. The Loopia way

Vi har valt en horisontell meny där man sveper över menyn med fingret för att skrolla till höger och vänster. Det går även bra att trycka på pilknapparna till höger och vänster om menyn för att skrolla om din enhet inte har stöd för “swipe”. Orsaken till att vi valde denna typ av meny är att vi gillar att du som besökare får en försmak av vad menyn innehåller utan att den för den delen tar upp speciellt mycket skärmyta.

Vi har utgått från projektetet iScroll för att bygga menyn.

loopia-meny

2. Gör som Facebook och Youtube

Ett mycket populärt sätt för att göra menyer både på mobila sajter och i appar är att låta menyn komma fram från vänster sida på samma sätt som bland annat Facebook. Detta sparar dig utrymme på höjden jämfört med lösningen ovan, men besökaren är tvungen att öppna menyn för att se vad den innehåller.

Vill du implementera “Facebook-lösningen” finns det många färdiga lösningar att använda, bland annat jPanelMenu.

jpanelmenu

Det finns självklart många andra sätt att lösa menyfrågan för mobila enheter. Vilken är din favorit? Tipsa gärna och berätta om hur du resonerar i kommentarerna nedan.

Två sätt att göra responsiva tabeller på din sajt

Att bygga en sajt som automatiskt anpassar sig efter mobil, surfplatta eller fullstor datorskärm innebär en del utmaningar. En av dem är tabeller. Här beskriver vi dels hur vi har löst det, men visar också en alternativ lösning om du har ännu bredare tabeller än vad vi har på Loopia.se. (Lär mer responsive web design här för att få koll på grunderna)

Första steget är självklart att sätta bredden på tabellen och cellerna till ett procentvärde istället för ett fast värde. Men i väldigt många fall räcker inte detta om tabellen har många kolumner.

The Loopia-way

Om du besöker vår sajt via mobilen eller drar ned storleken på ditt webbläsarfönster så ser du att vi har valt att släcka den första kolumnen (med radrubriker), och istället visa rubrikerna ovanför varje cells innehåll som du kan se på bilden nedan. Vi har också minskat storleken på texten något.

Se exempel på detta på loopia.se/webbhotell.

responsive_table_alt1

Om du har ännu större tabeller

Lösningen ovan fungerar bra för oss eftersom vi inte har några riktiga mastodont-tabeller. Vi har dock hittat en ganska trevlig lösning för dig som har tabeller med riktigt många kolumner. Här behålls istället kolumnen med radrubriker och låses, medan resten av kolumnerna går att skrolla mellan i sidled.

En del av översikten går tyvärr förlorad på mindre skärmar med den här lösningen, men det känns som en rimlig kompromiss.

Se exempel på denna lösning och hur du själv kan använda det på dina sajter.

responsive_table_alt2

Har du någon annan bra lösning för hur man hanterar tabeller med responsiv design? Tipsa gärna i kommentarerna.

 

Beta-testa nya Loopia.se med responsive web design

Arbetet med att göra hela Loopia.se responsive (alltså att den anpassar sig efter den enhet/skärmstorlek du använder) pågår för fullt, och du kan nu provköra delar av nya Loopia.se på adressen responsive.loopia.se.

Gå gärna in och kika med din dator, smartphone och surfplatta och meddela oss på feedback@loopia.se om vad du tycker eller om du hittar några konstigheter (gärna med detaljer om vilket operativsystem, vilken webbläsare och enhet du använder så att det blir lättare för oss att justera det du hittat).

De delar som inte är responsive än är bloggen, kunskapsdatabasen samt kundzonen och åf-zonen. Dessa är byggda på andra system än övriga Loopia.se och vi håller på för fullt med att bygga om dem också. Håll utkik här på bloggen, och på Facebook, Twitter eller Google+ framöver så får du aktuell information om hur det arbetet fortgår, samt tips och funderingar kring hur vi löser olika delar.

Läs gärna våra blogginlägg med tips om hur du kan göra din sajt responsive och på andra sätt anpassa den för den ökande skaran mobilbesökare:

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.

Rätt innehåll på rätt sätt – ett lyft för 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 →

Tänk på mobilbesökaren först

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 berättat tidigare håller vi på att snickra 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 →

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).

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?

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 :) .

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:

  • 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?

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 här: http://wordpress.org/extend/plugins/twenty-eleven-theme-extensions/