Smashing Workshop: CSS3 & responsive Webdesign

30. Juni 2013
von Michael Ertel
Kommentare 2
Blog
Workshop: CSS3 & responsive Webdesign

Noch vor der nächsten Smashing Conference im Herbst veranstalten die Herausgeber des Smashing Magazine bereits weitere Events. So unter anderem den von Andy Clarke gehaltenen Workshop »CSS3 & responsive Webdesign«. Dabei gab der Webdesigner einen Ausblick auf die Technologien, die uns in den nächsten Monaten zur Verfügung stehen werden – wenn die Browser mitspielen.

Die Vorbereitung

Um einen Einblick in die neuen effektiveren und zeitsparenderen Methoden zu bekommen, müssen erst einmal Browser-Versionen installiert werden, die ihrer Zeit voraus sind. Als adäquates Werkzeug empfiehlt Andy hier den »Google Chrome Canary« oder den »Opera Next«. Diese Browser unterstützen bereits Technologien, die derzeit noch nicht Einzug in die Standards des W3C gehalten haben. Hierzu müssen allerdings im Canary noch die »experimentellen Webkit-Funktionen« aktiviert werden. Dazu gibt man »chrome://flags« in die Adresszeile ein. Wurden die Funktionen aktiviert, muss der Browser neu gestartet werden.

Herausforderungen des responsiven Designs

Bei der Erstellung flexibler Designs stößt man als Gestalter immer wieder auf die verschiedensten Hürden. Dazu gehören:

  • komplizierte mathematische Rechnungen
  • vertikale Zentrierung
  • Fehler beim Einsatz von »float«
  • Container
  • Quelltext-Reihenfolge

Grundsätzlich rät Clarke von der Optimierung auf bestimmte Geräteklassen und Bildschirmgrößen ab. Stattdessen sollen die Designs auf die Inhalte der Website hin optimiert werden – also nicht »mobile first«, sondern »content first«. Als Beispiel dafür nimmt er die Website seines Webdesign Studios »Stuff & Nonsens«. Die sogenannten Breakpoints orientieren sich im Seitenkopf am Inhalt, nicht an den bekannten Displaygrößen.

Display Table

Die erste der gezeigten Methoden ist »display:table«. Vorteil dieses Ansatzes ist, dass man in einem Box-Modell einen Titel, eine Beschreibung, eine Fußzeile, Reihen und Zellen definieren kann. Das Modell verhält sich dann ähnlich einer Tabelle, ohne dabei die HTML-Syntax außer Acht zu lassen.
So kann innerhalb eines Box-Modells auch problemlos und ohne Rechenfehler mit mehreren Spalten gearbeitet werden. Diesen Spalten können die Abstände einheitlich zugewiesen und das Umbruchverhalten definiert werden. Das alles mit nur wenigen Zeilen Code.

Maßeinheiten

Als Einheit innerhalb des CSS empfiehlt Clarke zudem »rem«. Denn anders als »em« werden »rem« nicht in jeder Vererbung neu berechnet, sondern bleiben durchweg gleich. Ist die Textgröße also mit 100% definiert (was 16px entspricht), bleibt ein rem immer bei 16px.
Einen Schritt weiter als rem gehen die »vw«. Dies hat nichts mit der Automarke zu tun, sondern steht für »viewport-width«. 1 vw ist demnach 1% der Display-Breite. Gleiches gilt für »vh« (viewport-height). Zusätzlich gibt es noch »vmax« und »vmin«, die sich am kleineren bzw. größeren Wert von Höhe und Breite orientieren.

Flexible Box Layout (Flexbox)

Wie der Name schon sagt, ermöglicht die Flexbox-Methode flexiblere Layouts. So können unabhängig von der Reihenfolge im Quelltext die Boxen frei geordnet werden. Außerdem kann der Achsenfluss der Boxen von horizontal auf vertikal umgestellt werden. Projiziert man dieses Verhalten auf den Einsatz von Breakpoints, so kann mit nur wenigen Zeilen der Boxenfluss von einem Desktop auf beispielsweise ein Smartphone optimiert werden. Auch die Ausrichtung auf den Achsen kann definiert werden (Anfang, Zentrum, Ende etc.). Durch den Verzicht auf Definitionen wie »links« oder »rechts« kann die Umstellung des Achsenfluss problemlos durchgeführt werden.
Für viele Layouts sicherlich eine unschlagbare Eigenschaft ist der Befehl »align-items«. Die verwendeten Boxen können mit »flex-start«, »flex-end« und »center« positioniert werden. Standardwert ist hier »stretch«, der alle Boxen unabhängig von ihrem Inhalt auf die gleiche Höhe festschreibt.
Bringt man zusätzlich noch den Befehl »order« zum Einsatz, kann man die verwendeten Boxen beliebig sortieren. Ohne die HTML-Quelle umschreiben zu müssen, kann so der Inhalt optimal sortiert werden. Möchte man auf einem mobilen Gerät zum Beispiel eine Navigation lieber am Seitenende anzeigen, ist das im Flexbox-Modell mit einer einzigen Zeile Code realisierbar.

Verzichtet werden kann bei Flexbox auf Werte wie Pixel oder Prozente. Mit »flex:2;« kann einem einzelnen Container die doppelte Breite aller anderen Container zugewiesen werden, mit »flex:3;« die dreifache und so weiter. Das Flexbox-Modell weißt den zur Verfügung stehenden Platz automatisch den vorhandenen Inhaltselementen zu. Aufwendige Mathematik fällt in diesem Fall vollständig weg.

Arbeitet man dann noch mit CSS-Transitions, können diese Boxen auch noch ohne großen Aufwand ansprechend animiert werden.

CSS Regions, Shapes & Exclusions

Mit CSS Regions wird bald eine Gestaltungsmöglichkeit Einzug halten, die sich Gestalter schon seit Jahren sehnlichst wünschen, nämlich die Verwendung von mehreren Containern, auf die sich der Text dynamisch verteilen kann. Ändert sich die Schriftgröße oder die Textlänge, so kann der Text sich auf sämtliche Boxen verteilen, die ihm per »flow-into«-Befehl zugewiesen werden. Wo diese Boxen sich dann befinden ist für den Text unerheblich, da die Zugehörigkeit ebenfalls per CSS definiert wird.

