Jak zaplanować brak JavaScript?
Chociaż metody wykorzystywane do gromadzenia statystyk ruchu na stronie podważają ważność samych statystyk, faktem jest, że niektórzy użytkownicy Twojej strony będą wyłączeni z obsługi JavaScript .
Możesz podzielić źródła ruchu na cztery szerokie kategorie:
Wyszukiwarki, użytkownicy mobilni, użytkownicy używający czytników ekranu i użytkownicy, którzy mają wyłączoną obsługę JavaScript .
Planując architekturę i projektowanie informacji, musisz dowiedzieć się, jak postępować z tymi grupami specjalnymi.
Zebraliśmy kilka ostatnich światowych scenariuszy, aby znaleźć jasność w tej kwestii.
Jeśli chcesz ukryć długą zawartość za animowanym przewijakiem, lub obracać kolejno produkty lub referencje, lub prezentować skategoryzowane treści na poziomie strony, możesz użyć akordeonów, karuzeli lub innych pomysłowych rozwiązań.
Jeśli będziesz na bieżąco z najlepszymi praktykami JavaScript lub korzystaniem z dowolnej z niezliczonych bibliotek JavaScript, prawdopodobnie już znasz dyskretny JavaScript, który jest techniką prezentacji interaktywności JavaScriptu tylko przy włączonej obsłudze JavaScript.
Zasada ta powinna zostać rozszerzona również na prezentację: twórz dynamiczne funkcje i ustawiaj wartości wyświetlania i widoczności dopiero po przygotowaniu dokumentu i tylko wtedy, gdy użytkownik ma włączoną obsługę JavaScript, zamiast ustawiać właściwości w kodzie HTML lub definiować po stronie serwera.
Podobnie jak w przypadku wielu czytników ekranu robot Google ignoruje zawartość zawiniętą w element ustawiony na display: none , podczas gdy indeksuje dowolną zawartość ustawioną na display: visible .
Twoim zadaniem jako projektanta jest zaplanowanie przestrzeni i układu wokół dynamicznych funkcji , a także przygotowanie się na przypadki, w których opcja "dynamiczna" nie jest opcją.
Jeśli treść na jednej ze stron będzie zawsze widoczna w przeglądarkach określonych użytkowników, w jaki sposób powinna być wyświetlana? Czy ukryta zawartość powinna pozostać ukryta, nawet jeśli JavaScript jest wyłączony? Czy cała treść powinna być dostępna dla czytników ekranu i wyszukiwarek? Jeśli fragment treści staje się widoczny dopiero po wywołaniu AJAX, w jaki sposób odpowiednio wypełnić to miejsce, gdy JavaScript jest wyłączony?
Akordeon
Akordeon jest strukturą, która zwykle składa się ze wzoru pary nagłówków i treści. Bloki treści rozszerzałyby się pojedynczo, w odpowiedzi na zdarzenie wywołane w nagłówku.
Akordeon Hulu
Niedawno pomógł jednemu klientowi przezwyciężyć problem posiadania bardzo długich stron. Klient ten miał internetowy katalog kursów szkoleniowych i zastrzegł, że wszystkie informacje dotyczące konkretnego programu muszą być dostępne z góry: bez pomijania stron lub wyskakujących okienek dla opisów głównych kursów lub definicji programów.
Wszystkie informacje o programie musiały być dostępne dla odwiedzającego na tej samej stronie, bez konieczności nawigowania w katalogu kursu.
Właściwym rozwiązaniem był akordeon , zawalający opisy kursów pod nagłówkami dla każdego obszaru nauki (na przykład matematyka lub historia). Słabą implementacją byłoby ustawienie widoczności zwiniętych opisów pól przed renderowaniem HTML na ekranie.
Jeśli zawartość została ukryta przed renderowaniem, niektórzy użytkownicy i wyszukiwarki tracą wiele ważnych treści.
Korzystając z jQuery, skierowałem zawartość na zwijanie i ustawiłem akordeon, aby zadziałał po załadowaniu strony i przygotowaniu dokumentu. Dla tego klienta bardzo ważne było udostępnienie treści wszystkim odbiorcom. Niektóre treści mogły działać bardzo długo, dlatego potrzebna była konstrukcja, która mogłaby pomieścić ekstremalną ekspansję w pionie.
Karuzela
Karuzele pojawią się dość często w portfelach i punktach produktowych.
Zazwyczaj w karuzelach zawartość będzie przewijana w odpowiedzi na interwał czasowy lub interakcję użytkownika (zobacz "Twoja najnowsza historia" na Amazon). Lubię karuzele ze względu na ich elastyczność i dlatego, że pozwalają naprawić co najmniej jeden wymiar kontenera.
Karuzela Amazonka
Inny klient ostatnio zapytał o obszar "Wiadomości i najważniejsze informacje" na stronie głównej. Podobnie jak wiele innych bloków treści tego typu, ta zawierała osiem najnowszych dodatków do ich stron z wiadomościami (chociaż ta liczba mogła się różnić).
Teasery w tym bloku zawierały podsumowanie artykułu i obrazu. Obrazy mogły być duże, a zawartość długa, więc karuzela, która obracała się między teaserami, była właściwym rozwiązaniem.
Ponownie używając jQuery, wybrałem DIV dla karuzeli i, po załadowaniu strony i przygotowaniu dokumentu, zastosowałem karuzelę i ustawiłem przejścia. Po włączeniu obsługi JavaScript strona główna była ładnie odtwarzana: co 15 sekund karuzela przechodziła do następnej animacji. Domyślnie wszystkie zwiastuny były widoczne, ale ukryłem wszystkie oprócz pierwszej, kiedy stworzyłem karuzelę.
W przypadku tego klienta ponownie wybraliśmy wyświetlanie wszystkich ukrytych treści, jeśli wyłączono obsługę JavaScript . W takim przypadku strona główna zostanie rozwinięta pionowo, aby pomieścić dodatkową zawartość.
Mieliśmy jednak alternatywne rozwiązania. Biorąc pod uwagę cztery kategorie użytkowników, których znaleźliśmy na początku tego artykułu, priorytetem dla tej treści była dostępność, a ranking wyszukiwarek był na drugim miejscu. Moglibyśmy zadowolić te dwie grupy, pozostawiając widoczne wszystkie teasery, ale ustalając wymiary kontenera DIV i ustawienia overflow do scroll , auto lub hidden .
Każda z tych opcji zachowałaby wymiary układu. Czytniki ekranów i wyszukiwarki również wyłapałyby zawartość, ponieważ treść nie byłaby ukryta za pomocą display lub visibility własność.
Zamiana zawartości
Ta technika jest podobna do karuzeli, ponieważ treść w bloku jest obracana za pomocą animacji.
Główną różnicą jest to, że animacja animacji nie jest używana; zamiast tego jeden fragment treści zanika, gdy inny zanika (lub można uzyskać twarde przejście bez zanikania). Zmiennik jest dostatecznie podobny do karuzeli, że wymienione wyżej alternatywne rozwiązania bez JavaScriptu są prawdziwe.
Przybył do mnie inny klient z zadaniem pokazania nieskończonej liczby referencji na swojej stronie internetowej. Zdecydowaliśmy się na zamianę zawartości w tym przypadku, ponieważ nie potrzebowaliśmy paginacji zwykle znajdującej się w karuzelach (użytkownik nie musiałby przewijać wstecz ani przeskakiwać do końca).
W przypadku użytkowników, którzy wyłączyli JavaScript, szanowaliśmy ten projekt. Po dokładnym rozważeniu klient słusznie stwierdził, że opinie będą miały tak mały wpływ na odwiedzających, że ustawienie display do none nie byłoby szkodliwe.
Decyzja dała mi nieco więcej swobody w planowaniu prawej kolumny strony internetowej, na której pojawiły się referencje.
Sorter
Każdy, kto dostosował swoją kolejkę Hulu, zobaczył sortownik "przeciągnij i upuść". Ten fragment JavaScript pozwala użytkownikom przeciągać i upuszczać wiersze (wiersze tabeli, elementy listy, niezależne DIV itp.) W innej kolejności.
Sortownik Netflixa
Weźmy za przykład jednego z moich ostatnich klientów, który ma zestaw standardowych procedur, których muszą przestrzegać wszyscy pracownicy.
Każda procedura składała się z dowolnej liczby zadań. Administrator może dodawać lub usuwać zadania i zmieniać kolejność zadań.
Był to podręcznikowy przykład sortowania , implementacja zmiany kolejności "przeciągnij i upuść" .
Dzięki Scriptaculous i Prototype.js tworzenie łatwej do sortowania listy było łatwe. Kiedy kod został napisany, a strona była na żywo, mieliśmy doskonale działający rendering kompu projektowego. Potem zdaliśmy sobie sprawę, że bez JavaScriptu mieliśmy tylko równoważnik HTML wagi papieru. Nie było kolejnej zmiany kolejności "przeciągnij i upuść" lub "w locie".
Niektóre szybkie myślenie i drobna modyfikacja projektu dały nam ten sam zestaw wierszy, które mieliśmy wcześniej, ale z dodatkowymi polami wprowadzania tekstu, które mogłyby pomieścić wprowadzanie kolejności wierszy (zauważmy jednak, że bez JavaScriptu byliśmy zmuszeni dodać trochę znacząca walidacja po stronie serwera dla tych pól wejściowych). Straciliśmy zamawianie w locie, ale przynajmniej odzyskaliśmy funkcję sortowania.
Następnie wróciliśmy do przeglądarek obsługujących JavaScript i ukryliśmy powyższe pola tekstowe; w końcu mieliśmy funkcję "przeciągnij i upuść" dla tej grupy. W tym momencie mieliśmy doskonale działające renderowanie kompilacji projektowej, które było również przydatne dla użytkowników, którzy wyłączyli JavaScript. Następnym razem będę wiedział, jak zaplanować ten stan.
Wniosek
Ewolucja sieci będzie kontynuowana, a odwiedzający nasze strony internetowe będą mogli nadal cieszyć się dynamicznym polotem.
Kontynuuj planowanie interaktywnych odpowiedzi animowanych animacji: pojawianie się, wyciemnienie, zwijanie, rozszerzanie, przesuwanie obiektów. Biorąc pod uwagę wszystkie te animacje, pomyśl o tym, jak Twoja witryna będzie wyświetlana użytkownikom, którzy nie widzą animacji z powodu ograniczeń JavaScript. Twoi klienci będą bardziej zadowoleni, a ty będziesz lepszym projektantem.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Jason Corns jest niezależnym twórcą stron internetowych i pełnoetatowym deweloperem GUI dla Systems Alliance, Inc., specjalizującym się w użyteczności dla wszystkich odbiorców.
W jaki sposób YOU planujesz z powodu braku JavaScript? Proszę podzielić się z nami swoimi wskazówkami ...