Ein Foto - fertig zum Ansehen

Fotos können "normal" dargestellt werden, fertig zum Ansehen, unveränderlich. Vielen Besuchern mag das genügen, andere möchten vielleicht mehr sehen. Beispiel: Serviettenringe (im Untertitel ist die Bildgröße genannt: Breite x Höhe in der Maßeinheit "Pixel" oder "Bildpunkte").

Serviettenringe 400 x 300 Pixel

oben

Zwei Fotos je Motiv - kleine Vorschau und feste Größe

Ein kleines und ein großes Foto vom gleichen Motiv, beide mit (unterschiedlicher) fester Größe. Das kleine Vorschaubild zeigt, was die Besucher erwartet. Ein Klick auf das Vorschaubild führt zu einer Vergrößerung. Die Vergrößerung hat eine feste Größe. Von da aus geht es mit vorbereiteten Links weiter - komfortabel und sicher.

Vorschaubilder werden "Thumbnails" genannt, englisch für "Daumennagel", wegen ihrer Größe. Diese Technik dem Besucher den vollen Überblick und die Möglichkeit, Details aufzurufen. Technisch hat sie den Vorteil, dass Seiten mit vielen Fotos spürbar "schneller" aufgebaut werden: Besucher werden nicht ungeduldig und zappen nicht weg.

Ein Klick auf das Vorschaubild führt zum großen Bild auf einer eigenen Seite

Serviettenringe 150 x 200 Pixel

Vergleichen Sie die Detail-Darstellung der unterschiedlichen Größen:

Das gleiche Foto in drei Größen: 200x150, 400x300, 800x600 Pixel

oben

Zwei Fotos je Motiv - kleine Vorschau und variable Größe

Fotos, die eine technisch festgelegte feste Größe haben (hier im Beispiel 2396x1251 Pixel), können mit variabler Größe dargestellt werden:

• Ein kleines Vorschaubild (hier im Beispiel 300x157 Pixel) zeigt, was die Besucher erwartet.
• Ein Klick auf das Vorschaubild führt zu einer Vergrößerung, die ohne individuelle Navigation im Browser angezeigt wird. Dann ist das Bild maximal so gross wie das Browserfenster.
• Wenn das Bild größer als das Fenster ist, wird beim zweiten Klick in das Bild die volle Größe gezeigt. Die Besucher können sich dann durch das ganze Bild mit Hilfe der Bildlaufleisten rollen. Das ist etwas weniger komfortabel, zeigt aber alle Details.

Diese Technik kann alle Details des Bildes darstellen, z.B. bei Landkarten wird der Unterschied bei der Lesbarkeit besonders deutlich.

Zurück geht's hier z.B. mit dem "Zurück"-Pfeil des Browsers.

Beispiel: vergrößerbare Landkarte:
Ein Klick auf das Vorschaubild führt zur großen und weiter vergrößerbaren Landkarte

oben

Fotogalerie - viele klein/große Bilderpaare mit Komfort

Eine Fotogalerie ist eine Sammlung von Fotos mit hohem Bedien-Komfort. Eine "Fotostrecke" vermittelt Übersicht und Details, z.B. eine Zusammenstellung mit kleineren Vorschaubildern, zusätzlich zu jedem Vorschaubild eine Seite mit dem großen Detail-Foto, Bildtitel, Bildtext und Navigations-Elementen. Einsatz-Beispiele: Produkt-Sortimente, Sammlerstücke, Veranstaltungsfotos, Dokumentationen etc.

Eine kleine Fotogalerie

Um die Beschreibung zu lesen - zeigen Sie auf ein Bild,
um das Bild zu vergrößern - klicken Sie darauf.

1 2 3 4

Bedienkomfort bedeutet z.B.

