Websites für Retina Displays

Und wieder ist es neue Hardware, die eine neue Herausforderung für meine Arbeit darstellt… kein File Format (z.B. SVG), keine neue Software (ich liebe Layer Cake), Browser oder Online Service: Das neue iPad und die Macbooks mit Retina Display sind im Begriff eine ähnliche Triebkraft zu entwickeln wie das iPhone 3 vor nicht allzu langer Zeit.

Im ersten Moment ist man hingerissen von der Schärfe und Qualität der Textdarstellung – dann stellt man vielleicht fest, dass die bisher verwendeten Schriften auf den Geräten klobig und alles andere als elegant aussehen. Mag vielleicht den Flyeralam-Designer wenig kümmern… ich schliesse mich jedoch der Beurteilung von Oliver Reichenstein an und verstehe die Idee der Responsive Typography.

Text ist kein Problem – bis auf das Texten selbst

Nun ist die Textdarstellung auf den neuen Geräten für Website ja noch kein Problem – im Gegenteil: Alle Elemente, die man auf der Basis von Text darstellt sind in jedem Fall auch in Retina Auflösung brilliant und scharf.

Weg von Photoshop/PNG zu SVG oder anders gestalten?

Aber Websites bestehen auch aus grafischen Assets, Bildern und UI Elementen, die mit Hilfe von Photoshop „pixelperfect“ produziert werden. Für diese bietet HTML und CSS (bis heute ?) nur ein begrenztes Mass an automatisches Qualität-Update an.

Aus dem Kopf zusammengefasst sind das:

  • borders und border-radius
  • gradients
  • text- und box-shadow
  • opacity

Bereits bei multiple backgrounds hört der Spass auf und ich sehe eine ziemliche Herausforderung bei der Asset Produktion und Zusammenstellung von Sprites. Alle Formen und Illustrationen müssen als Vektoren (Photoshop: Formebenen) angelegt sein – denn selbst Vektor-Smart-Objects erweisen sich beim Auflösung anpassen als weniger smart, wie der Name vermuten lässt.

Doch – kann das die Zukunft sein? Zumal ich mir bewusst bin, dass die Welt auch ähnliche Geräte mit Android oder Windows bekommen wird. Da wäre es total kurzsichtig genau die beiden „iResolutions“ zu produzieren.

Ein Blick auf die Apple Website zeigt eine Möglichkeit auf, die zumindest für grafische Elemente funktionieren könnte. Bei genauerer Untersuchung der Hauptnavigation findet man zwei Sprite Dateien: Ein PNG in 72dpi und eine SVG Datei in gleicher Grösse… und wenn man mal die Seite zoomt (ich nehme nicht an, das Ihr bereits vor einem Retina Macbook sitzt), so bleibt der Text und das Apple Logo egal in welcher Zoomstufe sauber und scharf.

Eine Alternative wäre natürlich die Verwendung Text in Kombination mit eigenen Fonts – wobei man leider auf gestalterische Freiheiten verzichten muss. Der Glanz auf dem Apple Logo geht mit Text Effekten einfach nicht. Demnach fällt Text aus, sobald gestalterische Freiheit oder Flexibilität nötig ist.

Ich sehe die Notwendigkeit der Entwicklung einer leistungsfähigen und robusten Produktionskette für die Herausforderung der neuen Hardware. Responsive Design Beispiele beschäftigen sich mit bis heute nur mit der Skalierung „nach unten“. Vielleicht spielen Illustrator oder Fireworks wieder mit – oder es gibt intelligente Produktionsmaschinen wie Opacity.

Und wie bekommt man die Qualität bei Fotos und Bildern in den Griff? Keine Ahnung – „Smart Picture Objects“ auf dem Server?
<spo href=“my-perfect-picture.jpg“> :-)

Vielleicht bin ich demnächst schlauer…

Fazit

Die neue Hardware fordert eine neue Beurteilung des Rendering im Browser, Text, Grafik und Photos sehen nur – wie von Jony Ive versprochen – brilliant aus, wenn wir die richtige Qualität auch ausliefern.

Zu einem grossen Teil müssen wir bei der Gestaltung mitdenken. Die Produktionskette der letzten Jahr(zehnte) muss sich aber in jedem Fall ändern. Wie genau muss sich noch herausstellen.

