• fortrabbit

Hier geht’s um Navigation zum Blättern von Webseiten. Die Pagination (so der englische Fachausdruck) hilft beim Wechsel von Seiten, wenn eine Menge an Elementen zu groß ist, als sie mit einem Mal darzustellen.

Warum Blättern und nicht einfach Laden?

• zuviele Daten (HTML, Javascript, Bilder) müssten geladen und gerendert werden,
• zuviele Inhalte, die nicht mehr überschaubar sind,
• Werbeeinnahmen durch Banner beim nächsten Page Load.

Ähnlich wie in einem Buch wird unten (und evtl. auch oben) angezeigt auf welcher Seite einer Suchanfrage oder eines Artikels ich mich gerade befinde. Anstatt blätterbaren Buchseiten gibt es hier Links zu anderen Seiten. Ich kann bei dieser Seitennummerierung mit einem Klick nicht nur auf die nächste und die vorherige Seite kommen, sondern auch an die Erste und an die Letzte und außerdem schnell drei Seiten nach vorne springen.

Anforderungen für Suchergebnisse

Bei Google suche ich meist per Auge in meinen Ergebnissen nach dem Treffer, wenn ich auf der ersten Seite nichts finde, wechsle ich auf die Nächste, dann bin ich aber auch wirklich fertig mit der ersten Seite und brauch sie nicht mehr.

Andere Anforderungen bei Tabellen

Bei MISH, unserer Hosting- & Rechnungs-Software haben wir Listen in Tabellenform, z.b. zum Auflisten von E-Mail Adressen, die durch eine Pagination separiert werden. Das ist leider etwas suboptimal, da unsere Tabellen eine Kopfzeile zum Sortieren, teilweise Fußzeilen mit Zusammenfassungen und vor allem eine Auswahlfunktion zum gemeinsam Bearbeiten haben.

Alternativen

Ajax Live Grid, wo Daten Live nachgeladen werden, hat sich in den letzten Jahren nicht wirklich durchsetzten können, vielleicht weils ein Tick zu viel DOM Manipulation ist, trotzdem ein interessanter Ansatz.
More Button, wie bei einem Facebook Stream, wo per AJAX weitere Ergebnisse nachladen und einfach in die bestehende Seite anfügen, die Liste wird dann länger. Diese Methode grenzt den ersten Load ein, gibt aber anschließend die Möglichkeit alle Objekte zu bearbeiten und ist wahrscheinlich auch noch schneller als eine komplette Seite zu laden.

Into the Wild

Interessanterweise hatte YouTube früher für seine Video Kommentare eine Pagination, welche vor gar nicht allzu langer Zeit durch die oben beschriebene “More Button” Funktion ersetzt wurde. Allerdings ist nach dem jüngsten Update wieder eine Pagination da, natürlich wird per Ajax geblättert, damit das Video weiterspielen kann. Als Alternative gibt es einen “Alle Kommentare anzeigen” Button, der eine Liste mit mehr Kommentaren lädt, die wiederum eine Pagination enthält, allerdings nicht mehr das Video (Reduce to the Max). Auch bei Flickr lädt die Pagination die nächste Seite und die nächste Werbung per Ajax nach, auch die URL wird aktualisiert.

Pagination Links

• Pagination Best Practice mit vielen viele Beispielen: http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/
• Praxisorientiertes Pagination Anfänger CSS Tutorial: http://www.web-spirit.de/webdesign-tutorial/4/CSS-Pagination-(Seitennummerierung)
• Yahoo Design Patterns unterscheiden zwischen Item und Search Results: http://developer.yahoo.com/ypatterns/navigation/pagination/

Live Grid Links

• JQuery Grid Plugin (Umfangreich & gepflegt): http://www.trirand.com/blog/
• GridNic (Jquery): http://www.nicblue.com/gridnic/
• Zentable (Jquery): http://www.zentense.com/zenweb/en/zentable
• Rico (Prototype): http://dowdybrown.com/dbprod/rico3/demo/