Adobe hat heute Nacht zum zweiten Mal für eine Stunde die Tore für eine Registrierung beim Projekt Browser Labs geöffnet! Dank Twitter war ich sofort zur Stelle und kann Euch somit zeigen was sich dahinter verbirgt.
Eins ist jetzt schon sicher: Auf eine solche RIA hat so mancher Webdesigner (mich eingeschlossen) lange gewartet.

Adobe Browser Labs: Die Features

Es gibt zahlreiche Emulatoren, Websites, Anwendungen und Work-Arounds um die Darstellung einer Website in den verschiedenen Browserumgebungen zu testen. Genau an dieser Stelle setzt auch Adobe Browser Labs an und bietet Euch in Lightroom/Bridge ähnlichem Interface die Möglichkeit Eure Websites in verschiedenen Browsern zu testen. Zusätzlich kann der ausgewählte Browser jedoch auch auf einem bestimmten Betriebssystem simuliert werden. Aktuell bietet Browser Labs folgende Browsersimulationen:

• Firefox 3.0 (OS X)
• Firefox 3.0 (Windows XP)
• Firefox 2.0 (OS X)
• Firefox 2.0 (Windows XP)
• Internet Explorer 7.0 (Windows XP)
• Internet Explorer 6.0 (Windows XP)
• Safari 3.0 (OS X)

Adobe Browser Labs: Die Ansichten

Ihr habt die Wahl eure Seite auf drei verschiedene Wege zu testen. Zunächst wäre hier der "1-up-View". Am oberen Fensterrand gebt Ihr zunächst die URL der Seite ein und wählt anschließend die Browserumgebung. Im Hauptfenster wird nun die Seite so dargestellt wie sie eben auch im zuvor gewählten Browser ausschauen würde.
Der "2-up-View" splittet das Hauptfenster vertikal und ermöglicht so einen direkten Vergleich zweier Browser. Scrollt Ihr die Seite, so scrollen beide Ansichten parallel mit. Leider kann in keiner Ansicht bisher geklickt werden, was Tests bzgl. Interaktionen (noch ?) unmöglich machen. Sollte der Monitor zu klein sein, so kann die Ansicht von 75% bis 200% skaliert werden.
Als letztes steht Euch der Modus "Onion Skin Mode" zur Verfügung. Hier werden ebenfalls zwei Browser-Darstellungen miteinander verglichen, jedoch werden die Seiten semitransparent übereinander ausgerichtet. So werden ungewollte Abweichungen sofort bemerkt. Über einen Transparenz/Opazität-Regler kann die Deckkraft der beiden Ansichten gesteuert werden.

Adobe Browser Labs: Weitere Features

Sehr angenehm wird die Steuerung von Browser Labs mittels Hot Keys. Die wichtigsten Funktionen können per Tastatur angesteuert werden wodurch in wenigen Sekunden die Ansicht verändert und beurteilt werden kann.
Solltet Ihr Eure Websites nur in einigen der oben genannten Browsern testen wollen, so können darüber hinaus sogenannte Browser-Sets angelegt werden die nur bestimmte Testumgebungen beinhalten.

Fazit

Adobe Browser Labs überzeugt mich auf ganzer Linie. Neben einem schicken Interface und sehr zügiger Darstellung finde ich das Tool einfach nur saupraktisch. Verbesserungswürdig ist in jedem Fall der Browser-Support. Hier fehlen einige Browser (bsp. Chrome, IE8, Opera) komplett, was aber sicher nicht ewig der Fall sein dürfte.
Fast ebenso wichtig finde ich es, dass der Webdesigner die Seite auch benutzen kann. Eine nicht zerschossene Darstellung ist hier nur die halbe Miete.

Was meint Ihr?

Was haltet Ihr von Adobe Browser Labs? Habt Ihr selbst schon Tests machen können oder wartet Ihr auf die nächste Möglichkeit euch zu registrieren? In welchen Browsern testet Ihr Eure Sites für gewöhnlich?

