• Lost in the woods – vertical centering with CSS

I CSS3 kan man välja vilket typsnitt som helst till texter och rubriker. Det innebär att man i CSS länkar in ett typsnitt på samma sätt som man länkar in en bakgrundsbild.

Först ställer man in vad den ska heta och vart fonten ligger:

@font-face {
   font-family: Anivers;
   src: url('fonts/Anivers.otf') format("opentype");
}

Sedan kallar man på typsnittet på samma sätt som man gör i CSS2:

.min_klass  {
   font-family: Anivers;
}

Anivers – det perfekta typsnittet för rubriker?

Jag har testat ett stort antal typsnitt för att få rubrikerna att se så lättlästa och tilltalande ut som möjligt. Efter en del letande hittade jag ett mycket trevligt typsnitt. Det heter Anivers och är gratis att ladda ner. Ett exempel där det används på rubriker är på inspectelement.com.

Typsnittet finns på josbuivenga – Anivers. Vill man inte registrera sig och istället ta en genväg, går det också ladda ner typsnittet från inspectelement.com.

Uppdaterad: 2010-01-31

Marcofolio.net tillagd

Introduktion

Här kommer en lista på några av världens bästa RSS-flöden för webbdesigners.

CSS

• CSS3.info (RSS Feed)
• CSS-Tricks (RSS Feed)

WordPress

• Digging into WordPress (RSS Feed)
• WordPress Planet (RSS Feed)
• WpRecepies (RSS Feed)
• WPscoop (RSS Feed)

Webbdesign – Programmering och design

• CatsWhoCode (RSS Feed)
• Design Shack (RSS Feed)
• FavBrowser (RSS Feed)
• Marcofolio.net (RSS Feed)
• PelFusion (RSS Feed)
• Position Absolute (RSS Feed)
• Six Revisions (RSS Feed)
• Smashing Magazine (RSS Feed)
• Think Design (RSS Feed)
• W3Avenue (RSS Feed)
• WeFunction (RSS Feed)

Slutord

Känner du till fler bra RSS-flöden inom samma områden, lämna gärna en kommentar.

Uppdaterad: 2010-01-30

Introduktion

Här kommer 4 sätt att enkelt köra Internet Explorer 6 i Windows Vista. Samtliga av dessa program och tjänster fungerar även för Windows XP. Om du har andra erfarenheter eller känner till fler program eller tjänster kring ämnet, lämna gärna en kommentar.

MS SuperPreview

Microsoft har nu själva utvecklat ett program som används för att få webbplatsen att se lika ut i de flesta versionerna av Internet Explorer. Det heter SuperPreview.

Fördelar

• Bra initiativ som visar att Microsoft inser de problem de själva skapat.
• Snygg design.
• Möjlighet att arbeta i splitscreen.
• Möjlighet att markera elementen.

Nackdelar

• Om Microsoft hade gjort rätt från början hade det här verktyget inte behövt finnas.
• Det känns som att det tar några sekunder extra att generera en sida i jämförelse med i vanliga webbläsaren.
• Möjligheten att markera elementen är begränsad. Jag skulle önska en funktion likt Firebug istället.

IETester

Multiwebbläsaren IETester har flera inbyggda webbläsare. Varje flik får ett versionsnummer beroende på vilken version av Internet Explorer man har valt.

De versioner som finns att välja på är IE5.5, IE6, IE7 och IE8. Programmet körs med Microsofts nya ribbon-gränssnitt vilket jag tycker är trevligt.

Fördelar

• Det känns bra att surfa i något som liknar en webbläsare.
• Genereringen av sidorna går lika snabbt som i vanliga Internet Explorer.
• Det går smidigt att växla mellan flikarna med de olika versionerna av webbläsaren.

Nackdelar

• Programmet har kraschat både när jag testat det i Windows XP och Windows Vista. Allt tyder på att buggen beror på felaktig minneshantering.
• Textfält går inte att fylla i. En sökning på Google är alltså inte möjlig.
• Fler kända buggar finns på deras webbplats.

Xenocode

