Skær hjørner og skab værdi i browseroptimering Hvordan du opnår fordele med Progressive Enhancement Et whitepaper af Morten Jakab Pedersen
WHITEPAPER Indholdsfortegnelse 1. Intro...3 2. Hvad er Progressive Enhancement?...3 2.1. Eksempler... 3 2.1.1. Tekstkasse... 4 2.1.2. Knap... 4 2.1.3. Avanceret tekstformattering... 4 3. Fordele...6 3.1. Fordel 1: Mere tid til det der er vigtigt... 6 3.2. Fordel 2: Udvikling til browsere der udvikler sig... 6 3.3. Fordel 3: Bedre oplevelse af performance... 6 3.4. Fordel 4: Jo hurtigere site, jo højere ranking på søgemaskiner... 6 3.5. Fordel 5: Få Et fremtidssikret website... 6 3.6. Fordel 6: Større gavn for funktionsnedsatte... 6 3.7. Fordel 7: Plus det løse... 7 4. Den gamle snak om browseroptimering er død... 8 4.1. Sammenlignet med TV-verdenen... 8 5. Men hvad siger brugerne?...9 6. Opsummering...9 7. Referencer og yderligere læsning...10 7.1. Kildereference... 10 7.1.1. Paul Irish... 10 7.1.2. Paul Boag... 10 7.1.3. Nickolas Zakas... 10 7.2. The User and Business Impact of Delays... 10 7.3. Understanding Progressive Enhancement... 10 7.4. Hvad er forretningsværdien af et rundt hjørne... 10 All rights to the present document are reserved Vertica A/S. Any use or distribution of the document or its contents without written consent is strictly prohibited. 2 / 10
WHITEPAPER 1. Intro Vil du optimere, må du prioritere. Overskriften her er pointen, når det gælder succesfuld browseroptimering. Det er nødvendigt at holde fokus, når du skal tage beslutninger om browserkompatibilitet, og især udnyttelse af mediet. Med mobile enheder og stadigt flere browserfunktioner, er emnet mere aktuelt end nogensinde. Vil du have succes, er du nødt til at foretage bevidste valg og de er ikke alle tekniske. Du kan nørde med at skabe runde hjørner i de ældste browsere. Men i mellemtiden risikerer du at blive overhalet ikke bare af udviklingen, men også af brugernes adfærd på tværs af de mange platforme. Du mister forretnings-fordele, tid og penge. 2. Hvad er Progressive Enhancement? Web betragtes ikke længere som en online tryksag, men tager en mere fleksibel tilgang. I stedet for at kæmpe med begrænsningerne, er det en fordel at bruge energien på at udnytte mediets styrker og værdier. Og de findes ikke ved at fokusere på en pixelperfekt gengivelse på tværs af platforme. Brugere besøger websites med et hav af forskellige browsere (fra Internet Explorer til Chrome) og platforme (laptops til smartphones). Hver device og browserversion viser websitet på sin egen måde, med små forskelle og nuanceringer. I stedet for at forsøge at eliminere disse, introduceres en gradbøjning af brugeroplevelsen. 2.1. Eksempler Her følger nogle eksempler på hvilke forskelle, der kan være i visningen, hvis du følger principperne for Progressive Enhancement, og udnytter de features som browseren allerede udstiller. All rights to the present document are reserved Vertica A/S. Any use or distribution of the document or its contents without written consent is strictly prohibited. I dette white paper beskriver jeg værdien i at prioritere og vælge smartere måder at optimere i forhold til browsere. Jeg gennemgår også principperne bag Progressive Enhancement, som kort fortalt bygger på en tilpasning af brugeroplevelsen i browseren, og argumenterer for, hvorfor dette bliver fremtiden inden for webdesign og udvikling. I stedet for at kæmpe med begræns- ningerne, er det en fordel at bruge energien på at udnytte mediets styrker og værdier. 2.1.1. Tekstkasser Tekstkasser kan adskille sig på følgende måder; FireFox og Chrome: En moderne browser viser både ramme, farveovergang (gradient) og runde hjørner. 3 / 10
WHITEPAPER Explorer 9: En næsten-moderne browser viser ramme og runde hjørner - men ikke nogen gradient. I stedet viser den en passende helfarvet baggrund. 2.1.2. Knap FireFox og Chrome: En moderne browser viser både ramme, farveovergang (gradient), runde hjørner og faldskygge på baggrunden. Explorer 9: En næsten-moderne browser viser ramme og runde hjørner - men ingen gradient eller faldskygge. Explorer 7 og 8: En ældre browser viser ramme, men her er ingen runde hjørner, gradient eller faldskygge. All rights to the present document are reserved Vertica A/S. Any use or distribution of the document or its contents without written consent is strictly prohibited. Explorer 7 og 8: En ældre browser kan kun vise ramme og helfarvet baggrund. Her er ingen runde hjørner eller gradient. 2.1.3. Avanceret tekstformatering FireFox og Chrome: En moderne browser viser, ud over ramme og runde hjørner, automatisk en spalteopdelt tekst. Explorer 9: En næsten-moderne browser viser ramme og runde hjørner, men ingen spalteopdelt tekst. I stedet faldes tilbage på almindelig tekstomløb. 4 / 10
WHITEPAPER All rights to the present document are reserved Vertica A/S. Any use or distribution of the document or its contents without written consent is strictly prohibited. Explorer 7 og 8: En ældre browser viser ramme, men ingen runde hjørner eller spalteopdelt tekst. 5 / 10
WHITEPAPER 3. Fordele Accepterer du, at web er anderledes, introducerer det en lang række fordele. De mest åbenlyse er listet nedenfor. Fordel 1: Mere tid til det der er vigtigt Det er tidskrævende fx at gengive runde hjørner i Explorer 7 og 8. I stedet for at kæmpe med små browserforskelle, kan tid og penge bruges på andre vigtige områder som brugertests, forretningsmål og analyse af besøgsstatistik. Fordel 2: Udvikling til dem der bliver flere af At bruge tid på at designe til ældre browsere, er ikke særligt produktivt. De er allerede under udskiftning til nyere browsere med de omtalte forbedringer. Brug i stedet tiden på at sikre sitets fremtid ved at udvikle til den nye generation af browsere. Fordel 3: Bedre oplevelse af performance Performance handler ikke kun om at optimere serverens arbejde. Hvis browseren efterfølgende kæmper med at få siden tegnet for brugeren, så påvirker det den oplevede performance i lige så høj grad. Fordel 4: Højere ranking på søgemaskiner Google ved, at brugere vil have hurtige sites, derfor indgår downloadtider i dag i deres søgealgoritme. Hvis et website performer godt, vil det med tiden give en højere placering hos Google end ellers. At tilføje ekstra kode for gamle browseres skyld er med til at modarbejde dette. Derudover er lavt kodeomfang i forhold til indhold, i sig selv med til at forbedre indeksering, og i sidste ende ranking. Fordel 5: Få et fremtidssikret website Ved ikke hovedsageligt at designe til ældre browsere, men i stedet udvikle op mod moderne browserfeatures vil sitet fremstå tidssvarende og levetiden forlænges. Samtidig lægger man sig op af den standard, som browserproducenterne har udpeget for fremtiden. Fordel 6: Større gavn for funktionsnedsatte Blinde, svagtseende og andre funktionsnedsatte får gavn af semantisk velstrukturerede sider, der ikke er fyldt med unødvendig kode. Det kræver ekstra kode og billedmateriale at forsøge at gengive moderne features i ældre browsere. Det kan påvirke brugerens oplevede performance i negativ retning. Lavt kodeomfang i forhold til indhold gør hjælpeprogrammer som skærmlæsere mere anvendelige. All rights to the present document are reserved Vertica A/S. Any use or distribution of the document or its contents without written consent is strictly prohibited. 6 / 10
WHITEPAPER Fordel 7: Plus det løse Dertil kommer en række sidegevinster, herunder: Sitet bliver mere vedligeholdelsesvenligt. Der bliver flere og mere avancerede designmuligheder. Besøgende åbner ikke sitet i to forskellige browsere. At bruge tid på at designe til ældre browsere, er ikke særligt produktivt. De er allerede under udskiftning til nyere browsere. All rights to the present document are reserved Vertica A/S. Any use or distribution of the document or its contents without written consent is strictly prohibited. 7 / 10
WHITEPAPER 4. Den gamle snak om browseroptimering er død Problemet er, at browseroptimering kommer til at lyde som et tilvalg. Vi vil også gerne lige optimere til Explorer 6 & 7, så vi er på den sikre side. Men det siger sig selv, at optimerer du til det hele, optimerer du ingenting. Oftere kommer man til at begrænse oplevelsen for dem, der faktisk har en opdateret browser. Det skal ikke forstås sådan, at ældre browsere ikke stadigt skal understøttes, men det giver god mening at spørge til på hvilket niveau. Hvor forretningskritisk er det fx med en skygge eller en gradient i Explorer 7? 4.1. Sammenlignet med TV-verdenen er taget fra eks Yahoo!-udpræsentation af Progressive drager han en parallel til udog det er nemt at se pointen. Gamle browsere kan sammenlignes med sort/hvid tv (tv.), hvor nye browsere er HD tv (th.) På det område har tv-verdenen allerede løst problemet - oplevelsen tilpasser sig tv et. All rights to the present document are reserved Vertica A/S. Any use or distribution of the document or its contents without written consent is strictly prohibited. Denne sammenligning vikler Nickolas Zakas Enhancement 2.0. Her viklingen i tv-verdenen, Det skal ikke forstås sådan, at ældre browsere ikke stadigt skal understøttes, men det giver god mening at spørge til på hvilket niveau. Hvor forretningskritisk er det fx med en skygge eller en gradient i Explorer 7?. For det her ville da ha været for åndssvagt. (Alligevel kan det sammenlignes med det man har forsøgt på web) Se linket til den fulde præsentation under referencer, der følger nogle væsentlige pointer. 8 / 10
WHITEPAPER 5. Men hvad siger brugerne? 6. Opsummering De vil elske det! For det første er der en stor del af brugere, der med deres moderne browser vil få glæde af det allerede i dag. Hvis du er heldig får du endda en fornuftig mobilvisning oven i købet. For det andet vil det stadigt se godt ud i ældre browsere som Explorer 7 og 8. De færreste brugere vil opdage, at der mangler små detaljer i designet, for de vil aldrig åbne en anden browser til sammenligning. Det er langt mere sandsynligt at opleve negativ respons på fx hastighed, fordi man forsøge at tilpasse sig ældre browsere. På internet er branding ikke bare en stærk visuel identitet. Den er et produkt af en samlet oplevelse - hvor koncept, teknik og medieudnyttelse går op i en højere enhed. Google er med deres overlegne webapplikationer og minimalistiske look et klassisk eksempel herpå. Derfor er det i bedste fald også spild af penge, at holde fast i de gamle forestillinger. I værste fald risikerer man at blive hægtet af, i kapløbet om morgendagens travle brugere. At optimere til en gammel browser ødelægger oplevelsen på de nye det er tidskrævende og forstyrrende for brugerne af de nyere browsere, da det forringer loadingtiden og i sidste ende brugeroplevelsen. Sats på fremtiden og brug kræfterne på at optimere til de moderne browsere det vil betale sig i sidste ende. All rights to the present document are reserved Vertica A/S. Any use or distribution of the document or its contents without written consent is strictly prohibited. 9 / 10
WHITEPAPER 7. Referencer og yderligere læsning 7.1 Kildereferencer Video med detaljeret præsentation af forsøg med load-tider hos Microsoft og Google. Det er også den undersøgelse, der refereres til i ovenstående Book of Speed. http://velocityconf.com/velocity2009/public/schedule/detail/8523 Der hentet inspiration i et engelsk blog-indlæg af Paul Irish og udvalgt konkrete pointer fra brochuren Factsheet Where are my rounded corners af Paul Boag. 7.1.1. Paul Irish Paul Irish, frontend udvikler hos Google, beskriver disse principper på engelsk: http://paulirish.com/2011/tiered-adaptive-front-end-experiences/ 7.3. Understanding progressive enhancement En artikel på det populærere A List Apart online magasin, der beskriver fænomenet og hvordan det har udviklet sig frem til i dag. http://www.alistapart.com/articles/understandingprogressiveenhancement 7.1.2. Paul Boag Paul Boag fra Boagworld, populær blog og podcast om udvikling: http://boagworld.com/design/where-are-my-rounded-corners/ 7.1.3. Nickolas Zakas Nickolas Zakas præsentation med mange gode slides og hvor han bl.a. sammenligner med den udvikling tv-verdenen har været igennem. http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic 7.4. Hvad er forretningsværdien af et rundt hjørne Et indlæg på Verticas blog, der også sætter fokus på en mere moderne tilgang til web som medie. http://blog.vertica.dk/post/hvad-er-forretningsvc3a6rdien-af-et-rundt-hjc3b8rne. aspx 7.2 The users and business impact of delays En gennemgang af sammenhænge i load-tider, brugeradfærd og i sidste ende forretningen. http://www.bookofspeed.com/chapter1.html All rights to the present document are reserved Vertica A/S. Any use or distribution of the document or its contents without written consent is strictly prohibited. 10 / 10
VERTICA A/S NY BANEGÅRDSGADE 55 8000 AARHUS C FLÆSKETORVET 68 1711 KØBENHAVN V +45 88 88 61 61 INFO@VERTICA.DK WWW.VERTICA.DK