Ebenfalls neu in CSS3 ist die Verwendung von Shapes und Exclusions. Hiermit bricht das Boxen-Modell aus seinen rechteckigen Formen aus und kann beliebige Maße annehmen. Zum Rechteck kommen neben dem Kreis auch Polygone hinzu. Mit x- und y-Werten können für ein Polygon beliebig viele Eckpunkte definiert werden. Der Text, der sich dann in dieser »Polygon-Box« befindet, orientiert sich an dessen Form und bricht entsprechend um. Das gleiche lässt sich für Elemente definieren, die um die Polygone herum fließen.

Fazit

Neben den eben angerissenen Themen sprach Andy Clarke auch noch über CSS Transforms, Transitions, Border Image und Filter. Es war also ein gut gefüllter Workshop. Einige, der vorgestellten Funktionen und Methoden werden von älteren Browsern zwar nicht unterstützt, doch diese Browser werden nicht ewig unter uns bleiben. Es ist also mehr als Zeit in die Zukunft zu blicken. Dank der aktuellen Update-Politik der Browserhersteller und der hohen Entwicklungsgeschwindigkeit im mobilen Bereich werden die neuen CSS-Funktionen bald an allen Ecken und Enden zu finden sein.

Smashing MeetUp: Andy Clarke

25. Juni 2013
von Michael Ertel
Schreibe einen Kommentar
Blog
Smashing MeetUp: Andy Clarke

Andy Clarke ist Web-Designer – was auch immer man darunter verstehen mag. Er gestaltet responsive Webseiten. Nicht auf Nachfrage, sondern standardmäßig. Weil er das auch noch ziemlich gut macht, schreibt er darüber Bücher, betreibt Podcasts, schreibt Blogs, hält Vorträge und leitet Workshops. So wie am heutigen Dienstag im Büro des Smashing Magazine in Freiburg im Breisgau. Doch bereits am Tag davor gab es die Gelegenheit für ein kleines MeetUp – ein Kennenlernen vor dem eigentlichen Event.

Angekommen in Freiburg werden wir von den freundlichen Damen und Herren des Smashing Magazine in deren Räumen begrüßt und mit Erfrischungen versorgt. Kurze Zeit später mischt sich Andy Clarke unter die Besucher der Veranstaltung und erzählt davon, dass es in Hotels keine Seifenstücke mehr gibt. Stattdessen findet man Flüssigseifenspender und wer doch tatsächlich mal in seinem Zimmer ein (selbstmitgebrachtes) Stück Seife liegen lässt, der wird von der Putzfrau um eben dieses beraubt.

Mit dieser kleinen Anekdote ist die Richtung auch bereits vorgegeben. Es geht hier nicht um Code-Schnipsel, sondern um Dinge, über die sonst keiner spricht. Erfahrungen mit Kunden, agile Projektverläufe, die Fehler der anderen, eigene Fehler. Verblüffend offen spricht Andy über die Erfahrungen seiner Vergangenheit – und immer wieder findet man sich, zumindest in Teilen, in seinen Erzählungen und Berichten wieder.

Es war ein interessantes Treffen. Eines, das man nur auf wenigen Konferenzen haben kann. Ein Treffen, bei dem einem ein »Contract killer« nicht nur ans Herz gelegt, sondern in seiner Entstehung und anhand von Beispielen erklärt wird. Ein Treffen, bei dem einem aus tiefstem Herzen empfohlen wird, seinem Herzen zu folgen (frei aus dem Englischen übersetzt: »Wenn Du von Anfang an Zweifel am Projekt hast, dann lass es am besten gleich«). Ein Treffen, bei dem alle Teilnehmer samt »Dozenten« im Anschluss zusammen etwas essen und noch das ein oder andere Kaltgetränk zusammen genießen.

Was bleibt, ist die Vorfreude auf den dazugehörigen Workshop: CSS3 and responsive web design. Die Inhalte werden sein:

  • Use table display properties to rearrange content
  • Create cross-browser layouts using Flexible Box Layout (Flexbox)
  • Experiment with Grid Layout
  • Improve typography with Multi-column Layout
  • Make the most of tiny bitmaps with border images
  • Use transformations and transitions

Ich bin gespannt!

Alles Gute: ein Jahr als Blog

24. Juni 2013
von Michael Ertel
Schreibe einen Kommentar
Blog
Alles Gute: ein Jahr als Blog

Am 24. Juni 2012 ging es los: aus meiner Web-Seite wurde ein Blog. Seitdem ist genau ein Jahr vergangen. Was in dieser Zeit alles passiert ist, möchte ich in diesem Artikel zusammenfassen.

Nachdem zwei Jahre lang nichts auf der Website passiert war, hatte ich mich entschieden, das Online-Portfolio in einen Blog umzuwandeln. Anfangs hatte ich mir folgende Inhalte vorgenommen:

  • kleine Tutorials für HTML5 und CSS3
  • Neues über das CMS Contao
  • Inspirationen aus der Werbe- und Grafikbranche
  • aktuelle Entwicklungen aus dem Bereich Social Media

Nun, das mit den HTML- und CSS-Tutorials hat nicht geklappt. Stattdessen kam es zur ein oder anderen Hilfestellung für Apples Betriebssystem OS X. Auch über Contao konnte ich wenig berichten. Zur festen Institution hat sich dafür aber das sogenannte Recap, die Zusammenfassung einer Veranstaltung, entwickelt.

Erfreulich: der Gastartikel

Besonders gefreut habe ich mich, dass neben mir auch andere Leute bereit waren, für diesen Blog zu schreiben. Daher möchte ich mich an dieser Stelle bei Carola Wüst, Nora Doll-Bühler und Katharina Steinbrenner bedanken, die im vergangenen Jahr für mich fleißig waren. Ein Dank gilt auch Steffi Müller, denn ohne ihren prüfenden Blick wird hier kein Artikel auf die Leser losgelassen.

