En komplet vejledning til progressiv forbedring
I årevis har webdesignere brugt graceful degradering principper for at sikre, at besøgende i ældre browsere i det mindste kan se indholdet på deres hjemmesider, selvom de ikke ser det præcis, hvordan designeren har til hensigt.
Graceful nedbrydning lader designere designe for de nyeste og bedste browsere uden helt at fremmedgøre dem, der bruger ældre browserversioner.
Og bare fordi de med ældre browsere ofte har en mindre end optimal brugeroplevelse, har ikke afskrækket designere fra at placere deres fokus helt på de nyeste teknologier og teknikker, hvilket rationaliserer, at de, der bruger ældre browsere, enten var vant til det eller burde bare opgradere.
Progressiv forbedring giver os en bedre mulighed. I stedet for at fokusere på browserteknologier og support, fokuserer PE på indhold.
Som de fleste designere helt sikkert ville være enige om, er indhold den vigtigste del af stort set ethvert website-projekt. Men mange designere forstår ikke fuldt ud progressiv forbedring, hvordan det virker, og hvorfor det er en bedre model end yndefulde nedbrydning.
Læs videre for svar på disse spørgsmål og oplysninger om, hvordan du bruger progressiv forbedring på dit næste website design projekt.
Hvem drager fordel af progressiv forbedring?
Mange designere tror, at progressiv forbedring kun gavner brugere, der bruger forældede browsere, men også andre brugere nyder godt af det. Mobilbrowsere har størst sandsynlighed for at drage fuld fordel af progressiv forbedring. Årsagerne til dette er to gange. For det første kan mobile browsere, der ikke understøtter CSS eller JavaScript, stadig vise indholdet på dit websted. Mens de fleste moderne smarte telefonbrowsere understøtter mindst en af dem, gør ikke alle browsere til grundlæggende mobiltelefoner.
Den anden måde, som mobilbrowsere nyder godt af, er, at websteder, der er bygget med progressiv forbedring, lettere kan inkorporere en mobilversion. Grundlaget HTML vil trods alt fungere uanset CSS lagdelt oven på det. Så det kræver ikke en masse ekstra arbejde at oprette et separat stilark til mobile browsere.
Skærmlæsere har også en meget lettere tid, hvis basen HTML er velstruktureret og semantisk. Dette gør dit websted meget mere tilgængeligt for dem, der anvender skærmlæsere. Søgemaskiner kan lettere scanne velformateret HTML end dårligt kodede sider, hvilket kan betyde meget bedre placering af søgemaskiner til dit websted.
Andre fordele ved progressiv forbedring
Ud over de umiddelbare fordele ved en bedre brugeroplevelse er websteder, der er bygget med progressiv forbedring, generelt lettere at opretholde end andre websteder.
Fordi det grundlæggende indhold og funktionaliteten holdes helt adskilt fra de visuelle elementer på siden, bør ændringer i udseendet af webstedet ikke engang påvirke måden websitet fungerer på eller indholdet det indeholder. Re-temaer dit websted er så meget lettere på grund af dette. Alt du skal gøre er at ændre dine CSS-filer.
Og ærligt, vi bør ikke overse fordelene ved et websted, der kan ses i det bredeste antal browsere derude.
Mens ikke alle vil få en identisk oplevelse, kan det faktum, at en person, der bruger en forældet eller forældet browser, stadig kan se dit websites indhold, kan føre til flere besøgende eller kunder. Websteder, der tager en tilgang, der starter med progressiv forbedring, behøver ikke at gøre noget ekstra arbejde for at gøre det muligt.
Byg fra indvendigt ud
Progressiv forbedring fokuserer ikke på browser kompatibilitet på samme måde som yndefulde nedbrydning gør. I stedet fokuserer det først på indholdet, derefter på præsentationen af det indhold, og derefter på enhver scripting. På denne måde, uanset hvilken enhed eller browser en besøgende bruger, vil de kunne se dit indhold uden problemer.
Progressiv forbedring kan også have fordele for tilgængelighed og endda søgemaskineoptimering. Ved at starte med velstruktureret semantisk HTML, vil du være et godt fundament for at opbygge design af dit websted. Og denne grundlæggende HTML er let fortolket af skærmlæsere og søgemaskinespiders.
Indsæt indhold først
Når du starter et nyt webstedsprojekt, skal du først koncentrere dig om indholdsstrukturen. Ved at skabe velstruktureret semantisk HTML som grundlaget for dit websted, har du en nemmere tid med præsentationsniveauet for dit design.
Godt gennemtænkt HTML har den fordel, at du ikke behøver præsentationslag at give mening. Det betyder skærmlæsere, søgemaskinespiders, og de på basale mobilbrowsere vil kunne se dit indhold uden forstyrrende formateringsproblemer.
Du kan se ovenfor, hvordan MSNBC holder hele deres indhold i omtrent samme rækkefølge selv uden CSS. Webstedet er perfekt anvendeligt selv uden præsentationslaget.
Selvom strukturen på et websted afhænger af det pågældende websites indhold, er der nogle retningslinjer, du bør bruge til grundlæggende websteder.
Start med overskriften, så hovednavigationen efterfulgt af indhold. Efter dit indhold vil du gerne lægge yderligere sidebar-oplysninger eller links, og derefter dine footer-oplysninger.
På denne måde vises de identificerende oplysninger for dit websted først efterfulgt af navigation (hvis nogen ønsker at gå direkte til en anden side, som din kontakt eller om side), og så kommer det direkte til indholdet, hvilket er sandsynligt hvad de fleste mennesker er på dit websted for i første omgang. Tilpas denne model efter behov for dit websted, men husk altid, hvad der vil være af største interesse for dine besøgende, og læg det så tæt på toppen af koden som muligt.
Sørg for, at enhver funktionalitet på dit websted er mulig i dette grundlæggende lag. Det betyder, at formularer og apps skal være anvendelige med blot HTML og server-side scripting. Selvom det er sandsynligt, at funktionaliteten ikke vil blive så godt præsenteret som du vil, eller som brugervenlig, bør den være brugbar på et minimum.
Præsentationen er Næste
Når din HTML og grundlæggende funktionalitet er indstillet, vil du gerne henvende dig til præsentationselementer. Langt de fleste browsere, herunder mange mobile browsere, understøtter CSS (men ikke alle understøtter alle aspekter af CSS, især CSS3). Præsentationsniveauet skal forbedre indholdet. Det skal gøre det lettere at se og bruge og forbedre brugeroplevelsen.
I et vist omfang kan du have mere end et lag CSS ekstraudstyr. Den første skal fokusere på grundlæggende stilarter, der anerkendes af stort set enhver moderne browser. Dit layout, typografi og farveskema skal alle inkluderes i dette lag sammen med andre stilistiske valg.
Tilføj derefter et andet lag ud over det, der udnytter mere avancerede egenskaber, som muligvis ikke understøttes af hver browser derude, men vil tilføje til brugeroplevelsen for dem, der bruger browsere, der omfatter support.
JavaScript bør være sidst
Nogle gange virker det som om JavaScript bruges i stort set alle nye oprettede websteder. JavaScript kan i høj grad bidrage til brugbarheden og brugeroplevelsen af et websted eller en webapp.
Ajax har revolutioneret den måde, mange hjemmesider arbejder på, og har gjort en enorm forskel i det, vi nu gør online. Men dit websted eller din app skal fungere uden JS. Der bør altid være et HTML- eller server-side scripting-alternativ, især når vi taler om generelle websteder i stedet for webapps.
Sørg for, at dit websted kan bruges uden JavaScript. Mens de fleste webbrugere har JS aktiveret i deres browser nu, er der stadig tilfælde, hvor JavaScript er uønsket. Ikke alle mobile browsere derude har god støtte til JavaScript. Det er ofte ikke tilgængeligt for skærmlæsere. Og der er nogle mennesker derude, der stadig ikke har aktiveret JavaScript i deres browsere.
Som du kan se fra skærmbillederne nedenfor, er der ingen funktionalitet tabt mellem den JavaScript-aktiverede version af Alfreds appwebsted og den med JavaScript slået fra. Den eneste reelle forskel er, at vilkårene og betingelserne forankres nederst på siden i stedet for at åbne et modalt vindue, når linket klikkes. Men i begge tilfælde er de forbundet og fuldt læsbar.
Her er den fuldt funktionelle version af webstedet med det modale vindue.
Her er versionen med JavaScript deaktiveret, med Vilkårene og Vilkårene vises lige over sidefoden. Den er stadig forbundet fra samme sted i indholdet.
Gennemførelse Progressiv Forbedring
Vi har talt om PE på et teorieniveau ovenfor. Men lad os komme ind i de praktiske aspekter ved at implementere det på et website-projekt. Den første ting at gøre er at finde ud af informationsarkitekturen for dit websted.
Se på det tilgængelige indhold og hvordan det skal organiseres. Opret nogle wireframes for, hvordan du vil vise indholdet, placeringen af forskellige elementer osv. Prioriter dem på dette tidspunkt ved, hvad der skal vises tættest på toppen af koden (de vigtigste elementer) og hvad der kan gå lavere ned.
Dette informationsarkitekturstrin er afgørende for progressiv forbedring. Når du ved hvad der skal gå hvor, kan du starte kodning. Sørg for at oprette din HTML-kode i den rigtige rækkefølge, alt efter hvad der er vigtigst. Dette skal ikke nødvendigvis falde perfekt sammen med den rækkefølge, hvor ting vises på dit færdige, stilede websted, men det er sandsynligvis ikke for langt væk (hoved øverst, indhold i midten, fodfod nederst).
Sørg for, at HTML'en du kodes her er semantisk. Brug korrekt , , tags osv. samt korrekt navngivning af de divs, hvor dit indhold vises. Dette gør det ikke kun tilgængeligt, men gør også vedligeholdelse af din kode og kodning af din CSS meget lettere.
Du vil også gerne kode i en hvilken som helst funktionalitet på dette tidspunkt ved hjælp af server-side scripts. Mens dit endelige websted kan bruge Ajax til primær funktionalitet, er det stadig vigtigt at have en backup på server-side, bare i tilfælde.
Når din grundlæggende HTML er færdig, vil du gerne gå videre til præsentationslaget. Gør dette i vid udstrækning som du ville udforme et website projekt. Men sørg for, at når du kommer til at faktisk kode CSS, at du vedligeholder ideen om, at ikke alle CSS-ejendomme vil fungere i hver browser. Sørg for, at selvom nogle af dine vælgere ikke virker, vil din overordnede præsentation blive upåvirket.
En lille smule yndefulde nedbrydning kan være passende for nogle af dine CSS, for de tilfælde, hvor du virkelig vil bruge en bestemt teknik, der ikke er bredt understøttet. Der er ikke noget galt med at bruge det selektivt, i særlige tilfælde. Men målet her er at stole på god standardbaseret kodning og semantisk markering for at gøre yndefulde nedbrydning unødvendig.
Der har været en debat om, hvorvidt at bruge flere stylesheets til progressiv forbedring er en god ide. At adskille de forskellige aspekter af din præsentation (layout, typografi, farve osv. Samt forskellige stilark til ting som udskrifts- eller mobillayouter) kan give mening, især hvis dit stylesheet er langt eller kompliceret.
Separate stylesheets gør det lettere at finde et bestemt element, og det kan gøre det både nemmere og mere kompliceret at opretholde webstedet. Hvis du bare vil ændre en farve, er det jo lettere at åbne dit farveformatark og finde alle forekomster af den farve, og du ved, at du ikke har gået glip af noget. Men lad os sige, at du vil ændre farve og typografi for en bestemt type element på din side (som alle dine H1'er eller dine sidebar-links). Du skal åbne flere stylesheets for at foretage ændringerne. Uanset om du bruger flere CSS-filer eller ej, kommer du ned mere til eget valg end noget andet.
Når din CSS er alle kodet, og alt er blevet testet, er det tid til at tilføje nogen script-side scripting. På dette tidspunkt skal dit websted arbejde med eller uden JavaScript. Men at tilføje JS kan i høj grad forbedre brugeroplevelsen og tilfredsheden. Når du har tilføjet alle de nødvendige scripts, skal du sørge for at teste webstedet igen med det pågældende scripting slukket, for at sikre, at alt stadig fungerer acceptabelt.
Overbevise dine kunder
Når du arbejder på egen hånd, er personlige hjemmesideprojekter, progressiv forbedring noget, du kan implementere uden problemer. Når man beskæftiger sig med klienter, kan det dog blive lidt vanskeligere. Mange kunder er stadig fast på ideen om, at deres hjemmeside skal vises præcis det samme i hver browser, de nogensinde har brugt. Nogensinde.
Forklar fordelene ved en progressiv forbedring til dine kunder. Fortæl dem, at det er hurtigere og billigere for dem at få dig til at designe webstedet med progressiv forbedring i tankerne, og at deres besøgende sandsynligvis ikke vil passe på nogen måde, så længe indholdet er tilgængeligt.
Hvis de stadig modstår, fortæl dem, at du bliver nødt til at justere dit citat i overensstemmelse hermed for at kompensere for den ekstra kodningstid og -indsats, der kræves.
I mange tilfælde, når en kunde ser, at progressiv forbedring vil spare dem penge uden nogen skadelig virkning for deres besøgende, er de mere end glade for at designe deres websted på den måde.
Tilfældig Progressiv Forbedring
Jeg er sikker på, at der er nogle blandt jer, der læser denne artikel og tænker: "Men det er sådan, jeg designer websites alligevel!" Mange designere derude designer deres hjemmesider omkring indholdet og sørger for at hvert lag er funktionelt, før man tilføjer en anden lag.
Deres HTML er velstruktureret, deres CSS fungerer som en hel enhed, men ser stadig fint ud, selvom et eller to elementer ikke fungerer korrekt, og selv uden script-scripting virker alt stadig.
Nogle designere har naturligvis taget en progressiv forbedrings-stil på webdesign. For disse designere synes denne artikel som gammel hat.
Men for de af jer derude, der tager den modsatte tilgang, enten med yndefulde nedbrydning eller bare at designe for den laveste fællesnævner og ikke genere med mere avancerede teknikker, overveje progressiv forbedring til dit næste projekt.
Skrevet udelukkende til WDD af Cameron Chapman .
Designer du automatisk websteder med progressiv forbedring i tankerne? Eller foretrækker du at tage en graceful nedbrydning tilgang? Venligst del dine strategier i kommentarerne!