Miten suunnitella JavaScript puuttuu
Vaikka verkkosivustojen liikennetilastojen keräämiseen käytetyt menetelmät kyseenalaistavat itse tilastojen pätevyyden, tosiasia on, että jotkut sivustosi kävijöistä on poistettu käytöstä .
Voit jakaa liikenteen lähteet neljään laajaan luokkaan:
Hakukoneet, matkaviestimet, vierailijat, jotka käyttävät näyttölukijoita ja vierailijoita, joiden JavaScript on poistettu käytöstä .
Arkkitehtuurin ja suunnittelun suunnittelussa on selvitettävä, miten käsitellä näitä erityisryhmiä.
Olen koonnut muutamia viimeaikaisia reaalimaailman skenaarioita selkeyttämään asiaa.
Kun haluat piilottaa pitkän sisällön animoituun rullanpään taakse, tai kierrä tuotteita tai testimonialeja peräkkäin tai luo luokiteltua sivustason sisältöä puhtaasti, voit käyttää harmonisia, karuselleleitä tai mitä tahansa muuta mielikuvitusta ratkaisua.
Jos noudatat JavaScript-käytäntöjä tai käytät lukemattomia JavaScript-kirjastoja, olet todennäköisesti jo perehtynyt huomaamattomaan JavaScript-tekniikkaan, joka on tekniikka JavaScript-vuorovaikutteisuuden esittämisessä vain silloin, kun JavaScript on käytössä.
Tämä periaate on laajennettava myös esitykseen: rakenna dynaamiset ominaisuudet ja määritä näyttö- ja näkyvyysarvot vasta asiakirjan valmistuttua ja vain, jos vierailijalla on JavaScript käytössä, sen sijaan että määrität HTML-koodin ominaisuudet tai määrität palvelimen puolella.
Kuten monet näytönlukijat, Googlen indeksoija pyrkii sivuuttamaan sisältöä käärittyyn sisältöön display: none , vaikka se indeksoi mitä tahansa sisältöä display: visible .
Suunnittelijasi tehtävänä on siis suunnitella tilaa ja ulkoasua dynaamisten ominaisuuksien ympärille sekä valmistautua tilanteisiin, joissa "dynaaminen" ei ole vaihtoehto.
Jos jonkin sivusi sisältö näkyy aina tiettyjen käyttäjien selaimissa, miten se näkyy? Pitäisikö piilotettu sisältö pysyä piilossa vaikka JavaScript olisi poistettu käytöstä? Pitäisikö kaikkien sisältöjen olla käytettävissä näytön lukijoille ja hakukoneille? Jos sisältö jää näkyviin vasta AJAX-puhelun jälkeen, miten voit riittävästi täyttää kyseisen tilan, kun JavaScript on poistettu käytöstä?
Harmonikka
Harmonikka on rakenne, joka tavallisesti koostuu nimikkeen ja sisällön parista. Sisällön lohkot laajenevat yksi kerrallaan, vastaten otsikossa käynnistettyä tapahtumaa.
Hulu-harmonikka
Olen äskettäin auttanut yhtä asiakasta ratkaisemaan ongelman siitä, että hyvin pitkät sivut. Tällä asiakkaalla oli online-luettelo koulutuskursseista ja siinä määrättiin, että tietyn ohjelman tietyn tiedon on oltava käytettävissä etusivulla: ei sivun ohittamista tai ponnahdusikkunoita peruskurssien kuvauksille tai ohjelmien määritelmille.
Kaikkien ohjelmatietojen on oltava vierailijan käytettävissä samalla sivulla, eikä heidän tarvitse mennä edestakaisin kurssiluettelossa.
Oikea ratkaisu täällä oli harmonikka , joka kaatui kurssikuvaukset kunkin otsikkokohdan alapuolella (esim. Matematiikka tai historia). Heikko toteutus olisi voinut asettaa näille romahtaneille kurssikuvauksille näkyvyyden ennen HTML: n esittämistä näytöllä.
Jos sisältö oli piilotettu esikäsittelyssä, jotkut kävijät ja hakukoneet jättäisivät paljon tärkeästä sisällöstä.
JQueryn avulla kohdistin sisällön kokoonpanoon ja asetettiin harmonikka laukaista sen jälkeen, kun sivu oli ladattu ja asiakirja oli valmis. Tämän asiakkaan tekeminen sisällön saattamiseksi kaikille yleisöille oli äärimmäisen tärkeää. Osa sisällöstä voi toimia hyvin pitkään, joten tarvitaan äärimmäisen vertikaalisen laajennuksen mahdollistavaa muotoilua.
Karuselli
Näet karusellit melko usein salkut ja tuotevalot.
Tyypillisesti karusellissa sisältö rullataan vastauksena aikaviiveeseen tai jonkin käyttäjän vuorovaikutukseen (katso "Viimeisimmät historianne Amazon"). Pidän karusellit joustavuudesta ja koska ne antavat sinun korjata ainakin yhden kontin ulottuvuuden.
Amazonin karuselli
Toinen asiakas äskettäin kysyi kotisivunsa "Uutiset ja kohokohdat" -alueelta. Kuten monet muutkin tämäntyyppiset sisältöblokit, tämä esitteli uutissivujensa kahdeksan viimeisintä lisäystä (vaikka numero saattaa vaihdella).
Tämän lohkon teasereissa oli yhteenveto artikkelista ja kuvasta. Kuvat voivat olla suuria ja sisältöä pitkiä, joten karuselli, joka kiertänyt teaserien välillä, oli oikea ratkaisu täällä.
JQueryä käyttäessäni kohdistin DOP-kääreen karusellille ja kun sivu oli ladattu ja asiakirja oli valmis, käytti karusellia ja asetti siirtymän. Kun JavaScript on otettu käyttöön, kotisivut toimivat hyvin: 15 sekunnin välein karuselli sekoitetaan seuraavaan teaser-tilaan. Oletuksena kaikki teaserit olivat näkyvissä, mutta kätkenyt kaikki, mutta ensimmäinen, kun luotiin karusellin.
Tätä asiakasta varten valitsimme jälleen piilotetun sisällön näyttämisen, jos JavaScript on poistettu käytöstä . Tällöin kotisivu laajenisi pystysuorasti ylimääräisen sisällön sijoittamiseksi.
Meillä oli kuitenkin vaihtoehtoja. Kun tarkastelemme tämän artikkelin alussa tunnistettuja neljää käyttäjäryhmää, tämän sisällön prioriteetti oli saavutettavuus, ja hakukoneiden sijoitukset olivat lähellä toista. Voisimme olla tyytyväisiä näihin kahteen ryhmään jättämällä kaikki teaserit näkyviksi, mutta vahvistamalla säiliön DIV ja asettamisen mitat overflow että scroll , auto tai hidden .
Jokin näistä vaihtoehdoista olisi säilyttänyt asettelun mitat. Ja näytön lukijat ja hakukoneet olisivat nähneet sisällön liian, koska sisältöä ei piilottaisi display tai visibility omaisuutta.
Sisältöpuskuri
Tämä tekniikka on samanlainen kuin karuselli, kun sisältöä lohkossa pyöritetään käyttämällä jotain animaatiota.
Tärkein ero on, että tweening-animaatiota ei käytetä; sen sijaan yksi sisältö hajoaa, kun taas toinen haalistuu (tai sinulla voi olla kova siirtymä ilman haalistumista). Swapper on samanlainen kuin karuselli, jota yllä mainitut vaihtoehtoiset ei-JavaScript-ratkaisut pitävät paikkansa.
Toinen asiakas tuli luokseni osoittamaan määrittelemättömän määrän suosikkeja verkkosivuillaan. Valitsimme sisällönvaihtajat tässä tapauksessa, koska emme tarvitsi kartussuhteissa tavallisesti näkyvää sivunumerointia (käyttäjän ei tarvitsisi selata yhtä suosittelua tai siirtyä loppuun).
Niille vierailijoille, joilla oli JavaScript poistettu käytöstä, kunnioitimme mallia. Huolellisen harkinnan jälkeen asiakas on perustellusti todennut, että suosittelijoilla olisi niin pieni vaikutus vierailijoihin, jotka asettavat display että none ei olisi haitallista.
Päätös antoi minulle hieman vapaamman suunnittelemaan verkkosivuston oikeanpuoleista saraketta, jossa suosittelut näkyisivät.
Sorter
Jokainen, joka on säätänyt Hulu-jonoaan, on nähnyt vedä ja pudota lajittelijan. Tämä JavaScript-paketti antaa käyttäjille mahdollisuuden vetää ja pudottaa rivejä (taulukon rivejä, luetteloita, itsenäisiä DIV: iä jne.) Eri järjestykseen.
Netflixin lajittelija
Ottakaa esimerkkinä yksi viimeinen asiakkaani, jolla oli joukko vakiotoimia, joita kaikkien työntekijöiden oli noudatettava.
Jokainen menettely koostui mistä tahansa tehtävistä. Järjestelmänvalvoja voi lisätä tai poistaa tehtäviä ja muuttaa tehtävien järjestystä.
Tämä oli oppikirjaesimerkki lajittelusta , vedon ja pudotuksen uudelleenjärjestelyn toteuttamisesta .
Scriptaculousin ja Prototype.js: n ansiosta luotettavan luettelon luominen oli helppoa. Kun koodi oli kirjoitettu ja sivu oli elossa, meillä oli täysin toimiva mallinnus. Sitten huomasimme, että ilman JavaScriptia, meillä oli vain HTML-vastine paperipainosta. Ei vedä ja pudota tai lennon uudelleen järjestely.
Jotkut nopeat ajattelut ja pienet muutokset suunnittelusta antoivat meille samanlaisen rivin kuin meillä oli ennen, mutta lisäämällä tekstinsyöttölaatikot, jotka voisivat vastata syöttämällä rivi järjestyksessä (huomaa kuitenkin, että ilman JavaScript, meillä oli pakko lisätä joitakin merkittävä palvelinpuolen validointi näille syöttölaitteille). Menetimme lennossa uudelleenjärjestelyssä, mutta ainakin saimme lajittelutoiminnot.
Sitten palasimme JavaScript-selaimiin ja piilottelimme edellä mainitut tekstilaatikot; loppujen lopuksi meillä oli vetämällä ja pudottamalla toimintoja tälle ryhmälle. Tässä vaiheessa meillä oli täysin toimiva mallinnus, joka oli myös hyödyllinen vierailijoille, joilla oli JavaScript-toiminto. Seuraavan kerran tiedän suunnitella tätä ehtoa.
johtopäätös
Verkon kehitys jatkuu, ja kävijöiden verkkosivustojemme pitäisi pystyä jatkamaan dynaamista tunnelmaa.
Suorita interaktiivisten vastausten suunnittelua animoitujen tweens-keskustelujen avulla: haalistuminen, haalistuminen, romahtaminen, laajentaminen ja asioiden vieminen. Kun otetaan huomioon kaikki tämä animaatio, mieti, miten sivustosi näkyy vierailijoille, jotka eivät näe animaatiota JavaScript-rajoitusten vuoksi. Asiakkaasi ovat onnellisempia, ja sinä suunnittelisit paremmin.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Jason Corns on freelance-web-kehittäjä ja kokoaikainen GUI-kehittäjä Systems Alliance, Inc: lle, joka on erikoistunut käytettävyyteen kaikille yleisöille.
Miten aiot JavaScriptin puuttumisen? Jaa vinkit kanssamme ...