Link: Adobe Browser Labs

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Gesponserter Artikel. Will man sich heutzutage über ein Produkt informieren, so ist die erste Anlaufstelle selbstverständlich das Web. Doch wer umfassende Testberichte, Bewertungen und Produktinformationen sucht, dem bleibt kaum etwas anderes übrig als dutzende Seiten zu besuchen und sich dort zu informieren.
Damit ist jetzt Schluss, denn Testfreaks (beta) agiert als Aggregator für Produktbeschreibungen, Bewertungen, Tests, Blog- und Foreneinträge. So sind alle Infos auf einer Seite gebündelt.

Woher kommen die Informationen auf Testfreaks.de?

Wie bereits erwähnt ist Testfreaks eine Art Aggregator für Produktinformationen. Dies bedeutet, dass die Seite Informationen zu einem Produkt von verschiedenen anderen Websites sammelt und gebündelt präsentiert. So muss der potenzielle Kunde nicht länger einzelne Seiten ansurfen, sondern bekommt alle Informationen auf Testfreaks dargestellt.

Freak Score und numerische Bewertungen

Neben einer klassischen Produktansicht fällt als erstes die sogenannte "Freak Score" ins Auge. Hier wird der Durchschnitt aller gesammelten Bewertungen numerisch angezeigt. Zusätzlich werden noch produktspezifische Infos dargestellt. Bei einem Videospiel erfährt man so beispielsweise die Bewertungen für Sound, Grafik, Gameplay usw.; bei einem technischen Gerät wird das Preis/Leistungs-Verhältnis, das Design, die Funktionalität etc. bewertet. Selbstverständlich wird auch angezeigt, aus welchen Quellen (Foreneinträge, Expertenbewertungen, User-Bewertungen) die Bewertungen errechnet wurden.

Preisvergleich

Unter den nett aufbereiteten Basis-Informationen findet man den Preisvergleich. Hier wird eine Reihe von Online-Shops und Auktionshäusern aufgelistet, sortiert nach dem günstigsten Preis. Mit einem Klick auf den entsprechenden Button gelangt man direkt zum Shop.
Leider werden die Preise hier ohne Versandkosten angezeigt. Dies ist zwar nicht besonders schlimm, kann aber bei fast identischen Preisen den entscheidenden Unterschied bedeuten.

Produktbeschreibungen

Als nächstes folgt der Eintrag aus dem Teastfreaks-internen "FreakWiki", sowie eine Herstellerbeschreibung. Dieser Bereich scheint noch im Aufbau zu sein - es darf nicht vergessen werden, dass die Seite sich im BETA-Stadium befindet - meistens finden sich hier noch keine Informationen.
Um einen Eintrag im Wiki zu verfassen muss man sich natürlich anmelden. Es ist zu hoffen, dass dies in Zukunft einige User tun. Wünschenswert wäre hier, dass die entsprechenden Felder ausgeblendet oder zumindest stark verkleinert werden, sofern kein Wiki-Eintrag oder eine Beschreibung vorliegt. So würde die Übersichtlichkeit gewahrt und wertvoller Platz eingespart.

Experten- und Benutzerbewertungen

Kommen wir zum Herzstück (zumindest für mich) von Testfreaks, den Benutzer- und Expertenbewertungen. Hier werden Produktberichte, Tests und Bewertungen gebündelt und ausführlich dargestellt. Als Quelle dienen bekannte Magazine und Webseiten aus dem jeweiligen Produktumfeld.
Die Expertenbewertungen sind meist fachlich kompetente und ausführliche Artikel von Fachautoren oder Redakteuren der entsprechenden Quellen. Die Benutzerkommentare stammen wie zu erwarten von Kunden, ähnlich dem von Amazon her bekannten Bewertungskonzept.
Neben gewöhnlichen Testberichten finden sich hier auch die separat angezeigten Forenbeiträge. Insbesondere die Foren-Einträge sind ein echtes Highlight der Seite - diese manuell über Google zu suchen würde ewig dauern.

Bilder und Videos

