Herausforderung für Pixelexperten

Publiziert am 13. Mai 2012 von Thomas Kathriner
Wo vor 2-3 Jahren der Anpruch war möglichst genau Pixelangaben für ein Bild zu erhalten, fragen wir heute nicht mehr nach Grössen, sondern von welcher bis zu welcher Gridspalte das Bild angezeigt wird. Die meisten Grafiker/innen aus dem Printmedienbereich tun sich schwer mit dem Gedanken, dass ein Text nicht immer am gleichen Ort umbricht und auch dass das Bild nicht immer die gleiche Breite hat.
Folgende Schritte helfen zu verstehen wie die Herangehensweise bei einem responisves Design aussehen kann.

Vorausplanung

Wir gehen bei dem Beispiel von einem Fluidgrid aus wobei wir weniger mit Pixelberechnungen in Berührung kommen. Bei der Mobilevariante wird ein 4er Grid, beim Rest ein 12er Grid verwendet.
Als erstes sollten wir uns fragen “Welche Geräte sollen eine unterschiedliche Ansicht oder unterschiedliche Gestaltungselemente beinhalten?” Hierbei helfen Skizzerungen oder Mockup-Tools.
Ganz links habe ich nun die Seite auf dem Mobile skizziert hoch/quer Format wird die gleiche Aufteilung haben, dann folgt die Skizzierung für Pad hochformat. Auf der dritten Skizze folgt Pad Quer/kleine Desktops und auf der Letzten die Seite auf dem Desktop.
Funktionell ist die Desktop- und Pad-Quer Variante identisch. Bei der hochformat Pad-Variante verschieben sich die beiden rechten Informationsboxen unter den Text und die Navigation wir auf drei Navigationspunkte verkleinert. Alle fünf Navigationspunkte werden aber als Sitemapblock unten aufgeführt. Bei der Mobilevariante verschwindet der Navigationsblock komplett ans Dokumentende und wir nun über einen Button oben rechts aufgerufen. Im Hauptbereich werden nun auch die beiden Informationsboxen unten angefügt.

Grid

Nun bestimmen wir die Gridabstände: Eine Gesammtgridbreite zwischen 940 und 980 Pixel sollten reichen. Einen Gridgenerator welcher auch gleich die dazugehörigen Dateine exportiert findet man unter http://gridcalculator.dk/#/960/12/12/12.

Grafische Gestaltung

Hier reicht meist eine Desktopvariante, da sich die Elemente auf den anderen Darstellungsarten wiederholen, einzig die Grössen der grafischen Elementeverändert sich.
Grafiktemplates – Danke an Bruce Abel at Portfolio Creative Services Group

Übergabe zur Umsetzung

Auch hier sind Skizzen ausreichend, durch die klare Gridstruktur kann man Skizzen oder Mokups verwenden um Details zu definieren. Hier ein paar Templateansichten die ich anschliessend gemäss meinen Skizzierungen umgesetzt habe.

Resultat

Hier noch der Link zum Fast-Templateresultat aus den skizzierten Seiten (Browser skalieren). Oder unter http://mattkersley.com/responsive/ die Url http://go4blog.ch/responsiv-demo/ eingeben.
Veröffentlicht unter Allgemein, Browser, Frameworke, Mobile, Webdesign | Verschlagwortet mit , , , , , , , , , | Hinterlasse einen Kommentar

{LESS} und CSS3

Publiziert am 2. Mai 2012 von Christian Bretzke

Als 2004 die Version 2.1 erschien, hat wahrscheinlich jeder interessierte Webnutzer von den Cascading Style Sheets, kurz CSS, gehört. Die Hauptidee ist, Inhalt und Aussehen der Website in Content-Dateien (HTML) und Style-Dateien (CSS) zu trennen. Zu dieser Idee gesellten sich immer mehr Konstrukte wie Klassen, Selektoren und Pseudoelemente, die aus der Webwelt nicht mehr wegzudenken sind. Ein Nachteil von CSS war bisher die häufige Wiederholung von gleichen Werten beim Erstellen einer Webseite. {LESS} füllt genau diese Lücke und bietet dem Webentwickler die Möglichkeit, Stylesheets dynamisch zu erzeugen.

Will man eine eigene Webseite generieren, so gehört CSS heute in den Standard-Werkzeugkoffer. In den aktuellen Browsern wird CSS3 bereits teilweise unterstützt, wobei jedoch von Browser zu Browser unterschieden werden muss, welche Features bereits integriert sind und welche nicht. Eine Übersicht kann man sich beispielsweise auf http://www.webdevout.net/ wie auch auf vielen anderen Seiten verschaffen.

Was kann CSS3 Neues?

Da CSS3 zum grössten Teil auf Ideen von vorherigen Versionen basiert (Filter, Pseudoelemente, …) handelt es sich bei den Neuerungen zuerst um Erweiterungen der Vorgänger. Dazu kommen noch die Transitions (Bewegungen mit Keyframes), Textshadows und andere kleinere Neuerungen. Einige Beispiele sollen dies zeigen:

1
2
3
  a[href$=".doc"]             { ... }
  a[href^="http://go4web.ch"] { ... }
  div[id*="navi"]             { ... }

