So planen Sie den Verzicht auf JavaScript

Auch wenn die zum Sammeln von Website-Verkehrsstatistiken verwendeten Methoden die Gültigkeit der Statistiken selbst in Frage stellen, ist dies bei einigen Besuchern Ihrer Website der Fall JavaScript deaktiviert.

Sie können Ihre Traffic-Quellen in vier große Kategorien einteilen:

Suchmaschinen, mobile Besucher, Besucher, die Screenreader verwenden Und Besucher, die JavaScript deaktiviert haben.

Bei der Planung Ihrer Informationsarchitektur und Ihres Informationsdesigns müssen Sie herausfinden, wie Sie mit diesen speziellen Gruppen umgehen.

Um Klarheit zu diesem Thema zu schaffen, habe ich einige aktuelle Szenarien aus der Praxis zusammengestellt.

Wenn Sie lange Inhalte hinter einem animierten Scroller verbergen, Produkte oder Testimonials nacheinander durchlaufen oder kategorisierte Inhalte auf Seitenebene sauber präsentieren möchten, können Sie Akkordeons, Karussells oder jede andere einfallsreiche Lösung verwenden.

Wenn Sie sich an die bewährten JavaScript-Methoden halten oder eine der unzähligen JavaScript-Bibliotheken verwenden, sind Sie wahrscheinlich bereits mit unauffälligem JavaScript vertraut. Dabei handelt es sich um die Technik, bei der JavaScript-Interaktivität nur dann angezeigt wird, wenn JavaScript aktiviert ist.

Dieses Prinzip sollte auch auf die Präsentation ausgeweitet werden: Erstellen Sie Ihre dynamische(n) Funktion(en) und legen Sie Ihre Anzeige- und Sichtbarkeitswerte erst fest, nachdem das Dokument fertig ist und nur wenn der Besucher JavaScript aktiviert hat, anstatt die Eigenschaften in Ihrem HTML-Code festzulegen oder zu definieren sie serverseitig.

Wie viele Screenreader neigt der Crawler von Google dazu, Inhalte zu ignorieren, die in ein Element eingeschlossen sind, das auf display:none gesetzt ist, während er alle Inhalte crawlt, die auf display:visible eingestellt sind.

Ihre Aufgabe als Designer ist es also Planen Sie den Raum und das Layout entsprechend Ihren dynamischen Funktionenund auch zur Vorbereitung auf Fälle, in denen „dynamisch“ keine Option ist.

Wenn der Inhalt einer Ihrer Seiten immer in den Browsern bestimmter Benutzer sichtbar ist, wie soll er dann angezeigt werden? Sollten versteckte Inhalte auch dann verborgen bleiben, wenn JavaScript deaktiviert ist? Sollten alle Inhalte für Screenreader und Suchmaschinen verfügbar sein? Wenn ein Inhalt erst nach einem AJAX-Aufruf sichtbar wird, wie füllen Sie diesen Platz dann angemessen aus, wenn JavaScript deaktiviert ist?

Das Akkordeon

Ein Akkordeon ist eine Struktur, die normalerweise aus einem Muster von Überschriften- und Inhaltspaaren besteht. Als Reaktion auf ein in der Überschrift ausgelöstes Ereignis würden Inhaltsblöcke nacheinander erweitert.

Lesen:  7 Schritte zum erfolgreichen Onboarding von Designkunden


Hulus Akkordeon

Kürzlich habe ich einem Kunden geholfen, das Problem sehr langer Seiten zu überwinden. Dieser Kunde verfügte über einen Online-Katalog mit Schulungskursen und legte fest, dass alle Informationen für ein bestimmtes Programm im Voraus verfügbar sein müssen: kein Überspringen von Seiten oder Pop-ups für Kernkursbeschreibungen oder Programmdefinitionen.

Alle Programminformationen sollten dem Besucher auf einer Seite zur Verfügung stehen, ohne im Vorlesungsverzeichnis hin- und hernavigieren zu müssen.

Die richtige Lösung war hier ein Akkordeon, wobei die Kursbeschreibungen unter den Überschriften für jeden Studienbereich (z. B. Mathematik oder Geschichte) eingeblendet werden. Eine schlechte Implementierung wäre gewesen, die Sichtbarkeit dieser minimierten Kursbeschreibungen festzulegen, bevor der HTML-Code auf dem Bildschirm gerendert wurde.

