20 things I learned about browsers & the web

google browser book title

Mit “20 things I learned about browsers & the web” (deutsche Version) zeigt das Google Chrome Team nach “The Wilderness Downtown” in einem weiteren beeindruckenden Beispiel, was mit HTML5 alles möglich ist. Das interaktive “Guidebook” erklärt mit wunderschönen Illustrationen von Christoph Niemann in 20 Kapiteln die Technologien des Webs.

google browser book inhalt

google book html5 beispiel ip dns

ZEIT ONLINE optimiert Seite mit HTML5 für das iPad

zeit online logo

Wenn man über das Thema “Entwicklung für das iPad” nachdenkt, stößt man zwangsläufig auf die Frage “native App oder Web-App?”. ZEIT ONLINE zeigt jetzt, dass es nicht immer nur eine Frage von “entweder … oder” ist. Anstatt nur auf das viel gepriesene Allheilmittel “eigene (Nachrichten-)App” zu setzen, hat man erkannt, dass der Browser an sich schon eine “Killer-App” sein kann und hat sich in der Online-Sparte der Zeitung Gedanken gemacht, wie man das bestehende Online-Angebot optimieren kann. Mit Hilfe von Oliver Reichensteins Agentur Information Architects, die auch schon für den ZEIT-Relaunch im Herbst 2009 verantwortlich waren, wurde zeit.de nun speziell für das iPad und andere Tablets optimiert.
In der Redaktion hätte man schon beim Testen der ersten iPads relativ schnell gemerkt, dass es zwar sehr viel Spaß macht mit dem Gerät zu surfen, aber auch, dass das Bedienungskonzept der bestehenden Seite über den Touchscreen gesteuert schnell an Grenzen stößt. Ziel der Optimierung war es, eine device-unabhängie Website bereit zu stellen und durch Anpassung am Design und „striktere Reduktion auf das Wesentliche“ der Darstellung und Nutzung des Geräts gerecht zu werden. Dass die Seite nicht 1 zu 1 portiert werden konnte, war sehr schnell klar, da sich das Navigationskonzept zu stark von herkömmlichen Websites unterscheidet. Dadurch ergab sich die Chance, ein wirklich auf das Gerät abgestimmtes Konzept zu entwicklen. Zu den Neuerungen zählen z.B. dass Fotostrecken mit dunklem statt weißem Hintergrund angezeigt werden und mit der bekannten “Wisch”-Geste durchgeblättert werden können. Bei der gesamten Entwicklung sollte zudem beachtet werden, dass die Redakteure bei ihrer Arbeit nicht verschiedene Ausagebmedien (mobile Website, Apps, Desktop-Website usw.) beachten müssen.

Für verschiedene Darstellungen optimierte Websites sind im Prinzip nichts Neues, trotzdem ist ZEIT ONLINE eine der ersten großen Content- und News-Seiten, die mit HTML5 für die Touch-Steuerung über die Finger angepasst wurde. Den Weg der Optimierung geht man schon etwas länger, so hat man sich schon vor einiger Zeit dazu entschieden, auf Flash da zu verzichten wo es geht. Infografiken und Video-Inhalte wurden also beispielsweise schon über HTML5 ausgeliefert.

Schon der Relaunch 2009 war mein absolutes Redesign-Hightlicht und gefällt mir immer noch außerordentlich gut. Meiner Meinung nach gehört ZEIT ONLINE zu den besten Nachrichten-Seiten im www und zeigt der Konkurrenz nun erneut, wie man es richtig macht.
Auch die generelle Resonanz auf Twitter und co ist außerordentlich positiv aus und lässt sich sehr schön mit Hilfe der Twitter-Suche verfolgen.
Jeder, der ein iPad griffbereit hat, sollte es sich jetzt auf jeden Fall schnappen und ein bisschen auf zeit.de rum surfen, es lohnt sich! Screenshots von ein paar Neuerungen habe ich in Genauer hingeschaut: ZEIT ONLINE auf dem iPad bereitgestellt.

