Archiv des Autors: Claus Medvesek

Über Claus Medvesek

Mobile Fi(rs)t – das World Wide Web wird flügge.

Veröffentlicht am von , 1 Kommentar

Vorbei sind die Zeiten wo man für das Surfen noch auf einen Rechner mit Telefonleitung oder WLAN Verbindung angewiesen war. Gemäss einer Studie von Chitika (iOS passes Mac OS in Share of Web Traffic Propelled by Sales for Mobile and Tablet Devices) überstieg der Datenverkehr in den USA welches über iOS Geräte (also iPhone, iPad, etc.) erfolgte denjenigen von Mac OSX Systemen. Abgesehen davon, dass sich die Erhebung  auf Zahlen stützt, die über das Chitika Ad Network erfasst wurden, lässt sich ein klarer Trend erkennen. Das Mobile Internet wird immer populärer und dementsprechend werden sich auch die darin angebotenen Inhalte verändern. Zwei weitere Zahlen unterstreichen diesen Trend: Seit Ende 2012 gibt es mehr Mobiltelefone als Menschen (More Mobiles Than People Worldwide by the End of 2012). Samsung rechnet für 2012 ebenfalls damit, dass 29% aller Mobiltelefone Smartphones sein werden, das sind über 500 Millionen! (Samsungs says smartphones will make up 29 percent of the market in 2012).

Anbieter von Internetseiten stehen also vor zwei grossen Herausforderungen:

  • Sind meine Inhalte fit für mobiles Surfverhalten?
  • Ist meine Website fit für mobile Endgeräte?

Fit für mobiles Surfverhalten

© by photocase.de

Wann hat das Angebot einer Website Relevanz für einen Besucher? Zunächst sollte man das Angebot – ähnlich einer Mobile-App – anhand der drei typischen Anwendungsfälle hin überprüfen:

  • Ist es ein wiederkehrende Tätigkeit (Repetitive Now)
  • Kann man sich damit die Zeit vertreiben (Bored Now)
  • Kann man damit ein dringendes Problem lösen (Urgent Now)

Trifft das Angebot auf eine der drei Fälle zu, hat man bereits die wichtigste Funktion / Information ein Website herausgefiltert.

In der Realität ist dies für die Mehrheit der Websites eher unwahrscheinlich. Nichtsdestotrotz werden auch diese Seiten immer häufiger – wie bereits oben ausgeführt – über Smartphones und Tablets abgesurft. Eine inhaltliche und funktionale Neubewertung des Angebotes ist daher sicher angebracht. Folgende Methode hilft dabei die bestehenden Informationen und Funktionen zu priorisieren und für mobile Geräte attraktiver zu machen. Hierbei werden die Elemente einer bestehenden Site in vier Kategorien unterteilt:

  • Essentiell (engl. Mandatory)
  • Nützlich (engl. Useful)
  • Unterstützend (engl. Supplemental)
  • Belanglos (engl. Trivial)

Was ist essentiell?

Diese beantwortet sich am einfachsten, wenn man sich in die Rolle Benutzers versetzt und die Website nach primären Aspekten betrachtet. Weshalb nutze ich dieses Angebot? Was interessiert mich als erstes, wenn ich die Website besuche? Nach welchem Element suche ich zuerst? Mögliche Antworten wären z.B. die Fahrplanauskunft, aktuelle Störungsmeldungen, ein Eingabeformular, ein Login-Button, wenn ein Grossteil des Angebotes nur für registrierte Nutzer möglich ist.

Was ist nützlich?

Hier lassen sich alle Themen zusammenfassen, die als primäre Ziele und Bedürfnisse aus Sicht des Anbieters bezeichnet werden können. Was will ich dem Besucher “verkaufen”? Was soll er “mitnehmen”? Ein typisches Element ist der sogenannte Super-Conversion-Button mit dem der Besucher auf das primäre Angebot einer Website geführt werden soll. Aber auch die Hauptnavigation, ein Kampagnenelemente (Videos, Bilder), das Premiumangebote oder eine neue Funktion, die kommuniziert werden soll, gehören in diese Kategorie.