Xenocode är en märklig lösningarna på problemet att kunna köra IE6 i Windows Vista.

Om man som jag kör Firefox måste man installera ett tillägg. Efter att man har klickat på den gröna knappen poppar det snart upp ett fönster med IE6. Det fungerar både i Windows XP och Windows Vista.

Förutom IE6 finns IE7, IE8, Firefox1, Firefox2, Chrome, Opera och Safari.

Fördelar

• Det känns bra att surfa i något som liknar en webbläsare. Kör man IE6-läget så ser det exakt ut som IE6, vilket skiljer den här tjänsten från de övriga.
• Genereringen av sidorna går lika snabbt som i vanliga Internet Explorer.

Nackdelar

• Buffertiden är ganska lång första gången man startar webbläsaren.
• Jag har fått tjänsten att krascha en gång av okänd anledning.

IE NetRenderer

En internettjänst som inte kräver någon installation är IE NetRenderer. Man skickar helt enkelt en internetadress till deras server och får en skärmdump tillbaka. Det finns möjligheter att få tillbaka skärmdumpar från IE5.5, IE6, IE7 och IE8.

Det finns även ett tillägg till Firefox som heter IE NetRenderer. Det gör att man med ett knapptryck kan visa en skärmdump av den webbadress som är inskriven i adressfältet.

Fördelar

• Ingen installation krävs.

Nackdelar

• En skärmdump är extremt begränsande. Man kan exempelvis ibland inte se sidfoten.
• Det tar ofta ett antal sekunder innan man får en skärmdump tillbaka. Även om det handlar om några extra sekunder så kan det vara frustrerande om man ska testa många gånger.
• De har en begränsning att man inte får använda tjänsten för många gånger under kort tid.

Övriga tjänster

• Browsershots

Slutord

Känner du till fler program eller tjänster i syftet att kunna köra Internet Explorer 6 i Windows Vista? Lämna gärna en kommentar om dina erfarenheter kring dessa program och tjänster skiljer sig från mina.

Vilket är den bästa editorn för att koda hemsidor i? Vilket är det bästa FTP-programmet? Personligen tycker jag det smidigaste är om man kan kombinera dessa olika program för att slippa växla fönster. Här tar jag upp några program i jämförelse och mina erfarenheter av dem.

Visual Studio – För Microsoft-användare som har datorkraft och pengar

För de som programmerar ASP eller ASPX är Visual Studio antagligen en arbetsmiljö man troligen knappt kan klara sig utan. Den största fördelen jag finner med Visual Studio är att man kan skriva en punkt och den ger sedan förslag på vad man kan skriva. Nackdelen är att det kostar pengar om man ska ha hela miljön och drar en del av datorns resurser.

Dream Weaver – Bra tanke men känns lite väl omständigt ibland, kostar pengar

Jag har tidigare provat på Dream Weaver och tyckt att tanken varit bra. Det går att växla mellan kod-läge och design-läge. Det finns även inbyggt så att man kan skicka filerna till ett FTP-konto. Den delen blev jag dock aldrig helt klok på, onödigt krångligt. Programmet tar ett litet tag att ladda in och kostar dessutom pengar.

Notepad++ – Gratis, enkelt och nu med inbyggt FTP-program

Den senaste tiden har jag övergivit det ena programmet efter det andra som har kostat pengar, bytt ut dessa mot gratisprogram istället. För den som tycker gratis är gott är Notepad++ riktigt lysande. Det laddas in blixtsnabbt och man arbetar väldigt snabbt i det, delvis på grund av ett enkelt interface men framför allt för att man har flikar att växla mellan.

En nyhet som jag blivit mycket glatt överraskad över är att det nu finns inbyggd FTP. Det påminner därför lite om Dream Weaver som också har det stödet. Jag suckade innan jag skulle testa hur det fungerade, på grund av dåliga erfarenheter, men jag kunde inte bli nöjdare. Det var bara att mata in FTP-uppgifterna för att skapa sin FTP-profil och koppla upp. Det som händer är att man får upp ett träd, liknande utforskaren. För att ladda en fil kan man dubbelklicka på den och trycker man CTRL + S (spara) så sparas filen direkt till FTP-servern, helt utan att den behöver mellanlagras på hårddisken. Givetvis kan man spara på hårddisk också om man önskar.