Good morning Europe. Make sure you don’t miss our first iPad news project: Zeit Online in tablet specific HTML5: http://bit.ly/d0WSN2less than a minute ago via web

Neben ein paar interessanten Infos, gibt es bei iA auch ein kurzes Interview mit Wolfgang Blau, dem Chefredakteur von ZEIT ONLINE.

Das Video gibt es auch in englischer Sprache

CSS3 for Web Designers

css3 for web designers

Es ist soweit, seit vorgestern ist bei A Book Apart endlich das Buch CSS3 for Web Designers verfügbar. Nachdem “HTML5 for Web Designers” schon so gut angenommen wurde, bin ich echt gespannt, wie nun das “Schwesterthema” CSS behandelt wird.
Dan Cederholm (Gründer von SimpleBits) schreibt auf 133 Seiten sehr viel über CSS3 wie z.B. Schatten, runde Ecken, Verläufe und Web Fonts. Wer sich noch nicht ganz sicher ist, der kann auf A List Apart in Understanding CSS3 Transitions ein paar Auszüge aus dem 2. Kapitel zur Probe lesen.
Wer das “HTML5 for Web Designers” noch nicht sein Eigen nennt, dem lege ich hier das Bundle ganz nahe. Zur Zeit bekommt man beide Bücher im Packet vergünstigt, als E-Book-Version z.B. für nur $15 (statt je 9$). Das E-Book gibt es in den Formaten PDF, ePub und mobi.

Ich habe leider noch nicht alles lesen können. Sobald ich etwas weiter bin, werde ich hier in einem neuen Artikel noch mal ausführlicher auf den Inhalt eingehen.

Influencers

Der Trailer zu der sehenswerten Dokumentation Influencers geistert ja schon eine Weile durchs Netz, seit ein paar Tagen gibt es nun die Doku on voller Länge zu sehen. Ich bin leider erst jetzt dazu gekommen sie mir anzuschauen und muss euch unbedingt empfehlen, euch die 14 Minuten Zeit zu nehmen.

INFLUENCERS is a short documentary that explores what it means to be an influencer and how trends and creativity become contagious today in music, fashion and entertainment.
The film attempts to understand the essence of influence, what makes a person influential without taking a statistical or metric approach.
Written and Directed by Paul Rojanathara and Davis Johnson, the film is a Polaroid snapshot of New York influential creatives (advertising, design, fashion and entertainment) who are shaping today’s pop culture.
“Influencers” belongs to the new generation of short films, webdocs, which combine the documentary style and the online experience.

Webbasierte Feedback-Tools für Designer

Wahrscheinlich kennt jeder das folgende Problem. Es ist immer wieder eine große Herausforderung, Feedback zu einem Design mit Kunden oder im eigenen Team zu besprechen, wenn man sich nicht persönlich gegenübersitzt und das ganze womöglich auch noch per Email oder Chat passiert. Die Versuche, Anmerkungen und Vorschläge zu beschreiben, enden oft in Missverständnissen, seitenlangen Erklärungen oder duzenden Frage-Antwort-Emails.
Tools, die den ganzen Prozess über den Browser abbilden können und eine Zusammenarbeit online ermöglichen, kommen da gerade recht. Mittlerweile gibt es sehr viele brauchbare webbasierte Tools, die genau darauf spezialisiert sind. Die Spanne von kleinen einfachen bis hin zu komplexen Tools, die Video-Einbindung anbieten, Einstellungen über öffentliche und private Diskussionen ermöglichen, Voice-Kommunikation direkt integriert haben und alle gängigen Datei-Formate unterstützen, ist allerdings riesig.
Ich habe mir 11 dieser Tools genauer angeschaut und eine Liste mit kostenlosen und -pflichtigen Angeboten zusammen gestellt. Fast alle Tools bieten eine kostenlose Accounts oder Trail-Version zum Testen an, so dass sich jeder auch selbst einen Eindruck verschaffen kann.

Bounce