All diese Faktoren haben dazu geführt, dass in einem Jahr über 14.000 Besucher aus 68 Ländern über 100 Artikel in diesem Blog lesen konnten. Dazu waren sie über 20.000 Mal zu Besuch und haben knapp 30.000 Seiten aufgerufen. Deshalb möchte ich mich natürlich auch bei allen Lesern bedanken.
Hier mal ein Einblick in die verschiedenen Top-3 der Seitenstatistik:

Städte:

  • Stuttgart (ca. 7,0 %)
  • München (ca. 6,0 %)
  • Berlin (ca. 5,9 %)

Browser:

  • Safari (ca. 55,3 %)
  • Firefox (ca. 21,8 %)
  • Chrome (ca. 13,8 %)

Betriebssysteme:

  • Mac OS X (ca. 66,8 %)
  • Windows (ca. 17,7 %)
  • iOS (ca. 12,3 %)

Besucherquellen:

  • Suchmaschinen (ca. 65,1 %)
  • verweisende Seiten (ca. 19,2 %)
  • direkte Zugriffe (ca. 14,1 %)

Links aus sozialen Netzen:

  • Facebook (ca. 82,3 %)
  • Twitter (ca. 8,5 %)
  • Google+ (ca. 5,1 %)

Artikel:

Nach den vergangenen zwölf Monaten freue ich mich auf das nächste Jahr und darauf, euch alle hier wiederzusehen.

Google Maps im Jahr 2013

23. Mai 2013
von Michael Ertel
Schreibe einen Kommentar
Blog
Das neue Google Maps

Nach der Ankündigung der neuen Maps auf der Google I/O hatte ich mich für die Preview-Phase angemeldet. Heute dann die E-Mail von Google: »Sie wurden ausgewählt. Testen Sie das neue Google Maps.« – das habe ich getan.

Zunächst fällt auf, dass Google sich von der klassischen Erscheinung eines »Dienstes in einer Website« verabschiedet und seinem Kartenangebot die Optik einer Web-App verpasst. Dabei wird das komplette Browserfenster genutzt, lediglich die schwarze Leiste am oberen Rand schummelt sich noch mit in die Anzeigefläche.

Maps: Erkunden

Maps: Erkunden

Sämtliche Bearbeitungsbereiche schweben jetzt in weißen Kacheln über dem Kartenmaterial. Die Ansichtssteuerung wandert ins untere linke Eck, Informationen zu den gesuchten Orten werden nun nicht mehr in »Sprechblasen« bzw. permanent am linken Rand angezeigt, sondern befinden sich in einander überlagernden Kacheln. Klickt man einen Ort auf der Karte an, schiebt sich die dazugehörige Kachel in den Vordergrund. Innerhalb der Kachel kann man sich den Ort speichern, einen Routenplan erstellen und die hinterlegten Adressdaten einsehen. Zusätzlich kann man den Ort bewerten und zu den Erfahrungsberichten bei Google+ wechseln.

Interessantes Feature: »Erkunden«

Im rechten unteren Eck deuten kleine Thumbnails ein etwas verändertes Feature an. Der Bereich »Erkunden« enthält, passend zu aktuell gewählten Kartenausschnitt, klassische Reiseführermotive. Fährt man mit dem Mauszeiger über eines der Motive, markiert eine Linie den dazugehörigen Punkt auf der Karte – wenn die hinterlegten GPS-Daten stimmen. Die Bilder hierfür liefert der seit 2007 zu Google gehörende Foto-Sharing-Dienst Panoramio.

Maps: Panoramio

Maps: Panoramio

Die Bereitstellung dieser Motive ist nicht neu, allerdings ist die Art der Darstellung nun deutlich angenehmer und einladender. Gleichzeitig führt Google einen Trend fort, dem es vor kurzem mit dem Redesign von Google+ bereits nachgegangen ist: große Bilder. Klickt man eines der Thumbnails an, legt es sich in voller Größe über die Karte. Mit den Pfeiltasten der Tastatur kann man sich außerdem durch die gesamte Galerie navigieren.

Infos bei jedem Klick

Neu ist auch, dass man nun an eine beliebige Stelle einer Karte klicken kann, um weitere Informationen zu diesem Ort zu bekommen. Wählt man also eine Straße oder in der Satelliten-Ansicht ein Haus aus, bekommt man den Straßennamen, die Hausnummer sowie Postleitzahl und Ortsnamen angezeigt. Ein weiterer Klick und man kann sofort die Routenberchnung aktivieren.

Das ist einerseits ein mächtiges Feature, andererseits doch etwas besorgniserregend. Eventuell erfährt das nächtliche Swimming-Pool-Hopping einen zweiten Frühling.

Routen vergleichen

Maps: Routenplaner

Maps: Routenplaner

Gibt man in der neuen Version von Maps eine Route an, werden von Google mehrere Verkehrsmittel parallel angezeigt. Somit erhält man gleich auf den ersten Blick eine Übersicht über die schnellsten und kürzesten Anfahrtswege.

Die Darstellung kann aber nach wie vor nach Verkehrsmittel unterschieden werden. Selbst die aktuelle Verkehrslage lässt sich gleichzeitig mit der Route anzeigen. Gedanken an eine Messung der Android-Dichte anhand der GPS-Daten kommen auf …

Was ich alles nicht erwähnt habe, erfährt man in diesem (englischen) Video:

Fazit

Google überträgt nach seinem »Social Layer« nun auch Maps in die neue Unternehmensoptik. Das sieht alles sehr ansprechend aus, fühlt sich gut an und bietet jede Menge Mehrwert. Allerdings sieht man mit den aktuellen Neuerungen wieder einmal wie unendlich viele Informationen Google von uns hat. Mit jedem Tag werden es mehr.

Exchange Kalender in der OS X Kalender App abonnieren / freigeben

17. Mai 2013
von Michael Ertel
Kommentare 6
Blog
Microsoft Exchange und Apple Kalender

Wer in seinem Unternehmen gleichzeitig Apple Rechner und Microsoft Exchange einsetzt, der kennt wahrscheinlich nicht nur Probleme in der Kommunikation zwischen Mail und dem Server – auch beim Teilen von Kalendern läuft nicht alles so wie man es von Outlook kennt.

Während man seinen Kollegen in Microsoft Outlook einfach per E-Mail eine Kalenderfreigabe schicken kann, reagiert Apples Kalender nicht auf derartige Freigaben. Hierzu muss man einen etwas anderen Weg gehen.