• Bildergröße: Die Vorschaubilder sind groß genug, um Interesse zu wecken, die Detailbilder nutzen die Bildschirmfläche weitgehend aus. Beliebige Bildformate (hoch, quer) sind möglich. Um eine unruhige Darstellung zu vermeiden, werden die Vorschaubilder in gleicher Höhe und angepasster Breite gezeigt
• Umfang: Die Anzahl Fotos einer Galerie ist theoretisch nicht begrenzt. Vorschaubilder werden je nach Anzahl in mehreren Zeilen gezeigt. Die größeren Bilder werden auch auf Bildschirmen mit geringerer Auflösung dargestellt.
• Bildtexte: Jedes Bild kann mit einem Titel und einer zusätzlichen Beschreibung erläutert werden - in jeder Ansicht lesbar. Die Texte stehen über den Bildern (nicht darunter), damit eilige Leser diese Infos auch beim schnellen Blättern lesen können - ohne nach unten rollen zu müssen.
• Nummerierung: Fortlaufende Nummern dienen zur Identifizierung, einheitlich auf Vorschau- und größeren Bildern.
• Blättern: Bekannnte Symbole (wie bei Musik- oder Videogeräten) erlauben das Blättern vorwärts, rückwärts, zum Anfang, zum Ende, endlos, zu einer Bildnummer, zur Übersicht.
• Orientierung: Texte und Bedien-Elemente sind ohne Scrollen erreichbar. Jederzeit ist erkennbar, wie es weiter gehen kann.

oben

Bewegung von Animation bis Video

Flash als technische Grundlage

Flash "kann alles": Stehende Bilder, durchlaufende Filme, animierte Bilder mit Übergängen, die fast wie ein Film durchlaufen - mit oder ohne Ton, mit oder ohne Klick der Betrachter.

Flash ist auf vielen Computern inzwischen Standard, weil es z.B. für das Ansehen von YouTube- und anderen Internet-Videos gebraucht wird. Anwender dürfen es kostenlos downloaden und installieren. Ein paar für die Nutzer komfortable Merkmale sind (je nach Einstellung und Ausgangs-Material)

• Blättern vorwärts / rückwärts,
• Show anhalten / weiter laufen lassen,
• Fortschritt anzeigen (Gesamtzeit, aktueller Stand),
• Ton (sofern aufgenommen) ein-/ausschalten, Lautstärke verändern,
• kleine Vorschaubilder am unteren Rand anzeigen,
• Bildgröße umschalten zwischen voreingestelltem Format und vollem Bildschirm.

Und Flash bringt etwas mehr Sicherheit gegen "Diebstahl" der Webseiten-Inhalte.

Mit Präsentationstechnik "Ideen sichtbar machen"

Sie bestimmen die Inhalte, wir helfen - wenn Sie es wünschen - bei der Umsetzung.

Haben Sie vielleicht schon fertig ausgearbeitete Präsentationen / Vorträge / Demo-Material (z.B. mit PowerPoint)? Hier können Sie Ihre Infos ins Internet stellen - ohne oder mit nur geringen Anpassungen.

Wenn nicht, kann LITFAS.DE/sign das für Sie machen. Mit Präsentationstechnik können Sie "Ideen rüberbringen". Ein bekanntes Programm dafür ist PowerPoint: Es ist leistungsfähig und kann z.B. Texte, Bilder, Diagramme und Videos präsentieren. Es kann komplizierte Inhalte innerhalb einer Folie schrittweise aufbauen und verständlich machen. Es kann Übergänge zwischen den Folien animieren.

Die PowerPoint-Präsentation wird für das Internet umgewandelt, dann kann sie auf allen internet-fähigen Computern mit Flash-Player wiedergegeben werden:

• zum individuellen Klicken durch den Betrachter (interaktiv) - jeder Betrachter kann seine eigene Geschwindigkeit bestimmen
• oder mit zeitgesteuerter Ablauf-Steuerung ohne Klick - Betrachter müssen nicht über die Bedienung nachdenken.

Hier sind zwei kleine Präsentationen vorbereitet, die Sie per Klick auf die Vorschaubilder rechts starten können. Beide Demos läuft ohne Klick bis zum Ende durch. Mit der Zurück-Schaltfläche Ihres Browsers kommen Sie hierher zurück.