bounce-app Bounce ist eine sehr einfach gehaltene Applikation, die es ermöglicht, online Ideen und Feedback auszutauschen. Sie lässt sich sehr intuitiv bedienen und verzichtet auf großen Schnickschnack. Von einer beliebigen URL wird automatisch ein Screenshot erstellt, auf dem dann Notizen untergebracht werden können. Über einen Link lassen sich weitere Teilnehmer einladen, um gemeinsam zu arbeiten. Alles läuft ohne Registrierung ab und ist zudem vollkommen kostenlos.

Der kleine Bruder TinyBounce wurde für den 10k Apart Contest (Dateigröße für Bilder, Skripte und MarkUp maximal 10kb) erstellt und beeindruckt trotz seiner Größe mit noch einfacherer Handhabung.


Notable

notable feedback

Notable ist im Gegensatz zu Bounce ein sehr umfangreiches Tool, das gleich vier Möglichkeiten bietet, Inhalte zur Verfügung zu stellen: JPG hochladen, eine URL eingeben, über ein Firefox Plugin direkt auf einer Website direkt kommentieren (so können auch eingeloggte Zustände und Code diskutiert werden) oder über iPhone/iPod.
Zudem bietet Notable eine Menge an Einstellungen und Features (Share, Archiv, Projekte, Website Flows, Tracking von Änderungen), die in der Tour ausführlich beschrieben werden.

Entsprechend der vielen Möglichkeiten, geht es preislich leider erst ab $24/Monat für einen Basis-Account los. Der kostenlose Account für maximal drei Nutzer ist für erste Versuche allerdings völlig ausreichend. Außerdem darf man zustäzlich alle kostenpflichtigen Angebote 30 Tage lang testen.


Den ganzen Artikel lesen

Usability von Drop-Down Menüs

Das Navigationskonzept gehört mit zu den Herzstücken einer Website und trägt maßgeblich zum Eindruck beim Nutzer bei. Sollte es nicht durchdacht sein oder nicht richtig funktionieren, haut die ganze Seite nicht hin und führt schnell zu frustrierten Besuchern. Die Basis des Navigationskonzepts ist die Menüart. Bei einem aktuellen Projekt habe ich mir lange Gedanken dazu gemacht und habe mich dann letztendlich für ein Drop-Down Menü entschieden.
Drop-Down Menüs sind eine große Herausforderung und polarisieren sehr stark. Die Einen lieben sie, da sie sehr schick aussehen und Platz sparen, die Anderen hassen sie, weil man sehr viel falsch machen kann, sie oft nicht richtig funktionieren und schon kleine Fehler große Auswirkungen haben. Deshalb sollte man sich, wenn man sich für ein Menü dieser Art entscheidet, gründlich damit beschäftigen und Tipps beachten. Ich habe ein paar Punkte gesammelt, die helfen sollen, die richtigen Anforderungen zu erkennen und ein möglichst benutzerfreundliches Menü zu konzepieren.

Wahrscheinlich eine der ersten Fragen: Sollte das Drop-Down Menüs über Klicks oder über den Hover-Status gesteuert werden?

  • Hover

    microsoft drop downDas Menü wird geöffnet, wenn der User mit dem Mauszeiger über einen Menüpunkt fährt. Hier ist besonders das Timing wichtig, denn versehentliches Öffnen durch kurzes Berühren oder stotternde Animationen können ziemlich nerven. Vom Design-Standpunkt her gesehen vielleicht die etwas bessere Wahl.
    Prominentes Beispiel: microsoft.de, wo das Menü direkt beim Berühren öffnet.

  • Click

    google drop down Die bessere Usability erreicht man über die Click-Methode. Bei dieser Methode wird das Menü erst geöffnet, wenn der User einen Menüpunkt wirklich anklickt. Es bleibt solange geöffnet, bis eine weitere Aktion ausgeführt wird, z.B. wenn der User einen anderen oder den gleichen Menüpunkt erneut oder außerhalb des Flyouts klickt. Der Vorteil dieser Methode ist, dass der Cursor nicht permanent auf der Menü-Fläche liegen muss und ein versehentliches Öffnen durch den erforderlichen Klick vermieden wird.
    Wichtig ist eine unterschiedliche Kennzeichnung von Punkten, die ausgeklappt werden können und von denen, die direkt als Link zu einer Unterseite führen. Dafür bietet sich ein kleiner Pfeil an, der bereits gelernt sein sollte.
    Gerade bei Touchscreens sollte diese Option gewählt werden, da der hover-Status, wie in hover ist tot, lange lebe active beschrieben, mit dem “temporären Finger” nicht abgebildet werden kann.
    Prominentes Beispiel: google.de, wo auf der Sucheseite weitere Angebote über einen Klick erreicht werden können.