Vorbereitung

Statt eine Einladungsmail zu verschicken, lässt man sich die Freigabeoptionen seines Kalenders in Outlook anzeigen. Dort fügt man den Kollegen hinzu, der die Kalender einsehen soll und definiert dessen Lese- und Schreibrechte.

Die Freigabe im OS X Kalender aufrufen

In Apples Kalender wechselt man nun in den Einstellungen auf den Reiter »Accounts« und ruft den Exchange-Server auf. Von den »Accountinformationen« aus klickt man auf »Stellvertretung«. Ein Klick auf das kleine »+« öffnet ein Dialogfenster, in dem man den Namen des Kollegen eingibt, dessen Kalender man abonnieren möchte. Jetzt nur noch bestätigen und der Kollege taucht in der Kalenderübersicht auf.

Den eigenen OS X Kalender freigeben

Wer auf dem gleichen Weg seinen eigenen Kalender freigeben möchte, der ruft ebenfalls die Einstellungen der Kalender-App auf und wechselt wie im Schritt zuvor auf die »Stellvertretung« seines Exchange-Accounts. Rechts unten findet man den Button »Bearbeiten …«. Dort gibt man wieder den Namen des Kollegen ein und legt dessen Zugriffsrechte für den Kalender sowie die Aufgaben fest.

Abschließend muss der OS X Benutzer nur noch in Outlook hinzugefügt werden und schon können beide gegenseitig ihre Kalender einsehen.

Von Redakteuren, Holzfällern und Peopleizern – die 25. SMN in Stuttgart

14. Mai 2013
von Carola Wüst
Schreibe einen Kommentar
Blog

Wie die Stuttgarter Zeitung den Weg in die Social Media Welt sehr spielerisch, dafür aber unglaublich erfolgreich gemeistert hat, erklärt Tobias Köhler sehr anschaulich. Eleftherios Hatziioannou, Peopleizers bringt aktuellen Input von der SXSW 2013 mit, zeigt wie man die Menschen hinter den Bildschirmen erreicht und macht eine Liveschalte in den Mittleren Osten und nach London. Ein kurzer Rückblick auf die 25. Social Media Night des Social Media Club in Stuttgart am 8. Mai 2013.

Weckle für Thierse und die harten Eier beim Chef

Tobias Köhler ist Leiter des Online-Ressorts der Stuttgarter Zeitung. »Zeitung, das ist das hier.« – hält eine Zeitung in die Luft – »Die Älteren unter euch werden sowas noch kennen!?« Tatsächlich sind die Leser, die ein klassisches Print-Abo haben, im Durchschnitt sicher über 50, aber von der Auflage von 190.000 (inkl. Stuttgarter Nachrichten) sind mittlerweile schon 3,5%, also 6.500 Stück E-Paper.

Das Bild des Zeitungslesers ist eingestaubt – ebenso allerdings auch das Bild, das die Leser von den Redakteueren haben. Insgesamt arbeiten bei der Stuttgarter Zeitung fünf Online-Redakteure, die die Artikel auf der Webseite koordinieren – doch jeder einzelne Redakteur bereitet seine Artikel für alle möglichen Medien auf. So können auf der Webseite viele aktuelle und vor allem lokale Themen angeboten werden. Interessantes wird auch auf der seit 2009 bestehenden Facebookseite geteilt. »Die Leser wollen Infos und Emotionen«, sagt Köhler.

Die Online-Redaktion geht das Thema Social Media dabei sehr spielerisch an: mit viel Liebe, aber ohne Agentur und ohne Budget. Man probiert aus, was ankommt und meistens kommt es richtig gut an. Geteilt wird, was in den Sinn kommt: interessante Artikel von der Webseite, Karikaturen, Stuttgart-Bilder von Usern, schwäbischer Foodporn aus der Pressehaus-Kantine. Bei den Fans kommt das an, die Stuttgarter Zeitung duzt sie und sie fühlen sich wohl dabei.

Auch gab es es zum Beispiel im letzten Jahr einen Adventskalender, bei dem sich jeden Tag eine Tür im Pressehaus geöffnet hat, dahinter am 1. Dezember der Empfangstresen, am 24. der Chefschreibtisch. Der Chef ist übrigens selten in der Kantine anzutreffen – warum kam bei der Adventskalendererstellung raus: er hat meist »zwei harte* Eier und ein Schinkenbrot dabei« (*Anm. hart gekochte Eier). Ein Schelm, wer hier Böses denkt. Das Ausplaudern dieses Geheimnisses, ja sogar ein Versprecher ist mal erlaubt. Der Onlineredaktion wird viel verziehen, sie genießt Narrenfreiheit. Als die schwäbisch-berlinerische Brötchendiskussion auf ihrem Höhepunkt ist postet man frech einfach nur eine Foto mit »Weckle für Thierse«.

Doch nicht nur die Print-Inhalte wandern ins Web. Heute ist ein Facebook-Kommentar als Leserbrief so viel schneller wieder in der Printausgabe als früher. Es werden Leserkonferenzen veranstaltet und man sammelt online Feedback zur Print-Ausgabe. Zudem betreibt die Redaktion noch weitere Facebookseiten, unter anderem »Stadtkind Stuttgart«, »Stuttgart-West«, »0711Sued« und andere. Wer also wissen will, was in Stuttgart passiert, ist hier immer noch einen Ticken schneller und dazu noch unterhaltsam informiert.

Social Media Beyond Borders

Eleftherios Hatziioannou, bis 2011 Global Social Media Manager bei Mercedes-Benz, ist das, was man einen global vernetzten Social Media Guru nennen kann. Beyond Borders, darum geht es ihm. Social ist gleich Mainstream, local Services rücken in den Vordergrund – in USA sponsert Google freies WiFi für ganze Städte. Es geht um Big Data, die Cloud, Realtime Marketing und APIs. »Facebook ist nur die Spitze des Eisberges.«

Gerade kommt er von der SXSW 2013 in Austin, Texas zurück. Er hat dort viele interessante Menschen getroffen. Einige Buchempfehlungen der wichtigsten Personen hat er für uns im Gepäck: »What’s the Future of business?« von Brian Solis oder »Return on Relationship« von Ted Rubin.

