Sådan planlægger du for manglende JavaScript
Selv om de metoder, der bruges til at samle webstedstrafikstatistikker, sætter spørgsmålstegn ved statens gyldighed, er det faktum, at nogle af dine websteds besøgende vil have JavaScript deaktiveret .
Du kan opdele dine trafikkilder i fire brede kategorier:
Søgemaskiner, mobile besøgende, besøgende ved hjælp af skærmlæsere og besøgende, der har slukket for JavaScript .
Når du planlægger din informationsarkitektur og design, skal du finde ud af, hvordan du skal håndtere disse særlige grupper.
Jeg har samlet nogle få nylige virkelige scenarier for at finde klarhed om problemet.
Når du vil skjule langt indhold bag en animeret scroller eller rotere gennem produkter eller udtalelser i rækkefølge eller præsentere kategoriseret indhold på sideniveau rent, kan du bruge accordeoner, karruseller eller andre fantasifulde løsninger.
Hvis du holder op med japanske bedste praksis eller bruger et af de utallige JavaScript-biblioteker, er du sikkert allerede bekendt med diskret JavaScript, hvilket kun er en teknik til kun at præsentere JavaScript-interaktion, når JavaScript er aktiveret.
Dette princip bør også udvides til præsentation: Byg din dynamiske funktion (er) og angiv dine visnings- og synlighedsværdier først, når dokumentet er klar, og kun hvis den besøgende har aktiveret JavaScript, i stedet for at angive egenskaberne i din HTML-kode eller definere dem server-side.
Som mange skærmlæsere har Google's crawler tendens til at ignorere indhold, der er pakket ind i et element, der er sat til display: none , mens det krypterer noget indhold, der er sat til display: visible .
Så din opgave som designer er at planlægge rummet og layoutet omkring dine dynamiske funktioner , og også forberede til tilfælde, hvor "dynamisk" ikke er en mulighed.
Hvis indholdet på et af dine sider altid vil være synligt i browsere af bestemte brugere, hvordan skal det vises? Skulle skjult indhold forblive skjult, selvom JavaScript er deaktiveret? Skal alt indhold være tilgængeligt for skærmlæsere og søgemaskiner? Hvis et indhold bliver synligt først efter et AJAX-opkald, hvordan fylder du tilstrækkeligt det rum, når JavaScript er deaktiveret?
Accordion
En accordeon er en struktur, der normalt består af et mønster af par af overskrift og indhold. Blokke af indhold vil udvide en ad gangen som reaktion på en begivenhed udløst i overskriften.
Hulu's Accordion
Jeg har for nylig hjulpet en klient overvinde problemet med at have meget lange sider. Denne klient havde et online katalog af træningskurser og fastsatte, at alle oplysninger til et bestemt program skal være tilgængelige foran: ingen sideoverskridelse eller popup-vinduer til kernebeskrivelser eller programdefinitioner.
Alle programoplysninger skulle være tilgængelige for den besøgende på samme side uden at skulle navigere frem og tilbage i kursuskataloget.
Den rigtige løsning her var et accordeon , sammenfaldende kursusbeskrivelser under overskrifter for hvert studieområde (f.eks. Matematik eller historie). En dårlig implementering ville have været at indstille synligheden af de sammenfaldne kursusbeskrivelser, før HTML blev gengivet på skærmen.
Hvis indholdet var skjult før gengivelse, ville nogle besøgende og søgemaskiner savne meget af det vigtige indhold.
Ved hjælp af jQuery målrettede jeg indholdet for sammenbrud og satte accordeonet til at udløse, efter at siden var lastet og dokumentet var klar. For denne klient var det meget vigtigt at gøre indholdet tilgængeligt for alle publikum. Nogle af indholdet kunne løbe meget længe, og derfor var et design, der kunne rumme ekstrem vertikal udvidelse, nødvendig.
Karrusellen
Du kan se karruseller temmelig ofte i porteføljer og produkt spotlights.
Typisk i karruseller vil indholdet rulle som svar på et time-outinterval eller nogle brugerinteraktioner (se "Din seneste historie" på Amazon). Jeg kan godt lide karruseller for deres fleksibilitet, og fordi de giver dig mulighed for at fastsætte mindst en dimension af beholderen.
Amazonas karrusel
En anden kunde spurgte for nylig om området "Nyheder og højdepunkter" på deres hjemmeside. Ligesom mange andre indholdsblokke af denne type fremhævede denne de otte seneste tilføjelser til deres nyhedssider (selvom dette tal kunne variere).
Teaserne i denne blok indeholdt et resumé af artiklen og et billede. Billederne kunne være store og indholdet længe, så en karrusel, der roterede mellem teasere, var den rigtige løsning her.
Igen ved hjælp af jQuery målrettede jeg DIV wrapper til karrusellen, og efter at siden var lastet og dokumentet var klar, anbragte karrusellen og satte mine overgange. Med JavaScript aktiveret blev hjemmesiden smukt udført: hvert 15. sekund skubbede karrusellen til næste teaser. Som standard var alle teaserne synlige, men jeg gemte alt sammen, men først da jeg skabte karrusellen.
For denne klient valgte vi igen at vise alt skjult indhold, hvis JavaScript blev deaktiveret . I så fald vil hjemmesiden udvides vertikalt for at imødekomme det ekstra indhold.
Vi havde alternativer. I betragtning af de fire kategorier af brugere, vi identificerede i begyndelsen af denne artikel, var prioriteten for dette indhold tilgængelighed, med placering af søgemaskiner en nær sekund. Vi kunne have opfyldt disse to grupper ved at lade alle teaserne være synlige, men fastsætte dimensioner af beholderen DIV og indstilling overflow til scroll , auto eller hidden .
Enhver af disse muligheder ville have bevaret layoutets dimensioner. Og skærme læserne og søgemaskinerne ville have hentet på indholdet også fordi indholdet ikke ville være gemt med display eller visibility ejendom.
Indholdet Swapper
Denne teknik ligner karrusellen, idet indholdet i en blok roteres ved hjælp af nogle animationer.
Den væsentligste forskel er, at tweening animationen ikke bruges; i stedet fader et stykke indhold ud, mens en anden falder i (eller du kan have en hård overgang uden udseende). Swapper er ens nok til karrusellen, at de ovennævnte alternative no-JavaScript-løsninger er sande.
Endnu en klient kom til mig med opgaven at vise et ubestemt antal vidnesbyrd på deres hjemmeside. Vi valgte i dette tilfælde en indholdswapper, fordi vi ikke havde brug for den pagination, der typisk findes i karruseller (brugeren behøver ikke at rulle tilbage til en testimonial eller springe til slutningen).
For besøgende, der havde JavaScript deaktiveret, respekterede vi designet. Efter omhyggelig overvejelse har klienten med rette fastslået, at vidnesbyrdene ville have en så lille virkning på de besøgende, at de indstillede display til none ville ikke være skadeligt.
Beslutningen gav mig lidt mere frihed til at planlægge højre kolonne på hjemmesiden, hvor vidnesbyrdene skulle vises.
Sorteringen
Enhver, der har justeret deres Hulu kø, har set drag-and-drop sorteringen. Denne bit af JavaScript giver brugerne mulighed for at trække og slippe rækker (tabelrækker, listeposter, uafhængige DIV'er osv.) I en anden rækkefølge.
Netflix sorter
Tag en sidste klient af mig som et eksempel, hvem havde et sæt standardprocedurer, som alle medarbejdere måtte følge.
Hver procedure bestod af et antal opgaver. En administrator kan tilføje eller fjerne opgaver og kunne ændre rækkefølgen af opgaver.
Dette var et lærebog eksempel på sortering , en implementering af træk-og-slip-ordreafgivelse .
Takket være Scriptaculous og Prototype.js var det nemt at oprette sorteringslisten. Når koden blev skrevet og siden var live, havde vi en perfekt funktionsdygtig gengivelse af designcomp. Så indså vi, at uden JavaScript, havde vi kun HTML-ækvivalenten af en papirvægt. Der var ingen træk-og-slip eller on-the-fly omregning.
Nogle hurtig tænkning og lille ændring af designet gav os det samme sæt af rækker, vi havde før, men med tilføjelsen af tekstindtastningsbokse, der kunne rumme indlæsningen af rækkefølge (Bemærk, at uden JavaScript var vi nødt til at tilføje nogle væsentlig server-side validering for disse input bokse). Vi tabte on-the-fly-ordre, men i det mindste genvandt vi sorteringsfunktionaliteten.
Derefter vendte vi tilbage til JavaScript-aktiverede browsere og gemte de ovennævnte tekstbokse; trods alt havde vi træk og slip funktionalitet til denne gruppe. På dette tidspunkt havde vi en perfekt funktionsdygtig gengivelse af designcomp, der også kunne bruges til besøgende, der havde JavaScript deaktiveret. Næste gang vil jeg vide at planlægge denne betingelse.
Konklusion
Webens udvikling fortsætter, og besøgende på vores hjemmesider skal kunne fortsætte med at nyde dynamisk flair.
Fortsæt planlægning for interaktive svar med animerede tweens: fade ind, fade ud, collapse, expand, slide ting rundt. På baggrund af al denne animation, skal du tænke på, hvordan dit website vises til besøgende, der ikke kan se animationen på grund af JavaScript-begrænsninger. Dine kunder vil blive lykkeligere, og du vil være en bedre designer til det.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Jason Corns er en freelance web-udvikler og fuld-time GUI udvikler for Systems Alliance, Inc., der er specialiseret i brugbarhed for alle publikum.
Hvordan planlægger du at mangle JavaScript? Del venligst dine tip med os ...