Any ideas?

Das Retina-Problem für Publisher

Das neue iPad

Die Retina-Analogie Während einige Publisher noch an der digitalen Revolution knabbern und ihre Inhalte häppchenweise digitalisieren, kommt bereits die nächste Herausforderung Chance aus dem Hause Apple: das neue iPad. Hatten die beiden Vorgängermodelle, das iPad 1/2, noch eine Displayauflösung von  1024 … Weiterlesen

UX Adventskalender 2011 | Tag 12: Stroke iPad Magazin

In der besinnlichen Adventszeit besinnen wir uns auf schöne Ideen, praktische Gadgets, nützliche Software und einfach geniale User Experience.

Heute: ‚Stroke‚, ein Prototyp, welcher (neben unserem Lampenfieber Magazin) so ziemlich alle Möglichkeiten im Digitalen Publishing auf dem iPad aufzeigt:

iPad Magazin Lampenfieber – Erste Ausgabe jetzt live

Die erste Ausgabe des iPad Magazins Lampenfieber ist live im AppStore. Das Multimedia-iPad-Theater inszeniert das Thema „Was ist sexy“.

Entstanden ist das iPad Magazin im Markom Lab als Follow-Up von Ego-Now – ebenfalls einem Lab Projekt. In jenem Lab war innerhalb von 48 Stunden ein komplettes iPad Magazin enstanden. Design, Entwicklung, Content. Wir haben bewiesen – iPad Magazine erstellen können wir. Im Markom Lab stand dann der Content im Mittelpunkt. Ziel: Ein Konzept für ein iPad Magazin.

3905-lampenfieber.480x480-75-thumb-500x375-3904.jpg

In den vergangenen Wochen wurde das Konzept zur Realität. Mitarbeiter, Künstler, Friends and Family haben Inhalte beigesteuert – Texte, Bilder, Videos, Statements. Die Lampenfieber Redaktion hat in zahlreichen Nacht- und Wochenendschichten designt, geschrieben, lektoriert und Merchandise kreiert mit dem Ziel, das Magazin am Namics Camp zu präsentieren.

Die grosse Zitterpartie

Die Nacht vor der Präsentation. Unerträgliches Warten auf die Freigabe im AppStore. Denis hat mittlerweile ein Standing bei Apple erarbeitet. Er kriegt Emails von echten Apple Mitarbeitern und nicht nur automatische Email Notifikationen. Kurz vor 23:00 Uhr dann die erlösende Nachricht: „App ready for Sale“.

Um was geht’s in Lampenfieber

Lampenfieber ist weder Kunden- noch Mitarbeiter Magazin. Es ist ein Multimedia-iPad-Theater, das dem Zuschauer in verschiedenen Räumen einen Blick hinter die Kulissen gewährt. Hinter die Kulissen eines bestimmten Themas. Diese Ausgabe inszeniert das Thema „Was ist sexy“ auf eine ganz eigene Art.

Grosser Dank geht an das Redaktionsteam und die Helfer, die unermüdlich in Nachtschichten, Wochenend-App-Store Einsätzen und viel handwerklichem Geschick zur ersten Ausgabe beigetragen haben: Patrick, Nicole, Jana, Denis, Alex, Lisa, Nina, Jean-Claude. Das war Rock’n’Roll!!

Mach mit
Die nächste Ausgabe wird PUNK. Wir suchen weitere Talente, Punks und Künstler in Text, Bild oder Video, die mit viel Lampenfieber an unserer nächsten Ausgabe mitarbeiten möchten. Ein kurzes Email an die Redaktion genügt (redaktion(at)lampenfieber(dot)tv).

Stay tuned

Und jetzt ab: Magazin downloaden im App Store, auf Twitter folgen und die Website im Auge behalten oder gerne Facebook Fan werden. Oder lieber mitmachen?

Vortrag: Digital Publishing rocks

Auf Einladung von Digicomp durften Raphael und ich unsere Erfahrungen bzgl. Digital Publishing, insbesondere auf Mobile Devices/Tablets vorstellen.

3641-5833369238_c9a9db3076_z-thumb-500x281-3640.jpg