Doch nun zu den schon erwähnten Borders und ihrer Überwindung:
Individual Borders: Vorbild sein und leben! Risiken eingehen – nicht um Erlaubnis fragen, um Verzeihung bitten. Sich vernetzen und austauschen, auch außerhalb des Unternehmens.
Organizational Borders: Im Office keine Grenzen schaffen, lieber einen »Spielplatz für Erwachsene« daraus machen. Jeder darf mit jedem reden – Hauptsache, am Ende ist dem Kunden geholfen. Kultur ist wichtig, abteilungsübergreifendes Handeln auch. Klein anfangen, sich dann steigern.
International Borders: Global denken, lokal handeln. Zentrale Richtlinien, Technologien und Ressourcen für Synergien und Konsistenz nutzen. Know-How-Transfer und Erfahrungsaustausch.

Wie einfach und kinderleicht das geht zeigt Hatziioannou dann abschließend mit einem Onlinemeeting über dozeo (übrigens auch ein stuttgarter Start-up) mit einer Liveschalte zu Firas Steitiyeh, The Online Project (Mittlerer Osten) und Luc Boitel, Hootsuite (London).

Ach ja, wer sich jetzt immer noch fragt, was die Holzfäller in der Überschrift suchen: es gab eine Umfrage zu den beliebtesten und unbeliebtesten Berufen. Platz 200 von 200 ging an die Holzfäller – die Redakteure lagen glücklicherweise noch davor – auf Platz 196 nämlich. »Von Holzfällern und Redakteuren« war auch der Titel von Tobias Köhlers Vortrag. Die Online-Redaktion der Stuttgarter Zeitung beweist damit noch einmal mehr ihren Humor.

allfacebook Marketing Conference 2013

12. Mai 2013
von Nora Doll-Bühler
Schreibe einen Kommentar
Blog
allfacebook Marketing Conference 2013

Die AllFacebook Marketing Conference in München startete pünktlich um 9 Uhr mit einer kleinen Begrüßung durch die Initiatoren Phillip Roth & Jens Wiese. Circa 400 Teilnehmer hatten sich im Leonardo Royal Hotel München eingefunden.

Anleitung zum Unglücklichsein: 10 Regeln wie man als Marke und Agentur auf jeden Fall an Facebook verzweifeln wird.

Gerald Hensel (Scholz & Friends Digital)

Den Start machte der sympathische Gerald Hensel. Sein Vortrag behandelte die größten Fehler, die man als Facebook Seitenbetreiber machen kann. So tauchten auf den Slides die gängigen unbedachten Sätze auf, die wohl jede Social Media Agentur nur zur Genüge kennt, wie: »Wir müssen was auf Facebook machen«.
Sehr plakativ dargestellt und auch kreativ und gut verständlich vorgetragen, war es doch eher ein Vortrag für blutige Anfänger, die gerade die ersten Gehversuche auf Facebook starten. Für die anwesenden meist professionellen Social Media Agenturen war es jedoch eher eine nette Einführung in die noch folgenden Vorträge.

Links:
Slideshow
Hesel auf Facebook

Facebooks Preferred Marketing Developer Programm: Einblicke in das Ecosystem und die Chancen für Agenturen und Entwickler. Best Practices und Erfolgsgeschichten.

Moritz Schäufele (Facebook)

War der erste Vortrag noch für Anfänger, so ging es mit Moritz Schäufele, Teamleiter des PMD Programms in Deutschland, umso tiefer in die Mysterien von Facebook – Mysterien deshalb, weil kaum einer, der sich mit dem PMD Programm beschäftigt, wirklich verstanden hat, worum es in diesem Vortrag ging. Der Vortrag des sympathischen Redners war schlecht vorbereitet und chaotisch. Sein Hauptziel – die Gewinnung von Agenturen für das PMD Programm in Deutschland – hat er damit wohl leider nicht erreicht. In der anschließenden Fragerunde wurde er ziemlich auseinander genommen und auch die Twitterwall ließ kein gutes Haar an ihm. Trotzdem trug er es mit Humor und empfahl allen, die doch noch wissen möchten, was das PMD Programm von Facebook genau ist, hier tiefer in die Materie einzusteigen.

Links:
PMD Programm

Facebook Ads: Faktoren für das erfolgreiche Buchen von Werbekampagnen auf Facebook

Martin Assmann (iCrossing)

Dieser Vortrag war einer der Vorträge, die im Programmheft am vielversprechendsten klangen.
Einführend wurde nochmals schön dargestellt, warum User eigentlich Facebook nutzen: nämlich hauptsächlich, um sich mit Freunden zu verknüpfen und nicht – wie manch ein Unternehmen denkt – um Werbung zu sehen. Darauf basierend zeigte Martin Assmann verschiedene Möglichkeiten, Ads zu schalten, auf. Dabei hob er vor Allem die noch selten verwendete »Domain Sponsored Story« hervor, die sehr viele Möglichkeiten bietet und durchaus die auf den ersten Blick kompliziert erscheinende Einrichtung wert ist (P.S.: guter Artikel hierzu). Im Folgenden wurde auf die verschiedenen Rollen der Seitenbetreiber eingegangen und die größten Fehler (im Slide genauer aufgeführt), die bei der Anzeigenschaltung gemacht werden. Hier wurde explizit hervorgehoben, dass für die Ad Erstellung der Power Editor wesentlich besser ist als der Ads Manager. Der Vortrag bot alles in allem einen guten Einblick in die Ad Erstellung, auch wenn etwas mehr Tiefgang wünschenswert gewesen wäre.

Links:
Slideshow

Facebook B2B: Begeistern oder Belächeln?
Lufthansa Cargo über vermeintliches Kistenschieben und Faszination Luftfracht

Matthias Eberle (Lufthansa Cargo) & Carolin Biebrach (Lufthansa Cargo)