Was ist unterstützend?

Hierzu zählen vorwiegend Themen und Funktionen, die dem Nutzer zusätzlichen Mehrwert und Komfort bieten um weitere Inhalte zu erschliessen, sich zu orientieren oder Aktionen auszuführen, die als sekundär bezeichnet werden können. Dazu zählen zum einen die ganzen Social-Media-Dienste (Twitter, Facebook, Pinterest, etc.) aber auch ein Breadcrumb, der FatFooter, Sprachwahl oder die Suchfunktion. Bei komplexen Angebote, die nicht vom Besucher sofort erschlossen werden können, sind eine GuidedTour, Beschreibung das Angebotes, Claim, etc. eine unterstützende Massnahme und gehören daher in diese Kategorie.

Was ist belanglos?

Dazu gehören nun alle zweitrangigen Elemente, welche die Bedürfnisse und Sicht des Anbieters betreffen, bzw. von diesem kommuniziert werden müssen, welche nicht sein Kerngeschäft betreffen. Beispiel hierfür sind das Impressum, der Kontakt, Sitemap aber auch Teaser zu weiteren Themen oder Services.

Fit für mobile Endgeräte

Um eine Website fit für mobile Endgeräte zu machen gibt es zum einen technische Beschränkungen und Aspekte der Benutzerführung zu berücksichtigen. “Performance” heisst das Schlüsselwort für diese beiden Disziplinen. Ist die Performance auf der Seite hervorragend, wirkt sich dies auch positiv auf das Nutzererlebnis aus.

Entscheidend für eine gute Performance aus technischer Sicht ist zum einen die Datenübertragung. Um beispielsweise zu vermeiden, dass Bilder, die für die Darstellung auf einem Desktop oder Tablet optimiert sind, auch auf ein Smartphone mit kleiner Displaygrösse übertragen werden, verwendet man eine als Media Queries bezeichnete Methode, um je nach Gerätedisplay eine entsprechende grössenoptimierte Bilddatei zu übertragen. Dabei ist es nicht nur möglich, eine Bildateien zu übertragen, sondern auch eine entsprechende CSS-Datei. Dadurch ist es möglich Seitenlayout, Inhaltselemente und Schriftgrössen je nach Displaygrösse und Seitenverhältnis (Hoch- oder Querformat) entsprechend anzupassen. Beim Onlineauftritt vom “The Boston Globe” wird diese als “Responsive Web Design” bezeichnete Technik bereits erfolgreich und meiner Meinung nach auch überaus gelungen eingesetzt.