Ausgangslage war, dass weltweit bereits über 25 Mio iPads verkauft wurden (und die Konkurrenz schläft nicht) – Mobile ist somit Lifestyle und das iPad dient als Türöffner für den Mauerfall im Publishing – Von der digitalen Ausgabe des Geschäftsberichts, Katalogen über Kundenmagazine bis hin zu komplexeren Anwendungen für Kunden oder Mitarbeiter z.B. im Aussendienst.
Für Unternehmen entsteht somit die Gelegenheit:
1) die eigene Marke zu stärken und
2) die Verbreitung der eigenen Publikationen zu erhöhen

Der Condé Nast Verlag hat es zum Beispiel geschafft, die Markenwerte des 90-jährigen New Yorker „excellence, polish, depth“ auf das digitale Format zu transferieren. Das Look&Feel der Print Publikation wurde zwar weitgehend beibehalten, die Comicsektion und die Bildreportagen, zwei der Hauptgründe der New Yorker-Leser, die Zeitschrift am Kiosk zu ergattern, wurden konzeptionell und redaktionell dem neuen Medium angepasst.

Der Verlag hat damit die Zukunftsfähigkeit seiner Flagship-Publikation dank globaler, digitaler Verbreitung und zeitgemässer Ansprache einer neuen, teils jüngeren Zielgruppe sichergestellt. Den Trend zu erkennen ist zwar lobenswert, purer Aktionismus sollte aber vermieden werden. Print ist nicht online und das Publikum hat hohe Erwartungen an intuitive Bedienungskonzepte.

Ran an den Case…

Folgende Elemente spielen bei der Konzeption eine zentrale Rolle:
Storytelling: Welche Geschichte kann ich erzählen, um meinem Publikum einen Mehrwert zu bieten?
Dramaturgie: Wie führe ich mein Publikum und wie erzähle ich meine Geschichte?
Prototyping: Sollte als Basis zur Darstellung der Idee, Überprüfung der Konzepte, Überzeugung des Managements und als Basis für den Technologie-Entscheid dienen.

Von der Konzeption und Art Direction bis zur Verbreitung des Tablet-Magazins ist es nicht weit. Anbieter wie Adobe, Mag+ oder Woodwing offerieren Tools, die Adobe InDesign als zentrale Schaltzentrale benutzen. Dies erlaubt eine Übernahme der bisherigen Druckdaten, eine effiziente Designanpassung, Weiterentwicklung um Navigationspfade und beispielsweise Multimedia Elemente, aber ebenso die Veröffentlichung der App. Die einfachsten Lizenzmodelle bewegen sich zwischen CHF 3’000.- und CHF 10’000.- pro Jahr.

Da punktet die Umsetzung in HTML5 vergleichsweise, wo keine direkten Lizenzkosten anfallen. Smartphones und Tablets sind mit Webbrowsern ausgestattet, welche die Technologie unterstützen. Eine Umsetzung in HTML5 kann somit auf allen verschiedenen Endgeräten eingesetzt werden.


Best Practice Beispiele

Wie zur Zeit mit Inhalten und Geschichten für verschiedene Zielgruppen und mit verschiedenen Zielen jongliert wird kann am Beispiel der folgenden Publikationen illustriert werden:
The New Yorker
Wired Magazin
Red Bulletin
Letter to Jane
ProfiPhoto
Vontobel Blue
Liberate Eden
Flipboard
Zite

iPad publishing bei Namics

Am 07. Dezember gabs ein Kreationsmeeting der besonderen Art bei Namics.
Denis und Jana stellen ihre Erfahrungen im Umgang mit der Erstellung von iPad Magazinen vor.

Das Namics-Designer Team hört interessiert zu und experimentiert eifrig. Die neuen Möglichkeiten machen echt Spass: So lassen sich tolle, interaktive Magazine, Broschüren und Geschäftsberichte effizient erstellen. Innerhalb von kürzester Zeit sind einige interessante Ansätze entstanden.

2854-Namics-iPad-workshop.jpg

Ich glaube, die Designer sind heiss, jetzt brauchen wir noch viele Projekte dazu.
Tausend Dank an Denis und Jana – das ist erst der Anfang, da bin ich mir sicher ;-)

Wir sind gespannt!

iPad und Co. eröffnen neue Chancen am Point of Sale

