Hvernig á að skipuleggja fyrir utan JavaScript
Þó að þær aðferðir sem notaðar eru til að safna umferðarniðurstöðum í vefsvæðinu snúi í efa gildi gagna sjálfsins, þá er staðreyndin sú að gestirnir þínar á vefsvæðinu munu hafa slökkt á JavaScript .
Þú gætir deilt umferðarupplýsingum þínum í fjóra víðtæka flokka:
Leitarvélar, farsíma gestir, gestir sem nota skjálesendur og gesti sem hafa JavaScript slökkt .
Þegar þú skipuleggur upplýsingararkitektúr og hönnun þarftu að reikna út hvernig á að takast á við þessa sérstöku hópa.
Ég hef sett saman nokkrar nýlegar raunverulegar aðstæður til að finna skýrleika um málið.
Þegar þú vilt fela langt efni á bak við hreyfimyndir, eða snúa í gegnum vörur eða sögur í röð, eða kynna innihald síðunnar á hreinu hátt, þá getur þú notað samdrætti, karusell eða önnur hugmyndarík lausn.
Ef þú fylgist með bestu bestu JavaScript eða notar eitthvað af mýgrúturnum á JavaScript bókasöfnum, þá hefur þú líklega nú þegar þekki áberandi JavaScript, sem er aðferðin við að kynna JavaScript gagnvirkni aðeins þegar JavaScript er virkt.
Þessu meginreglu ætti einnig að framlengja til kynningar: Búðu til virkan eiginleikann (s) og stilltu birtingar og sýnileika aðeins eftir að skjalið er tilbúið og aðeins ef gesturinn hefur JavaScript virkt, frekar en að setja eiginleika í HTML kóða eða skilgreina þeim miðlara-hlið.
Eins og margir skjálesendur, hefur vefskoðarinn Google tilhneigingu til að hunsa efni sem er vafið í þáttum sem er sett á display: none , meðan það krefst þess að innihald sé sett á display: visible .
Þannig er verkefni þitt sem hönnuður að skipuleggja plássið og útlitið um dynamic eiginleika þína og einnig að undirbúa fyrir dæmi þegar "dynamic" er ekki valkostur.
Ef efni á einni af síðum þínum verður alltaf sýnilegt í vafra tiltekinna notenda, hvernig ætti það að birtast? Ætti falið efni áfram að vera falið, jafnvel þótt JavaScript sé óvirk? Ætti allt efni aðgengilegt fyrir lesendur og leitarvélar? Ef innihaldsefni verður aðeins sýnilegt eftir AJAX-símtali, hvernig fyllir þú nægilega vel þessi bil þegar JavaScript er óvirkt?
The Accordion
Harmónía er uppbygging sem venjulega samanstendur af mynstri pörum á stefnu og efni. Blokkir innihaldsins myndu stækka eitt í einu, sem svar við viðburði sem hófst í fyrirsögninni.
Hulu's Accordion
Ég hjálpaði nýlega einum viðskiptavini að sigrast á því að hafa mjög langar síður. Þessi viðskiptavinur hafði á netinu verslun á námskeiðum og kveðið á um að allar upplýsingar fyrir tiltekið forrit verða að vera tiltækir að framan: engin blaðsíðu eða sprettiglugga fyrir kjarni námskeiðs lýsingar eða hugmyndafræðingar.
Allar áætlunarupplýsingar þurftu að vera til staðar fyrir gesti á sömu síðu, án þess að þurfa að sigla fram og til í námskeiðaskránni.
Rétta lausnin hérna var harmónikur , samanburðarrannsóknir undir heitum fyrir hvert námsbraut (stærðfræði eða saga, til dæmis). Slæmur framkvæmd hefði verið að stilla sýnileika þessara fallinna námskeiða áður en HTML var birt á skjánum.
Ef efnið var falið fyrirfram flutningur, þá myndu sumir gestir og leitarvélar missa af mikilvægu efni.
Með því að nota jQuery, miðaði ég efnið fyrir að hrynja og setti harmónikann til að kveikja eftir að blaðsíða hafði hlaðið og skjalið var tilbúið. Fyrir þennan viðskiptavin var gerð aðgengileg fyrir alla áhorfendur afar mikilvægt. Sumt af innihaldi gæti keyrt mjög lengi, og þannig þurfti hönnun sem gæti móts við mikla lóðréttu stækkun.
The Carousel
Þú sérð karrusel nokkuð oft í söfnum og vöruljósum.
Venjulega í hjólhýsum mun efni fletta til að bregðast við tímamörk eða einhverri gagnvirkni notenda (sjá "Nýleg saga" á Amazon). Mér líkar karóleur vegna sveigjanleika þeirra og vegna þess að þeir leyfa þér að festa að minnsta kosti eina vídd ílátarinnar.
Carousel Amazon
Annar viðskiptavinur spurði nýlega um "News and Highlights" svæði heimasíða þeirra. Eins og margir aðrir efni blokkir af þessari tegund, þetta lögun lögun átta nýjustu viðbætur við frétt síður þeirra (þó að tala gæti verið mismunandi).
Teasers í þessum blokk innihéldu samantekt á greininni og myndinni. Myndirnar gætu verið stórir og innihaldin lengi, þannig að karrusel sem sneri á milli teasers var rétt lausnin hér.
Aftur með því að nota jQuery, miðaði ég DIV umbúðirnar fyrir hringinn og eftir að blaðsíðan var hlaðið og skjalið var tilbúið setti ég á hringinn og setti skipanirnar mínar. Með því að kveikja á JavaScript virkaði heimasíðan fallega: á 15 sekúndum stóð karruselinn í næsta teaser. Sjálfgefin voru öll teasers sýnileg, en ég faldi allt en fyrst þegar ég bjó til karruselinn.
Fyrir þennan viðskiptavin völum við aftur að birta allt falið efni ef JavaScript var óvirk . Í slíkum tilfellum myndi heimasíðan stækka lóðrétt til að mæta aukinni efninu.
Við höfðum val, þó. Miðað við fjóra flokka notenda sem við auðkenndum í upphafi þessarar greinar var forgangurinn fyrir þetta efni aðgengilegt, með leitarvél fremstur náinni sekúndu. Við gætum hafa uppfyllt þessar tvær hópar með því að fara öll teasers sýnileg en ákveða mál ílátsins DIV og stillingu overflow til scroll , auto eða hidden .
Allir þessir valkostir myndu hafa varðveitt stærð málningarins. Og skjárlesarar og leitarvélar myndu hafa valið á efnið líka vegna þess að efnið væri ekki falið með display eða visibility eign.
The Content Swapper
Þessi tækni er svipuð karruselnum því að efni í blokk er snúið með einhverjum hreyfimyndum.
Helstu munurinn er sá að tweening fjörið er ekki notað; Í staðinn lýkur eitt stykki af efni á meðan annar hverfur í (eða þú gætir átt erfitt umskipti án þess að hverfa). The swapper er svipað og karruselinn, að aðrar lausnir sem ekki eru til JavaScript, sem nefnd eru hér að ofan, eru sannar.
Enn annar viðskiptavinur kom til mín með það verkefni að sýna óákveðinn fjölda vitnisburða á heimasíðu sinni. Við valið efnaskipti í þessu tilfelli vegna þess að við þurftum ekki að fá paginann sem venjulega er að finna í hringhjólum (notandinn þyrfti ekki að fletta til baka eitt vitnisburð eða sleppa til enda).
Fyrir gesti sem höfðu JavaScript óvirk, virtust við hönnunina. Eftir nákvæma skoðun ákvað viðskiptavinurinn með réttu að vitnisburður hefði svo lítið áhrif á gesti sem settu display til none myndi ekki vera skaðleg.
Ákvörðunin veitti mér smá meiri frelsi við að skipuleggja hægri dálkinn á vefsíðunni, þar sem sögur voru að birtast.
The Sorter
Sá sem hefur breytt Hulu biðröð sinni hefur séð drag-and-drop sorterann. Þessi hluti af JavaScript gerir notendum kleift að draga og sleppa raðum (borðröð, listatriði, sjálfstæð DIV, osfrv.) Í aðra röð.
Netflix er sorter
Taktu eina síðasta viðskiptavini mína sem dæmi, sem hafði sett af venjulegum aðferðum sem allir starfsmenn þurftu að fylgja.
Hver aðferð samanstóð af einhverjum fjölda verkefna. Stjórnandi gæti bætt við eða fjarlægt verkefni og gæti breytt röð verkefna.
Þetta var kennslubók dæmi um flokkun , framkvæmd drag-and-drop endurskipulagningar .
Þökk sé Scriptaculous og Prototype.js var auðvelt að búa til listann. Þegar kóðinn var skrifaður og blaðið var lifandi, höfðum við fullkomlega virkan flutning á hönnunarsamningi. Þá gerðum við okkur ljóst að án JavaScript, höfðum við aðeins HTML sem samsvarar þyngd pappírs. Það var engin draga-og-sleppa eða á-flugu endurskipulagningu.
Sumir fljótir hugsanir og lítilsháttar breytingar á hönnuninni gerðu okkur sömu sett af röðum sem við höfðum áður en með því að bæta við innsláttarhólfum sem gætu móts við innfærslu röð röð (athugaðu þó að án Javascript þurftum við að bæta við nokkrum umtalsverður miðlarahliðsvottun fyrir þessi innsláttarboxar). Við misstu endurskipulagningu á flugi, en að minnsta kosti náum við flokkunarvirkni.
Síðan snéri við aftur á Javascript-virkt vafra og fólgin í textaboxunum sem nefnd eru hér að ofan; Eftir allt saman, við höfðum draga og sleppa virkni fyrir þennan hóp. Á þessum tímapunkti höfðum við fullkomlega virkan flutning á hönnunarmiðluninni sem var einnig nothæft fyrir gesti sem höfðu JavaScript óvirk. Næsti tími, ég veit að skipuleggja þetta ástand.
Niðurstaða
Þróun á vefnum mun halda áfram og gestir á vefsíðum okkar ættu að geta haldið áfram að njóta dynamic hæfileika.
Halda áfram að skipuleggja gagnvirka svör við hreyfimyndum tweens: hverfa í, hverfa út, hrynja, auka, renna hlutum í kringum sig. Í ljósi þessa hreyfimyndar skaltu hugsa um hvernig vefsvæðið þitt mun birtast fyrir gesti sem geta ekki séð fjörið vegna takmarkana JavaScript. Viðskiptavinir þínir verða hamingjusamari og þú verður betri hönnuður fyrir það.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Jason Corns er sjálfstæður vefur verktaki og fullur-tími GUI verktaki fyrir Systems Alliance, Inc., sem sérhæfir sig í nothæfi fyrir alla áhorfendur.
Hvernig áætlar þú að ekki sé að finna JavaScript? Vinsamlegast deildu meðmælum þínum með okkur ...