Für diese Methode gibt es bereits einige HTML/CSS-Frameworks, die sich in Layoutraster und unterstützte Bildschirmgrössen unterscheiden. Hier eine kleine unvollständige Auswahl:

  • BluCSS – Layout in drei Abstufungen:
    • 240 bis 469 Pixel dynamisches einspaltiges Raster
    • ab 470 bis 719 Pixel dynamisches 10spaltiges Raster
    • ab 720 bis 979 ein zentriertes fixes 705 Pixel Grid mit 10 Spalten
    • ab 980 Pixel ein zentriertes fixes 960 Pixel Grid mit 10 Spalten.
  • 1140CSSgrid – Layout in zwei Abstufungen
    • bis 769 Pixel ein dynamisches einspaltiges Layout
    • ab 770 Pixel bis 1140 Pixel dynamisches 12spaltiges Layout
    • ab 1140 Pixel ein zentriertes fixes 12paltiges Layout
  • 320andUp – Spaltenraster basierend auf Less Framework 4
    • Abstufungen für Grössen ab 320, 480, 600, 768, 992 and 1382px
    • HTML5 Boilerplate Integration
  • GoldenGridSystem – hochflexibles dynamisches Layoutraster von 240 bis 2540px
    • 240 bis 479 Pixel dynamisches 4spaltiges Raster
    • 480 bis 1869 Pixel dynamisches 8spaltiges Raster
    • ab 1870 Pixel dynamisches 16spaltiges Raster
  • FramlessGrid – flexibles Layoutraster mit fixen Spaltenbreiten von 48 Pixel
    • 320 bis 479 Pixel zentriertes fixes 4spaltiges Layout
    • 480 bis 599 Pixel zentriertes fixes 6spaltiges Layout
    • 600 bis 899 Pixel zentriertes fixes 8spaltiges Layout
    • 900 bis 1899 Pixel zentriertes fixes 12spaltiges Layout
    • ab 1900 Pixel zentriertes fixes 24spaltiges Layout
  • LessFramework – recht einfaches aber starres Layoutraster mit 68 Pixel breiten Spalten
  • Foundation – ein auf Rapid Prototyping ausgelegtes Framework für Responsive Design, das ebenfalls auf einen 12spaltigen Raster basiert
    • 320 bis 479 Pixel zentriertes fixes 3spaltiges Layout
    • 480 bis 767 Pixel zentriertes fixes 5spaltiges Layout
    • 768 bis 991 Pixel zentriertes fixes 8spaltiges Layout
    • ab 992 Pixel zentriertes fixes 12spaltiges Layout

Wo ist mein Cursor?

Ein weitere wichtiger Aspekt für die Gestaltung ergibt sich aus der Bedienung mobiler Geräte. Dieser werden anders als bei Notebook- oder Desktopgeräten nicht mittels Maus oder Trackpad gesteuert sondern über Berührung. Hierbei übernimmt der Finger die Funktion des Cursors, was folgende Implikationen auf das Interface-Design hat:

  1. Der “Cursor” ist nicht immer sichtbar, sondern nur dann, wenn der Finger das Display berührt womit die ansonsten beliebten Hovereffekte vom Desktop-Browsing nicht mehr funktionieren
  2. Der “Cursor” ist sehr „dick“ und unpräzise deshalb beträgt der optimale Klickbereich 6x9mm (ca. 30X44 Pixel/72dpi), was insbesondere bei Linklisten und Navigationspunkten zu berücksichtigen ist
  3. Der Finger sitzt an einer Hand, welche Inhalte unterhalb des Fingers verbergen. Daher sollten Inhalte, die bei Tap erscheinen nach Möglichkeit oberhalb des Tap-Punktes eingeblendet werden.

Hab’ ich bereits gedrückt?

Generell wird sehr häufig das Feedback von interaktiven Elementen vernachlässig. Bei der Mausbedienung ist das weniger bedeutsam, da man mechanische Klicken der Maus als Reaktion auf einen Klick erhält. Bei einem Touch-Interface fehlt diese Feedback jedoch und muss daher auf visuellem Wege erfolgen. Dies kann durch Verändern der Farbe erfolgen oder auch durch vertikales Versetzen des Elementes zum Beispiel um 2 Pixel nach unten.

Grundsätzlich führen diese Massnahmen auch zu einem besseren Nutzererlebnis beim Betrachten der Website auf einem Desktoprechner. Die Seiten sind übersichtlicher, attraktiver und funktionaler gestaltet. Die Informationen können besser aufgenommen und wiederverwendet werden, da die Integration von Social Media Elementen bereits berücksichtigt wurde. Schlussendlich wird auch die Konversion verbessert, da man bereits bei der Konzeption von wenig Raum (=Displaygrösse) ausgeht und man so gezwungen ist sich auf das Wesentlich zu konzentrieren.

“Mobile First“ – Besser Abspecken mit Design

View more PowerPoint from Namics AG
Weitere zu diesen Thema: Designkantine. Mobile Fi(rst). Namics.

