Blog von Marc Hinse, Webdesigner und Webentwickler aus Karlsruhe.

made my day.every day.

Screen Presenter - Screendesigns präsentieren

Als Webdesigner steckt man viel Arbeit in seine Screendesign-Entwürfe, zumindest sollte man das. Sind diese Entwürfe dann fertig, stellt sich die Frage wie man diese richtig präsentiert.
As a web designer you put a lot effort in your screen design layouts, at least you should. Once finished, the question is how to present them to your customers.

Problematik

Wie im Web ≠ Print-Artikel bereits beschrieben, birgt die falsche Präsentation von Screendesign-Entwürfen einige Gefahren. Einem Kunden einen Entwurf als JPG, DIN A4-PDF, Keynote/PP-Präsentation oder Ausdruck vorzulegen ist nicht nur unpraktisch, es ist ist einfach falsch. Während wir über Ausdrucke wohl kaum diskutieren müssen, sind auch verschickte Bilder (meist als Mailanhang) nicht wirklich sinnvoll. Der Kunde klickt da drauf, es öffnet sich irgendein Bildprogramm, das das Bild irgendwie anzeigt. Mit einem Browser hat das nichts zu tun. Präsentationen mit Keynote/Powerpoint machen das nicht besser, hier stimmt in der Regel die Größe auch überhaupt nicht, ist ja wie ein DIN 4-quer PDF auf den Bildschirm gepappt.

Ich habe es bisher so gemacht, dass ich die einzelnen Screens als Hintergrundbild in einer/mehreren HTML-Seiten eingebunden habe, so dass sie immer in 100% und mittig ausgerichtet waren. Damit konnte der Kunde die Screens auf seinem Bildschirm betrachten und es gab keine größeren Überraschungen bzgl. Farbdarstellungen später auf der Live-Site. Dennoch mussten die Erklärungen zu den Screens separat in einer Mail gemacht werden, was zu einem Hin- und Herswitchen des Kunden zwischen verschiedenen Fenstern führte und auch nicht so der Bringer war.

Dann kam mir neulich folgendes Script zur Erstellung einer Website-Tour quer. Das Script ist an sich schon super und für seinen Zweck sicher sinnvoll. Was mich aber primär überzeugt hat, war die Art und Weise, die Informationen auf dem Screen zu haben.

Ich habe das Ding komplett auseinander genommen und statt 3 Stunden Anpassung wurde es dann doch wieder etwas ganz anderes. Wisstschon. Jedenfalls möchte ich Euch Screen Presenter vorstellen. Das Ding basiert auf jQuery und hat sonst keine besonderen Anforderungen. Schaut es Euch erstmal an:

Problem

Like in my Web ≠ Print article mentioned (sorry, in german), the wrong presentation of screen designs is dangerous. Presenting your layouts as a pure JPG, fixed size PDF, Keynote or Powerpoint presentation is not only impractical, it is wrong. While I think we don't have to discuss about printouts, there also is not much sense in sending JPGs via mail. Your client opens them in some image software which presents them somehow (wrong format, wrong zoom level). This is not the intended behaviour for your layouts, you want them to show up in a browser. Keynote/Powerpoint presentations are also a wrong way, sizes are not correct, it's like pinning a letter sized paper on the screen of your customer.

Until now, I used to put my layouts as background images in an HTML file, so they were centered and got sized 100%. The client could view them on his browser and there were no big surprises because of color differences when the site went live. But this wasn't perfect, you also had to explain the layouts in a separate mail. The client had to switch between the layout and your explanations which wasn't straight forward.

Some weeks ago, I stumbled upon a script for a website tour. The script does his job well, but it primarily convinced me with the way of presenting informations directly on the screen.

I completely torn the code into pieces and the expected three hours of customizing ended in a nearly complete rewrite. You know. But here we go, I may introduce Screen Presenter. Based on jQuery it has no other requirements except a browser of course. First take a look:

Demo

Features

  • Möglichkeit, mehrere Layouts zu präsentieren
  • Tooltips zur Erklärung frei positionier- und konfigurierbar
  • Möglichkeit von "Intropages" zur Einleitung
  • HTML in Tooltips möglich
  • Unterstützung von Browser History, Deeplinking und Bookmarks
  • Muss nicht auf einem Server laufen, kann auch als zip-Paket verschickt werden und lokal "abgespielt" werden

Konfiguration Screens

Features

  • Possibility of presenting several layouts
  • Tooltips are can be individually be positioned and styled
  • Possibility of "intro pages"
  • HTML in tooltips possible
  • Support of browser history, deeplinking und bookmarks
  • No need to run on a server, can be packed as a .zip, sent via mail and viewed locally

Configuration Screens

Einfach alle Eure Layouts in die index.html schmeißen. Selbstverständlich sollten diese alle die gleiche Breite haben. Dass man in Photoshop nur in einem Dokument arbeitet und die verschiedenen Ansichten in Ebenen anlegt, sollte klar sein. Falls nicht, schaut mal hier.

