Kategoriarkiv: CSS och design

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

Använd “andra” typsnitt på din sajt

Typsnitt på webbsidor har varit ett gissel ända sedan webbens barndom. Dels på grund av att de flesta typsnitt är upphovsrättsskyddade och inte får spridas vind för våg, men också för att det krävdes att alla surfare hade de typsnitt du använde på din sajt installerade på sin dator. I slutändan föll därför valet nästan alltid på Arial, Verdana eller något annat av de fåtal “standardtypsnitt” som i princip ingen dator är utan.

Som tur så finns det en hyffsad lösning på båda problemen. Google web fonts erbjuder nästan 200 typsnitt som vem som helst får använda fritt, och som dessutom fungerar i de flesta webbläsarna:

  • Chrome 4.249.4+
  • Firefox 3.5+
  • Safari 3.1+
  • Opera 10.5+
  • Internet Explorer 6+

Det fungerar dessutom fint i de modernare mobiloperativsystemen som iOS 4.2+ och Android 2.2+.

Hur gör man?

  1. Surfa in på Google web fonts och leta reda på ett typsnitt du vill använda.
  2. Klicka sedan på “Quick-use” till höger under förhandsvisningen.
  3. Skrolla ned lite och klipp ut koden från ruta “3. Add this code to your website” och klistra in den högst upp mellan taggarna <head> och </head> i koden för din sajt.
    Exempel:

    <link href='http://fonts.googleapis.com/css?family=Loved+by+the+
    King&v2' rel='stylesheet' type='text/css'>
  4. Sedan är du färdig att använda typsnittet i din css-kod.
    Exempel:

    h1 { font-family: 'Loved by the King'; }

    Så, nu är det fritt fram för nya typsnittet

Att tänka på

  1. Använd inte för många typsnitt. När en besökare kommer till din sida laddas typsnittet ned och används utan att användaren behöver gör något. Det lagras i cache-minnet för webbläsaren, så nästa gång behöver inte nedladdningen ske. Alla typsnitt är komprimerade och nedladdningen går så fort att besökare i de allra flesta fall inte märker något. Men du bör ändå tänka på att inte använda för många typsnitt på samma sida för att undvika sämre laddningstider av din sajt (i de flesta fall är det dessutom inte speciellt snyggt med många olika typsnitt ;-)).
  2. Ange alternativa typsnitt. Även om Google web fonts har stöd för de flesta webbläsare så bör du alltid aktivt ange alternativa typsnitt som visas om besökaren använder en icke-kompatibel webbläsare.
    Exempel:

    font-family: 'Loved by the King', Arial, Verdana;
Dela: Facebooktwittergoogle_pluslinkedinmail