Hier werden in Zeile
1 alle Links, die im Attribut href auf .doc enden ausgewählt,
2 alle Links, die im Attribut href mit http://go4web.ch beginnen ausgewählt,
3 alle Div-Elemente, deren Id den String navi beinhalten selektiert.
Weiterhin kann man zum Beispiel mit dem ~ Operator Geschwisterelemente wählen.
Leicht kann man auch Pseudoelemente ansprechen:

1
2
3
  div:root           { ... }
  table:nth-child(n) { ... }
  p::selection       { ... }

Zu beachten ist hierbei, dass ab CSS3 der “:” – Operator durch einen “::” ersetzt wird, wie man oben bei “selection” sehen kann. Aus Gründen der Kompatibilität kann trotzdem bei allen in CSS1/2 vorhandenen Pseudoelementen weiterhin der alte Operator benutzt werden.

Wenn man eine breite Auswahl der Möglichkeiten mit einer Vorschau sehen möchte, kann man sich auf der Seite http://www.css3.info/preview/ einen guten Eindruck der neuen Features holen.

{LESS} im Einsatz

Wer nicht mehr jeden Wert einzeln in seine Stylesheets eintragen will, der kann auf LESS zurückgreifen und Variablen, verschachtelte Regeln, direkt wiederverwendbare Klassen sowie mathematische Operatoren und Funktionen direkt im Stylesheet verwenden. Einige Beispiele folgen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  @color:#333;
  #container {
    color : @color;
  }
  .nav {
    color : @color * 2;
  }
  .subnav {
    .nav;
    background-color: #eee;
  }
  div{
    background-color:#333;
    p{
      background-color:#eee;
    }
  }

Auf Zeile 1 wird hier die Variable @color erstellt und in Zeile 2 sowie 3 verwendet. Zeile 3 führt ausserdem eine Multiplikation aus. Es sind in LESS die 4 Grundrechenarten verfügbar und die Möglichkeit eigene Javascript-Funktionen aufzurufen. Die Klasse subnav verwendet direkt alle Regeln aus der Klasse nav und fügt eine eigene Hintergrundfarbe hinzu. Eine verschachtelte Regel kann man dann im div-Element sehen, dessen p-Subelemente jeweils einen helleren Hintergrund zugewiesen bekommen.

Wie benutzt man {LESS} ?

Es gibt verschiedene Möglichkeiten LESS in CSS umzuwandeln. Für die Entwicklung ist es am Einfachsten, die Datei less.js von http://lesscss.org/ als Skript in die HTML-Datei einzubinden. Man beachte, dass es zuerst gilt die Stylesheets, welche auf ‘.less’ enden einzubinden, wie im Beispiel unten. Weiterhin kann man LESS auch serverseitig installieren oder als Kompiler downloaden und auf der Kommandozeile ausführen. Dazu sei auf die Homepage http://lesscss.org/ verwiesen.

1
2
  <link rel="stylesheet/less" type="text/css" href="mystylesheet.less">
  <script type="text/javascript" src="less.js"></script>

Wer jetzt noch weiter gehen möchte, kann sich auf der Seite http://lesselements.com/
vorgefertigte, codesparende Lösungen für abgerundete Ecken, Farbverläufe, Schatten und vieles mehr herunterladen.

Veröffentlicht unter Browser, CMS, Programmierung, Tools, Webdesign | Verschlagwortet mit , , , , , , , | Hinterlasse einen Kommentar

Der Kontext einer Website

Publiziert am 19. April 2012 von Sam Steiner

20120419-133920.jpg

Früher war alles einfach.

Man hatte als Firma eine Website, wenn man vorne dabei sein wollte – oder man hatte halt keine. Gross überlegen, weshalb man eine Website hat und was sie bringen soll, “musste” man nicht.

Nun – diese “Build it and they will come“-Zeiten sind seit einigen Jahren vorbei. Einfach nur eine Website haben, damit man eine hat, ist keine Strategie. Das Webseiten-Design zu wählen, das dem Chef am besten gefällt ist kein brauchbarer Weg. Salopp eine Struktur für die neue Website zu “entwickeln” endet in einer nicht funktionierenden Website.

Technisch funktioniert zwar die Website, ein Redaktionssystem ist installiert, damit man Anpassungen selber machen kann. Aber die Website funktioniert nicht, für das was sie bringen müsste, hätte man das in einer Strategie definiert.

In einem früheren Artikel “Wirksame Websites” hatte ich einige konkrete Punkte dazu aufgezeigt – wer das noch nicht gelesen hat, dem sei es jetzt empfohlen.

Und so haben immer noch viele Firmen Webseiten, die gefüllt sind mit geschwollenen Texten über Leitsätze, Organisationsstruktur und warum die Produkte die besten sind weit und breit. Dafür haben wir doch genau unsere Website, nicht?

Wenn man Glück hat, existiert eine Seite “Team” – die ist dann die meistgesichtete Seite. Wenn man das messen würde. Ich habe mehrere grössere, schweizweit bekannte Firmen gesehen, die nicht wissen, welche Bereiche ihrer Website noch halbwegs interessant sind!

Soviel unserer Entscheidungsfindung, ob privat oder geschäftlich, B2C oder B2B, passiert heute im Web oder web-unterstützt. Firmen, die wirksame Websites (Website 2.0?) einsetzen, werden immer klarere Vorteile haben. Konkrete, entscheidende Vorteile.