Wenn der Inhalt vor dem Rendern ausgeblendet würde, würden einige Besucher und Suchmaschinen einen Großteil des wichtigen Inhalts übersehen.

Mit jQuery habe ich gezielt den Inhalt zum Reduzieren ausgewählt und das Akkordeon so eingestellt, dass es ausgelöst wird, nachdem die Seite geladen wurde und das Dokument fertig war. Für diesen Kunden war es äußerst wichtig, die Inhalte allen Zielgruppen zugänglich zu machen. Da einige Inhalte sehr lange laufen konnten, war ein Design erforderlich, das eine extreme vertikale Erweiterung ermöglicht.

Das Karussell

Du wirst sehen Karussells ziemlich häufig in Portfolios und Produkt-Spotlights.

Typischerweise scrollen Inhalte in Karussells als Reaktion auf ein Timeout-Intervall oder eine Benutzerinteraktion (siehe „Ihr aktueller Verlauf“ auf Amazon). Ich mag Karussells wegen ihrer Flexibilität und weil sie es ermöglichen, mindestens eine Dimension des Behälters festzulegen.


Das Karussell von Amazon

Ein anderer Kunde erkundigte sich kürzlich nach dem Bereich „Neuigkeiten und Highlights“ auf seiner Homepage. Wie viele andere Inhaltsblöcke dieser Art enthielt dieser die acht neuesten Ergänzungen zu ihren Nachrichtenseiten (obwohl diese Zahl variieren kann).

Die Teaser in diesem Block enthielten eine Zusammenfassung des Artikels und ein Bild. Die Bilder könnten groß und der Inhalt lang sein, daher war ein Karussell, das zwischen den Teasern rotierte, hier die richtige Lösung.

Wieder mit jQuery habe ich den DIV-Wrapper für das Karussell ausgewählt und, nachdem die Seite geladen und das Dokument fertig war, das Karussell angewendet und meine Übergänge festgelegt. Bei aktiviertem JavaScript wurde die Homepage gut gerendert: Alle 15 Sekunden wechselte das Karussell zum nächsten Teaser. Standardmäßig waren alle Teaser sichtbar, aber ich habe alle bis auf den ersten ausgeblendet, als ich das Karussell erstellt habe.

Lesen:  So arbeiten Sie mit einer Canon-Kamera (fotografische Methoden und praktische Tricks)

Für diesen Kunden sind wir wieder da hat sich dafür entschieden, alle ausgeblendeten Inhalte anzuzeigen, wenn JavaScript deaktiviert war. In diesem Fall würde die Startseite vertikal erweitert, um den zusätzlichen Inhalt aufzunehmen.

Wir hatten jedoch Alternativen. In Anbetracht der vier Benutzerkategorien, die wir zu Beginn dieses Artikels identifiziert haben, lag die Priorität dieses Inhalts auf der Zugänglichkeit, wobei das Suchmaschinenranking knapp dahinter lag. Wir hätten diese beiden Gruppen zufriedenstellen können, indem wir alle Teaser sichtbar gelassen hätten, aber die Abmessungen des Container-DIV festgelegt und den Überlauf auf „Scrollen“, „Auto“ oder „Ausgeblendet“ eingestellt hätten.

Bei jeder dieser Optionen wären die Abmessungen des Layouts erhalten geblieben. Und auch Screenreader und Suchmaschinen hätten den Inhalt erkannt, da der Inhalt nicht mit der Anzeige- oder Sichtbarkeitseigenschaft ausgeblendet würde.

Der Content Swapper

Diese Technik ähnelt dem Karussell darin, dass der Inhalt eines Blocks mithilfe einer Animation gedreht wird.

Der Hauptunterschied besteht darin, dass die Tweening-Animation nicht verwendet wird; Stattdessen wird ein Inhalt ausgeblendet, während ein anderer eingeblendet wird (oder Sie könnten einen harten Übergang ohne Ausblendung haben). Der Swapper ist dem Karussell so ähnlich, dass die oben genannten alternativen Lösungen ohne JavaScript zutreffen.

