Slik planlegger du for fravær av JavaScript
Selv om metodene som brukes til å samle nettstedstrafistatistikk, stiller spørsmålstegn ved statistikkens gyldighet, er det faktum at noen av nettstedets besøkende vil ha JavaScript deaktivert .
Du kan dele trafikkildene dine i fire brede kategorier:
Søkemotorer, mobile besøkende, besøkende som bruker skjermlesere og besøkende som har JavaScript slått av .
Når du planlegger informasjonsarkitektur og design, må du finne ut hvordan du skal håndtere disse spesielle gruppene.
Jeg har samlet noen siste virkelige scenarier for å finne klarhet om problemet.
Når du vil gjemme lengre innhold bak en animert scroller, eller rotere gjennom produkter eller testimonialer i rekkefølge, eller presentere kategorisert innhold på sidenivå, kan du bruke trekkspill, karuseller eller annen fantasifull løsning.
Hvis du følger med japansk beste praksis eller bruker et av de myriade av JavaScript-bibliotek, er du sannsynligvis allerede kjent med diskret JavaScript, som er teknikken for å presentere JavaScript-interaktivitet bare når JavaScript er aktivert.
Dette prinsippet bør også utvides til presentasjon: Bygg din dynamiske funksjon (er) og sett visnings- og synlighetsverdiene først etter at dokumentet er klart og bare hvis den besøkende har aktivert JavaScript, i stedet for å angi egenskapene i HTML-koden eller definere dem server-side.
I likhet med mange skjermlesere har Googles crawler en tendens til å ignorere innhold som er pakket inn i et element satt til display: none , mens det gjennomsøker innhold som er satt til display: visible .
Så din oppgave som designer er å planlegge plass og layout rundt dine dynamiske funksjoner , og også forberede seg til tilfeller når "dynamisk" ikke er et alternativ.
Hvis innholdet på en av sidene dine alltid vil være synlig i nettleserne til bestemte brukere, hvordan skal den vises? Skulle skjult innhold forbli skjult selv om JavaScript er deaktivert? Bør alt innhold være tilgjengelig for skjermlesere og søkemotorer? Hvis en del innhold blir synlig bare etter et AJAX-anrop, hvordan fyller du tilstrekkelig på plass når JavaScript er deaktivert?
The Accordion
En trekkspill er en struktur som vanligvis består av et mønster av par av overskrift og innhold. Blokker av innhold vil utvide en om gangen som svar på en begivenhet utløst i overskriften.
Hulu's Accordion
Jeg har nylig hjulpet en klient overvinne problemet med å ha svært lange sider. Denne klienten hadde en online katalog av kurs og fastsatte at all informasjon for et bestemt program må være tilgjengelig foran: ingen sideskip eller popup-vinduer for kjerneboksbeskrivelser eller programdefinisjoner.
All programinformasjon måtte være tilgjengelig for den besøkende på samme side uten å måtte navigere frem og tilbake i kurskatalogen.
Den rette løsningen her var et trekkspill , sammenfaller kursbeskrivelser under overskrifter for hvert studieområde (matte eller historie, for eksempel). En dårlig implementering ville ha vært å sette synligheten til de sammenfallte kursbeskrivelsene før HTML ble gjengitt på skjermen.
Hvis innholdet var skjult pre-rendering, ville noen besøkende og søkemotorer savne mye av det viktige innholdet.
Ved hjelp av jQuery, målrettet jeg innholdet for å kollapse og satte trekkspillet til å utløse etter at siden hadde lastet inn og dokumentet var klart. For denne klienten var det svært viktig å gjøre innholdet tilgjengelig for alle publikum. Noen av innholdet kan løpe veldig lenge, og det var derfor nødvendig med et design som kunne imøtekomme ekstrem vertikal ekspansjon.
Karusellen
Du vil se karuseller ganske ofte i porteføljer og produkt spotlights.
Vanligvis i karuseller vil innholdet rulle som svar på et tidsintervall eller noen brukerinteraksjon (se "Din siste historie" på Amazon). Jeg liker karuseller for deres fleksibilitet og fordi de tillater deg å fikse minst en dimensjon av beholderen.
Amazonas karusell
En annen klient spurte nylig om området "Nyheter og høydepunkter" på hjemmesiden deres. Som mange andre innholdsblokker av denne typen, presenterte denne de åtte siste tilskuddene til deres nyhetssider (selv om tallet kunne variere).
Teaserne i denne blokken inneholdt et sammendrag av artikkelen og et bilde. Bildene kunne være store og innholdet lenge, så en karusell som roterte mellom teasers var den riktige løsningen her.
Igjen, ved hjelp av jQuery, målrettet jeg DIV-wrappen for karusellen, og etter at siden hadde lastet inn og dokumentet var klart, ble karusellen påført og satt overgangene mine. Med JavaScript aktivert, hjalp hjemmesiden pent ut: hvert 15. sekund ble karusellen blandet til neste teaser. Som standard var alle teasers synlige, men jeg gjemte alt, men først da jeg opprettet karusellen.
For denne klienten valgte vi igjen å vise alt skjult innhold hvis JavaScript var deaktivert . I så fall vil hjemmesiden utvides vertikalt for å imøtekomme det ekstra innholdet.
Vi hadde alternativer, skjønt. Med tanke på de fire kategoriene av brukere vi identifiserte i begynnelsen av denne artikkelen, var prioriteten for dette innholdet tilgjengeligheten, med søkemotor rangering en nær sekund. Vi kunne ha fornøyd disse to gruppene ved å forlate alle teasere synlige, men fikser dimensjonene til beholderen DIV og innstillingen overflow til scroll , auto eller hidden .
Noen av disse alternativene ville ha bevart layoutets dimensjoner. Og skjermlesere og søkemotorer ville ha hentet innholdet også fordi innholdet ikke ville bli skjult med display eller visibility eiendom.
Innholdet Swapper
Denne teknikken ligner karusellen ved at innholdet i en blokk roteres ved hjelp av noen animasjoner.
Hovedforskjellen er at tweening-animasjonen ikke brukes; i stedet, et stykke innhold fades ut mens en annen falmer i (eller du kan ha en hard overgang uten fading). Swapper er lik nok til karusellen at alternativene ovenfor nevnte ikke-JavaScript-løsninger er oppfylt.
Enda en annen klient kom til meg med oppgaven å vise et ubestemt antall vitnemål på deres hjemmeside. Vi valgte et innholdsveiviser i dette tilfellet fordi vi ikke hadde behov for paginering som vanligvis finnes i karuseller (brukeren trenger ikke å bla tilbake en testamente eller hoppe over til slutten).
For besøkende som hadde JavaScript deaktivert, respekterte vi designen. Etter omhyggelig overveielse har klienten med rette avgjort at vitnemålene ville ha så liten effekt på besøkende som setter inn display til none ville ikke være skadelig.
Beslutningen ga meg litt mer frihet til å planlegge høyre kolonne på nettsiden, hvor vitnemålene skulle vises.
Sorteringen
Alle som har justert sin Hulu-kø, har sett drag-and-drop sorteringen. Denne biten av JavaScript tillater brukere å dra og slippe rader (tabellrader, listeposter, uavhengige DIVs, etc.) i en annen rekkefølge.
Netflix sorterer
Ta en siste klient av meg som et eksempel, som hadde et sett med standard prosedyrer som alle ansatte måtte følge.
Hver prosedyre besto av et antall oppgaver. En administrator kan legge til eller fjerne oppgaver og kunne endre rekkefølgen på oppgavene.
Dette var et lærebok eksempel på sortering , en implementering av dra-og-slipp-omordning .
Takket være Scriptaculous og Prototype.js var det enkelt å lage sorteringslisten. Når koden ble skrevet og siden var live, hadde vi en perfekt operativ gjengivelse av designcomp. Da innså vi at uten JavaScript, hadde vi bare HTML-ekvivalenten av en papirvekt. Det var ingen dra-og-slipp-eller-fly-omordning.
Noen raske tanker og små endringer i designet ga oss det samme settet av rader vi hadde før, men med tillegg av tekstinnmatingsbokser som kunne imøtekomme innmatingen av rekkefølge (merk at, uten JavaScript, måtte vi legge til noen vesentlig server-side validering for disse innboksene). Vi mistet on-the-fly reordering, men i hvert fall gjenvunnet vi sorteringsfunksjonaliteten.
Deretter vendte vi tilbake til JavaScript-aktiverte nettlesere og gjemte tekstboksene som er nevnt ovenfor; Tross alt hadde vi dra-og-slipp-funksjonalitet for denne gruppen. På dette tidspunktet hadde vi en perfekt operativ gjengivelse av designcomp som også var brukbar for besøkende som hadde JavaScript deaktivert. Neste gang vil jeg vite å planlegge for denne tilstanden.
Konklusjon
Utviklingen på nettet vil fortsette, og besøkende på våre nettsider skal kunne fortsette å nyte dynamisk stil.
Fortsett med planlegging for interaktive svar med animerte tweens: fade in, fade out, collapse, expand, slide ting rundt. Gitt all denne animasjonen, tenk på hvordan nettstedet ditt vil vises til besøkende som ikke kan se animasjonen på grunn av JavaScript-begrensninger. Dine kunder vil bli lykkeligere, og du vil bli en bedre designer for det.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Jason Corns er en freelance webutvikler og full-time GUI utvikler for Systems Alliance, Inc., som spesialiserer seg på brukervennlighet for alle publikum.
Hvordan planlegger du for fravær av JavaScript? Vennligst del dine tips med oss ...