Warum Drop-Down?

  • Komplexe Navigationstrukturen können vor dem User “versteckt” werden. So kann eine besser Übersicht geschaffen werden und …
  • … zusätzlich lässt sich viel Platz sparen, der für andere Inhalte genutzt werden kann.
  • Die Hierarchie einer Navigation über mehrere Ebenen kann sehr gut visualisiert und vermittelt werden.
  • In Mega Drop-Down Menüs lassen sich erweiterte Informationen und sogar Module unterbringen, die nicht in ein normales Menü passen würden.
  • Quasi jeder ist durch Betriebssysteme und andere Software mit der Mechanik von Drop-Down Menüs vertraut und hat sich daran gewöhnt.
  • Drop-Down Menüs können sehr gut als Filter (z.B. Kategorien in Blogs oder Produktgruppen) eingesetzt werden.

Tipps: Was man beachten sollte.

  • Bei der Hover-Methode: Delay beim Berühren und beim Schließenvorgang, ca. 0,5 Sekunden.
  • Drop-Down Menüs mit mehr als zwei Ebenen werden unübersichtlich und sollten vermieden werden.
  • Tooltips auf der ersten Ebene deaktivieren.
  • Hover-Effekte sind ist extrem wichtig und sollten auf allen Ebenen vorhanden sein.
  • Flüssige Abläufe und Animationen sind eine Grundvorraussetzung für ein gutes Drop-Down Menü.
  • Auf zu viel Schnickschnack verzichten und klare Listen nutzen.
  • Link-Fläche vergrößern, nicht nur den reinen Text verlinken.
  • Ein Button zum Schließen des Flyouts ist nicht notwendig. Das Schließen sollte beim Aufruf eines anderen Menüpunkts oder bei einem Klick außerhalb des Flyouts automatisch erfolgen.
  • Keine Scroll-Balken innerhalb von Drop-Downs benutzen.
  • Menüpunkte bei denen ein Flyout erscheint, sollten deutlich gekennzeichnet sein.
  • Cursor-Wege beachten! Amazon zeigt, wie man es richtig macht. Wenn sich der Mauszeiger diagonal richtung Flyout bewegt (innerhalb der grünen Fläche), wird der Menüpunkt nicht gewechselt. Das Menü-Verhalten entspricht dabei dem natürlichen Verhalten des Users.

    Amazons Hover-Dreieck

    Amazons Hover-Dreieck im Drop-Down-Menü.

Probleme und Herrausforderungen

  • Die Möglichkeit, einen Teil der Struktur zu verstecken kann genauso gut zum Problem werden, wenn Inhalte nicht direkt vom Nutzer gefunden werden. Eine erklärende und eindeutige Benennung der Oberpunkte essenziell.
  • Wenn die Funktionalität beeinträchtigt ist, ist schnell die komplette Seite nicht mehr navigierbar oder einzelne Unterseiten sind im schlimmsten Fall nicht mehr erreichbar.
  • Es kann nur der ausgewählte Hauptmenü-Punkt hervorgehoben werden, auf dem man sich befindet. Der Breadcrump wird umso wichtiger, denn er muss sich um die tieferen Ebenen kümmern.

Weitere interessante Links

User Experience Design

Der Ausdruck User Experience Design ist derzeit in vieler Munde. Er beschreibt eine Komplexität verschiedener Bestandteile, die sehr schwierig zu überlicken ist.
user experience design

