Icons für die multiple Seitendarstellung

Man begegnet nahezu auf jeder Website, die mehrere Seiten als Suchergebnis anzeigt oder eingesetzt als einfache Navigationshilfe zwischen vielen Seiten der selben Kategorie wie zum Beispiel Pics gallery. Einige dieser kleiner Grafiken sind gelungen, andere weniger, aber man sieht: für das gleiche Problem gibt es viele Lösungen. Oder denkt man das nur im ersten Augenblick und dahinter steckt ein inzwischen traditionelles System?

Eine sehr schöne, rein typografische Lösung der nachtagenten, man sieht viele Informationen auf engstem Raum: Anzahl der angezeigten Fotos auf einer Seite, Zahl der Fotos insgesamt, Auf welcher Seite befinde ich mich und Navigation zur nächsten Seite:
Anzeige vor zurück

Der Klassiker, der schon sehr altmodisch aussieht bei ebay. Vielleicht ist die Angabe „Seite 1 von 3“ hilfreicher, jedoch stört die überflüssige, deaktivierte Taste „Zurück“ – sie sollte lieber nur dann auftauchen, wenn sie benötigt wird:

ebay Seitenanzeiger

Sehr praktisch bei sehr vielen Seiten und gut für die Usability:
ebay Seitensprung

Amazon besticht mit einer sehr einfachen und übersichtlichen Lösung, die Anzahl der Websites und die Anzahl der dargestellten Produkte sieht man auf einen Blick:
Icons mehrere Seiten amazon

Bei Otto scheint die Seitenangabe viel zu unruhig und überlastet zu sein:Icons mehrere Seiten Otto

Bei Neckermann hingegen sehen die Tasten für nächste und vorhergehende Seite unlogisch aus – es müssten ein einfache s > oder < dafür stehen:
Icons mehrere Seiten Neckermann

Auf den Seiten von Quelle weiss man nicht so genau wie viele Seiten einen noch erwarten:
Seitennavigation Quelle
Ungünstig weit entfernt von der Navigation findet man die ausführliche, aber auch sehr platzraubende Gesamtseitenangabe:
Anzahl der Seiten bei Quelle

Icons Übersicht:

Icon Seitenanzahl Übersicht

popup mit ausgeschaltetem Javasript (Tutorial & Download html Dateien)

Popups wie die User beim täglichen Browsen erleben, können unglaublich nerven. Doch was ist, wenn diese aufspringenden Fenster nicht automatisch, sondern durch das bewusste Handeln der Benutzer ausgelöst wird? Und dann in diesem Popup eine Illustration, grössere Grafik, Foto, PDF oder einfach nur erklärender Text angezeigt wird? Dann wir dieses Popup zu einem wichtigen Bestandteil vom Webdesign und ist sogar sehr gut für die Usability.
Hier ist eine sehr einfache Lösung für ein passives popup (User muss ein Link anklicken, damit ein popup-Fenster aufspringt):

<a target=“popup“ onclick=“window.open (“, ‚popup‘, ‚width=780,height=400,scrollbars=no, toolbar=no,status=no, resizable=no,menubar=no,location=no,directories=no,top=10,left=10‘) “ xhref=bild_popup.jpg“>

popup ohne javascript Falls Sie Probleme beim Kopieren des Scriptes haben, hier ist ein Screenshot vom html Quellcode im Dreamweaver, zusätzlich können Sie weiter unten die funktionierenden Beispieldaten herunterladen.
Vorteil von diesem kleinem html-Script ist, dass auch beim deaktivierten Javascript ein neues, leeres Fenster mit der Popup-Grafik, Text, Foto usw. erscheint.

Die Höhe und die Breite des Popups können einfach über die Parameter „height“ und „width“ eingestellt werden.

Hier können Sie die Beispieldateien downloaden (2 html Seiten: Ausgangsseite und die Popup-Datei): popup.zip (4 KB)

Adobe bringt Flash Player 9 raus

Mit neuem konstenlosen Flash Player 9 versucht Adobe weiterhin einen technologischen Grundpfeiler für Web 2.0 aufzubauen. ECMAScript für XML, ActionScript Virtual Machine (AVM) und ActionScript in der Version 3 werden jetzt vom Player verstanden. Damit steht der Weg frei für die Nutzung der Rich-Internet-Applikationen, diese sollen dem User mehr Interaktionen und individueller Anpassungen bieten.

Parallel wurde die Flex Familie auf die Version 2 aktualisiert, die sozusagen die neuen Anwendungen erst ermöglichen wird. Denn Flash Player ist eigentlich nur ein „Fenster“ in die neue, interaktive Web 2.0 Welt. Zumindest aus der Sicht von Adobe, denn es gibt eine im Augenblick erfolgreichere Konkurrenz: AJAX (Asynchronous JavaScript and XML) 😉

Flex Anwendung
Sehr sehenswert die neuen Anwendungen (benötigen alle Flash 9 Plugin): Beispiele

Visualisierung der html-Struktur

Im Aharef Blog gibt es ein Tool zur Visualisierung der html-Struktur einer Webseite. Mit Hilfe vom Java-Applet können beliebige Internetseiten (einfach URL eingeben) „durchleuchtet“ und als grafische Dokumentenstruktur dargestellt werden. Fast könnte man sagen, es enstehen DNA oder Fingerabdrücke der Internetauftritte. Denn auch die Verschachtelung der Gestaltungselemente ist sehr individuell und variiert stark vom Fall zu Fall (zum Beispiel google vs. cnn.com)
blau: Links, grün: divs, gelb: Formulare

html Struktur design-literatur.de

tag-Struktur der index.html Datei von blog.design-literatur.de

Strukturen der verlinkten html Seiten.

CSS Cursor verändern

Bewege die Maus über die untenstehenden Namen, die auch gleichzeitig die Namen der zu verwendeten Parametern sind. Beispiel für das Einbinden in CSS: <span style=“cursor:e-resize“>

Auto

Crosshair

Default

Pointer

Move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

CSS Menü Navigation Tasten – ohne Grafikelemente!

Ein sehr schönes Beispiel für ein Menü der intuitiven ON/OFF Tasten nur mit Hilfe von CSS. Keine einzige Grafik wird verwendet:

CSS Beispiel:
#menu a, #menu a:visited {
position:relative;
text-decoration:none;
text-align:center;
background-color:#9ab;
color:#fff;
display:block;
width:8em;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
padding:0.25em;
margin:0.5em auto;
}

#menu a:hover {
top:2px;
left:2px;
color:#ffff00;
border-color:#345 #cde #def #678;
}

XHTML Beispiel:
<div id=“menu“>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 1</a>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 2</a>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 3</a>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 4</a>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 5</a>
</div>

Design Blog

Offenlegung: Auf dieser Webseite finden Sie zum Teil Affiliate-Links. Das bedeutet, dass wir unter Umständen eine kleine Provision erhalten. Ohne zusätzliche Kosten für Sie. Damit helfen Sie uns weiterhin kostenlose Inhalte anzubieten. Vielen Dank!