Konfiguration Tooltips / Intropages

Simply put your layout images in the index.html as showed above. Of course they should have the same width. Best practice is to have one Photoshop document with the views in different layers, for a recommandable description of these standards look here.

Configuration tooltips / intro pages

	
var gridWidth = 1000,
tooltipWidth = 250,
config = [
{
	"screenNumber" 		: 1,
	"name"		: "start",
	"showAsIntro"	: true,
	"posX"		: 200,
	"posY"		: 200,
	"tooltipWidth" : 450,
	"bgcolor"	: "black",
	"position"	: "TL",
	"text"		: "Welcome to Screen Presenter!
V1 | 26.01.2011

Screen Presenter is a tool for showing your layouts to customers. Neither PDFs nor mail attachments are a appropriate way of showing something designed for a browser.

For navigating through the tour use the buttons on the bottom left."
},
{
	"screenNumber" 		: 1,
	"name"		: "screen1",
	"showAsIntro"	: false,
	"posX"		: 200,
	"posY"		: 200,
	"tooltipWidth" : 450,
	"bgcolor"	: "black",
	"position"	: "TL",
	"text"		: ""
},

Generell

gridWith
Breite der Präsentation. Dies ist nicht die Breite der Bilder, sondern die Breite der X-Achse. Also: Soll Eure Website später 960 Pixel breit sein, wäre hier 960 einzutragen.
tooltipWith
Grundeinstellung der Tooltips-Breite. Kann für jeden Tooltip einzeln überschrieben werden.

Tooltips / Intropages

Für jeden Slide der Präsentation könnt Ihr die Einstellungen im JSON-Objekt config vornehmen. Jeder Eintrag bedeutet einen Tooltip oder eine Intropage oder einfach nur ein Layoutwechsel.

screenNumber
Welcher Screen soll angezeigt werden? Bezieht sich auf die Reihenfolge in der index.html (siehe oben)
name
Dient als alias für den Slide, wird für die URL als Anker benutzt. Also keine Leerzeichen oder Umlaute.
showAsIntro
Soll der Slide als Intropage angezeigt werden? Falls "true" wird ein Overlay erzeugt und der Text über den ganzen Schirm zentriert angezeigt. Tooltips werden nicht angezeigt.
posX, posY
Koordinaten des Tooltips innerhalb des Grids. Die Koordinaten beziehen sich auf den Pfeil des Tooltips.
tooltipWidth
Individuelle Breite des Tooltips.
bgcolor
"black" oder "white". Hintergrundfarbe des Tooltips / der Intropage.
position
Position des Pfeils. Siehe config für mögliche Positionen, Beispiel "TR" = top right.
text
Text des Tooltips / der Intropage. HTML ist erlaubt! Wird kein Text angegeben, werden weder Tooltip noch Intropage angezeigt. Sinnvoll für Screenwechsel, die man erstmal so wirken lassen will.

General

gridWith
width of your presentation content, basis for your x-axis. For example if your layout is based on the 960.gs-framework, the gridWith setting would be 960. This is not the image width.
tooltipWith
Standard width of your tooltips. Can be altered in every step of the tour.

Tooltips / Intropages

Every slide of the presentation can be configured in the JSON object "config". Every entry means one tooltip or intro page. Or just a screen layout change.

screenNumber
The image to be shown. Refers to the order of your images in the index.html (see above).
name
a unique identifier for your tooltip / screen / intro page. Serves as anchor name
showAsIntro
If true, an overlay is generated. Can be used for introducing a set of tooltips. The text is shown over the whole screen, HTML is allowed.
posX, posY
Coordinates of your tooltip. The values refer to the arrow of the tooltip.
tooltipWidth
Individual width of the tooltip.
bgcolor
"black" or "white". Background color of the tooltip / the intro page.
position
Position of the arrow. look at the config section of the tour.js file possible values, for example "TR" means top right.
text
Text of the tooltip / the intro page. HTML allowed! If no text is set, no tooltip or intro page is generated. Useful for changing the screen without disturbing noise.

Probleme

Ratet mal. IE8 läuft zwar, die Pfeile fehlen aber noch. Muss ich umbauen, irgendwann. Opera hat es nicht so mit dem Overlay, ist mir aber egal, passt schon. Ansonsten bitte testen und hier in den Kommentaren über Fehler berichten.

Issues

Guess what. The script runs in IE8, but the arrows are not shown yet. Have to rebuild the tooltip HTML, sometime. Opera has some issues with the overlay not displaying perfect, but who cares. Please download the script, test it and report other issues in the comments.

Download or fork (GitHub)

Changelog

28.01.2011
fixed: screen change in last slide wasn`t shown
28.01.2011
Put script on GitHub
Nach oben