Nackdelar då? Jodå, det finns några. En av dem är att Notepad++ saknar en bra funktionskomplettering vid punktnotation som jag tidigare nämnt att Visual Studio har. Det finns en sådan funktion även i Notepad++ men den är inte i närheten så bra och enligt mig inte ens användbar. En annan nackdel har länge varit att programmet inte har så snygg design, men detta har på senare tid blivit bättre. Deras hemsida är dock en total katastrof.

En av de största irritationerna vid utvecklandet av webbplatser är att webbläsarna inte läser koden lika. Safari, Opera och Firefox brukar alla klara uppgiften väl men Internet Explorer har länge plågat oss webbutvecklare. Det beror bland annat på att boxmodellen inte tolkas enligt de standarder som finns uppsatta i IE.

Internet Explorer 8 klarar ACID2-testet

ACID2-testet är ingen standard men är ett test för att kunna se hur pass väl en webbläsare klarar att följa de standarder som finns. Prova din webbläsare!

Första länken går till testet, den andra till hur resultatet helst ska se ut. Jag har provat testet i Internet Explorer 6 och det var en total katastrof. Nästan lika stor katastrof var det i Internet Explorer 7.

Firefox 3, Safari 3 och Opera 9 klarar däremot testet utan fel. Enligt IEBlog ska alltså Microsoft slitit det senaste året med att få Internet Explorer 8 att klara testet. Efter mycket lång väntan verkar det äntligen som att Microsoft förstår vad vi webbutvecklare vill ha. Internet Explorer 8 väntas släppas som beta-version under första halvan av nästa år.

The answer is The Pinball effect and I use it in my blog. The method is made in Javascript, but it works without it which makes it completely SEO-friendly. You might need some basic XHTML / CSS skills to use it.

The image below is an image to demonstrate the effect. The first image is when the mouse pointer is not over the div tag element. I choose a blue title text, a grey button and a grey background image.

The second image is when I hold the mouse over the div tag element. The title text, the image border, the button and the background image is now changed to different magenta colors.

To easy implement the code you might need a simple code example. You can find the complete instruction at Digital Web Magazine.

Använd vanliga typsnitt

Det första man bör tänka på är att undvika ovanliga typsnitt, eftersom de flesta inte har det installerat. Här kommer en lista på de typsnitt som finns i Windows XP, där man även får se hur de ser ut (eftersom de visas som bilder). Det är dock inte säkert att Linux och OSX har alla dessa typsnitt som standard.

sIFR – möjliggör ovanliga typsnitt

Om man ändå vill envisas med att använda udda typsnitt som systemet normalt sätt saknar finns det alternativ. Det jag känner till är sIFR som med hjälp av Flash och Javascript skapar texter. Man behöver dock inte ha några kunskaper i något av dessa för att kunna använda det. För den som använder sig av sökmotoroptimering kan jag nämna att texten fortfarande ses som text av webbläsaren vilket gör att den fortfarande är sökbar för sökmotorerna. Saknas Flash eller Javascript för användaren visas texten som med standardtypsnitt.

Stora och små typsnitt

Georgia, är ett relativt snirkligt typsnitt. Typsnitt av den typen lämpar sig bäst i lite större format, som t ex rubriker. För små texter lämpar sig enklare typsnitt för att förbättra läsbarheten. Arial är enligt mig det bästa typsnittet för små eller riktigt små texter på webben, men många föredrar Verdana.

Undvik standard-texter

Något som jag tycker att man ska försöka undvika är standard-texter och standard-färger på text och länkar. Blå och lila länkar (som är standard) kan lätt se lite amatörmässigt ut. Om man beslutat sig för att använda svart text mot exempelvis vit bakgrund så kan ett tips vara att inte sätta färgen till helsvart. Färgen #333333 som är en gråton nära svart kan ge en mjukare och behagligare läsupplevelse.