Matthias Eberle und Caroline Biebrach stellten ihre FB Seite der Lufthansa Cargo auf sympathische Weise und gaben während ihres sehr schön gehaltenen Vortrags tiefe Einblicke in Ihre tägliche Arbeit mit Mitarbeitern, Piloten und Kunden. Besonders interessant hierbei war, dass es sich hierbei um ein B2B Unternehmen handelt. Wer nun aber dachte, Lufthansa Cargo würde durch Facebook neue Geschäfte generieren, wurde leider enttäuscht. Hauptgrund für das Engagement auf Facebook ist die Erkenntnis, dass dort sowieso über das Unternehmen geredet wird – ob mit oder ohne Präsenz. Vorausgegangen war ein shitstorm noch bevor Lufthansa Cargo überhaupt auf Facebook vertreten war. Durch die sehr positive Stimmung seiner Fans erhofft sich das Unternehmen, einen erneuten shitstorms abfangen zu können. Ein weiterer Grund ist die Gewinnung von Mitarbeitern, die über diese Plattform sehr gut gelingt. Ein Besuch der Facebookseite lohnt sich in jedem Fall.

Abschied vom Gewinnspiel-Tab: Integriertes Facebook Marketing mit Open Graph Apps & Pages

Michael Kamleitner (Socialisten)

Gleich vorab: es war der beste Vortrag der Konferenz – sympathisch vorgetragen, nicht zu technisch und trotzdem sehr aufschlussreich. Vorgestellt wurde zunächst ein Beispiel, wie Facebook Marketing nicht funktioniert: in Gewinnspiel-Tabs. Darauf aufbauend erklärte Michael Kramleitner sehr anschaulich, wie es stattdessen mit einer Open-Graph-Lösung funktioniert, ohne dass mobile Nutzer auf eine nicht optimierte, eventuell leere weiße Seite geleitet werden. Deshalb: Weg von Gewinnspiel Tabs hin zu Open-Graph-Lösungen. Auch wenn das Budget für eine volle mobile Version (geschätzter Mehraufwand von ca. 20%) nicht reicht, gibt es verschiedene Fall-Back-Lösungen, die den Benutzer abfangen und freundlich darauf hinweisen, dass es für dieses Gewinnspiel leider keine mobile Variante gibt. Applaus nochmals an dieser Stelle für einen wirklich guten Vortrag.

Links:
Die Socialisten auf Facebook
Slideshow

Involving Content & Involving Apps: Die unterschätzten Tabs

Thorsten Habermann (Telefonica – O2) & Christian Clawien (Interone)

Bei diesem Vortrag kommen wir zu einem Streitthema: der Nutzung von Tabs auf Facebook, um Inhalte einzubinden. Der Vortrag war sehr anschaulich, doch blieb bei den meisten doch die Frage zurück, ob es wirklich »social« ist, so viel Content in die Facebook-Seite einzubinden oder ob hier leicht übertrieben wird. Dennoch ist das Vorgehen von O2 recht interessant und auch für andere Firmen sicherlich eine Option – also einfach mal bei O2 durch die aktuellen Tabs stöbern und seine eigene Meinung dazu bilden.

Links:
Telefonica O2 auf Facebook

Katzenvideos oder Produktinfos, das ist hier die Frage

Warum wir eine neue Bewertung von Fanseiten, Unternehmensinhalten und Erfolg brauchen
MarKo Petersohn (As im Ärmel)

MarKo Petersohn berät hauptsächlich Versicherungen im Bereich Social Media. Hierzu hat er eine Studie über ein Jahr geführt, zu welchen Themen und wohin zielführend auf der jeweiligen Facebook-Seite gepostet wird. Daraus hat er eine sehr anschauliche Systematik erstellt, anhand derer man schnell einen Überblick bekommt, wo das Hauptaugenmerk der Seitenbetreiber liegt. Da jedoch so ziemlich alle Versicherungen vorgestellt wurden, konnte sich der ein oder andere Teilnehmer das Gähnen nicht ersparen, und auch die Twitterwand »twähnte« vor sich hin. Sein Fazit: da alle Seiten eigentlich ähnliche Zahlen an Fans aufweisen, sind alle Vorgehensweisen richtig, je nachdem was man erreichen möchte. Aus dem Raunen der Teilnehmer wurde deutlich, dass dieses Fazit für  eine über ein Jahr gehende Studie schwach ist und Lücken aufweist. Es ist aber eine Überlegung wert, ob man dieses Schema nicht auf die eigene Seite anwendet, um so immer wieder die Zielsetzung zu kontrollieren.

Links:
Slideshow

Facebook Ads: »Zurück in die Zukunft: Eine Reise ins Ungewisse« – von FBX und Social Video zu TV Werbung

Markus von der Lühe (AdPalor)

Markus von der Lühe bringt Ordnung in den Wust von Anzeigenformaten bei Facebook. Es wurde sehr gut veranschaulicht, welche Möglichkeiten zur Verfügung stehen und welche tatsächlich zum Erfolg führen. Dabei hob er die Newsfeed Ads besonders hervor – im Gegensatz zu einigen Vorrednern, die der Meinung waren, dass man hier aufpassen sollte. Glaubt man den Charts im Vortrag, hat AdPalor hier wohl nicht nur keine Probleme sondern sogar gute Erfolge. Auch sehr interessant ist das Anzeigenformat »unpublished Post«, welches nicht unbedingt mit der Seite zusammenhängen muss und dadurch – zum Beispiel bei der Zielgruppe – mehr Möglichkeiten offen lässt. Eine weitere sehr interessante Methode, Facebook Ads zu schalten, ist Facebook Exchange: damit ist es möglich,User zu erreichen, die extern – also auf anderen Seiten – genau nach diesem Thema gesucht haben. Auch vorgestellt wurde Custom Audience Targeting, das allerdings an die Grenzen des in Deutschland machbaren stößt. Hier gibt es berechtigte Zweifel, ob dieses Format nicht gegen die Datenschutzbestimmungen in Deutschland verstößt. Abschließend gab er Aussicht auf ein Format, welches sich in der Region TV Werbung abspielen soll und zum Beispiel reale Einkäufe mit Facebook verknüpft. Es ist aber sehr fraglich, ob sich solche Anzeigenformate in Deutschland durchsetzen können.

Links:
Adpalor auf Facebook
Slideshow

Ecommerce und Social, wie passt das wirklich zusammen?