In Gesprächen mit Firmen ist das eines meiner Hauptpunkte: es geht nicht um eine kleine Optimierung im Promille-Bereich, es geht um einen grösseren Wandel im Benutzerverhalten im Web. Die Geschwindigkeit des Wandels war zu schnell für Kodak, für Buchhändler und für die Musikindustrie. Zeitungen und Zeitschriften kämpfen ums Überleben. Reisebüros zappeln mit der Umstellung – es werden Anbieter, die nicht schnell genug reagieren wollen mit Neuen ersetzt.

Mehr Hinweise im Kurzartikel “4 Punkte mit Handlungsbedarf für Unternehmen mit Websites“.

Firmen, die passiv-informierende Websites haben, müssen sich schlichtweg nicht wundern, wenn sie immerhalb weniger Monate von der effektiveren Konkurrenz überfahren werden. So ernst ist die Sache.

Was muss unsere Website können?

Das definieren Sie in Ihren Strategie-Workshops und schlussendlich in Ihrer Online-Strategie.

Antworten auf solche Fragen gibt Ihnen Ihre Branche (vor allen, wenn Sie etwas in die Zukunft schauen, in Ländern, die ein paar Schritte weiter sind, das hilft auch gegen Überraschungen). Kodak hätte beispielsweise rechtzeitig Platzhirsch Nummer 1 werden können und sollen in der Digital-, Mobile- und App-Fotografie (und nicht warten, bis Facebook 1 Milliarde hinblättert für die 13 Mitarbeiter von Instagram). Jetzt ist das natürlich zu spät.

Bedürfnis von potentiellen Kunden sind hilfreiche Inhalte. Solche regelmässig zu veröffentlichen kann ein Teil Ihrer Strategie sein und sollte das auch meist sein. Wenn hier Fragen nach Redaktionskapazitäten auftauchen: diese sind lösbar. Dafür muss Ihre Website natürlich die nötigen Funktionen haben (Artikel veröffentlichen, Trackbacks, Pings, RSS und Kommentarfunktion – um ein paar zu nennen).

Vernetzung in der “neuen Social Web Stadt” (ich nenne sie Shareville) ist wichtig. In den seltensten Fällen kommen die Besucher direkt zu Ihnen, man findet Sie andernorts in der “Stadt”, falls Sie dort präsent sind. Man findet Sie im Kontext.

Ihre wertvollen Inhalte sollten auf Teilbarkeit optimiert werden (so baut sich Ihr “Kontext” erst auf), und auch auf mobilen Geräten lesbar sein. Nicht zuletzt: Breitband in jeder Hosentasche eröffnet (wo sinnvoll) Türen für multimediale Inhalte wie zB Anleitungsvideos, Stelleninserate in Videoform, Hintergrundberichte von interessanten Projekten usw.

YouTube beispielsweise ist die zweitgrösste Suchmaschine (werden Sie dort gefunden? Wenn ja, findet man dann weiter zu Ihrer Website? Dazu sollte Ihre Webadresse an erster Stelle im Beschreibungstext ihrer Videos sein).

Nicht gleich losstürmen. Ihre Online-Strategie gibt vor, wo Sie starten, weil Interaktionen in der Social Stadt auch Zeit beanspruchen. Sie können nicht von null auf plötzlich in Pinterest, Google+, Twitter, Flickr, YouTube, Facebook, Slideshare, Xing und LinkedIn (und wie sie alle heissen) in aktivem Dialog sein.

Ein guter erster Schritt wäre es, mal die Statistiken Ihrer jetztigen Website genau anzusehen – wie gut sieht’s mit Ihrer “Team”-Seite aus? :-) Dann die nötigen Strategie-Workshops andenken – vielleicht würden Sie dabei von Hilfe von aussen profitieren.

Im Interesse unseres “Online-Kontextes” sind wir dankbar um Ihre Teilfreudigkeit, wenn dieser Artikel inspirierend (oder rütteln) konnte – danke! Haben Sie Fragen oder Ergänzungen? Die Kommentarsektion ist offen.

Veröffentlicht unter CMS, Mobile, Social Media, Suchmaschinenmarketing, Suchmaschinenoptimierung, Webdesign | Verschlagwortet mit , , , , , , , , , , | Hinterlasse einen Kommentar

Gehirn entspannt füllen & Wichtiges teilen – in 4 Schritten

Publiziert am 12. April 2012 von Sam Steiner

Ich lese zu meinem Fachgebiet möglichst alles Wichtige, was online geschrieben wird. Gute Artikel aus dieser Fülle leite ich in Form von Tweets meinem Netzwerk weiter. So versuche ich, ein hochwertiges Konzentrat zum Thema zu liefern – gemischt mit Privaten, weil ich Mensch bin – das meine Online-Gefährten weiter hilft. Hier meine Maschine zum Nachbauen.

Ich beschreibe ich die Online-Tools, die mir das möglich machen. Diesen neuen Möglichkeiten begeistern – gerade auch ihre Einfachheit. Das Web ist ein riesiges Tool – wir profitieren, wenn wir lernen, es einzusetzen.

Voraussetzung ist ein eigenes Twitter-Konto – das hat man schnell eingerichtet und ich empfehle das auch allen, die online arbeiten – um ein Gespür dafür aufzubauen. Von aussen versteht man Twitter nicht.

Ich habe einen Grobüberblick zu meiner “Maschine” gezeichnet:

Schritt 1: Online-Inhalte Abonnieren