Tablet PCs gibt es ja eigentlich schon ziemlich lange. Das iPad von Apple schaffte es den Markt neu zu beleben, so dass Unternehmen zurzeit vermehrt mit der Evaluation neuer Anwendungsmöglichkeiten reagieren.

2552-ipad-Enterprise-thumb-500x682-2551.jpg

Welche Chancen ergeben sich aus der neuen „Gerätekategorie“ iPad im eigenen Unternehmen?

  1. Externe iPad Applikationen
    Externe iPad Applikationen sind grundsätzlich für jedermann im offiziellen App Store von Apple zu finden. Die Vielfalt an Applikationen ist bereits sehr gross und reicht von E-Shops, Games, Zeitschriften usw.
    Je höher der Kontextfit ist, desto erfolgreicher wird m.e. die Applikation sein. Es gilt den funktionellen Gap zu identifizieren, der zwischen Smartphone und Notebook besteht, um heraus finden, welche spezielle User Experience ein Benutzer mit dem iPad erleben kann. Dabei ist zu beachten, dass das iPad primär ein „Konsumgerät“ von Inhalten ist (hoher Multimedia-Anteil) und nur sekundär der Kommunikation dient. Oft zitierter Einsatz des iPads ist die Nutzung als ergänzenden Informations-Kanal zum TV: „Mal schnell nachschauen, was über den Film in Wikipedia geschrieben wird“.

    Eine noch spannendere Dimension scheint sich momentan im im Bereich der internen „Enterprise-Applikationen“ zu entwickeln.

  2. Interne iPad Applikationen
    Interne Applikationen werden im Gegensatz zu externen Applikationen speziell für die Zielgruppe „eigene Mitarbeiter“ im Unternehmen erstellt und auf internen iPads ausgerollt. Anwendungsszenarien sind oft Effizienz getrieben (z.B. Prozessunterstützung). Applikationen können dabei sowohl Kommunikations- und Informationscharakter, z.B. für Management Reportings haben und müssen dabei nicht zwingend über native Applikationen realisiert werden.

    Neben dem rein internen Einsatz von iPads durch Mitarbeiter ergeben sich im B2C, an der Schnittstelle zu den Kunden neue Chancen am Point of Sale. Einzelne Unternehmen (z.B. Mercedes-Benz, ) sind bereits auf diesen Zug aufgesprungen. Weitere folgen.

    Wie funktioniert das genau? In Kundengesprächen benötigen Verkaufsberater möglichst einfachen und schnellen Zugriff auf Informationen. Dies können Kataloge, Produktbilder, Produktdetails aber auch Preislisten oder Rabatt-Konditionen sein. Darüber hinaus ist ein Verkaufsprozess oft auf weitere Hilfsmittel wie Taschenrechner, elektronische Preisabfragen, Marktentwicklungen, Informationen zu offenen Lagerbeständen etc. angewiesen. Der kritische Erfolgsfaktor im Gespräch ist Geschwindigkeit, beispielsweise eine Preisabfrage muss sehr schnell gehen. Das besondere stellt die Auflösung der typischen Desk-Situation dar. Das „Halten“ des iPads macht den Kundenberater noch ortsunabhängiger, das Gerät kann wie in einem Dialog hin und her gereicht werden. Abklärungen und Dateneingabe können noch besser organisch und in Echtzeit gehandelt werden. Die Eleganz und Werthaftigkeit des Gerätes unterstützt den Verkaufsprozess.

    Ein Tablet PC wie das iPad schafft es also noch besser, Informationsquellen und Tools vom Ort unabhängig bedienbar machen. Darüber hinaus können z.B. generierte Preisberechnungen oder Produktkataloge fast zeitgleich an den Kunden übermittelt werden, z.B. via E-Mail. Auch Anbindungen an ERP- und CRM Systeme sind auf sichere Weise realisierbar.

Bezogen auf die eigene Unternehmung gilt es also genau zu überlegen, welche bestehenden (oder gar neuen) Services sich über diesen Kanal sinnvollerweise ergeben. Hier fallen mir bereits einige Themen ein:

  • Kundenberater im Versicherungsumfeld: Prämienberechnungen und Vertragsauskunft bei Kundenbesuchen
  • Mobiler Produktkatalog für Verkaufsberater (door-to-door selling )
  • Leasing- und Kreditberechnungen für Verkaufsberater
  • Ärzte: Erklärung von Krankheitsbildern (Krankheitsverlauf)
  • Spitäler: Patientenakten