Clelia Morales (eBay) & Felix von Kunhardt (Sellaround)

Dieser Vortrag war der einzige, der auf Englisch gehalten wurde – und einer der professionellsten. Er drehte sich vor Allem um den Likebutton auf der eigenen Homepage oder im Shop. Der Vortrag hat nochmals klar verdeutlicht, wie wichtig es ist, den Like- oder Sharebutton nicht wahllos auf der Seite zu verteilen sondern gezielt einzusetzen– und zwar am Besten nachdem der Kunde ein bestimmtes Produkt gekauft hat. Dies wurde sehr anschaulich am Beispiel von ebay erklärt. Sehr aussagekräftig ist der Unterschied zwischen dem Klickanteil auf Produktdetailseiten und direkt nach dem Kauf (Produktdetailseite nur 0,1% im Vergleich zu 2% nach dem Kauf).

Links:
Slideshow

Vom Social CRM über die Business Intelligence zum RoI

Martin Szugat (SnipClip)

Martin Szugat verstand es, ein komplexes Thema sehr anschaulich zu erklären. Da der Vortrag sehr ins Detail ging, hier nur das Fazit: Gerade für Kampagnen mit Einladungsmechanismen – wie zum Beispiel Gewinnspiele, bei denen man eine bestimmte Anzahl an Freunden einladen muss – ist es erfolgsversprechender, wenn deren Anzahl gering ist und am Besten sogar Freunde vorgeschlagen werden, die bereits daran teilgenommen haben. Sinn ist es, durch die stärkere Vernetzung unter den Teilnehmern mehr Interaktion zu erreichen. Ein weiterer wichtiger Aspekt der Gewinnspiele ist, diese nicht einfach zum Kundenwohl zu veranstalten sondern vorher Ziele zu definieren und herausfinden, wie man diese erreichen kann. Dies wurde anhand von Lufthansa sehr schön erklärt. Bei deren Aktion ging es darum, herauszufinden wie viele der Fans auch Kunden sind. Daher musste man, um am Gewinnspiel teilzunehmen, seine Meilen-Nummer eingeben. Betont wurde allerdings auch, dass solche Aktionen lange im Voraus geplant werden müssen, um alle Datenschutzbestimmungen zu überprüfen und Verstoße zu vermeiden.

Links:
SnipClip auf Facebook
Slideshow

Facebook ist mobil – und ihr?

Jasper Krog & Christian Lee Rottmann (Edelman Digital)

Jasper Krog und Christian Lee Rottmann verdeutlichten in Ihrem Vortrag noch einmal, was das durchgängige Thema fast aller Vorträge war: Facebook ist vor Allem eins und zwar mobil. Thematisiert wurden demzufolge die mobilen User – wann sind diese am aktivsten (siehe Slides), was interessiert sie und was sind mögliche Stolperfallen. Hauptstolperfallen liegen meist direkt in Text und Bild eines Post: Texte sind zu lang, Bilder zu groß, sodass diese abgeschnitten werden und das Thema der Posts verloren geht. Sehr hilfreich hierfür ist eine Checkliste auf Slide 25 der Präsentation, was bei einem erfolgreichen mobilen Post zu beachten ist. Auch hier wurde nochmals die Problematik von Gewinnspielen auf mobilen Endgeräten aufgenommen. Schätzungsweise handelt es sich um einen Mehraufwand von circa 20%, ein Gewinnspiel auch mobile-fähig zu umzusetzen. Allerdings wurde auch betont, dass es verschiede Fallback Varianten gibt, die den Nutzer abholen und nicht im Regen stehen lassen (siehe Slides)

Links:
Edelmann Digital auf Facebook
Slideshow

3 ½ Thesen zur Bedeutung des neuen Newsfeeds für Marken!

Johannes Lenz (AKOM360)

Johannes Lenz ist kurzfristig eingesprungen, was man seinem Vortrag aber nicht anmerkte. Seine Slides sind so gut gemacht, dass es eigentlich nicht viel zu kommentieren gibt. Er hat auch bereits einen interessanten Artikel zu diesem Thema auf allfacebook veröffentlicht. So bleibt nur zu sagen, dass auch hier wieder deutlich die mobility in den Vordergrund rückt. Sehr interessant ist hier das neue Feature, dass bei Posts nun auch der Status offline, online und mobil angezeigt wird. Dies wird aller Wahrscheinlichkeit zu noch mehr Interaktion untereinander führen.

Links:
Akom360 Blog
Johannes Lenz auf Facebook
Slideshow
allfacebook Artikel: http://bit.ly/10wsjCL & http://bit.ly/11f4akU

Facebook Graph Search
Wird Facebook die größte Suchmaschine und was müssen Unternehmen beachten?

Curt Simon Harlinghausen (AKOM360)

Vorgestellt wurde die neue Graph Search von Facebook und der Unterschied zu Google klargestellt: Google sucht semantisch, also nach der Bedeutung des Inhalts, während Facebook nach Handlungen und Menschen sucht. Die Suche auf Facebook kann aber natürlich nur so gut sein wie die Inhalte, die es von Usern erhält. Will man also, dass etwas gut auffindbar ist, sollte man sich ähnlich wie bei Google über die Benennung von Handlungen und Bildern Gedanken machen. So ist ein Bild mit einer aussagekräftigen Benennung auffindbar, mit dem Originalnamen von der Kamera kann Facebook jedoch nichts anfangen. Demzufolge sollte man als Seitenbetreiber seine Seite auch auf die Auffindbarkeit hin optimieren. Bilder sollten richtig mit Keywörtern benannt werden und Posts Keywörter enthalten. Bestimmte Merkmale werden höher gelistet als andere. So ist zum Beispiel ein aktuelleres Foto (beeinflussbar auch durch Graphik Programme) höherwertig als ein Foto, dass zu einem früheren Datum aufgenommen wurde.

Links:
Slideshow

Fazit:

Abschließend muss ich sagen, dass es ein sehr informativer Tag war. Die Themen waren abwechslungsreich und für jeden war etwas dabei. So tummelten sich unter den Teilnehmern sowohl Mitarbeiter von großen Fernsehsendern oder eines großen Möbelhauses, aber auch kleine bis ganz große Agenturen.