Das Zauberwort heisst hier RSS (Really Simple Syndication). Ich habe in einem früheren Artikel die Grundlagen zu RSS vermittelt. Ich empfehle, den Artikel zu lesen, wer das noch nicht schon getan hat. RSS ist wichtig – wer entspannt auf dem neusten Stand sein will, sollte das ausprobieren.

Anleitung:

  1. bei Google Reader anmelden
  2. mit dem roten “abonnieren” Button Websites abonnieren, zB go4blog.ch und webwirksam.ch eingeben. Alle seriösen Online-Magazine und Blogs bieten RSS an.

Es lohnt sich, sich mit Google Reader vertraut zu machen – auch auf dem Smartphone. Zudem die im anderen Artikel erwähnten Zusatz-Apps anzusehen. Wer ein iPad hat, wird besonders begeistert sein.

Schritt 2: Lesen und Filtern

Nun kommen in meinem Fall sehr viele Artikel laufend in meinem Google Reader an. Einiges ist doppelt, kann ich abhaken. Aus dieser Fülle will ich die besten Artikel weiterempfehlen, damit meine Twitter-Folger ein nützliches Konzentrat erhalten. Ich mache das mit der “Stern-Funktion” in Google Reader. Finde ich einen guten Artikel, klicke ich einfach auf den Stern und mein System findet dafür eine passende Zeit und verteilt solche Tweets über den ganzen Tag. Mehr dazu weiter unten.

Anleitung:

  1. sich zur Gewohnheit machen, den RSS-Reader regelmässig zu lesen
  2. neue Websites abonnieren, überflüssige rauslöschen
  3. gute Artikel “sternen”

Tipp: ich verwende auf dem iPad die App “Reeder”, auf meinem Smartphone die App “Google Reader” und auf meinem Macbook manchmal den normalen Google Reader oder die App “Reeder for Mac”. Diese Apps sind synchronisiert mit meinem Google Reader, das heisst, das “Sternen” geht überall.

Schritt 3: Tweet-Mechanismus vorbereiten

Google Reader tweetet nicht automatisch für mich. Ich muss einen Automatismus bauen. Einerseits sollen gesternte Artikel aus meinem Google Reader geholt werden, andererseits sollten solche Tweets über den Tag verteilt raus gehen – nicht 10 Tweets auf einmal, wenn ich gerade wieder lese. Hier kommt das vernetzte Web richtig cool zum Zug.

Buffer ist eine Webapplikation, in der ich bestimmte Tageszeiten definieren kann, an denen die Tweets, die ich laufend in Buffer reinfülle, gesendet werden sollen.

Ich habe ca. 15 solcher “Slots” definiert. Ziele für mich sind einfach, dass Tweets nicht sofort nacheinander raus gehen und dass sie nicht nachts versendet werden (ich lese oft spätabends in meinem Google Reader). Ich sterne viel weniger als 15 Artikel pro Tag – das heisst, es entsteht kein “Overkill”.

Anleitung:

  1. sich bei Buffer anmelden
  2. das eigene Twitter-Konto damit verbinden
  3. einige Zeitpunkte definieren, an denen getweetet werden soll

Schritt 4: Gesternte Artikel abholen

Hier kommt das Verbindungsstück zwischen dem Google Reader und Buffer.

Es gibt einen sehr nützlichen Dienst “if this then that – ifttt.com“. Darin kann ich viele Online-Dinge automatisieren. Ich verwende es zum Beispiel um wichtige E-Mail automatisch in Dropbox zu archivieren oder Fotos, die andere von mir in Facebook reinstellen automatisch herunterzuladen.

In unserem Beispiel verarbeite ich damit gesternte Artikel in meinem Google Reader und sende sie an Buffer.

Anleitung:

  1. sich bei ifttt.com anmelden
  2. seinen Google Reader darin verlinken
  3. das soeben erstellte Buffer-Konto darin verlinken
  4. dieses “ifttt-Rezept” ansehen
  5. unten mit “Create Task” in die eigene “Maschine” übernehmen – keine weiteren Anpassungen nötig

Die Tweet-Maschine is bereit

Ohne sehr aufwändige Basteleien – aber zugegeben mit einigen absolvierten Schritten – haben wir nun das System bereit. Wenn ich in Google Reader ein Stern setze bei einem Artikel, sollte ifttt.com das sehr bald merken und den Artikel an Buffer senden. Buffer wiederum wartet bis zum nächsten definierten Tweet-Zeitpunkt und senden völlig selbständig den Tweet raus.

Nice, nicht? Hat es geklappt?

Ich kann mir vorstellen, dass Fragen auftauchen. Dafür ist die Kommentarsektion unter diesem Artikel offen. Ich werde versuchen, Unklarheiten zu lösen und wo nötig den Artikel entsprechend zu ergänzen. Wer ihn interessant fand, ist herzlich eingeladen, ihn zu teilen – danke für diese Klicks!

Es bleibt mir noch ein wichtiger Hinweis: meine so automatisch getweeteten Nachrichten machen nur einen Teil meiner Aktivitäten in Twitter aus. Nicht vergessen: Twitter ist ein interaktives Dialog- und Diskussionstool. Vollautomatische Twitterkonten sind meist eher kalt und subinteressant.

Veröffentlicht unter Allgemein, Tools | Verschlagwortet mit , , , , , , , | 11 Kommentare

Lesezeichen zwischen mehreren Rechnern synchronisieren

Publiziert am 4. April 2012 von Markus Kündig