• Die blaue Präsentation "Edles Silber" ist eine Art Fotogalerie, die individueller gestaltet wurde als eine "normale" Fotogalerie. Damit Sie eine Vergleichsmöglichkeit haben, wurden die gleichen Fotos verwendet wie in der vorigen Fotogalerie.
  
• Die rote Präsentation "Reparaturanleitung" ist mehr als eine "normale" Fotogalerie, mit mehr Aufwand können Sie mehr Infos darstellen, sogar ein kleines Filmchen ist eingebaut. Zeigen können Sie z.B. Zustände: Vorher - Nachher | Gegenüberstellungen: So geht's - so geht's nicht | Alternativen: Entweder - Oder | Entwicklungen: Mehrere Lern- oder Arbeitsschritte, Zusammenfassung der wichtigen Infos | Betonung wichtiger Einzelheiten mit zusätzlichen Symbolen. Sehen Sie mal rein, vielleicht werden Sie überrascht.
  

Im Vergleich zur "normalen" Fotogalerie sind hier Besonderheiten möglich:

• Texte lassen sich schrittweise aufbauen (Punktaufzählungen)
• Eigener Farb-Hintergrund: Dunkle Hintergründe lassen Fotos leuchtender erscheinen, Farben können die gewünschte Aussage unterstützen (z.B. Silber auf dunklem Blau wirkt edel)
• Alle Schriftarten des Entwicklungs-Rechners können benutzt werden: Auch Schriftarten können Aussagen betonen
• Unterschiedliche Bildgrößen von Vorschau- bis Bildschirmgröße
• Fotos lassen sich um Symbole (z.B. Pfeile, Kreise) ergänzen, die die gewünschte Aussage hervorheben
• Beliebige Quellen können genutzt und kombiniert werden, z.B. Fotos, Texte, Diagramme, Tabellen etc.
• Sogar Links lassen sich hier einfügen, z.B. Adressen zum Bestellen, Infos auf anderen Seiten

Fertige Videos zeigen

Ein Hinweis vorweg: Diese kleine Demo läuft ohne Klick bis zum Ende durch und startet dann wieder neu. Mit der Zurück-Schaltfläche Ihres Browsers kommen Sie hierher zurück.

Mit deutlich mehr Aufwand können Sie auch ein Video drehen und ins Internet stellen. Sound bringt evtl. noch mehr Infos für die Betrachter. Wenn diese aber (z.B. am Büro-PC) keine Lautsprecher haben, kann die Wirkung des ganzen Videos verpuffen. Und: Sound bedeutet für die Produktion zusätzlichen Aufwand.

Hier ist ein kleines Video zu einer Reparatur-Anleitung vorbereitet, die Sie per Klick auf das Vorschaubild links starten können.

Damit Sie eine Vergleichsmöglichkeit haben, wurde das gleiche Thema verwendet wie in der "roten" Fotogalerie. (Nehmen Sie die Qualität des Videos nicht Ernst. Es ist eine Demonstration, die mit einem digitalen Fotoapparat aufgenommen und mit Windows-"Bordwerkzeug" geschnitten wurde, die also nicht mit professionellem Material konkurrieren soll.)

oben

Rosinen picken: Kombinieren Sie die Alternativen

Wenn Sie über den Einsatz von Bildmaterial auf Ihrer Webseite nachdenken, sollten Sie diese Merkmale beachten:

• Einzelne Bilder (groß oder klein) können Sie immer einsetzen. Große Bilder machen den Seitenaufbau langsamer.
• Kleine Vorschaubilder mit Link zu großen Bildern in einer Fotogalerie bieten guten Überblick und Komfort für die Betrachter. Dann sollte die Qualität und die Größe der Bilder einheitlich sein.
• Präsentationen können vielseitig Fotos mit anderen Quellen mischen, Animationen können Bewegung in jede Seite und in die Seiten-Übergange bringen.
• Videos sind durchgängig "bewegter", aber aufwändiger in der Herstellung und erschweren oder verhindern spätere Anpassungen. (Stehende Bilder sind einfacher zu bearbeiten und auszutauschen als bewegte Bilder!)
• Kombinationen dieser Techniken erlauben "Rosinenpickerei": Die Vorteile jeder Technik nutzen, um mit vertretbarem Aufwand möglichst überzeugend zu informieren.