Das Bild stammt von sambrown auf instragram.

Quellen für hochwertige und kostenlose PSD Vorlagen

kostenlose photoshop psd vorlagen Vor einigen Tagen habe ich hier bereits die Seite 365psd.com vorgestellt, auf der man wirklich ziemlich coole psd-Dateien kostenlos herunterladen kann. Webseiten dieser Art gibt es natürlich noch häufiger im Netz. Hier habe ich eine Liste mit Seiten zusammen gestellt, die jede Menge Photoshop Ressourcen kostenlos zur Verfügung stellen. Unter den Dateien findet man einzelne UI Elemente, ganze Themes, Icons und andere Vorlagen, die meist sowohl für private als auch kommerzielle Projekte genutzt werden dürfen. Auch zum Lernen bietet sich ein Blick in die Ebenenstruktur der einzelnen psds an.

Ich habe nicht alle Seiten aufnenommen, die ich finden konnte, sondern nur die, die ich für sinnvoll halte und auf denen man wirklich auch verwendbare psd Vorlagen findet. Wenn weitere gute Quellen in euren Bookmarks schlummern, würde ich mich über einen Kommentar freuen. Ich werde die Liste dann entsprechend aktualisieren.

Wieso Denn Bloß?

Im neusten Zwiebelfisch-Artikel auf Spiegel Online “Liebling, Was Wird Nun Aus Uns Beiden?” kritisiert Bastian Sick die neue Eigenart, in Lied-Titeln alle Wörter groß zu schreiben. Angefangen haben damit die großen Datenbank, warum auch immer.

Leider beobachte genau diesen Trend zunehmend auch bei Überschriften in vielen Blogs. Meist sind es englische, aber auch die deutschen Blogs fangen damit an. Ich kann nicht ganz nachvollziehen, was damit bezweckt werden soll. Meine einzige Vermutung ist, den Überschriften soll so mehr Bedeutung eingehaucht werden.
Ich kommen aber zu einem ähnlich Schluss wie Herr Sick: Diese Überschriften sind einfach orthographisch falsch, wirken eher befremdlich und die Lesbarkeit leidet enorm unter der falschen Schreibweise.

“Andererseits verstärkt die Allwortgroßschreibung die heute ohnehin schon starke Verunsicherung in Bezug auf unsere Schriftsprache. Wenn ein außenstehender Betrachter sieht, dass in E-Mails offenbar jedes Wort kleingeschrieben werden darf, während in Liedertiteln alles großgeschrieben wird, muss er zu dem Schluss kommen, dass sich die Rechtschreibung nicht nach Schulstandard richtet, sondern nach dem Medium.”

Wochenend-Lektüre #9

wochenend-lektuere

  • A/B Testing: Usability From A to B
    Wieder ein guter und ausführlicher Überblick über das Thema Usability und A/B-Tests im Besonderen. Hat mich daran erinnert, dass ich auch einen Artikel zu A/B-Testing schreiben wollte.
  • Thinking in shadow effect and light in design
    Sehr berechtigte Kritik von Les James am unüberlegten und häufig übertriebenen Einsatz von Standard-Photoshop-Effekten.
  • How Google tested Google Instant
    Interessanter Einblick in die Test-Methoden von Google, mit denen Google Instant und Buzz getestet wurden. So werden z.B. auch die Datenschutz-Probleme bei Buzz erklärt.

Dieses Mal gibt es zum Abschluss eine kleine Frage an euch. Ich würde gerne wissen, ob ihr gerne weiterhin mit interessanten Artikeln für das Wochenende versorgt werden möchtet, oder ob ihr sagt, dass man gut und gerne darauf verzichten kann. Möchtet ihr lieber mehr andere Artikel lesen?

Habt ihr Vorschläge für die nächste Wochenend-Lektüre? Sagt mir einfach bescheid. Ich freue ich mich auf eure Artikel, Tipps oder Videos.

Page 20 of 32« First...10...181920212223...30...Last »