Wie es sich für eine moderne Website gehört findet man auch auf Testfreaks Bilder und Videos zu den Produkten. Auch hier lohnt sich die Suche, denn nicht nur die Bewertungen und Tests, sondern auch die Produktabbildungen werden aus anderen Seiten gesammelt und hier gebündelt angezeigt.
Wer also Screenshots und Produktabbildungen sucht, findet hier nicht wie bei Amazon und Co. nur eine Hand voll Bildchen, sondern massig Bild- und Videomaterial.

Interface

Das optische Erscheinungsbild ist sehr ansprechend. Mit klaren Linien und dezenten, aber nicht weniger effektvollen Details wirkt die gesamte Seite sehr durchdacht. Die Farbwahl ist gewagt, mir gefällt sich jedoch gut :) Auch das Logo spricht mich an. Es ist auffällig und einprägsam, beschreibt das Thema der Seite und wirkt sympatisch.
Leider sind einige Funktionen wie ausklappbare Zusatzinformationen oder die Möglichkeit, ein Produkt für einen späteren Vergleich zu Markieren, etwas versteckt. Ebenfalls könnte meiner Ansicht nach auf den einen oder anderen JavaScript-Effekt verzichtet werden. Lightbox, transparente Overlays etc. sind zwar nett, aber eine richtig schnelle Seite ist mir lieber! Im Großen und Ganzen stimmt hier jedoch alles.

Intelligente Suche

Hervorzuheben ist auf jeden Fall noch die "intelligente" Suchfunktion. Sobald der Besucher eine Eingabe im Suchfeld zu schreiben beginnt, werden entsprechende Ergebnisvorschläge unterbreitet. Das ist sehr lobenswert, aber nicht komplett unüblich. Richtig klasse finde ich, dass ein hovern der entsprechenden Ergebnisvorschläge ein weiteres Overlay-Fensterchen aktiviert, in welchem die wichtigsten Produktdetails komprimiert zusammengefasst werden. Klickt man in diesem Fenster nun auf einen entsprechenden Punkt, gelangt man erwartungsgemäß direkt zur Produktseite.
Die Suche funktioniert tadellos und erleichtert das Finden von Produkten und Testberichten erheblich.

Fazit

Dafür, dass Testfreaks sich noch in der Beta-Phase befindet funktioniert hier schon erstaunlich viel erstaunlich gut.
Die Seite bietet alle erdenklichen und wünschenswerten Informationen zu einem Produkt übersichtlich und kostenlos an. Das spart Zeit und führt zu umfassenderen Informationsmöglichkeiten für viele User. Ob Testfreaks wie bisher auf elektronische Artikel beschränkt bleibt, kann ich nicht sagen. Ein Blick auf die schon länger bestehende amerikanische Seite lässt jedoch vermuten, dass es bei Elektronikartikeln bleiben wird. Eine Testseite für alle Produkte wäre wohl auch etwas zu viel verlangt, wenngleich natürlich das absolute Highlight. Einzig die Performance ist definitiv noch verbesserungswürdig.

Dieser Testbericht wurde gesponsert. Selbstverständlich wurden alle Informationen von mir selbst verfasst und stellen meine persönliche, unbeeinflusste Meinung dar.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Photoshop Express ist eine Online-Version von Photoshop. Nach der gewohnten Registrierung stehen dem User kostenlos 2GB Webspace sowie eine überraschend umfangreiche Online Anwendung zur Verfügung. Neben Bildbearbeitungs-Tools finden sich Web 2.0-typische Features wie Bildergalerien und Schnittstellen zu Bilddatenbanken und Blogging-Software.

Grund genug sich die Beta-Version der vorliegende Applikation mal etwas genauer anzuschauen.

Der Plan

Um Euch die Funktionen von Photoshop-Express etwas genauer erklären zu können, zeige ich das Ganze hier mal anhand eines praktischen Beispiels. Ziel der Übung ist es ein Bild (direkt aus der Digicam) in den bereitgestellten Webspace hochzuladen, zu bearbeiten und im Blog zu veröffentlichen.