Ein weiterer Kunde kam zu mir mit der Aufgabe, eine unbegrenzte Anzahl an Erfahrungsberichten auf seiner Website anzuzeigen. Wir haben uns für eine entschieden Content-Swapper in diesem Fall, weil wir die Paginierung, die normalerweise in Karussells zu finden ist, nicht benötigten (der Benutzer müsste nicht einen Erfahrungsbericht zurückblättern oder zum Ende springen).

Für Besucher, die JavaScript deaktiviert hatten, haben wir das Design respektiert. Nach sorgfältiger Überlegung kam der Kunde zu Recht zu dem Schluss, dass die Wirkung der Testimonials auf die Besucher so gering sein würde, dass es nicht schädlich wäre, die Anzeige auf „Keine“ zu setzen.

Die Entscheidung verschaffte mir etwas mehr Freiheit bei der Gestaltung der rechten Spalte der Website, in der die Erfahrungsberichte erscheinen sollten.

Lesen:  Vorstellung der besten Smart-Home-Sicherheitssysteme des Jahres 2023: Ein umfassender Leitfaden

Der Sortierer

Jeder, der seine Hulu-Warteschlange angepasst hat, hat den Drag-and-Drop-Sortierer gesehen. Mit diesem Teil von JavaScript können Benutzer Zeilen (Tabellenzeilen, Listenelemente, unabhängige DIVs usw.) per Drag-and-Drop in eine andere Reihenfolge ziehen.


Sortierer von Netflix

Nehmen wir als Beispiel einen meiner letzten Kunden, der eine Reihe von Standardverfahren hatte, die alle Mitarbeiter befolgen mussten.

Jede Prozedur bestand aus beliebig vielen Aufgaben. Ein Administrator könnte Aufgaben hinzufügen oder entfernen und die Reihenfolge der Aufgaben ändern.

Das war ein Lehrbuchbeispiel dafür Sortierungeine Implementierung von Neuordnung per Drag-and-Drop.

Dank Scriptaculous und Prototype.js war das Erstellen der sortierbaren Liste einfach. Als der Code geschrieben wurde und die Seite live war, hatten wir eine perfekt funktionsfähige Darstellung der Designkomposition. Dann wurde uns klar, dass wir ohne JavaScript nur das HTML-Äquivalent eines Briefbeschwerers hatten. Es gab kein Drag-and-Drop oder eine spontane Neuordnung.

Durch schnelles Nachdenken und leichte Änderungen am Design erhielten wir den gleichen Zeilensatz wie zuvor, jedoch mit zusätzlichen Texteingabefeldern, die die Eingabe der Zeilenreihenfolge ermöglichen konnten (beachten Sie jedoch, dass wir ohne JavaScript gezwungen waren, einige hinzuzufügen). erhebliche serverseitige Validierung für diese Eingabefelder). Wir haben die Möglichkeit der spontanen Neuordnung verloren, aber zumindest haben wir die Sortierfunktion wiedererlangt.

Dann wandten wir uns wieder JavaScript-fähigen Browsern zu und versteckten die oben erwähnten Textfelder; Schließlich hatten wir für diese Gruppe eine Drag-and-Drop-Funktionalität. Zu diesem Zeitpunkt hatten wir eine perfekt bedienbare Darstellung der Design-Komposition, die auch für Besucher mit deaktiviertem JavaScript verwendbar war. Das nächste Mal werde ich wissen, dass ich diesen Zustand berücksichtigen muss.

Abschluss

Die Weiterentwicklung des Webs wird weitergehen und die Besucher unserer Websites sollen weiterhin dynamisches Flair genießen können.

Planen Sie weiterhin interaktive Reaktionen mit animierten Tweens: Einblenden, Ausblenden, Reduzieren, Erweitern, Verschieben von Dingen. Überlegen Sie angesichts all dieser Animationen, wie Ihre Website für Besucher aussehen wird, die die Animation aufgrund von JavaScript-Einschränkungen nicht sehen können. Ihre Kunden werden zufriedener sein und Sie werden ein besserer Designer sein.

http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp

Jason Corns ist ein freiberuflicher Webentwickler und Vollzeit-GUI-Entwickler für Systems Alliance, Inc., der sich auf Benutzerfreundlichkeit für alle Zielgruppen spezialisiert hat.

Wie planen SIE den Verzicht auf JavaScript? Bitte teilen Sie uns Ihre Tipps mit…

Aktuelle Artikel:

Empfohlen