Im Netz gibt es tausende interessante Webseiten, welche man mehr als einmal besuchen will um spannende Inhalte zu lesen. Lesezeichen eignen sich sehr gut, damit man genau diese Webseiten wieder findet. Leider passiert es immer wieder, dass genau dieses Lesezeichen auf einem anderen Rechner gespeichert ist.

 

 

 

 

 

 

Xmarks
Xmarks (früher Foxmarks) ist ein Browser-Plug-in, das Lesezeichen online synchronisiert. Die Lesezeichen werden auf den Servern der Firma Xmarks gespeichert. Der Online Zugriff mit dem eigenen Account ist auch möglich. Link: http://www.xmarks.com.
Die Administrationsoberfläche von Xmarks ermöglicht eine Administration aller Lesezeichen. Das anschliessende Synchronisieren der Browser aktualisiert die Lesezeichenliste gemäss der Online Variante.

Das Plug-in steht für die Browser Safari (Windows, Mac OS), Internet Explorer (Windows), Firefox (Windows, Mac OS, Linux) und Google Chrome (Windows, Mac OS, Linux) zur Verfügung. Für verschiedene mobile Plattformen ist das Tool ebenfalls erhältlich. Leider sind die Plug-ins für die mobilen Plattformen kostenpflichtig.

Der Download für die verschiedenen Plattformen: http://download.xmarks.com/download/all

Fazit: Wenn Sie auf mehreren Rechnern arbeiten, werden Sie diese zeitsparende Browser-Erweiterung sehr zu schätzen wissen. Einziger Nachteil: Lesezeichen, welche nicht für die Öffentlichkeit bestimmt sind wie z.B. Server IP Adressen oder Links mit https://, würde ich nicht erstellen. Die Lesezeichen sind online gespeichert und die Sicherheit im Netz ist daher – wie wir alle wissen – nicht 100% gewährleistet.

Veröffentlicht unter Allgemein, Browser, Tools | Verschlagwortet mit , , , , , , | Hinterlasse einen Kommentar

Neues Facebook-Design für Unternehmen

Publiziert am 24. März 2012 von Sam Steiner

Alles wird neu für Unternehmen in Facebook. Aus der Perspektive von Firmen sind einige der Änderungen ganz interessant. Hier die wichtigsten Neuerungen im Überblick.

1. Chronik-Design

Wie mittlerweile von den privaten Profilen bekannt, nun auch für Unternehmen (und andere Facebook-Seiten) da: die Chronik-Darstellung. In diesem neuen Layout sind Einträge aus der Vergangenheit wieder sichtbar. Historische Ereignisse der Firmengeschichte können nun zeitlich korrekt und übersichtlich in die Fanseite eingefügt werden. Beispielsweise geht die Facebook-Seite von NZZ bis ins Jahr 1780 zurück.

2. Beiträge von Fans zurückgestuft

Aus meiner Sicht ein Rückschritt, aus der Perspektive von Unternehmen, die Angst vor Kundenstimmen haben ein Plus: Beiträge von Fans sind viel weniger sichtbar in der neuen Darstellungsweise. Die Gefahr von “Shitstorms” erheblich tiefer. Leider auch der Ansporn für Likers, sich mit wertvollen Beiträgen zu beteiligen.

3. Nachrichten an Fanseite

Mitglieder der Facebook-Seite können erstmals Nachrichten an die Betreiber der Seite senden. Das ermöglicht den effizienteren Einsatz einer Fanseite als Unterstützung eines Kundendienstes. Wer befürchtet, dass die Anfragen seiner Fans zu viel wären, um sie alle zu beantworten, kann diese Funktion abschalten. Nach meiner Erfahrung hält sich die Flut solcher Anfragen in Grenzen. Auf jeden Fall sollte diese Funktion nur eingeschaltet sein, wenn man die Nachrichten auch beantworten will.

4. Titelbild

Nicht zuletzt bietet das neue Layout auch viel bessere Branding-Möglichkeiten durch das prominente Titelbild. Diese relativ grosse Fläche an bester Lage kann einen signifikanten ersten Einblick in die Firma geben. Das Corporate Design kann nun besser integriert werden.

Fazit

Betreiber von Facebook-Seiten sollten in den nächsten Tagen auf das neue Design wechseln. Ende März (das ist schon bald) will Facebook alle Seiten “mit Gewalt” umstellen. Wer bis dahin nichts unternommen hat, wird ab dann ein halbfertiges Design haben (das Titelbild wird fehlen). Die “Nachricht an Seite” Funktion wird ab dann auch automatisch eingeschaltet sein. Man sollte sich auch mit den neuen Arten von Pinnwand-Einträgen auseinandersetzen – “Hervorgehoben”, “Meilenstein” und “Oben fixieren”.

Spannende Neuerungen, die Facebook für viel mehr Firmenchefs relevanter machen wird – aber leider die Stimme der Fans meiner Meinung nach etwas zu stark unterdrückt.

Veröffentlicht unter Social Media | Verschlagwortet mit , , , , , , , | Hinterlasse einen Kommentar

Bildformate im Web – Was man im Umgang mit den verschiedenen Formaten wissen sollte

Publiziert am 19. März 2012 von Fabian Lutz

