Der Falz einer Website beschreibt die unterste Linie, die ein Besucher ohne scrollen zu müssen noch sehen kann. Je nachdem welche Monitorauflösung und welchen Browser ein Besucher verwendet, ändert sich der Viewport und somit auch die Höhe des Falzes. Bei der Konzeption und Gestaltung einer Website sollte daher unbedingt darauf geachtet werden, dass alle wichtigen Seitenelemente wie die Hauptnavigation, das Logo und ein erster Abschnitt des Inhalts, sich bei möglichst vielen Usern oberhalb des Falzes befinden. Anderenfalls muss der Besucher scrollen um die Website wie gewünscht benutzen zu können.

Auch wenn der Falz im Zeitalter von Responsive Webdesign und verschiedenen Geräteausrichtungen (landscape, portrait) zunehmend verschwimmt, so macht es doch Sinn das eigene Projekt einer kurzen Überprüfung für die Desktop-Darstellung zu unterziehen. Das Tool "Where is the fold?" blendet ein Overlay der gängigsten Monitorauflösungen ein und zeigt an, wieviel Prozent der Besucher einen bestimmten Bereich der Website noch sehen können.

• http://whereisthefold.com/

zwei vergleichbare Tools habe ich vor einiger Zeit bereits vorgestellt.

• Google Browser Size
• Browser-Resize

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor einiger Zeit habe ich euch den Online-Dienst Buffer vorgestellt, mit dem ihr eure Tweets buffern - also zeitverzögert veröffentlichen könnt. Der Vorteil eines solchen Dienstes liegt auf der Hand: Ihr schreibt eure Tweets in einem bestimmten Zeitfenster und Buffer veröffentlicht sie wenn ihr etwas völlig anderes tut oder die meisten eurer Follower online sind.
Ein solches Tool macht allerdings nicht nur für Twitter, sondern auch für Google+ und Facebook Sinn: Nun hat die Beta-Phase für den Facebook-Buffer begonnen.

Facebook-Buffer bisher mit übersichtlichen Funktionen

Der Facebook-Buffer befindet sich bisher in einer - ich vermute sehr frühen - Testphase. Nachdem ihr der Buffer-App den Zugriff auf euer Facebook-Profil gestattet habt, könnt ihr Statusmitteilungen veröffentlichen. Diese Nachrichten werden dann von Buffer in euerem Profil veröffentlicht. Viel mehr funktioniert bisher allerdings noch nicht.

Must-Have-Features

Einige Features muss die Facebook-App unbedingt erhalten um im täglichen Workflow wirklich eine Arbeitserleichterung zu sein. Was das angeht bin ich allerdings sehr zuversichtlich, die Twitter-Version wurde auch regelmäßig erweitert.

• Es muss möglich sein eine Fanpage zu wählen auf die der Beitrag gebuffert werden soll
• Es muss möglich sein einen eigenen URL-Shortener wie goo.gl zu verwenden.
• Es muss möglich sein das Beitragsbild zu wählen
• Natürlich müssen alle Funktionen der Twitter-Anwendung übernommen werden
• ...

Was für Funktionen fehlen euch noch? Bzw. was für Vorstellungen und Anforderungen stellt ihr an eine solche App?

Wenn ihr Buffer für Facebook testen wollt, nutzt folgenden Link:

• Buffer für Facebook

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ich habe euch vor einiger Zeit einen Online Generator für CSS-Sprites vorgestellt der sowohl die grafische Sprite, als auch den entsprechenden CSS-Quellcode generiert. Heute möchte ich euch auf ein alternatives Tool aufmerksam machen, das bei mir einige Wochen ein Leben als ungenutztes Lesezeichen fristen musste. Zu unrecht wie sich gestern herausstellte.
Sprite Cow ist kein Online-Generator im eigentlichen Sinn - vielmehr erleichtert er die Arbeit mit Sprites ohne, dass einem die Arbeit komplett abgenommen wird. Und genau hier liegt in meinen Augen der entscheidende Vorteil.

Und so funktioniert die Sprite Cow