Ich für meinen Teil hätte mir nicht nur Beispiele anhand großer Firmen und Top-Agenturen gewünscht, zumal ich den Eindruck hatte, dass auch viele andere der anwesenden Agenturen eher die mittelständischen Firmen betreuen. Nichtsdestotrotz waren die Vorträge sehr inspirierend und aus fast jedem Vortrag konnte man das ein oder andere mitnehmen. Auffällig hierbei war das durchgehende Thema Mobilität. Für meinen Geschmack waren es nur etwas zu viele Vorträge, die manchmal zu wenig ins Detail gingen.

Alles in Allem war es jedoch ein gelungener Event. Deshalb an dieser Stelle ein herzliches Dankeschön an das Team von allfacebook.com.

Einziger echter Kritikpunkt ist das fast gänzlich fehlende Internet, da das WLAN des Hotels überlastet war.

OS X Mail vs. Microsoft Exchange

9. Mai 2013
von Michael Ertel
Schreibe einen Kommentar
Blog

Schon in ihren Gründerjahren arbeiteten die Firmen Apple und Microsoft gemeinsam an Projekten. Doch bis heute funktioniert nicht alles ganz reibungslos, wenn die Systeme der beiden Häuser aufeinander treffen und miteinander arbeiten sollen. So auch bei OS X Mail und Microsofts Exchange Server.

Apples Mail-Programm unterstützt zwar das Nachrichtensystem aus dem Hause Microsoft seit der Betriebssystemversion 10.6 (»Snow Leopard«), allerdings läuft nicht immer alles ganz reibungslos. So kam es bei mir in den letzten Monaten vor, dass Mail sich nicht mehr mit Exchange (Version 2007) verbunden hat, trotzdem aber keine Fehlermeldung geliefert hat. Einzig der Versuch, eine E-Mail zu verschicken, führte zu einem Fehler:

Die Exchange-Verbindung zum Server „mail.servername.local“ ist fehlgeschlagen.

Wählen Sie unten aus der Liste einen anderen Server für ausgehende E-Mails oder klicken Sie auf „Später versuchen“, um die E-Mail in Ihrem Ausgangsfach zu lassen, bis sie gesendet werden kann.

Nach diversen erfolglosen Versuchen, den Exchange-Account zu löschen und neu einzurichten, fand ich in einem Forum folgende Vorgehensweise:

  1. Schließe Mail
  2. Lege ein Backup des Mail-Speicher-Ordners an:
    /user/library/mail/v2/EWS-username@servername
  3. Lösche diesen Ordner
  4. Starte Mail erneut

Tatsächlich funktionierte die Synchronisierung mit Exchange dann wieder. Zwar kann ich über den eigentlichen Fehler nur spekulieren, aber vielleicht hilft dieses Vorgehen dem ein oder anderen bei Problemen weiter.

Smartes Smartphone – nützliche Apps für den mobilen Alltag

2. Mai 2013
von Carola Wüst
Schreibe einen Kommentar
Blog
Die liebsten Android-Apps

Smartphone-Apps für Android gibt es wie Sand am Meer. Meine aktuellen Lieblings-Apps, die mir die Nutzung meines Telefons erleichtern, möchte ich hier kurz vorstellen.

Swype

Ganz ehrlich, wer von euch schreibt gerne mit dem Smartphone? Ich nicht: E-Mails nur wenn es unbedingt sein muss, SMS nur noch als Antwort, WhatsApp – na gut, lässt sich nicht vermeiden, aber dann fasse ich mich meist kurz.
Was das neue Android gleich mitliefert können jetzt Smartphonenutzer mit älteren Systemen für kleines Geld im Playstore kaufen: Swype. Man muss nicht mehr einzelne Buchstaben tippen, sondern wischen und die Buchstaben in der Wortreihenfolge verbinden. Anfangs ist etwas Übung gefragt, aber schon bald geht es ganz leicht. Man wundert sich, dass Swype fast alle Wörter richtig erkennt – ganz im Gegensatz zu T9, dass mich nie verstehen wollte und das ich daher nie verwendet habe. Bonus: Swype lernt mit – ich kann meine eigenen Begriffe, die es nicht kennt, speichern. So lernt Swype auch ganz einfach schwäbisch.
Nach einigen Tagen mit Swype bin ich so zufrieden damit, dass ich nun sogar diesen Artikel ganz bequem unterwegs auf dem Smartphone geschrieben habe.

Shush!

Wer kennt das nicht: man geht in ein Meeting und stellt den Klingelton auf lautlos. Die Besprechung ist lange zu Ende, wenn man die drei verpassten Anrufe und eingegangenen Chatnachrichten bemerkt. Es ist wieder mal passiert: ich habe vergessen, den Klingelton oder den Vibrationsalarm wieder zu aktivieren.
Hier hilft Shush! – sobald ich vom Klingeln auf Vibration oder komplett lautlos umschalte fragt es mich, wann es den Klingelton wieder für mich aktivieren soll.

Astrid

Listen und Checklisten – da gibt’s sicher hunderte Apps. Eine davon habe ich neulich für mich entdeckt. Sie ist keine Konkurrenz zu Evernote oder Google Keep, eher eine mobile To-do-Liste. Ich sage Astrid was ich wann erledigt haben will und sie erinnert mich freundlich daran. Setze ich das Häkchen, ist die Aufgabe erledigt. Sehr nettes Feature: Astrid lässt mich die Aufgaben mit anderen teilen.

AirDroid

Der Smartphone-Speicher ist mal wieder voll und man beschließt ein paar alte Fotos zu löschen oder nicht benötigte Apps zu deinstallieren: am Smartphone-Bildschirm eine echte Fleißaufgabe. Viel einfacher und übersichtlicher geht es am Rechner im Browser. AirDroid auf dem Phone starten, angegebene URL im Browser öffnen, mit dem Smartphone den QR-Code abscannen und los geht’s. Nun hat man ganz einfach Zugriff auf alle Ordner im Phone- und SD-Speicher. Hier kann man nun komplette Ordner herunterladen, Apps deinstallieren, Nachrichten schreiben, Anrufprotokolle einsehen und vieles mehr.