Den Meisten sind mittlerweile Bildformate wie JPEG und GIF bekannt. Doch was gibt es für Alternativen? PNG ist für manche noch ein Format, welches sie noch nicht richtig einzusetzen wissen. Ich möchte in den nachfolgenden Beispielen zeigen, dass heutzutage GIF vernachlässigt werden kann, und dass auch bei gewissen mehrfarbigen Bildern nicht immer JPEG als Endformat das optimale Ergebnis erzeugt.

Übersicht der wichtigsten Web-Bildformate:

Verlustfrei (lossless)
bedeutet, dass keine optischen Veränderungen beim Ausgabeformat festzustellen sind		 Verlustbehaftet (lossy)
Durch eine “verlustbehaftete” Kompression kann eine kleinere Dateigrösse auf Kosten der Bildqualität erreicht werden
GIF mit max. 256 Farben GIF mit mehr als 256 Farben
PNG 8 mit max. 256 Farben PNG 8 mit mehr als 256 Farben
PNG 24 mit max. 16.7 Mio.
Farben und 256 Transparenzabstufungen		 JPEG

Eine optimale Kompression wurde in der Vergangenheit aufgrund der zunehmenden Datengeschwindigkeit öfters vernachlässigt. Es ist jedoch bei dem heutigen Boom von mobilen Endgeräten sicherlich wieder ein Thema, auch hier möglichst kleine Bilder zur Verfügung zu stellen um lange Ladezeiten zu vermeiden.

Der oben stehende Vergleich zeigt auf, dass PNG alle Eigenschaften eines GIF-Formats besitzt. Doch mit PNG kann man noch mehr….

Die nachfolgende Auflistung soll zeigen, wo der Einsatz von PNGs Sinn macht und wo JPEGs verwendet werden sollten:

Welches Format wo einsetzen

Bild optimales Format
PNG 8
Farbige Elemente mit scharfen Kanten, Schriften, Zeichen mit weniger als 256 Farben
PNG 24
Horizontale sowie vertikale Farbverläufe
JPEG
radiale Farbverläufe
JPEG
Foto-Bild mit mehreren Farben (aufgrund der Optimierungsmöglichkeiten von JPEG)
PNG 24 / JPEG & CSS
Beliebiges Bild mit Transparenz (kann natürlich auch ein JPEG oder PNG 8 sein, und dann mittels CSS transparent gemacht werden – das wäre in gewissen Fällen eleganter)

Achtung: PNG 24 wird in IE6 nicht optimal dargestellt. Es gibt im Netz jedoch Unmengen an JS/CSS-Lösungen, welche dies auch in IE6 ermöglichen…wenn man diesen “Browser” dann noch berücksichtigen will ;)

 

Veröffentlicht unter Allgemein, Browser, Webdesign | Verschlagwortet mit , , , , , , , , | 4 Kommentare

Stadt Luzern ♥ Social Media

Publiziert am 12. März 2012 von Sam Steiner

Über die Stadt Luzern und Social Media hatte ich in diesem Blog geschrieben. Danach hatten wir einige grössere Gemeinden der Region Luzern in Bezug auf ihr Web-Auftritt genauer angeschaut. Nun geht die vorbildliche Stadt Luzern einen Schritt weiter.

Laut einer Medienmitteilung vom 1. März 2012 wurde das Pilotprojekt “Social Media” erfolgreich abgeschlossen. Die Stadt testete das neue Web während einer begrenzten Zeitspanne, um eigene Erfahrungen damit zu sammeln – gute Idee, denn das gibt allen späteren Entscheiden eine Grundlage. Seit April 2011 hatte die Stadt Luzern verschiedene Plattformen getestet:

Über Twitter, Facebook, Youtube und in geringerem Umfang auch auf Google+ wurden im Rahmen eines Pilotversuches positive Erfahrungen mit den neuen Kommunikationskanälen gemacht.

Nun hat der Stadtrat beschlossen, das Social Web zu einem festen Bestandteil der Kommunikationsstrategie zu machen. Die Bevölkerung hatte die Nahbarkeit der Stadt in diesen Kanälen geschätzt. Das Kosten/Nutzen-Verhältnis schätze man als sehr gut ein. Für die Bewirtschaftung dieser Kanäle werden 20% Stellenprozente eingesetzt. Diese verteilen sich über mehrere Mitarbeiter.

Interessant – aber in diese Richtung muss das gehen: die Stadt Luzern hat das Social Web der klassischen Websites gleichgestellt und hebt die Sperre für Mitarbeiter nun auf. Auch wenn es bedenklich ist, dass solche Sperren bis ins Jahr 2012 gereicht haben (und leider bei Banken und Behörden wohl noch weiter dauern werden), Luzern hat diesen Milestone nun überwunden.

Der YouTube-Kanal “stadtluzern” braucht wegen den Änderungen bei YouTube nun etwas Überarbeitung, das Titelbild der Facebook-Seite verstehe ich nicht ganz – aber die allgemeine Marschrichtung ist richtig. Respekt!

Ganz neue Möglichkeiten für Historisches tun sich auf in der neuen Version von Facebook-Seiten – bin gespannt, ob die Stadt damit etwas anstellt, wie beispielsweise die NZZ-Facebook-Seite, die seit Kurzem bis ins Jahr 1789 zurück reicht.

Veröffentlicht unter Luzern, Schweiz, Social Media | Verschlagwortet mit , , , , , | Hinterlasse einen Kommentar

Google Analytics mit URL-Tool verbessern

Publiziert am 4. März 2012 von Marc Bühlmann