Lassen sich auch Ihre Services gewinnbringend auf dem iPad einsetzen?

E-Commerce will vermarktet werden – aber wie? (Internet-Briefing-Vortrag)

Eines ist klar: Wenn ich die Zauberformel für E-Commerce-Vermarktung gefunden hab, arbeite ich nur noch aus Spass und zum Zeitvertreib. Momentan bin ich immer noch auf der Suche nach dem Grahl. Mein Zwischenergebnis auf diesem Weg habe ich am Mittwoch auf dem Internet Briefing Bern vorgestellt.

1789-Modell-thumb-500x228-1788.png

Das Thema ist nicht neu, aber das was sich tut schon
Natürlich beginnt der Vortrag mit Bannern, stellt aber die Forderung auf, dass es bei Banner nicht reicht, sich nette Animationen auszudenken. Spass, Interaktion und Mehrwert sind viel mehr die Faktoren, die man berücksichtigen sollte, um nicht im allgemeinen „Sumpf“ unterzugehen – oder „ausgeblendet“ zu werden.

Facebook ist wiedermal anders als die anderen
Mit den Facebook Ads hat die Plattform eine Art Adwords geschaffen, die aber auch mit Bildern funktionieren. Interessant ist aber v.a. die Performance dieser Werbeform: Durch Targeting und die „Unverbrauchtheit“ der Werbeform erzielt man hier (noch) überzeugende CPCs und damit eine hohe Werbeeffizient. Und wenn man sich vorstellt, dass fast jeder 3. Schweizer auf Facebook registriert ist, wirds für alle Werber spannend.

Weiter gehts mit Bewegtbild und Video Ads, auch keine neue Themen, aber Mittel, die immer besser funktionieren. Über eine Kurzsequenz lassen sich Emotionen leichter hervorrufen und „Stories“ erzählen. Und: Die Plattformen sind ein Stück schlauer geworden, wie sie mit Video Ads umgehen sollen und wie sie diese in ihre Seiten einbinden können.

Und dann kommen Mobile, iPad und Social Media
Das sind die „Newcomer“ im Marketing-Mix. Eine iPad App oder noch besser: ein iPad Shop (wie bspw. Gilt) sind per se schon Vermarktung, weil man damit (noch) Aufmerksamkeit erregen und sich differenzieren kann. Und abgesehen davon: Man kann einfach einm faszinierendes Shop-Erlebnis kreiieren, wie der Gilt-Shop auf dem iPad zeigt. Als spezielle Art der (viralen) Vermarktung darf man selbstverständlich das Thema Social Commerce und Social Media nicht auslassen. Ganz zu schweigen vom Potenzial das mobile Anwendungen nach wie vor bringen – nicht zuletzt durch Location Based Services, Mobile Shopping oder Scanning Services. Im Grunde ist das auch die Medienbrücke, die ein geschlossenes Erlebnis vom Home-Shopping bis zum Einkauf im Laden ermöglicht. Mehr dazu im Vortrag.

Neben diesen Themen ging es auch um die „Neue Normalität“ (amazon verkaufte im Dezember 2009 mehr eBooks als physische Bücher) und eine Budgetplanung, die sich mit dieser neuen Realität deckt. Es ging um viele Beispiele und: um Inspiration.

Die anschliessende Diskussion hat gezeigt, dass das Thema nach wie vor hoch-spannend, emotional und oft auch sehr subjektiv ist. Wenn wir akzeptieren, dass die 20-Minuten von Seite 1-3 Werbung zeigt, heisst das noch lange nicht, dass wir im Internet akzeptieren, dass vor einem Videobeitrag eine Spot kommt.

Laden Sie sich die

Internet-Briefing_Namics-Vortrag_E-Commerce-Vermarktung_20100602_v1-0_handout.pdf

herunter und sagen mir Ihre Erfahrung oder Meinung zum Thema. Übrigens: Kürzlich kam der neue „E-Commerce-Report 2010“ für die Schweiz heraus, der spannende Inputs auch zu diesem Thema liefert.