Det är ofta man behöver lite källor om vilka marknadsandelar vissa tekniska begränsningar man har att förhålla sig till. Egentligen är det bara tre viktiga saker att främst anpassa en webbsajt för:
- Skärmupplösning – vanligast idag är 1024×768
- Webbläsare – vanligast är idag IE6
- OS – vanligaste är idag Windows XP
Gällande teknisk statistik hämtar man enkelt från t.ex. http://marketshare.hitslink.com/
Skärmupplösningen
Det är viktigt att göra en webbsida som de flesta kan se på sina skärmar utan att behöva skrolla åt sidorna, dvs man ska inte göra sajten så bred att mer än 5% (den gränsen brukar jag använda) behöver skrolla i sidled för att se innehåll.
Visserligen finns det lite småtricks att ha en lite bredare sidbredd. Det ena tricket är att lägga en lite mindre viktig kolumn längst till höger, där man t.ex. kan placera annonser vilket gör att det går fortfarande att navigera och använda sajten utan att behöva skrolla till höger.
Den andra varianten är att göra en webbsida som anpassar sidbredden dynamiskt beroende på vilken upplösning surfaren har på sin dator. Jag brukar avhålla mig från sådan design eftersom jag inte tycker den är användarvänlig. Det finns massor av skäl till det, men det hör till ett annat inlägg i framtiden kanske och inte i denna bloggpost.
Webbläsare
Drömmen är att ha en webbsida som ser likadan ut i vilken webbläsare man än använder, men verkligheten är tyvärr annorlunda. De flesta använder idag IE, men Firefox och även Safari är på stark frammarcsh så det är ett måste att även anpassa sidorna till dessa.
Rent tekniskt är det egentligen bara designa webbsidan i Firefox (som 100% applicerar webbstandarder, har inget Quirks mode osv), sedan fixar man till alla problem som avviker i IE6. Resultatet med detta sätt är att layouten fungerar även i Safari, Opera och en massa andra webbläsare utan ändring.
Det finns två betydande skillnader som irriterar alla webbutvecklare och den ena är att box-modellen fungerar annorlunda i IE än i Firefox och den andra är att IE 6 och under har inget inbyggt stöd för transparenta PNG filer.
– Box-modellen skiljer sig i IE därför att ramar till boxar läggs utanpå och ökar alltså storleken på boxarna vilket gör att det blir pixelfel i IE. Det finns en massa enkla lösningar, men den enklaste är att se till att IE har en definerad strikt HTML mall. Det fungerar i IE6 och framåt, då kör IE som standarden säger istället och på samma sätt som Firefox, Safari, Opera m.fl. kör.
– Transparenta PNG filer i IE har varit ett stort problem för man kan göra fantastiska designade webbsidor med Alpha transparenthet som stöds av alla andra webbläsare. Microsoft har fixat detta först i version 7 av IE och det skulle egentligen ha fixats i IE5.5 men råkade glömmas bort och deras kundsupport filtrerade bort detta så att det aldrig kom fram till utvecklingsteamet bakom IE. När sedan Microsoft ändrade policy att låta deras utvecklare blogga så överöstes de med kommentarer om PNG felet vilket gjorde att de fixade det ganska omgående, men det var som sagt först i version IE7. Det finns lite lösningar till IE 5.5 och IE6 och den vanligaste är att fixa ett CSS skript som använder en ActiveX komponent med bildfilter. Det är ganska ironiskt med eftersom Windows har inbyggd stöd för transparenta PNG filer så fungerar det fint med ActiveX men webbläsaren själv klarar inte av att visa detta. Snacka om att utvecklingsteamet för IE på Microsoft måste känt sig rätt dumma när detta blev uppenbart.
OS (Operativsystem)
Oftast har operativsystemet som man använder mindre betydelse, men ibland kan det vara viktigt att se till att t.ex. färger fungerar konsekvent på olika datorer. I Windows struntar t.ex. webbläsaren i inbyggda färgprofiler i JPG-filer, medans i Mac OSX så används färgprofilen nästan alltid av alla program där för att kunna visa så rätt färger som möjligt.
En annan sak är att vissa Plugins i webbläsaren fungerar bara i Windows och gör man en webbsida som kräver en sådan kan man säga adjöss till 10% av alla Mac surfare på sin webbsida. Som tur är finns de flesta plugins såsom Flash för i princip alla OS.
Något som skiljer OS från varandra är att knappar, skroll och inmatningsfält ser olika ut och man kan inte förutsätta att en Mac-användare vet vad X betyder längst upp i höger i ett fönster som är standard i Windows för att stänga ett fönster. Designar man en webbsida som efterliknar OS-funktioner måste man tänka på att det kan alltså uppfattas förvirrande för vissa.