Den Erfolg einer Website zu messen ist viel einfacher als in anderen Medien. Google Analytics hat sich dabei zu einem Standard für das Tracking von Besuchern sowie deren Verhalten entwickelt und bietet eine Vielzahl an sinnvollen Möglichkeiten. Mit einem interpretierbaren Link lassen sich die gemessenen Informationen einfacher und klarer aufzeigen.

Analytics ist schnell integriert, denn alles was zu tun ist: man packt einen HTML-Code in den Headbereich der zu messenden Seiten und schon startet das Tracking. Weitere Möglichkeiten, die eingerichtet werden können, sind zum Beispiel das Kampagnen- oder eCommerce-Tracking.

Egal ob man eine Bannerschaltung, ein Newsletter-Versand  oder sonst eine Online-Aktivität realisiert, alle diese Massnahmen liefern uns in der Regel keine exakten Zugriffsquellen zurück, welche dann auch genau zugeordnet werden können. Trotzdem wollen wir natürlich wissen, woher die verschiedenen Klicks stammen, denn nur so können die Massnahmen optimal ausgewertet und deren Erfolg gemessen werden.

Ein spezifischer Link, der beim Aufrufen die nötigen Informationen an Google Analytics zurück liefert, ist die Lösung. Dafür gibt es bei Google ein Tool, mit welchem die notwendige URL generiert werden kann, das sogenannte Google URL-Tool.

Beispiel für eine generierte URL

Beim Feld Website-URL wird die eigene Domain erfasst. Für einen Newsletter-Versand tragen wir für die Kampagnenquelle “newsletter” und als Kampagnenmedium “e-mail” ein.  Der Kampagnenbegriff und der Kampagnen-Content ist optional und daher lassen wir ihn frei. Die Kampagne bezeichnen wir mit einem Kampagnennamen “kundenpromo” und erzeugen dann den folgenden Link

http://www.go4web.ch/?utm_source=newsletter&utm_medium=e-mail&utm_campaign=kundenpromo

den wir  dann im Newsletter sofort verwenden können; weitere Einstellungen sind nicht  mehr nötig. Jeder Klick auf diesen Link wird nun in Google Analytics zugeordnet und klar ersichtlich aufgeführt.

Folgende Erklärung zu den entsprechenden Felder im Google URL-Tool:

Kampagnenquelle (utm_source)
Dieses Feld ist zwingend. Mit utm_source können Sie die Suchmaschine, den Namen des Newsletters oder eine andere Quelle angeben. Beispiel: utm_source=google

Kampagnenmedium (utm_medium)
Dieses Feld ist zwingend. Mit utm_medium können Sie ein Medium wie E-Mail oder Preis-pro-Klick (Cost-per-Click – CPC) kennzeichnen. Beispiel: utm_medium=cpc

Kampagnenbegriff (utm_term)
Dieses Feld ist optional. Wird für die bezahlte Suche verwendet. Mit utm_term können Sie Keywords für diese Anzeige notieren. Beispiel: utm_term=Laufen+Schuhe

Kampagnen-Content (utm_content)
Dieses Feld ist optional. Wird für A/B-Tests und inhaltbezogene Anzeigen verwendet. Mit utm_content können Sie Anzeigen und Links unterscheiden, die auf die selbe URL verweisen. Beispiele: utm_content=logolink oder utm_content=textlink

Kampagnenname (utm_campaign)
Dieses Feld ist zwingend. Wird für die Keyword-Analyse verwendet. Verwenden Sie utm_campaign zur Kennzeichnung einer spezifischen Produktwerbeaktion oder einer strategischen Kampagne. Beispiel: utm_campaign=spring_sale

AdWords Kampagnen messen

Wenn unser Google Analytics-Konto mit einem aktiven AdWords-Konto verknüpft ist, ist es nicht erforderlich, AdWords-Links mit Tags zu kennzeichnen. Dies erfolgt automatisch durch die Automatische Tag-Kennzeichnung.

Weitere Informationen

Mehr Informationen zum Thema Kennzeichnung von Links (Tags) findet man im Support-Bereich von Google Analytics-Hilfe (wie kann ich meine Links durch Tags kennzeichnen?).

 

Veröffentlicht unter Suchmaschinenmarketing, Suchmaschinenoptimierung, Tools | Verschlagwortet mit , , | Hinterlasse einen Kommentar

Wirksame Websites

Publiziert am 24. Februar 2012 von Sam Steiner

Es gibt einen grossen Unterschied zwischen einer Website, die einfach schön ist, die wichtigen Angebote enthält und einer Website, die wirklich wirksam ist. Im ersten Fall ist die Website ein Beigemüse, wird in Werbung erwähnt, man versucht es den Leuten aufzudrücken. Im besseren Fall macht die Website die “aktive Arbeit” – sie zieht neue Kunden regelrecht an.

Natürlich rede ich hier nicht von einem Wundermodell, das ohne Aufwand sich einrichten lässt und dann Millionäre macht. Es geht darum, die eingesetzte Zeit effizienter in realen Resultaten umzusetzen. Der Zeitaufwand ist womöglich das Doppelte oder mehr, die Wirkung muss dabei ein Vielfaches davon sein. Das Web von heute bietet aber Dynamiken an, die verstärkend wirken können.

1. Strategie definieren