Das Tool hilft euch dabei die Koordinaten der einzelnen Grafiken innerhalb der Sprite zu finden. Die Sprite, also die eigentliche Grafik, müsst ihr nach wie vor in Photoshop, Fireworks oder einem anderen Programm selbst herstellen.
Nachdem ihr die Sprite angeordnet habt, schickt ihr die Datei an Sprite Cow. Das Tool erkennt nun wo in der Sprite Grafiken abgelegt wurden. Per Klick oder über einen Auswahlrahmen könnt ihr einen Bereich der Sprite markieren und anschließend die Abmessungen, sowie die Koordinaten in euer CSS-Dokument übernehmen. Das Ganze funktioniert extrem intuitiv und schnell.

Ein Tool muss nicht alles können

Ich bin ein großer Fan von all den kleinen Tools die den Workflow beschleunigen. Bei vielen dieser Tools ist es allerdings so, dass sie zwar grundsätzlich praktisch sind, unterm Strich spart man aber kaum Zeit. Häufig übernehmen Online-Dienste einen kompletten Arbeitsschritt und spucken als Ergebnis ein fertiges Modul aus, welches ich dann zeitaufwendig an die Struktur meiner Seite anpassen muss.
Sprite Cow generiert keine Sprite. Der Dienst hilft euch die eigene Sprite besser zu nutzen und nimmt euch den wirklich lästigen Arbeitsschritt ab.

Wie arbeitet ihr mit Sprites?

Ich selbst erstelle die Sprite immer am Ende des Projektes. Nur dann kann ich sicher sein, dass sich nichts mehr an den Grafiken ändert. Bis dahin arbeite ich mit Einzelgrafiken.
Ich kenne aber auch Kollegen die eine Sprite von Anfang an einsetzen und im Projektverlauf um die entsprechenden Grafiken ergänzen.

Wie ist euer Workflow was Sprites angeht?

• Sprite Cow

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ich möchte euch gerne ein weiteres Online-Tool vorstellen, mit dem ihr eure Website auf verschiedenen Viewports testen könnt. Der Dienst nennt sich Screenfly und simuliert eine Vielzahl an (mobilen) Endgeräten. Angefangen bei Desktop-Computern über Smartphones und TV-Geräte bis hin zu Tablets werden alle gängigen Devices abgedeckt.
Besonders gut gefällt mir, dass nicht nur die Apple-Geräte berücksichtigt werden, sondern eben auch Blackberry, Android und Co. Darüber hinaus lässt sich auch noch vom Portrait- in den Landscape-Modus wechseln.

Nachteilig ist allerdings, dass auch dieser Dienst lediglich den Viewport simuliert. Geräteabhängige Settings werden nicht berücksichtigt.

Screenfly does not mimic the behavior of the devices you select. For example, most mobile phones and tablets have a zoom feature that displays the entire page at once, even if it appears to be clipped off the edges of the screen here.