Wunderkit – Projectmanagement goes Social

Veröffentlicht am von , Kommentar hinterlassen

Wunderkit ist das neueste (closed Beta) Baby des Berliner Startups 6Wunderkinder, welche mit der Wunderlist bereits eine überaus erfolgreiche Gratis-Todo-App auf den Markt gebracht und weltweit Lorbeeren dafür erhalten haben.

Mit Wunderkit soll dieses Erfolgsgeschichte nun fortgesetzt werden. Dieses mal als – wenn wundert’s – als Projektmanagement Tool. Neben dem typischen Wunderlist Interface, welche der Joy-of-Use Philosopie folgt, spielen vorwiegend soziale Elemente eine entscheidende Rolle.

Jedes in Wunderkit erstellte Projekt kann entweder öffentlich oder privat publiziert werden. Was soviel bedeutet, dass man sich entweder zu einem Projekt hinzufügen kann oder eingeladen werden muss.

In der aktuellen Beta verfügt Wunderkit allerdings neben dem Dashboard nur über zwei weitere Werkzeuge. Einer an der Wunderlist angelehnte Taskliste, welche kommentiert werden kann und einem Bereich für Notizen in den Memos und Besprechungsprotokolle, etc. abgelegt werden können.

Darüberhinaus wird natürlich auch die twittermässige Benachrichtigung zu Statusupdates und die von der Wunderlist bekannte Plattformunabhängigkeit (OSX, iOS, Androide, Windows) ein starkes Argument für mich sein, dieser App eine Chance zu geben. Allerdings fehlen sowohl zusätzliche Erweiterungen (z.B. eine Timeline, Budgetplanung etc. ) oder innovative Ansätze wie sie beispielsweise bei trello oder team.fm. Aber mal abwarten, was sich da noch tut.

Wer sich für Wunderkit interessiert kann sich auf deren Website registrieren lassen oder sich hier den Screencast ansehen:

Design. Kantine. Web Typography. Namics.

Veröffentlicht am von , 3 Kommentare

Das war sie nun, die erste Design Kantine mit dem Thema „Web Typography“.
Einen lieben Dank an all diejenigen, die diesmal mit dabei waren. Wer’s leider verpasst hat, kann sich hier noch die Präsentation anschauen – und natürlich all jene, die die URLs nicht so rasch in ihr iPhone tippen konnten.

Design. Kantine. Web Typography. Namics.

Download der Präsentation: Design. Kantine. Web Typografie. Namics. [pdf, 11,74 MB]

Nachtrag: Dankeschön an macgamper für Deinen Post zur Designkantine.

Also bis zum nächsten Mal, am 23. Juni, wenn es heisst: AR = Pimp my Reality.

The Man From Hollywood – CSS3 Typoanimation

Veröffentlicht am von , Kommentar hinterlassen

Ton an. Link klicken. Zurücklehnen. Zuschauen.

TheManFromHollywood.jpLOVxjCqMqm.jpg

Ein Filmtrailer a la Saul Bass, realisiert mit Webkit-CSS3 Elementen und ‚nem Schuss Javascript – daher leider nur für Safari und Chrome.
Beeindruckend, was mit CSS3 alles machbar wird. Nicht nur Schatten, sondern auch Drehung, Ebenen, Animation, etc.

Auch wenn es so ausschaut wie in Film, dies ist kein Flash oder HTML 5-Video sondern nur HTML und CSS. (Wer’s nicht glaubt, kann sich den Source-Code laden)

Quo vadis, Flash

Veröffentlicht am von , 4 Kommentare

1124-quovadis_flash.ByNutz21i3JL.jpg

Mit der Einführung des iPads folgt nach dem iPhone/iPod Touch eine weitere für den Massenmarkt bestimmt Plattform, welche keine Unterstützung der Flashtechnologie vorsieht. Bedeutet dies das Ende von Flash oder eine neue Herausforderung für Adobe.

