Infografiken von Visual.ly gefüttert mit Daten aus deinem Google-Analytics-Account
Visual.ly ist ein sehr bekannter webbasierter Dienst zum Erstellen von Infografiken. Wer damit umzugehen weiß, der kann interessante und nützliche Grafiken erstellen und somit eine hohe Aufmerksamkeit und Reichweite erzielen.
Man kann aber Visual.ly und seinen eigenen Google-Analytics-Account verheiraten und mit den Webstats-Daten Infografiken erstellen und sich bei Bedarf einmal pro Woche als E-Mail-Anhang zuschicken lassen:
Interessant ist so etwas wenn man die Daten ansehnlich aufbereiten möchte, aber auch für Menschen die nur ein paar notwendige Infos brauchen oder für Nutzer die sonst von Informationsfülle auf Google Analytics überfordert werden.
Ist die Website responsive?
In den letzten Jahren hat sich die Verbeitung von Smartphones, Tablets und Netbooks neben dem heute schon fast altmodisch wirkenden PC rasant ausgebreitet.
Um so wichtiger ist es beim Erstellen einer Website darauf zu achten, dass sich diese den unterschiedlichen Bildschirmgrößen anpasst, also responsive ist.
Um dies ganz schnell feststellen zu können, genügt nun der Besuch der Website Am I Responsive?
Einfach die URL der zu testenden Website eingeben und schon sieht man in sekundenschnelle wie die Website auf den unterschiedlichen Bildschirmen ausgegeben wird.
Am I Responsive?
Sehr simpel, aber sehr nützlich.
PlaceIMG: Generator für Platzhalter-Grafiken
Um ein Website-Layout dem Kunden ansprechend zu präsentieren, werden neben Texten auch Bilder benötigt. Wenn der Kunde bis dahin die Texte noch nicht fertig hat, greifen die Webdesigner schon seit ewigen Zeit auf Blindtextgeneratoren.
Hat der Kunde auch keine Bilder zu Hand, dann kann man seit einiger Zeit auch auf diverse Generatoren für Platzhaltergrafiken zurückgreifen. Mit lorempixel und Dummy Image haben wir bereits zwei solcher Generatoren vorgestellt. Mit PlaceIMG gesellt sich ein weiterer Kandidat dazu:
Der Generator bietet ein paar Extras. Man kann sich nicht nur die passende Bildgröße zusammenklicken sondern auch zwischen fünf Kategorien wählen und bestimmen ob das Bild in Farbe (Standard) oder in Graustufen oder als Sepia. Anschließend ist das Bild per Link aufrufbar oder man kann es sich herunterladen.
Dadurch, dass die Grafiken auch per Link aufrufbar sind, kann man auch selber ohne Hilfe des Generators auf die gewünschte Platzhalter-Grafik zugreifen, zum Beispiel:
http://placeimg.com/400/300/people/sepia
ColorHexa: Farbtool mit vielen Infos
ColorHexa ist ein sehr ausgefeiltes, webbasiertes Farbtool welches viele Informationen über einen Farbwert liefert. Im Suchschlitz kann man unter anderem die RGB-Farbwerte eingeben und dabei sogar in Kurzform: #abc anstatt #aabbcc.
Der jeweilige Farbwert ist dann auch unter der entsprechenden URL aufrufbar: #abc bzw. #aabbcc findet man dann unter www.colorhexa.com/aabbcc.
Anschließend bekommt man zu der jeweilige Farbe diverse Infos. Zuerst wären dies Informationen allgemeiner Natur, aus welchen Farben setzt sich der Farbwert im RGB- und CMYK-Farbraum zusammen. weiterlesen…
Viele Tools für Webworker und Online-Marketing
Bevor die beiden Lesezeichen irgendwo bei mir im Bookmark-Nirvana verschwinden dokumentiere ich sie hier im Weblog. 
Unter best-webdesign-tools.com findet man ein gut sortiertes und durchsuchbares Verzeichnis, was momentan 335 verschiedene Tools für Webworker bzw. Webdesigner listet:
Beim zweiten Link handelt es sich um einen Artikel von t3n. Dort werden 15 Google-Tools bzw. Tools für Online-Marketing beschrieben:
Viel Spaß beim Stöbern.
Wie gut ist die Unterstützung für diese Webtechnik?
Wie schaut die Browser-Unterstützung für das video und audio-Element aus? Soll ich im konkreten Projekt die Farbverläufe mit CSS3 machen oder doch lieber auf Grafiken zurückgreifen? Kann ich beim nächsten Auftrag SVG (Scalable Vector Graphics) einsetzen? Solche und ähnliche Fragen stellen sich vermutlich tagtäglich hunderte von Webworkern.
Bei Beantwortung dieser Fragestellungen kann die Website CanIuse.com helfen. Dort werden diverse Techniken und Methoden (CSS, HTML, JS, SVG etc.) aufgelistet und…
… die Informationen nach Browsern bzw. Plattformen aufgelistet. So kann man schon im Vorfeld viel einfacher entscheiden auf welches Pferd man setzt.
Twitter-Links mit Packrati.us sichern
Packrati.us ist ein Dienst, der es einem ermöglicht, die Links, die man getwittert hat zu sichern. Dabei sichert man die Links nicht auf Packrati.us selber sondern dieser Dienst ist viel mehr die Schnittstelle. Die Verweise werden dann auf einem der Lesezeichen-Dienste gesichert.
Momentan werden folgende Lesezeichen-Dienste unterstützt: weiterlesen…
Nutzloser CSS3-Generator
Unter dem ironischen Namen Useless CSS3 Generator findet man einen weiteren Generator für CSS3-Eigenschaften:
Mit diesem Generator kann man für folgende Eigenschaften Code generieren:
- abgerundete Ecken
- Box- und Textschatten
- Opacity ("Durchsichtigkeit") und RGBA
- CSS3-Transformationen
Mit ProCSSor den CSS-Code übersichtlicher darstellen
ProCSSor ist ein Online-Tool mit dem man den CSS-Code übersichtlicher darstellen kann … oder es mal einfacher auszudrücken: damit kann man den Code "hübscher" machen.
Den CSS-Code kann man auf drei Arten angeben: direkt per Copy & Paste, in dem man eine Datei hochlädt oder in dem man auf eine URL verweist. Anschließend kann man nach mehreren Kriterien die Ausgabe sortieren. weiterlesen…
Generator für CSS3-Buttons
Auf "CSS3 Button Generator" findet man, wie schon der Name verrät, einen Generator für Buttons bzw. Grafiken, die durch CSS3 dargestellt werden.
Mittels diverser CSS3-Eigenschaften kann man Ecken abrunden, dem Hintergrund einen Verlauf spendieren, die Grafik neigen, zeitliche Verzögerungen einbauen und einiges mehr. Man kann die Angaben sowohl für den Normalzustand, wie auch für den hover-Effekt bestimmen.
Darunter wird der Code generiert, den man kopieren und in die eigene CSS-Datei einfügen kann.