• Screenfly

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wir haben in CSS die Möglichkeit Farbwerte auf unterschiedliche Weise anzugeben. Sehr populär ist hier sicher der Hexadezimal-Wert (z.B. #00FF00). Gerade bei modernen Web-Projekten macht es allerdings durchaus Sinn die Farben im RGBA-Farbmodus (Rot, Grün, Blau, Alpha) anzugeben, da so über CSS die Alpha-Transparenz berücksichtigt werden kann.
Der "HEX 2 RGBA Color Calculator" wandelt eure Farben in den RGBA-Modus um und erspart euch so lästige Arbeit. Die Transparenz lässt sich anschließend über einen Schieberegler intuitiv anpassen.

HEX 2 RGBA Color Calculator

via Mathias Schütz

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn ihr erfahren möchtet welche Technologien eine Website einsetzt, sei es nun Apache, WordPress, HTML5 oder jQuery, dann schaut euch mal das Web-Tool "Under The Site" an.
Nach Eingabe der URL listet der Dienst alle verwendeten Technologien und Dienste auf, ergänzt durch eine kurze Erklärung.
Ein sehr interessantes Tool um fremde Websites und die dort zum Einsatz kommenden Funktionen einmal unter die Lupe zu nehmen.

Wenn ihr sehen möchtet, was der Dienst bei meiner Website anzeigt, klickt folgenden Link
underthesite.com/sites/Kulturbanause.de

• underthesite.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Media Queries und Responsive Web Design sind die aktuellen Buzzwords der Webdesign-Szene. Gemeint ist damit eine Website, die mithilfe der CSS-Technik "Media Query" für unterschiedliche Ausgabemedien und Displaygrößen optimiert wurde. Da die mobile Web-Nutzung rasant zunimmt, muss eine zeitgemäße Website auch auf Smartphones und Tablet-PCs eine gute Figur machen.
Wie ihr eine Website für iPhone, iPad & Co. optimiert, habe ich in einem früheren Artikel bereits beschrieben. Nun möchte ich euch ein Online-Tool vorstellen, mit dem sich die Darstellung auf iPhone und iPad simulieren lässt.

iOS Media Query Previewer

Der iOS Media Query Previewer simuliert die Darstellung einer Website auf dem iPad und dem iPhone. Einfach die gewünschte URL eingeben, Enter drücken und schon könnt ihr sehen ob eure Website auf iPhone und iPad auch wie gewünscht angezeigt wird.

• iOS Media Query Previewer

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Arbeit im Social Web frisst eine Menge Zeit. Blog-Beiträge schreiben, Facebook-Fans verwalten, Tweets veröffentlichen, Artikel weiterempfehlen, auf Kommentare, Likes, Retweets sowie direkte Nachrichten reagieren und alles bitte zügig, aber regelmäßig.
Wer nicht auf eine Social Media Abteilung zurück greifen kann und sich parallel um sein Hauptgeschäft kümmern muss, läuft Gefahr früher oder später die Anforderungen nicht mehr leisten zu können.
Zum Glück lassen sich viele Arbeitsabläufe automatisieren. Mit Chancen und Risiken.

Was ist Dlvr.it?

Der Online-Dienst Dlvr.it nutzt die Inhalte eines oder mehrerer RSS-Feeds und füttert mit diesen Information weitere Portale wie Facebook, Twitter, Google Buzz oder Tumblr. Wenn ihr also beispielsweise einen WordPress-Blog führt, so könnt ihr den dort angebotenen Feed nutzen, um sowohl auf Facebook, als auch auf Twitter Statusnachrichten zu euren neusten Blog-Posts zu veröffentlichen. Das spart auf der einen Seite zwar massig Zeit, kann sich allerdings negativ auf die Qualität und vor allem die Individualität der Social Media Inhalte auswirken.

Ihr könnt unzählige Feed-Quellen an unzählige Dienste senden und somit einen Großteil eurer Arbeit automatisieren. Da auch die Inhalte einer Facebook-Fanpage als RSS-Feed angeboten werden, eröffnen sich hier sehr interessante Möglichkeiten der Verknüpfung. Man sollte bei all den zur Verfügung stehenden Optionen nur darauf achten, keinen Loop zu konstruieren, in welchem die Beiträge immer im Kreis geschickt werden.

Extrem detaillierte Einstellungsmöglichkeiten

Das interessante an Dlvr.it sind die sehr umfangreichen Einstellungsmöglichkeiten. Die Inhalte lassen sich mit eine Pre- oder Postfix versehen, können Hashtags enthalten oder bestimmte Wörter werden automatisch durch andere Wörter ersetzt.
Bei der Aufbereitung der Inhalte lässt Dlvr.it ebenfalls wenige Wünsche offen. Es kann sehr detailliert eingestellt werden, welche Feed-Informationen für Statusmitteilungen zur Verfügung stehen. Schlagworte können beispielsweise innerhalb des Tweets in Hashtags umgewandelt werden.

Auch bei der Facebook-Integration bietet Dlvr.it tolle Möglichkeiten. Welches Profil soll benutzt werden? Welches Bild? Soll der Beitrag als Notiz, Link-Tipp oder als Statusnachricht veröffentlicht werden? Oder möchtet ihr die Informationen lieber gleich in einer bestimmten Gruppe veröffentlichen?

Goo.gl als URL-Shortener nutzen

Dlvr.it bietet einen hauseigenen URL-Verkürzer an und veröffentlicht die Inhalte auch unter diesen URLs. Wenn ihr lieber einen anderen Dienst verwenden möchte, beispielsweise Goo.gl, so schaut euch mal folgenden Blog-Post von Dlvr.it an. Ich persönlich finde Goo.gl oder Bit.ly einfach etwas seriöser.

• dlvr.it now serving goo.gl short links

Fazit

Ich muss zugeben, dass mich Dlvr.it auf ganzer Linie überzeugt hat. Die Anwendung funktioniert, ist übersichtlich und bietet umfangreiche Einstellungsmöglichkeiten.
Der größte Nachteil ist der fehlende individuelle Charakter der Statusmitteilungen. In wiefern Facebook-Fans und Follower so etwas abstrafen, kann wohl nur durch Ausprobieren herausgefunden werden. Am effektivsten könnte die gesunde Mischung aus individuellen und automatisch generierten Inhalten sein.

• Dlvr.it

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Der Einsatz von Gestaltungsrastern (Grids) ist aus dem modernen Webdesign nicht mehr wegzudenken. Um in der Layoutphase mit Rastern arbeiten zu können, stehen zwei Optionen zur Verfügung. Entweder greift man auf ein vordefiniertes Grid-System wie beispielsweise 960.gs zurück, oder man berechnet sich ein eigenes Raster. Ich persönlich bevorzuge die Arbeit mit einem selbst erstellten Raster, da ich so alle Inhalte der Website bestmöglich berücksichtigen kann.
Nicolaj Kirkgaard Nielsen hat nun einen Online-Grid-Generator für Photoshop und Illustrator entwickelt, der alle Funktionen abdeckt, die ich bei der Arbeit mit Gestaltungsrastern benötige.

Wie funktioniert der Grid-Generator?

Über eine Online-Maske werden alle relevanten Daten eingegeben. Neben der Breite des Dokuments in Pixeln, muss die Spaltenzahl, der Abstand zwischen den Spalten und der Außenabstand angegeben werden. Besonders gut gefällt mir, dass immer erkennbar ist welches Element im Moment bearbeitet wird. Auch eine Warnung wird angezeigt sobald die Eingabe zu ungeraden Ergebnissen führen würde.

Das fertige Raster exportiert ihr als Photoshop- bzw. Illustrator-Script. Per Drag and Drop kann das Raster anschließen auf ein geöffnetes Dokument angewendet werden. Öffnet ihr das Script mit dem jeweiligen Programm, so wird eine neue Datei erzeugt.
In beiden Fällen wird das Raster in Form von Hilfslinien umgesetzt.

• gridcalculator.dk

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Kurz bevor Google den +1-Button eingeführt hat, gab es auch eine Neuerung aus dem Hause Twitter. Neben dem bereits bekannten "Tweet This"-Button, der dazu gedacht ist, Beiträge und Website-Inhalte zu teilen, wurde nun ein offizieller "Follow"-Button eingeführt. Endlich.
Klickt ein Besucher auf diesen Button, so öffnet sich ein PopUp mit einer kurzen Zusammenfassung des Profils. Mit einem weiteren Klick auf "Follow" können dann alle Tweets des Users abonniert werden.

Code-Generator für den Twitter-Button

Twitter hat zur Erstellung des Buttons einen kleinen Generator bereit gestellt. Neben dem Benutzernamen kann zwischen einem hellen oder dunklen Hintergrund gewählt werden. Darüber hinaus könnt ihr bestimmen, ob ihr die Anzahl der Follower darstellen möchtet.

• twitter.com/about/resources/followbutton

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Um die Ladezeiten einer Website zu testen bzw. zu bewerten, gibt es mittlerweile einige brauchbare Tools: Da wäre zum Beispiel der Google-Dienst Page-Speed Online oder das Browser-Plugin YSlow von Yahoo. Beide Dienste lassen sich übrigens gemeinsam und sehr komfortabel auf GTMetrix.com online nutzen.
Wenn ihr darüber hinaus überprüfen möchtet wie sich die Ladezeit eurer Website in verschiedenen Ländern und Browsern darstellt, so lohnt sich zusätzlich ein Blick auf die Website LoadsIn.

Auf LoadsIn lässt sich neben verschiedenen Browsern auch der Standort des Benutzers simulieren. So könnt ihr überprüfen ob eure Website für die jeweilige Zielgruppe auch optimal aufgebaut wird. Neben der reinen Auswertung erstellt das Tool während des Seitenaufbaus auch noch einige Screenshots. So könnt ihr sehen wie eure Seite sich aufbaut und ob es hier noch etwas zu verbessern gibt.

• LoadsIn

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Blogger und Webdesigner müssen bei ihren Projekten regelmäßig auf Sonderzeichen zurück greifen. Da wären zum Beispiel das Copyright-Zeichen im Footer einer Website (©), mathematische Zeichen zur Darstellung von Code-Snippets oder Formeln (‹, ›) und Betriebssystem spezifische Zeichen für Tastaturkürzel oder Funktionen (⌘, ⌥). Und auch die deutschen Umlaute sollten wir nicht vergessen.
Insbesondere wenn man häufig Artikel unterwegs schreibt, ein reduziertes Tastatur-Layout verwenden muss und auch nicht "mal eben" auf die Zeichentabelle von Windows oder OsX zurück greifen kann, werden Sonderzeichen zum echten Zeit-Killer. Die Website CopyPasteCharacter schafft hier Abhilfe.

Auf CopyPasteCharacter werden häufig verwendete Sonderzeichen abgebildet und können per "Kopieren und Einfügen" sehr schnell im Projekt verwendet werden. Mehr gibt es dazu eigentlich auch nicht zu sagen. Es ist simpel und funktioniert.

HTML-Zeichen werden allerdings nicht angezeigt.Dafür müsstet ihr auf eine Website wie HTML-Entities zurück greifen.

HTML-Zeichen lassen sich im Kopf der Seite per Klick aktivieren. CopyPasteCharacter eignet sich allerdings nur für Projekte in denen Sonderzeichen korrekt codiert werden.

• copypastecharacter.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Texturen und Strukturen benötigen wir im Webdesign fast genauso häufig wie Muster: für Zierelemente, für Hintergründe und zur Gestaltung von realistischen Objekten oder Oberflächen. Es gibt auch eine Vielzahl an Websites und Blogs auf denen hochauflösende und lizenzfreie Texturen heruntergeladen werden können. Doch wenn gerade eine bestimmte Struktur benötigt wird, kann die Suche danach trotzdem einige Zeit in Anspruch nehmen. Die Website Texture Gallery aggregiert verschiedene Quellen für hochwertige Texturen und fasst die Inhalte sehr übersichtlich zusammen.

Neben der chronologischen Darstellung aller gespeicherten Texturen, kann der Datenbestand auch nach diversen Kategorien gefiltert werden.

• Texture Gallery

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Tools zur vereinfachten und vor allem intuitiven Handhabung von CSS3 gibt es mittlerweile einige. Mit Layer Styles ist nun ein weiteres Hilfsmittel an den Start gegangen, dass die bereits wohl bekannten Funktionen, sowie das Interface der Photoshop-Ebenenstile verwendet um Elemente mit CSS3 zu gestalten.

Das Erscheinungsbild von Layer Stiles ist erstaunlich simpel und erinnert stark an den Ebenenstile-Dialog aus Photoshop.

Über verschiedene Regler und Einstellungsmoglichkeiten könnt ihr den Schlagschatten (drop shadow), den Schatten nach Innen (inner shadow), die Farbüberlagerung (background), die Kontur (border) und sogar abgerundete Ecken (border-radius) kinderleicht gestalten. Wenn Ihr mit dem Design fertig seid, so kann über einen Button unten links, der CSS-Code angezeigt und kopiert werden.

• Layer Styles

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.