Oft sehe ich (schöne) Websites, die einfach da sind, weil man heute eine Website hat. Wie ist das bei Ihnen? Ist die Website einfach nur da und muss gepflegt werden – oder wirkt sie? Man muss definieren, was man mit der Website bewirken will. Einfach nur informieren ist kein Ziel. Will man Abonnenten für ein Fach-Newsletter gewinnen, will man online verkaufen? Sollen die Besucher zum Telefon greifen? Wer ist der ideale Kunde? Nach was sucht man, wenn man Ihre Angebote braucht? Wo sucht man dann? Solche Fragen sollten geklärt sein.

2. Wirksame Website

Passend zum Angebot. Gut lesbar. In aktuellem Stil. Schön. Selbstgebasteltes bitte sein lassen – auch wenn Bekannte unbewusst lügen: “sieht super aus!”. Die Website muss bereit sein für mobile Geräte wie Smartphones, suchmaschinenfreundlich in der Struktur und einfach durch Sie selbst aktualisierbar. Besucher sollten intuitiv an Ihr Hauptziel herangeführt werden – zB Anmeldung für Newsletter, Produkt-Kauf etc. Nicht nur von Ihrer Startseite aus! Platzieren Sie diese sogenannten “Call to Action” Buttons so, dass sie auch gefunden werden, wenn man direkt auf einem Ihrer Artikel landet.

Eine wirksame Website muss Ihnen die Möglichkeit bieten, Geschichten zu erzählen und hilfreiche Tipps zu geben. Das sind teilbare Inhalte – nicht geschliffene, emotionslose PR-Texte. Einen solchen Bereich nennt man meist “Blog”. Es bietet in der Regel eine Kommentarfunktion, damit Diskussionen entstehen können – und kann abonniert werden.

Die Website ist – sofern wirksam und nicht nur eine Broschüre – wichtig für Ihr gesamtes Online-Marketing. Auch im 2012. Eine aktuelle, effektive Website von heute hat viel mehr Potential als eine von 2007. Das Web verändert sich rasant. Es gehen neue Möglichkeiten auf, die man jetzt nutzen sollte – Vorteil ist nur im Vorsprung.

3. Besucher

Dass Unternehmen mit Broschürenwebsites nicht viel dran geben, dann auch noch Besucher auf die Website zu locken, ist verständlich. Die Website ist schön aber unwirksam. Entsprechend viele Websites sind kaum besucht – zu Recht. Ist die Website aber gut, “lohnt” es sich nun, Besucher vorbeischauen zu lassen. Und das aktiv zu tun.

Erzählen Sie Geschichten aus dem Unternehmensalltag, veröffentlichen Sie nützliche Inhalte, die Ihrem idealen Kunden einen reellen Mehrwert bieten. Dieser Teil Ihrer Website – meist “Blog” genannt – sollte optimiert sein fürs Teilen im Social Web. Man kennt das heute gut: Facebook-Teilen-Buttons, +1 (für Google+), Twitter-Button und LinkedIn-Button.

Nutzen Sie die neuen Möglichkeiten des Social Webs. Treten Sie in Dialog mit Interessenten und Kunden. Achten Sie darauf, Ihre Inhalt möglichst “teilbar” zu machen. Nützliches statt Geschliffenes. Interessante Einblicke statt PR-Masken.

Hören Sie zu, was man über Ihre Firma oder Ihre Produkte sagt. Bieten Sie direkt die Lösung, wenn Sie in Social Web Kanälen jemanden hören, der danach sucht. Lernen Sie die Sprachen der verschiedenen Plattformen, damit Sie nicht plump daher kommen, wenn sie schreiben. Das Social Web ersetzt das klassische, es ermöglicht einen natürlicheren Umgang. Die Interaktionen rund um eine Website oder ein Online-Angebot haben immer stärkeren Einfluss auf die Einschätzung der Relevanz durch Suchmaschinen. Google zum Beispiel nennt das “Search, plus Your World“.

Achten Sie auf eine gute Struktur der Website. Links sollten lesbar sein (Beispiel ist der Link von diesem Artikel) und nicht kryptisch /page/84510/xFC/ oder ?p=84510 heissen. Dies hilft Suchmaschinen, Ihre Inhalte zu analysieren. Schreiben Sie aber nicht für Suchmaschinen, sondern für Menschen. Dass Sie dabei die wichtigen Wörter für Ihr Fachgebiet verwenden ist dann ganz natürlich und weniger holprig.

4. Messungen

Messen Sie die Besucher Ihrer Website. Woher kommen sie? Auf welchem Weg durchlaufen Sie Ihre Website? Passen diese Wegen mit Ihren “Call to Action”-Zielen überein? Wo muss allenfalls weiter optimiert werden? Welche Inhalte kommen gut an? Werden die hilfreichen Inhalte weiter geteilt? Wieviele Leute haben den Blog per E-Mail oder RSS abonniert? Wer linkt zu Ihren Inhalten? Mit welchen Suchbegriffen werden Sie gefunden?

Solche Einblicke geben Ihnen dann fundierte Ansntösse, um die Wirksamkeit der Website weiter zu erhöhen. Es kann auch Hinweise geben auf Inhalte, die Leute interessant finden würden – also Inspiration in der Themenfindung.

Hat Sie dieser Artikel inspiriert? Ich freue mich über Kommentare oder Weiterteilen – danke!

Veröffentlicht unter CMS, Mobile, Social Media, Tools, Webdesign | Verschlagwortet mit , , , , | 1 Kommentar