oben

Das Problem mit Bild-, Bildschirm- und Fenstergröße

Vielleicht haben Sie es schon erlebt: Was auf Ihrem Bildschirm "normal" aussieht (weil Sie das so gewöhnt sind), ist auf anderen Bildschirmen vielleicht viel zu groß oder viel zu klein.

Die Ursache: Bilder werden mit einer bestimmten Pixel-Größe ins Internet gestellt, Betrachter haben unterschiedliche Bildschirmauflösungen und völlig willkürlich einstellbare Fenstergrößen. Vom Verhältnis Bildpixel zu Bildschirmpixel hängt es ab, ob ein Bild relativ groß oder relativ klein wirkt. Wenn z.B. ein Foto in der Größe 240 x 160 Pixel dargestellt werden soll, füllt es beim kleinen Smartphone-Display die ganze verfügbare Fläche, auf einem großen stationären Bildschirm wirkt es wenig größer als eine Briefmarke.

Typische Bildschirm-Auflösungen in Pixel:

Bildschirmauflösungen im Vergleich - maßstabsgerecht

• "Normale" PC und Notebook: Standard-Bildschirme haben eine Breite von 1024 oder 1280 Pixel (in der Abbildung die Formate mit den schwarzen Linien).
• Ausnahme: Breiten von 1440, 1680 und 1920 Pixel sind noch wenig verbreitet (in der Abbildung die Formate mit den blauen Linien).
• Museum: Die typische Breite zu Anfang der Farbbildschirme waren 640 Pixel, 800 Pixel findet man (seltener) immer noch.
• Mobiles Internet mit Handy, Smartphone: Manche Geräte lassen sich wahlweise im Quer- und Hochformat betreiben, manche haben quadratische Bildschirme. Typische Breiten sind 240, 320, 480, 640 Pixel (in der Abbildung die Formate mit den roten Linien).

Der "Spagat" bei der Gestaltung einer Webseite reicht also von 240 Pixel Breite (mobil) bis 1920 Pixel (stationär), das entspricht einem Verhältnis von 1:8. Von der Webseite aus kann nur die Bildgröße - nicht die Bildschirmauflösung - beeinflusst werden. Für Webseiten-Gestalter entsteht daher ein Konflikt: Einerseits sollen Nutzer mit älterer Technik nicht ausgeschlossen werden, andererseits soll neuere Technik sinnvoll genutzt werden. Der Webseiten-Gestalter muss sich entscheiden - mehrgleisig ist technisch nicht möglich. Ein sinnvoller Kompromiss ist z.Z. wohl die Orientierung an einer Bildschirmbreite von 1024 Pixel, damit dürften die meisten Anwender zurecht kommen..

Dabei sagen die Pixelangaben eines Bildschirms nichts darüber aus, welche Abmessungen in cm oder Zoll ein Bildschirm hat. Ein 17-Zoll-Bildschirm kann z.B. 800 x 600, 1024 x 768 Pixel oder 1280 x 1024 Pixel haben. Sie sagen auch nichts darüber aus, wie groß das Fenster ist, in dem die Inhalte dargestellt werden, der Nutzer kann die Fenstergröße deutlich kleiner als die Bildschirmgröße einrichten.

Tendenzen: Neuere Bildschirme sind größer, sie haben immer höhere Auflösungen (die Größe in cm läßt nicht zwangsläufig auf die Auflösung schließen). Auch die Seitenverhältnisse ändern sich von 4:3 hin zu 16:9, sie werden (wie Fernseher) relativ breiter. Für das mobile Internet entstehen Techniken, die gößere Bilder "kleinrechnen".

oben