Fredrik Malmgren » Webbdesign

Använd CSS-ramverk för att minska din utvecklingstid

Fredrik Malmgren — Tue, 25 Aug 2009 11:06:59 +0000

Jag har många idéer som har potential att bli väldigt användbara sajter och förhoppningsvis kan några av dem generera lite extra inkomster. Det jag tycker är roligast är konceptutveckling, att utveckla en ide till ett helt koncept med funktioner och affärsmodell. När det kommer till själva utvecklingen av sajten försöker jag göra det väldigt lätt för mig och använda färdiga ramverk så ofta jag kan men utan att gå till överdrift.

Hittills har jag inte använt något ramverk för CSS men i nästa projekt tänkte jag testa att göra det. Jag har letat en hel del på nätet efter olika CSS-ramverk och hittat några intressanta. Tre ramverk som jag fastnade för är:

Det alla dessa ramverk har gemensamt är att det bygger på ett rutsystem. Det hela fungerar så att man delar upp sajtens bredd i ett antal kolumner. Hur många kolumner man har är lite beroende på vilken bredd sajten ska ha och avståndet mellan kolumnerna. Jag ska inte gå in exakt på hur man använder alla ramverk i detta inlägg men kan ge ett kort exempel på hur det fungerar.

Säg att man vill utveckla en sajt som har en meny till vänster, en större yta i mitten och slutligen en lite smalare yta till höger. Det man gör i alla ramverk är att ange bredden på ytorna i antalet kolumner de får ta upp. Om hela sajten har bredden av 24 kolumner (som är standard för Blueprint) så kan menyn till vänster vara 8 kolumner bred, ytan i mitten 12 kolumner bred. Då återstår 4 kolumner till ytan till höger. Man kan kombinera bredderna hur man vill, det ända man behöver komma ihåg är att tillsammans ska de ha bredden av 24 kolumner. I exemplet har man skapat en sajt som har tre ytor som går från toppen till botten av sajten. Självklart kan man skapa en banner längst upp. Det är bara att ange att den ska vara 24 kolumner bred. Detsamma gäller för sidfoten om man vill ha en sån. Det hela kanske låter krångligt men det är i praktiken väldigt lätt. Alla ramverk har tydliga beskrivningar som förklarar detta på ett bra sätt.

Har du inte testat ett CSS-ramverk så rekommenderar jag verkligen att du gör det.

Ett enkelt sätt att testa sin webbdesign i alla webbläsare

Fredrik Malmgren — Tue, 14 Jul 2009 07:11:42 +0000

För en tid sedan skrev jag om ett program som heter IETester. Med detta program kan man testa hur en sajt ser ut och fungerar i alla olika versioner av Internet Explorer. Hur gör man då för alla andra webbläsare? Självklart är det bäst om man har alla webbläsare installerade på sin dator så man kan testa både form och funktion. Nu finns det en uppsjö av webbläsare ute på marknaden och de beter sig lite olika beroende på vilket operativsystem man använder. Att installera och testa alla kombinationer blir en alldeles för stor uppgift.

Browsershots

För att göra detta lite lättare finns det en sajt som heter Browsershots. Det fungerar så att man skriver in adressen till sajten man vill testa och sedan väljer man vilka webbläsare och operativsystem man vill testa designen på. När det är klart så är det bara att vänta på att sajten ska begära skärmdumpar för de olika webbläsarna, vilket kan ta en stund beroende på hur många webbläsare du vill testa din design på. När alla skärmdumpar är klara kan du välja mellan att kolla på dem direkt eller så kan du ladda ner alla bilder till din dator.

Självklart är det alltid bäst att testa sin webbdesign på en webbläsare som är installerad på sin egen dator men som komplement funkar Browsershots väldigt bra.

IETester låter dig kontrollera din webbdesign för Internet Explorer

Fredrik Malmgren — Wed, 10 Jun 2009 07:38:53 +0000

Har du någonsin skapat en sajt för att sedan få höra av en användare att sajten inte ser bra ut i en annan version av Internet Explorer än vad du testade med när du utvecklade den? Det är sällan man har alla olika webbläsare installerade på datorn och även om man skulle ha det så har man inte alla versioner. Idag när jag tittade på en tutorial om webbutveckling på Nettuts såg jag att de använde ett väldigt praktiskt program för att testa hur en webbdesign ser ut i olika versioner av Internet Explorer så man kan minimera detta problem.

Programmet heter IETester och är en webbläsare som låter dig ha rendering och javascript motorn från IE8, IE7, IE6 och IE5.5 för Windows XP och Windows Vista i olika flikar. IETester finns hittills bara som alfa release och innehåller en del buggar men jag tycker ändå det verkar väldigt lovande. Ska bli intressant att följa utvecklingen av detta program.

IETester