Tools

Die Entwicklung moderner Websites wird immer komplexer und ohne die unzähligen Tools und Scripte würde die Umsetzung eines Projekts noch länger dauern. Gerade für lästigen Aufgaben werden praktische Tools entwickelt um dem Webdesigner unter die Arme zu greifen. Eine umfangreiche Liste aller uns bekannten Tools findest du übrigens auf Best Webdesign Tools.

Website-Typografie per Drag and Drop testen: Font Dragr

font-dragr-logo

Wenn ihr schnell und intuitiv testen möchtet wie gut sich eine Schriftart für eine Website eignet, lohnt sich ein Blick auf Font Dragr. Das Online-Tool arbeitet mit jeder beliebigen Schriftart und bindet sie mit der CSS-Eigenschaft @font-face in die Website ein. Font Dragr wird zunächst als Bookmarklet in die Favoriten gezogen. Anschließend könnt ihr das Tool als Overlay aktivieren und eine Schriftart zum Test auswählen. Wenn ihr einen Font testen möchtet, der nicht Bestandteil der Galerie ist, könnt ihr per Drag and Drop eine Schrift vom eigenen Computer hinzufügen.

Beitrag zu Ende lesen

Webdesign-Verzeichnis

wvz_small

Vor einiger Zeit habe ich euch den Dienst 1000 Webdesigner vorgestellt, eine Website die verschiedene Webdesigner, Freelancer und Agenturen nach Standorten sortiert auflistet. Vor ein paar Tagen bin ich nun auf das "Webdesign-Verzeichnis" aufmerksam gemacht worden, einen Dienst der sich ebenfalls als Vermittler zwischen Webdesignern, bzw. Agenturn und Kunden versteht. Die Möglichkeiten beider Dienste sind nahezu identisch. Auch im Webdesign-Verzeichnis könnt ihr ein Profil eurer "Firma" angelegen, und einige Referenzen einstellen.

Beitrag zu Ende lesen

Web-Dienste automatisieren und verknüpfen mit ifttt. Lass das Web für dich arbeiten.

ifttt-logo-icon

Mitte September habe ich in Bremerhaven einen Vortrag zum Thema "Selfmarketing im Web" gehalten und dort auch den Online-Dienst ifttt vorgestellt. Mit ifttt (if this then that) lassen sich Arbeitsabläufe im Web perfekt automatisieren, und zwar in einer komplexen und zugleich benutzerfreundlichen Art und Weise, die ich so von keinem anderen Dienst kenne.
Im Anschluss an meinen Vortrag wollte ich das Tool natürlich auch hier im Blog vorstellen, habe es zeitlich jedoch nicht geschafft den Artikel zu schreiben. Irgendwann hatte das Thema an Aktualität verloren und ich dachte, der Dienst wäre mittlerweile hinreichend bekannt. In den letzten Tagen habe ich mehrmals erfahren, dass ich mich offenbar geirrt habe und ifttt längst nicht so bekannt ist wie ich glaubte und wie es das Tool verdient hat. Aus diesem Grund möchte ich den Artikel heute nachholen - in der Hoffnung euch die Arbeit zu erleichtern.

Beitrag zu Ende lesen

Responsive Webdesigns testen

responsive-web-design-tester-2

Ich habe in der Vergangenheit bereits über verschiedene Tools geschrieben mit denen Ihr die Darstellung einer Website auf verschiedenen Endgeräten simulieren könnt. Nun möchte ich euch ein weiteres Tool für diesen Zweck vorstellen - es ist immer schön Alternativen zu kennen. Der Responsive Design Tester simuliert verschiedene Viewports und zeigt die mittels CSS3 Media Queries optimierten Layouts parallel an.

Beitrag zu Ende lesen

HTML5 und CSS3 in der Praxis – welche Features lassen sich heute schon nutzen?

html5

Wenn ihr HTML5 und CSS3 in aktuellen Projekten einsetzen möchtet, stellt sich häufig folgende Frage: In welchem Browser wird Funktion X oder Eigenschaft Y denn nun eigentlich schon unterstützt? Genau das ist ein Kernproblem bei der Nutzung der modernen Techniken und führt zu einiger Verunsicherung. Damit ihr die zukünftigen Standards ohne Kompatibilitätsprobleme verwenden könnt, solltet ihr unbedingt einen Blick auf die Website "Can I Use" werfen. Über eine Suchmaske könnt ihr nach HTML5-, CSS3- und SVG-Befehlen suchen und erhaltet als Ergebnis eine detaillierte Auflistung über die jeweilige Browser-Kompatibilität. Absolute Praxisempfehlung.

Beitrag zu Ende lesen

Maximale Bildkompression: JPEGmini vs. Smush.it vs. PunyPNG

bildkompression

Geringe Dateigrößen sind nach wie vor ein wichtiger Anhaltspunkt um die Qualität einer Website zu beurteilen. Zwar wird das lokale Internet immer schneller und verkraftet auch größere Dateien, doch das mobile Web erreicht diese Übertragungsgeschwindigkeiten längst nicht. Und auch die Suchmaschinen berücksichtigen die Ladezeit einer Website und listen schnelle Seiten weiter vorne.
Eine von vielen Möglichkeit um die Ladezeit zu reduzieren, sind optimal komprimierte Grafiken. Wer jetzt glaubt, der "Für Web speichern"-Dialog von Photoshop würde ausreichen, der irrt. Photoshop erzeugt außergewöhnlich große Dateien und ist selbst innerhalb der Creative Suite nicht die erste Wahl. Fireworks komprimiert Bilder bei identischen Exporteinstellungen deutlich besser.
Wer Fireworks nicht besitzt, oder wem der Umweg vom Photoshop-Layout über den Fireworks-Export zu lästig ist, kann auf Online-Tools zur Bildkompression zurückgreifen. Ich habe mir drei gängige Dienste angeschaut und möchte euch zeigen welches Tool für welches Bild am besten geeignet ist.

Beitrag zu Ende lesen

Den Falz einer Website anzeigen lassen: Where is the fold?

den-falz-einer-website-bestimmen-kulturbanause

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.

Beitrag zu Ende lesen