…så nu tar vi ett par varv ”Progressive Enhancement” igen.
För ett par veckor sedan skrev Mathias ett inlägg om css 3 och hur den standarden kan komma att påverka webben. Om vi lyfter diskussionen något från det rent tekniska till att handla om hur vi hanterar marknadens olika webbläsare och hur de renderar sidor på olika sätt hamnar vi snart i diskussioner som rör s.k. Progressive Enhancement (PE).
Vad är då Progressive Enhancement?
(fritt översatt från wikipedia)
- Innehålllet skall vara tillgängligt för alla webbläsare
- Grundläggande funktioner skall vara tillgängligt för alla webbläsare
- Strikt, semantisk html är bäraren av allt relevant innehåll
- Formgivning sker genom externt CSS dokument
- Avancerad/utökad funktionalitet sker genom diskret, externt länkad JavaScript, webplatsen måste gå att använda utan JS.
- Respektera skillnaderna i besökarnas olika webbläsare
Vad får det för betydelse i vårt dagliga arbete?
I teorin betyder det att man startar med en enkel, semantiskt korrekt HTML som rymmer allt väsentligt innehåll (se bild 1). På detta lägger man sedan ett lager design i form av CSS för att sedan avsluta med ett yttre lager funktionalitet/upplevelse i form av JavaScript. Vi strävar efter att alla ska få en tillfredsställande upplevelse vid besöket, besökare med mindre avancerade webbläsare möts av en enklare, men fullt användbar, webbplats medan besökare med mer kapabla webbläsare får både ”pukor och trumpeter”.
(Bild 1, lånad från den utmärkta artikeln Understanding Progressive Enhancement av Aaron Gustafson)
I praktiken så fungerar det tyvärr inte riktigt på detta sätt. Vi levererar idag nästan alltid all ”extra” upplevelse till majoriteten av alla webbläsare även till de webbläsare som inte förstår implementeringen (läs IE 6-7). Vad som händer är att vi initialt har ambitionen att arbeta med PE men när det kommer till kritan och vi står där och ska testa i mindre kapabla webbläsare arbetar vi in ”pukorna och trumpeterna” även i dessa med hjälp av extra HTML/CSS och avancerade JavaScript trix, detta tillintetgör hela idén med PE
Hur vi bör göra
Inställningen till det visuella ögongodiset bör ses som en typ av belöning till de webbläsare som stödjer den avancerade kod som gör det möjligt snarare än något som saknas eller inte fungerar i de webbläsare som inte ännu är riktigt är med i matchen.
Häri ligger mycket av förändringen i inställningen, en design är inte felaktig för att den ser annorlunda ut i IE7 och vi har inte varit slöa då vi inte levererat en pixelperfekt lösning i alla webbläsare. Vi belönar, visuellt, användare med mer kapabla webbläsare, medan besökare med mindre kapabla webbläsare får en fullt användbar webbplats med lite mindre ögongodis.
Jämför tex. bild 2 och bild 3 här nedan. Bild 2 är hur Twitter ser ut i Internet Explorer 7, notera de kantiga hörnen på boxar etc. Jmf. sedan med Bild 3, Twitter i Safari. Nu kanske man ska akta sig för att uppskatta tidsåtgången för att implementera alla de runda hörn som finns på Twitter (Safari) så att de fungerar även i IE 7, men jag gör det ändå. Min uppskattning är att man enbart på dessa detaljer spar minst en arbetsdag css/html.
Bild 2: Twitter i Internet Explorer 7 utan runda hörn
Bild 3: Twitter i Safar, med runda hörn
Förutom det lilla räkneexemplet ovan, ger Progressive Enhancement:
- En mer robust sida: snarare än att använda ”Graceful Degradetion” där man först skapar en fullt fungerande sida för avancerade webbläsare och sedan arbeta sig bakåt och fixa sidan för mindre kapabla webbläsare fokuserar man på att först skapa en solid grundsida som fungerar överallt.
- Mer nöjda användare: Starta med att se till att alla får en fullt fungerande bas, besökare med mindre kapabla webbläsare, mobila enheter eller enheter för speciella behov blir nöjda för de får rena, snabba, fullt fungerande sidor. Besökare med mer kapabla webbläsare får ovanstående samt även ett mer polerat, upplevelseorienterat besök.
- Reducerad utvecklingstid: Man behöver inte lägga tid på att få allt identiskt i alla webbläsare.
- Reducerad underhållstid: Om en ny webbläsare släpps eller en ny teknik lanseras är det enkelt att lägga till denna utan att behöva justera och eventuellt förstöra befintlig kod.
- Längre hållbarhet: Kunden får en webbplats som håller sig fräsch längre, när besökaren uppdaterar sin webbläsare och återkommer till sidan så möts hon/han ev. av ett uppdaterat gränssnitt utan att vi behövt göra något, det finns ju redan där från början bara det att besökaren inte sett det.
- Sist men inte minst: Vi sprider lite glans över oss själva då vi visar att vi ligger i framkant när det gäller front end design.
Nu får det vara slutvevat för denna gång. Här nedan har jag samlat några länkar för den som vill läsa mer i ämnet. För dig som inte riktigt känner att du vill/orkar läsa mer om detta vill jag starkt rekommendera denna sammanfattning: Do websites need to look exactly the same in every browser?
@font-face, en licensfråga…
För att en font ska rendera korrekt på en webbplats måste besökaren ha den specifika fonten installerat på sin dator. Detta medför att webbformgivaren varit hänvisade till 10-15 sk webbsäkra typsnitt utav alla de hundra tusen eller så möjliga, en viss begränsning m.a.o.
Det finns ett antal tekniska lösningar för att kringgå problemet med lokalt installerade typsnitt, alla med mer eller mindre svåröverkomliga hinder och begränsningar i funktion och tillgänglighet. Gemensamt för dem alla är dock att de inte håller sig till någon ratificerad webbstandard.
Här nedan är några exempel:
Det finns dock en lösning som är enkel att använda och som stödjs av w3c: CSS3 Web Fonts. Denna s.k. @font-face tekniken fungerar idag i: IE6, IE7, IE8, FireFox 3.5+ (PC & Mac), Safari (PC & Mac) and Opera 10, det ger att ca 95% av besökarna på din webbplats kan se typsnittet korrekt.
Vad är då haken?
Det korta och svaret är: Licenskostnaderna för typsnittet!
Här nedan följer ett litet exempel på hur det ser ut i dagsläget.
Kunden:
Har ett hustypsnitt från en större leverantör som de vill implementera på sin webbplats.
Konsulten (Intellecta):
Köper licenser för fem datorer så att vi kan arbeta med typsnittet i formgivningen av webbplatsen och all annan ev. tryckt material .
Kostnad ca 4.000skr för typsnittet (alla vikter och stilar).
Intellecta undersöker sedan möjligheten att använda typsnittet på webben med hjälp av inbäddade typsnitt (@font-face). Svaret från typsnitsleverantören var något nedslående.
Kostnaden för att köpa hela typsnittsfamiljen för alla varianter av ”gammalmedia” med licenser för 5 datorer är ca 4000kr. Kostnaden för en (1) font på webben som enbart skulle fungera i Explorer är 89.000skr.
Här står vi idag…
En lösning för den som kan tänka sig att vara lite fri i sitt val av typsnitt är att leta efter gratistypsnitt. Tyvärr så är det sällan till någon hjälp då kunden oftast är ganska specifik i sina önskemål om typsnitt.
Förslag på hur vi kommer vidare mottages tacksamt.
/johan liw
Postat i CSS, Design | 1 kommentar