Account erstellen und Bilder uploaden

Um einen kostenlosen PX-Account zu erhalten meldet Ihr Euch einfach auf www.photoshop.com/express mit E-Mail und Passwort sowie einigen persönlichen Daten an, wartet auf die Bestätigungs-Mail und loggt Euch ein.

Die gesamte Benutzeroberfläche erinnert stark an Bridge oder Lightbox (Abb. 1). Mit einem Klick auf " Upload Photos" gelangt Ihr einen Screen weiter, klickt in der Bildmitte nochmals auf "Upload Photos", wählt im nun erscheinenden PopUp die lokal gespeicherten Bilder aus und bestätigt die Eingabe mit "Upload".

Bild bearbeiten

Nun ist es an der Zeit das soeben hochgeladene Bild unseren Bedürfnissen entsprechend anzupassen. Ich habe hier absichtlich ein Bild mit mäßiger Bildqualität und umso besserem Motiv ausgewählt um den Effekt zu verdeutlichen ;)

Das hochgeladene Bild erscheint im Hauptfenster und kann nun vorerst grob weiterverarbeitet werden. Eine Möglichkeit besteht darin per Mouse-Over ein HUD über dem Photo einzublenden (Abb. 2). Ein Klick auf "Photo Options" lässt ein Drop-Down-Menü erscheinen. Über dieses Menü drehe ich das Bild zweimal nach rechts. Die Funktion ist übrigens schön animiert.

Als nächstes wähle ich im gleichen Menü den Punkt "Edit Photo". Nach kurzer Ladezeit erscheint das Foto in groß und auf der linken Seite eine ganze Reihe von Bearbeitungswerkzeugen. Alle hier angebotenen Funktionen sollten Photoshop-Usern bekannt sein, daher gehe ich nicht weiter darauf ein. Interessant ist die Tatsache, dass alle Bearbeitungsmöglichkeiten weitestgehend automatisiert ablaufen. Klicken muss der User nur selten: Das Meiste passiert per Mouse-Over über Vorschaubildern.

Ich beschneide mein Bild (Crop & Rotate) erhöhe den Kontrast (Exposure) meines Bildes, wende einen Scharfzeichner (Sharpen) an und färbe abschließend alle Bildbereiche die nicht Grün sind schwarz-weiss ein (Pop Color). Bestätigt werden die Eingaben über den grünen Haken oben rechts (Abb. 3).

Absolutes Highlight ist hier, dass alle angewendeten Effekte (ähnlich wie SmartFilter im großen Bruder von PX) auch nach der Anwendung noch bearbeitet oder deaktiviert werden können.

Bild bereitstellen

Da die Retouche des Bildes an dieser Stelle abgeschlossen ist muss das Foto nur noch bereitgestellt werden. Ebenso schnell wie die Bearbeitung geht auch dies. Ein Klick auf "Save" unten rechts speichert die aktuellen Einstellungen und befördert mich zurück ins Hauptmenü. Dort kann über das bereits bekannte Drop-Down-Menü das Foto per E-Mail verschickt, verlinkt, eingebettet oder heruntergeladen werden.

Online Galerien erstellen und veröffentlichen

Wie in jedem zeitgemäßen Online-Programm können natürlich auch in Photoshop Express die Daten online verwaltet und verbreitet werden. Das Bild kann betitelt und mit weiteren Informationen versehen werden.
Ebenso können Bilder in Alben verteilt und bewertet werden. Die Alben selbst können veröffentlicht werden wobei dem User umfangreiche Präsentationsmöglichkeiten (sowohl 2D als auch 3D) zur Verfügung stehen.

Das hier rechts angezeigte Foto ist direkt vom Photoshop-Express-Webspace aus verlinkt.

Edit: Bildrechte werden an Adobe übertragen!

So eben habe ich erfahren (siehe Kommentare), dass der User die Bildrechte an allen in Photoshop-Express hochgeladenen Bildern verliert. Adobe selbst darf mit den Fotos quasi alles machen!

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.