Hur man planerar för frånvaro av JavaScript
Även om metoderna för att samla webbplatsens trafikstatistik ställer in fråga om statistikens giltighet, är det faktum att vissa av din webbplats besökare kommer att ha JavaScript inaktiverat .
Du kan dela dina trafikkällor i fyra stora kategorier:
Sökmotorer, mobila besökare, besökare som använder skärmsläsare och besökare som har JavaScript avstängt .
När du planerar din informationsarkitektur och design måste du räkna ut hur du hanterar dessa speciella grupper.
Jag har samlat några senaste verkliga scenarier för att hitta klarhet i frågan.
När du vill dölja långt innehåll bakom en animerad scroller, eller rotera genom produkter eller testresultat i följd, eller presentera kategoriserat innehåll på sidnivå, kan du använda dragspel, karuseller eller någon annan fantasivösning.
Om du följer japansk bästa metoder eller använder någon av de många JavaScript-biblioteken, är du förmodligen redan bekant med diskret JavaScript, vilket är tekniken att presentera JavaScript-interaktivitet endast när JavaScript är aktiverat.
Denna princip bör även utvidgas till presentation: bygga din dynamiska funktion (er) och ställ in dina visnings- och synlighetsvärden först efter att dokumentet är klart och endast om besökaren har aktiverat JavaScript, istället för att ange egenskaperna i HTML-koden eller definiera dem server-sida.
Som många skärmsläsare tenderar Googles sökrobot att ignorera innehåll som är inslaget i ett element som är inställt på display: none , medan det krypterar något innehåll som är inställt på display: visible .
Så din uppgift som designer är att planera utrymmet och layouten kring dina dynamiska funktioner , och också förbereda för instanser när "dynamisk" inte är ett alternativ.
Om innehållet på en av dina sidor alltid kommer att vara synligt i vissa användares webbläsare, hur ska det visas? Skulle det dolda innehållet förbli dolt även om JavaScript är inaktiverat? Ska all innehåll vara tillgänglig för skärmsläsare och sökmotorer? Om en del innehåll blir synlig först efter ett AJAX-samtal, hur fyller du tillräckligt med det ifrån sig när JavaScript är avaktiverat?
Accordionen
Ett dragspel är en struktur som vanligtvis består av ett mönster av par av rubrik och innehåll. Block av innehåll skulle expandera en i taget, som svar på en händelse som utlöstes i rubriken.
Hulu's Accordion
Jag har nyligen hjälpt en klient övervinna problemet med att ha mycket långa sidor. Den här klienten hade en online katalog över kurser och fastställde att all information för ett visst program måste vara tillgängligt framför: ingen sidhoppning eller popup-fönster för kärnkursbeskrivningar eller programdefinitioner.
All programinformation måste vara tillgänglig för besökaren på samma sida, utan att behöva navigera fram och tillbaka i kurskatalogen.
Den rätta lösningen här var ett dragspel , kollapsande kursbeskrivningar under rubrikerna för varje studieområde (matematik eller historia, till exempel). Ett dåligt genomförande skulle ha varit att ställa in synligheten för de kollapsade kursbeskrivningarna innan HTML-filen gjordes på skärmen.
Om innehållet var dolt före återgivning, skulle vissa besökare och sökmotorer sakna mycket av det viktiga innehållet.
Med jQuery riktade jag in innehållet för att kollapsa och sätta dragspelet att trigga efter att sidan hade laddats och dokumentet var klart. För den här klienten var det mycket viktigt att göra innehållet tillgängligt för alla publikgrupper. En del av innehållet kan gå mycket länge, och därför var det nödvändigt med en design som kunde rymma extrem vertikal expansion.
Karusellen
Du kommer att se karuseller ganska ofta i portföljer och produktljus.
Vanligtvis rullar innehållet i karuseller som svar på ett time-out-intervall eller någon användarinteraktion (se "Din senaste historia" på Amazon). Jag gillar karuseller för deras flexibilitet och eftersom de tillåter dig att fixa minst en dimension av behållaren.
Amazons karusell
En annan kund frågade nyligen om "Nyheter och höjdpunkter" på deras hemsida. Liksom många andra innehållsblåsar av den här typen presenterade den de åtta senaste tilläggen till deras nyhetssidor (även om antalet kunde variera).
Teasarna i det här blocket innehöll en sammanfattning av artikeln och en bild. Bilderna kan vara stora och innehållet länge, så en karusell som roterade mellan teasers var den rätta lösningen här.
Återigen med jQuery, riktade jag på DIV-omslaget för karusellen och efter att sidan hade laddats och dokumentet var klart, applicerade karusellen och satte mina övergångar. Med JavaScript aktiverat gjorde hemsidan snyggt: var 15: e minut skakade karusellen till nästa teaser. Som standard var alla teasers synliga, men jag gömde alla utom den första när jag skapade karusellen.
För den här klienten valde vi återigen att visa allt dolt innehåll om JavaScript var avaktiverat . I så fall skulle hemsidan expandera vertikalt för att rymma extra innehåll.
Vi hade alternativ, men. Med tanke på de fyra kategorierna av användare som vi identifierade i början av den här artikeln var prioriteringen för innehållet tillgänglighet, med rankning av sökmotorer en nära sekund. Vi kunde ha nöjt dessa två grupper genom att lämna alla teasrarna synliga men fastställa behållarens dimensioner DIV och inställning overflow till scroll , auto eller hidden .
Några av dessa alternativ skulle ha bevarat layoutens dimensioner. Och skärmsläsare och sökmotorer skulle ha hämtat på innehållet, för innehållet skulle inte döljas med display eller visibility fast egendom.
Content Swapper
Denna teknik liknar karusellen då innehållet i ett block roteras med viss animering.
Huvudskillnaden är att tweening-animationen inte används. i stället försvinner en del innehåll medan en annan svinner in (eller du kan ha en hård övergång utan blek). Swapparen är lika stor som karusellen, att de ovannämnda alternativa icke-JavaScript-lösningarna är sanna.
En annan klient kom till mig med uppgiften att visa ett obestämt antal vittnesmål på deras hemsida. Vi valde en content swapper i det här fallet eftersom vi inte behövde paginering som vanligtvis finns i karuseller (användaren skulle inte behöva rulla tillbaka ett testamente eller hoppa till slutet).
För besökare som hade JavaScript inaktiverat respekterade vi designen. Efter noggrann övervägning bestämde klienten med rätta att testresultaten skulle ha en så liten inverkan på besökare som ställer in display till none skulle inte vara skadligt.
Beslutet gav mig lite mer frihet i planeringen av högra kolumnen på webbplatsen, där vittnesmålen skulle visas.
Sorteringen
Den som har justerat sin Hulu-kö har sett drag-and-drop sorteraren. Denna bit av JavaScript tillåter användare att dra och släppa rader (tabellrader, listobjekt, oberoende DIV, etc.) i en annan ordning.
Netflix sorterare
Ta en sista klient av mig som ett exempel, som hade en uppsättning standardprocedurer som alla anställda måste följa.
Varje procedur bestod av ett antal uppgifter. En administratör kan lägga till eller ta bort uppgifter och kan ändra orderuppgiften.
Detta var ett läroboksexempel på sortering , en implementering av dra-och-släpp-omarrangering .
Tack vare Scriptaculous och Prototype.js var det lätt att skapa sorteringslistan. När koden skrevs och sidan var live hade vi en perfekt fungerande återgivning av designkompatibiliteten. Då insåg vi att utan JavaScript, hade vi bara HTML-ekvivalenten av en pappersvikt. Det fanns ingen dra-och-släpp eller på-fly-omregistrering.
Något snabbtänkande och liten modifiering av designen gav oss samma uppsättning rader som vi hade tidigare men med tillägg av textinmatningsrutor som kunde rymma inmatning av radorder (observera dock att utan JavaScript var vi tvungna att lägga till några betydande server-sida validering för dessa ingångslådor). Vi förlorade på-fly-omregistrering, men åtminstone återfick vi sorteringsfunktionaliteten.
Därefter vände vi tillbaka till JavaScript-aktiverade webbläsare och gömde de ovan angivna textrutorna. trots allt hade vi drag-och-släpp-funktionalitet för den här gruppen. Vid denna tidpunkt hade vi en perfekt fungerande återgivning av design comp som också kunde användas för besökare som hade JavaScript inaktiverat. Nästa gång kommer jag att veta att planera för detta tillstånd.
Slutsats
Utvecklingen av webben kommer att fortsätta, och besökare på våra webbplatser ska kunna fortsätta njuta av dynamisk känsla.
Fortsätt planera interaktiva svar med animerade tweens: blekna in, blekna ut, kollapsera, expandera, glida saker runt. Med tanke på all denna animering, tänk på hur din webbplats kommer att visas för besökare som inte kan se animeringen på grund av JavaScript-begränsningar. Dina kunder kommer bli lyckligare, och du kommer att bli en bättre designer för det.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Jason Corns är en frilans webbutvecklare och full-time GUI-utvecklare för Systems Alliance, Inc., specialiserat på användbarhet för alla publikgrupper.
Hur planerar du för frånvaro av JavaScript? Vänligen dela dina tips med oss ...