Die Geschichte um den Niedergang von Flash ist fast so alt wie das Internet, bzw. seit Einführung von Netscapes Plugin-Technologie und dem damaligen Vorläufer FutureSplash Animator. Widerstand gab es von allen Seiten, es ist ungeeignet für Screenreader, Keine Unterstützung durch das W3C, unterschiedliche Performance auf verschiednen Plattformen, geringe Reichweite, umständliche Installation und vieles mehr. Andererseits hat Flash zweifelsohne einen grossen Anteil an der Verbreitung von Film, Ton und 3D-Inhalten und der Etablierung von Portalen wie Youtube und MySpace.

Wo steht Flash heute.
Flash ist laut Adobe auf 99% aller PCs installiert allerdings basiert diese Berechnung auf diejenigen Browser, die das Flash-Plugin unterstützen. Auch in Sachen Barrierefreiheit hat sich einiges getan, wenn dies auch mit mehr Aufwand im Vergleich zu HTML verbunden ist. In der Bannerwerbung ist Flash durch seine interaktiven und medialen Möglichkeiten beliebt. Die Verbreitung auch auf anderen Plattform ist enorm, Symbian, Android und sogar Konsolen wie die Xbox 360 und PS3 unterstützen mittlerweile die Flashtechnologie. einzige Ausnahme ist das iPhone OS von Apple.

Flash und das iPhone
Apple ist darauf Bedacht dem Nutzer das grösstmögliche Erlebnis zu bieten. Und dies nicht nur im Design der Hardware sondern auch bei der Bedienung der Software. Und dafür zahlt der Kunde auch gerne den deutlich höheren Preis als für vergleichbare Produkte. Apple lebt von dieser Marge daher ist es für Apple lebenswichtig dieses Versprechen dem Kunden gegenüber zu halten.

Nicht zuletzt darum ist Apple bemüht die Kontrolle über die auf dem iPhone OS ausgeführten Applikationen zu behalten. Mittels dem Distributionskanal über den iTunes App Store und dem oft kritisierten Genehmigungsprozess schafft es Apple nicht nur inhaltskritische Anwendungen (Stichwort Porno, Diskriminierung, etc.) die dem Image Apples schaden könnte, sondern auch schadhafte Software und Viren. Und die Nutzer sind insgeheim froh über diese Vorsorge.

Wenn daher nach Aussage von Apple das Flash-Plugin für die meisten Systemabstürze auf dem OSX-System verantwortlich ist, dann kann man nachvollziehen, warum sich Apple gegen Flash auf dem iPhone OS sperrt. Denn dies trübt in grossem Masse das Benutzererlebnis. Zudem ist Flash äusserst ressourcenhungrig und verkürzt die Laufzeit mobiler Geräte signifikant.

Kürzlich äusserte sich Steve Jobs während einer iPad-Demo beim Wall Street Journal deutlich und ablehnend gegenüber Flash auf dem iPad und zog einen Vergleich mit der Entrüstung gegenüber Apple, als bei der Einführung des iMac dieser ohne Diskettenlaufwerk ausgeliefert wurde und dennoch ein Verkaufsschlager wurde.

Adobe vs Apple
Klar das in dieser Situation Adobe wiederum bemüht ist über die Nutzer Druck auf Apple auszuüben um Flash auf die iPhone OS Plattform zu bringen. Auf dem Blog dragonfire ist unteren dem Titel „Who Can Do Something About Those Blue Boxes?“ hierzu eine interessante Übersicht zu finden, welche Szenarien möglich sind.

  1. Adobe würde gerne Flash für das iPhone OS freigeben, kann es aber nicht.
  2. Apple kann es, macht es aber nicht (aus den oben genannten Gründen)
  3. Die Verbraucher üben auf Apple Druck aus damit Flash implementiert wird, indem sie iPhone, iPad und iPod Touch boykottieren – aber das Gegenteil ist der Fall.
  4. Webseitenbetreiber werden bei ihr Angebot auf andere Technologien ausweichen und Flashinhalte aus ihrem Angebot entfernen.

