En komplett guide till progressiv förbättring
I åratal har webbdesigners använt graciösa nedbrytningsprinciper för att se till att besökare i äldre webbläsare åtminstone ser innehållet på sina webbplatser, även om de inte ser det exakt hur designern tänkte.
Graciös nedbrytning gör designers design för de nyaste och bästa webbläsarna utan att helt alienera de som använder äldre webbläsarversioner.
Och bara för att de med äldre webbläsare ofta har en mindre än optimal användarupplevelse avskyr inte konstruktörer från att placera fokus på de senaste teknikerna och teknikerna, vilket rationaliserar att de som använder äldre webbläsare antingen var vana vid det eller borde bara uppgradera.
Progressiv förbättring ger oss ett bättre alternativ. I stället för att fokusera på webbläsarteknik och support, fokuserar PE på innehåll.
Som de flesta designers säkert skulle hålla med är innehållet den viktigaste delen av praktiskt taget alla webbsidor. Men många designers förstår inte fullt ut progressiv förbättring, hur det fungerar, och varför det är en bättre modell än graciös nedbrytning.
Läs vidare för svar på dessa frågor och information om hur du använder progressiv förbättring på ditt nästa webbdesignprojekt.
Vem drar nytta av progressiv förbättring?
Många designers tycker att progressiv förbättring endast gynnar de användare som använder föråldrade webbläsare, men andra användare har också nytta av det. Mobila webbläsare är mest sannolikt att dra full nytta av progressiv förbättring. Anledningen till detta är tvåfaldigt. För det första kan mobila webbläsare som inte stöder CSS eller JavaScript fortfarande visa innehållet på din webbplats. Medan de flesta moderna smarta telefonbläsare stöder minst en av dem, gör inte alla webbläsare för grundläggande mobiltelefoner.
Det andra sättet som mobila webbläsare gynnar är att webbplatser som byggts med progressiv förbättring lättare kan innehålla en mobilversion. Trots allt kommer grundlagen HTML att fungera oavsett CSS lagrad ovanpå. Så att skapa ett separat stilark för mobila webbläsare kräver inte mycket extra arbete.
Skärmläsare har också en mycket lättare tid om bashtml är välstrukturerad och semantisk. Detta gör din webbplats mycket mer tillgänglig för dem som använder skärmsläsare. Sökmotorer kan lättare skanna välformaterad HTML än dåligt kodade sidor, vilket kan betyda mycket bättre sökmotorplacering för din webbplats.
Andra fördelar med progressiv förbättring
Utöver de omedelbara fördelarna med en förbättrad användarupplevelse är webbplatser som byggs med progressiv förbättring i allmänhet lättare att underhålla än andra webbplatser.
Eftersom grundinnehållet och funktionaliteten hålls helt skilda från sidans visuella delar, bör ändringar i utseendet på webbplatsen inte ens påverka hur webbplatsen fungerar eller innehållet som ingår. Re-tema på din webbplats är det mycket lättare på grund av detta. Allt du behöver göra är att ändra dina CSS-filer.
Och ärligt talat bör vi inte förbise fördelarna med att en webbplats är synlig i det bredaste antalet webbläsare där ute.
Medan inte alla kommer att få en identisk upplevelse kan det faktum att någon som använder en föråldrad eller föråldrad webbläsare fortfarande ser webbplatsens innehåll kan leda till fler besökare eller kunder. Webbplatser som tar ett tillvägagångssätt som börjar med progressiv förbättring behöver inte göra något extra arbete för att göra det möjligt.
Bygg från insidan ut
Progressiv förbättring fokuserar inte på webbläsarkompatibilitet på samma sätt som graciös nedbrytning gör det. Istället fokuserar den först på innehållet, sedan på presentation av det innehållet och sedan på vilket skript som helst. På så sätt, oberoende av vilken enhet eller webbläsare en besökare använder, kan de se ditt innehåll utan några problem.
Progressiv förbättring kan också ha fördelar för tillgänglighet och till och med sökmotoroptimering. Genom att börja med välstrukturerad semantisk HTML, ger du en bra grund för att bygga upp din webbplats. Och denna grundläggande HTML tolkas enkelt av skärmsläsare och sökrobotar.
Sätt innehåll först
När du startar ett nytt webbplatsprojekt bör du först koncentrera dig på innehållsstrukturen. Genom att skapa välstrukturerad semantisk HTML som bas på din webbplats får du en enklare tid med presentationsnivån på din design.
Väl genomtänkt HTML har fördelen att inte behöva presentationslager vara meningsfullt. Det betyder att skärmsläsare, sökrobotar och de som använder grundläggande mobila webbläsare kommer att kunna se ditt innehåll utan några distraherande formateringsproblem.
Du kan se ovan, hur MSNBC håller hela innehållet i ungefär samma ordning även utan CSS. Webbplatsen är perfekt användbar även utan presentationsskiktet.
Även om strukturen på en webbplats kommer att vara beroende av webbplatsens innehåll, finns det några riktlinjer som du bör använda för grundläggande webbplatser.
Börja med rubriken, sedan huvudnavigering, följt av innehåll. Efter ditt innehåll vill du lägga till ytterligare sidfältinformation eller länkar och sedan din sidfotinformation.
På så sätt visas identifieringsinformationen för din webbplats först, följt av navigering (om någon vill gå direkt till en annan sida, till exempel din kontakt eller en sida), så kommer det direkt till innehållet, vilket är troligt vad de flesta människor är på din webbplats för i första hand. Anpassa den här modellen efter behov för din webbplats, men håll alltid i åtanke exakt vad som kommer att vara av största intresse för dina besökare, och placera det så nära toppen av koden som möjligt.
Se till att alla funktioner på din webbplats är möjliga i det här grundläggande lagret. Det innebär att formulär och appar ska vara användbara med bara HTML- och serverns skript. Medan det är troligt att funktionaliteten inte kommer att presenteras så bra som du vill eller som användarvänlig, bör den vara användbar åtminstone.
Presentationen är Nästa
När din HTML och grundläggande funktionalitet är inställda, vill du vända dig till presentationselement. De allra flesta webbläsare, inklusive många mobila webbläsare, stödjer CSS (men inte alla stödjer alla aspekter av CSS, särskilt CSS3). Presentationsnivån bör förbättra innehållet. Det ska göra det enklare att visa och använda, och förbättra användarupplevelsen.
I viss mån här kan du ha mer än ett lager av CSS-förbättring. Den första ska fokusera på grundläggande stilar som känns igen av nästan alla moderna webbläsare. Din layout, typografi och färgschema bör alla inkluderas i detta lager, tillsammans med andra stilistiska val.
Lägg sedan till ett annat lager utöver det som utnyttjar mer avancerade egenskaper som kanske inte stöds av varje webbläsare där ute men lägger till användarupplevelsen för dem som använder webbläsare som inkluderar support.
JavaScript ska vara sist
Ibland verkar det som att JavaScript används i praktiskt taget varje ny webbplats som skapats. JavaScript kan i hög grad bidra till användbarheten och användarupplevelsen av en webbplats eller webbapp.
Ajax har revolutionerat hur många webbplatser fungerar och har gjort en stor skillnad i vad vi nu gör online. Men din webbplats eller app ska fungera utan JS. Det ska alltid finnas ett HTML-alternativ eller en server-sida-skriptalternativ, speciellt när vi pratar om allmänna webbplatser istället för webapps.
Se till att din webbplats är användbar utan JavaScript. Medan de flesta webbanvändare har JS aktiverat i sin webbläsare nu finns det fortfarande fall där JavaScript är oönskat. Inte alla mobila webbläsare där ute har bra stöd för JavaScript. Det är ofta inte tillgängligt för skärmsläsare. Och det finns vissa människor där ute som fortfarande inte har aktiverat JavaScript i sina webbläsare.
Som du kan se från skärmdumparna nedan saknas ingen funktionalitet mellan den JavaScript-aktiverade versionen av Alfreds appwebbplats och den som har JavaScript avstängd. Den enda verkliga skillnaden är att villkoren är förankrade längst ner på sidan i stället för att öppna i ett modalfönster när länken klickas. Men i båda fallen är de länkade och fullt läsbara.
Här är den fullt funktionella versionen av webbplatsen, med modalfönstret.
Här är versionen med JavaScript inaktiverat, med Villkoren som visas strax ovanför sidfoten. Den är fortfarande länkad från samma plats i innehållet.
Implementera Progressiv Förbättring
Vi har pratat om PE på en teori-nivå ovan. Men låt oss ta reda på de praktiska aspekterna av att implementera det på ett webbprojekt. Det första du behöver göra är att räkna ut informationsarkitekturen för din webbplats.
Titta på innehållet tillgängligt och hur det ska organiseras. Skapa några wireframes för hur du vill visa innehållet, placeringen av olika element etc. Prioritera dem vid den här tiden, med vad som ska visas närmast toppen av koden (de viktigaste elementen) och vad som kan gå neråt.
Detta informationsarkitektursteg är viktigt med progressiv förbättring. När du väl vet vad som behöver gå var kan du börja kodning. Se till att du ställer in din HTML-kod i rätt ordning, enligt vad som är viktigast. Detta kommer inte nödvändigtvis att sammanfalla perfekt med den ordning som saker visas på din färdiga, stilade hemsida, men det kommer nog inte vara för långt borta (rubrik längst upp, innehåll i mitten, sidfot längst ner).
Se till att HTML som du kodar här är semantisk. Använd korrekt , , taggar, etc., såväl som korrekt namngivning av de divs där innehållet visas. Detta gör det inte bara mer tillgängligt, men gör också att du behåller din kod och kodar din CSS mycket lättare.
Du vill också koda i någon funktionalitet vid den här tiden med hjälp av serverns skript. Även om din slutliga webbplats kan använda Ajax för primärfunktionalitet, är det fortfarande viktigt att ha en backup på serversidan, bara om det är fallet.
När din grundläggande HTML är klar ska du gå vidare till presentationsskiktet. Gå till detta i stor utsträckning som du skulle utforma något webbprojekt. Men se till att när du kommer att faktiskt koda CSS att du behåller idén att inte alla CSS-egenskaper kommer att fungera i varje webbläsare. Se till att även om några av dina väljare inte fungerar, kommer din övergripande presentation inte att påverkas.
En liten bit av graciös försämring kan vara lämplig för några av din CSS, för de fallen när du verkligen vill använda en specifik teknik som inte är allmänt stödd. Det är inget fel att använda det selektivt, i speciella fall. Men målet är att förlita sig på god standardbaserad kodning och semantisk markering för att göra graciös nedbrytning onödig.
Det har varit en del debatt om huruvida man använder flera stylesheets för progressiv förbättring är en bra idé. Att skilja ut de olika aspekterna av din presentation (layout, typografi, färg osv. Samt olika stylesheets för saker som utskrifts- eller mobillayouter) kan vara meningsfullt, särskilt om ditt stylesheet är långt eller komplicerat.
Separata stylesheets gör det lättare att hitta ett visst element och kan göra det både enklare och mer komplicerat att behålla webbplatsen. När allt kommer omkring, om du bara vill ändra en färg, är det lättare att öppna ditt färgstilarkiv och hitta alla instanser av den färgen, och vet att du inte har missat något. Men låt oss säga att du vill ändra färg och typografi för en viss typ av element på din sida (som alla dina H1s eller sidorelaterade länkar). Du måste öppna flera stylesheets för att göra ändringarna. Oavsett om du använder flera CSS-filer eller inte, kommer du ner mer till personligt val än vad som helst annat.
När din CSS är kodad och allt är testat, är det dags att lägga till några klientsidor. Vid denna tidpunkt bör din webbplats fungera med eller utan JavaScript. Men att lägga till JS kan förbättra användarupplevelsen och tillfredsställelsen. När du har lagt till alla nödvändiga skript, var noga med att testa webbplatsen igen med det här skriptet avstängt, för att se till att allting fortfarande fungerar acceptabelt.
Övertyga dina kunder
När du arbetar på egen hand, är personliga webbplatsprojekt, progressiv förbättring något du kan implementera utan problem. När det handlar om klienter kan det dock bli lite svårare. Många kunder står fortfarande fast på idén att deras hemsida måste visas exakt samma i varje webbläsare som de någonsin har använt. Någonsin.
Förklara fördelarna med en progressiv förbättring till dina kunder. Berätta för dem att det är snabbare och billigare för dem att få dig att designa webbplatsen med progressiv förbättring i åtanke, och att deras besökare troligtvis inte bryr sig oavsett hur länge innehållet är tillgängligt.
Om de fortfarande står emot, berätta för dem att du måste justera ditt citat i enlighet därmed för att kompensera för den extra kodningstid och -ansträngning som krävs.
I många fall, när en kund ser att en progressiv förbättring sparar pengar utan skadlig effekt för sina besökare, är de mer än glada för att du ska kunna utforma sin webbplats på det sättet.
Oavsiktlig Progressiv Förbättring
Jag är säker på att det finns några bland dig som läser den här artikeln och tänker: "Men det här är hur jag designar webbplatser ändå!" Många designers där ute utformar sina webbplatser runt innehållet och ser till att varje lager är funktionellt innan man lägger till en annan lager.
Deras HTML är välstrukturerad, deras CSS fungerar som en hel enhet men ser fortfarande bra ut, även om ett eller två element inte fungerar ordentligt, och till och med utan script-scripting fungerar allt fortfarande.
Vissa designers har naturligtvis tagit en progressiv förbättrad stilvy av webbdesign. För dessa designers verkar denna artikel som gammal hatt.
Men för de av er där ute som tar det motsatta tillvägagångssättet, antingen med graciös nedbrytning, eller bara att designa för den lägsta gemensamma nämnaren och inte stör med mer avancerade tekniker, överväga progressiv förbättring för ditt nästa projekt.
Skriven uteslutande för WDD av Cameron Chapman .
Planerar du automatiskt webbplatser med progressiv förbättring i åtanke? Eller föredrar du att ta ett graciöst nedbrytningsförfarande? Vänligen dela dina strategier i kommentarerna!