FontFinder – Ta reda på vad andra använder

Ibland kan man inspireras av andras texter på nätet. Om du använder Firefox så kan i så fall FontFinder vara ett bra tillägg. Du markerar en text, högerklickar och väljer FontFinder. Då visas all den information du kan tänkas behöva om den text du just markerat t ex färg, storlek och typsnitt.

UrbanFonts och DaFont – Bästa fontsidorna

Ska man göra loggor och bilder för webben, kan man behöva lite snyggare typsnitt än vad som finns att tillgå i systemet från början. Då kan UrbanFonts eller DaFont. vara två bra ställen att hitta gratis typsnitt på. Båda sidorna har bra förhandsvisning på sina typsnitt.

Prova först i bildbehandlingsprogram

En tidsbesparning kan vara att prova typsnitt och dess färg i ett bildbehandlingsprogram innan koden skrivs för att se hur de harmonerar med varandra. Mina tips här är bara en fingervisning om vad som skulle kunna vara bra. Låt ögat ha sista ordet!

W3C – standarden för XHTML och CSS

W3C har satt upp en standard, ett regelverk för hur hemsidor ska skrivas för att fungera korrekt. För att provköra koden används W3C Validator. Där skriver man in adressen till hemsidan och klickar på ”Check”. Därefter får man en lista på de fel man har och finns inga fel så får man en grön bock.

HTML Validator – Ett Firefox tillägg

Är man Firefox-användare finns det smidigare metoder. Det jag använder är ett tillägg som heter HTML Validator. Under tiden man surfar visar det om sidan man besökt innehåller fel eller ej, grön, gul eller röd beroende på hur allvarligt fel det är. Så länge bocken är grön håller man sig på banan, mycket smidigt. För att vara helt säker, bör man ändå använda W3C Validator då HTML Validator inte alltid hittar alla fel.

WebXACT – Går på djupet

Vill man testköra sidan för andra typer av fel, t ex felaktiga länkar så är WebXACT att rekommendera. Den går verkligen på djupet och hittar väldigt mycket.

Testkör för alla webbläsare

Det viktigaste är kanske ändå att testköra hemsidan i de olika webbläsare som finns. Har man PC så kan man ladda ner Opera, Safari, Firefox och Internet Explorer. Internet Explorer är det som brukar ställa till mest problem eftersom Microsoft envisas med att inte följa standarden, men det mesta brukar gå att lösa.

IE NetRenderer – Webbplats som ritar hemsidan i IE5.5, IE6 och IE7

Sitter man med Internet Explorer 7 och samtidigt vill testköra sidan i Internet Explorer 6 kan det bli svårt. Då är det tur att IE NetRenderer finns. Den ritar upp hur hemsidan ser ut i IE5.5, IE6 eller IE7.

Standarden följs dåligt

De flesta hemsidor på internet följer inte standarden, inte alla webbläsare heller, även om det blir bättre. Efter denna artikel hoppas jag att det blir ännu bättre.

Lösningen för det är Em. Måttet Em är en relativ storlek, till skillnad från pixlar som är fast. Det innebär att när man byter textstorlek i webbläsaren förändras all den texten som är skriven med Em, till den storlek man har valt.

För webbplatser med besökare som har nedsatt syn, eller av annan anledning vill få texten större, kan Em vara en måttsättning att överväga.

Det kan vara svårt att veta hur man ska få rätt storlek i Em om man inte har erfarenheter av det tidigare. Har man angett storlek i pixlar innan så kan Em Calculator vara till stor hjälp. Det räknar ut det mått man ska använda sig av, från pixlar till Em, beroende på den inmatning man gör.

Det finns inte bara fördelar. Något jag råkat ut för är att måtten plötsligt inte alls har blivit som jag tänkt mig. Problemet har då varit att jag haft flera klasser i varandra och eftersom Em är relativt till vad det varit tidigare, så påverkas det flera gånger.

Min egen webbplats är när detta skrivs inget bra föredömme för just detta, då alla mått är angivna i pixlar.