Adobe verfolgt im Augenblick die Strategie #3 und ist bemüht die Nachteile von Flash zu widerlegen und bemüht sich intensiv um andere Plattformen wie Android, ChromeOS, Symbian etc.
Zu beobachten ist allerdings vielmehr die Tendenz vieler Anbieter auf andere Technologien zu setzen und sich unabhängig von der Flashplattform zu machen. Ihr Interesse und Bestreben liegt vor allem darin möglichst viele Konsumenten zu erreichen. Und aus diesem Blickwinkel betrachtet ist die wenig technikaffine aber konsumfreudige Zielgruppe der iPhone-, iPod- und iPad-Nutzer viel zu attraktiv als dass man sie nicht erreichen möchte.

Die Aussichten für Adobe sind so gesehen äusserst schlecht – zumindest in Hinblick auf Flash. Auch wenn der Rückhalt bei den Entwicklern enorm ist, wird die Zukunft über den Inhalt entschieden.

Dennoch hat gerade mit der Einführung des iPads und dem damit verbunden Umdenkungsprozess im Verlagswesen einen Entwicklung eingesetzt, welches ein grosses Potential für Adobe hat. Im Bereich Desktop-Publishing kommt man heutzutage nicht um Adobe herum. InDesign und InCopy sind defacto Standards für die Erstellung von Printmedien.

Mit Sicherheit hat Adobe bereits einen Plan B in der Hand. Dieser könnte so aussehen, dass Flash im Browser stirbt, Flash als Entwicklungsumgebung (Adobe Flex) weiter existieren und entwickelt wird. Es wird mit Sicherheit an einer Lösung, sprich Exportmöglichkeit gearbeitet, um aus der Flex-Entwicklungsumgebung eine entsprechende Ausgabe zu erzeugen, ähnlich dem angekündigten Nativ-App-Export aus Flash.

Umgekehrt wird es für Adobe auch immer aufwendiger und komplizierter die Entwicklung von Flash auf allen Plattformen hinsichtlich Performance und Funktionsumfang auf dem gleichen Niveau zu halten. Gerade die in jüngster Zeit hinzugekommenen Eingabemethoden und Sensoren, wie GPS, Accelerometer, Kamera, Multitouch, etc. erhöhen die Komplexität und damit die Fehleranfälligkeit des Systems Flash.

Flash ein Überbleibsel aus der Urzeit des Internets
So gesehen stellt sich die Frage, ob Flash überhaupt noch zeitgemäss ist und nicht ein Saurier aus der Kreidezeit des Internets ist und von weiterentwickelten Technologien wie AJAX, h.264 Codec und HTML 5 verdrängt wird.

Viele der damaligen Gründe von Flash wie Animationen, Interaktionsmöglichkeiten, Darstellung von Schrift, Film und Ton ist für die heutigen Browser eine Selbstverständlichkeit, wenn auch mit kleinen Unterschieden. Die Vorzüge sind bis auch wenigen Nischenanwendungen wie zum Beispiel für Augmented Reality Anwendungen verschwunden geblieben sind die Nachteile: schlechte Performance, hohe Prozessorauslastung, Sicherheitsrisiko, Barrierefreiheit und browseruntypisches Verhalten (z.B. Back-Button oder Reload).

Fazit
Adobe verfügt mit Sicherheit über genügend neue Technologien und Know-How um für die Zukunft die Werkzeuge zu liefern, die Content-Anbieter benötigen um für die neuen Net-Devices Inhalte und Dienstleistungen bereitzustellen. Ein verkrampftes Festhalten an Flash blockiert nicht nur Ressourcen sondern blockiert auch eine Kooperation mit Apple.