Tutorials biete eine wunderbare Möglichkeit neue Software zu erlernen oder tiefer in die Möglichkeiten einer Anwendung „einzusteigen“.

Häufig werden in den herkömmlichen Tutorials nicht alle einzelnen „Mini-Schritte“ dargestellt und können den ein oder anderen schon einmal ein wenig verwirren.

Video- Tutorials bieten hier ganz andere Möglichkeiten. Mit Hilfe solcher Tutorials können Sie Schritt für Schritt nachvollziehen wie bestimmte Aktionen ausgeführt werden. Manchmal geht nicht immer alles auf Anhieb so reibungslos – gerade das finde ich an Video Tutorials recht attraktiv weil es der Realität entspricht.

In diesem Beitrag stelle ich Ihnen die schönsten Video- Tutorials aus Juli 2010 zu den Themenbereichen jQuery, CSS, SEO, WordPress, Adobe Photoshop und Adobe Illustrator
vor.

Viel Spaß beim „Learning by viewing“

jQuery Video Tutorials

jQuery Basics

von JROCK20041

O’Reilly Webcast: 5 jQuery mistakes you’re probably making in your project

von OreillyMedia

jQuery (UI) part 1 - Autocomplete and Datepicker

von ConnorAlves

CSS Video Tutorials

CSS: Spiegelung mit CSS3

von iVincer

Depth and Regular Expressions

erschienen bei doctype.tv

CSS3 Backgrounds and Regular Expressions (Part 2)

erschienen bei doctype.tv

CSS3 Effects and YQL (Part 1)

erschienen bei doctype.tv

CSS3 Transforms and YQL (part 2)

erschienen bei doctype.tv

SEO Tutorials

Wichtige Google Ranking-Kriterien

erschienen bei seo2day.de

Link-Position auf der Homepage – wichtiger SEO-Faktor?

Erschienen bei seo2day.de

Video Sitemap – 5 wichtige Google Optimierungs-Vorschläge für Video-Dateien

erschienen bei seo2day.de

WordPress Video Tutorials

Video: Adding a Second Menu to the WordPress Twenty Ten Theme

erschienen bei wpbeginner.com

SEO-friendly Wordpress URLs in a minute [Video tutorial]

erschienen bei bossblogster.com

Photoshop Video Tutorials

Photoshop- Realistischer Regenbogen

von DeckerHelpGerman

Wallpaper Photoshop tutorial

von livorasine

Photoshop Tutorial Texturen 1 (Einsteiger)

von EvangelineCooper

Photoshop Video Tutorial — Wolken-Text Part 1 von 2

von DesignPrintcenter

Photoshop Video Tutorial — Wolken-Text Part 2 von 2

von DesignPrintcenter

Adobe Photoshop Tutorial - Augen färben

von FlashPhotoshop

Illustrator Video Tutorials

Adobe Photoshop and Illustrator Tutorial - Part I

von ytchesney

Adobe Photoshop and Illustrator Tutorial - Part II

von ytchesney

Adobe Photoshop and Illustrator Tutorial - Part III

von ytchesney

Keine zündende Idee für das Layout der geplanten Homepage? Dann ist dieser Beitrag genau das richtige für Sie!

In der heutigen Ausgabe der hpvorlagen24.de Webpicks präsentiere ich Ihnen eine Zusammenstellung von Beiträgen zum Thema „Webdesign Inspiration“.

Neben den folgenden 10 Inspirations- Links finden Sie am Ende dieses Beitrags weitere Link- Zusammenstellungen nach verschiedenen Themen wie Farb- Inspirationen und Webdesign- Bereiche (Footer, Header etc.) sortiert.

Lassen Sie sich inspirieren auf dem Weg zu Ihrem perfekten Website- Layout!

35 Excellent Web Designs with great use of Textures

Erschienen bei tripwiremagazine.com

In diesem Beitrag dreht sich alles um den Einsatz von Texturen auf Webseiten. Sie finden 34 Inspirationen kategorisiert nach „Verwendungsbereiche“: Texturen als Hintergrund, Texturen im Header, Texturen im Footer, Texturen im Content- Bereich und Texturen in der Navigation.

19 Impressive, Stunning and Simple Web Sites

Erschienen bei designshard.com

Die 19 Inspirations- Links in diesem Beitrag zeigen Ihnen eindrucksvoll das weniger häufig mehr sein kann.

50 Inspiring Websites Using Red As Their Impact Design Color

Erschienen bei theprodesigner.com

Sie wissen dass die Farbe rot ein wesentlicher Bestandteil Ihres Layout sein soll? Dann sin diese 50 Inspirations- Links genau das richtige für Sie! Alle in diesem Beitrag vorgestellten Inspirations- Links haben die Farbe „rot“ als wesentliches Design- Merkmal.

75 Dark Portfolio Websites

Erschienen bei acrisdesign.com

Oder mögen Sie es lieber dunkel und ein bisschen „geheimnisumwittert“? 75 x Inspiration gibt Ihrer Kreativität sicher einen Anschub

Using Illustrations in WebDesign: 30 Creative Examples

Erschienen bei devsnippets.com

Auch Illustrationen können Ihrem Website- Layout den richtigen „Kick“ verpassen. Die hier vorgestellten 30 Inspirations- Links werden Sie überzeugen.

Beautiful Examples of 3D Elements in Web Design

Erschienen bei sixrevisions.com

Web- Site Layouts können auch wunderbar mit 3D- Elementen aufgepeppt werden. 45 Inspirations- Links verschaffen Ihnen den richtigen Eindruck. Sie werden sehen das auch dabei Illustrationen eine große Rolle spielen.

45 Mobile Web Designs To Show You One Of Future Trends

Erschienen bei 1stwebdesigner.com

In Zeiten des IPhones & Co. spiel auch das Webdesign für Mobile- Geräte eine große Rolle. Diese 45 sehr gelungenen Website- Layouts zeigen wie einfach und doch ansprechend Web- Design auf kleiner Fläche sein kann.

54 Fabulous Character Illustrations in Websites

Erschienen bei tuttoaster.com

Das eigene Maskottchen kann ein richtiger „Hingucker“ auf einer Webseite sein. Überzeugen Sie sich selber davon mit diesen 54 wunderschönen Webdesign Inspirationen.

30 Creative and Inspiring Blog Designs

Erschienen bei webdesignledger.com

Sie möchten Ihrem Blog einen neuen „Anstrich“ verpassen der ganz individuell sein soll? Lassen Sie sich von diesen 30 sehr gelungenen Blog- Layouts inspirieren! Kaum zu glauben das es sich hier wirklich um Blogs handel.

40 Inspiring Single Page Websites

Erschienen bei webdesignledger.com

Muss es immer ein „riesen Webauftritt“ sein? Nein! Auch auf einer Seite lassen sich in Zeiten von jQuery und Co. jede Menge Informationen auf nur einer physikalischen Seite unterbringen. Die in diesem Beitrag vorgestellten Webseiten präsentieren dies sehr eindrucksvoll.

Weitere Inspirations- Links nach Themen sortiert:

Website Inspirationen nach Farbe

Bei den folgenden Links handelt sich umInspirations- Links in Bezug auf eine Farbe. Wenn Sie bereits jetzt wissen welche Grund- Farbe Ihr Layout beinhalten soll dann ist hier sicher etwas für Sie dabei.

• 50 Red Web Designs to Inspire You
• Web Design Inspiration: 30 Inspiring Red Websites
• 50 Green Web Designs to Inspire You
• 55 Minimal Black and White Web Designs to Inspire You
• 55 Beautifully Blue Web Designs to Inspire You
• 50 Beautifully Brown Web Designs
• 50 Yellow Web Designs to Inspire You
• 40 Creative Black portfolio Designs
• 50 Inspiring Dark Web Designs
• A Showcase of Clean White Web Designs
• Inspiration: 16 websites in Pink

Inspirationen für Teilbereiche des Layouts

Manchmal gehen einem auch nur in Teilbereichen des Layouts die kreativen Ideen aus ;-). Ob Header, Footer, Navigation, Breadcrumb etc. - die folgenden Links beschäftigen sich genau mit diesen Bereichen von Website- Layouts.

• 25 Fantastic Web Forms for Design Inspiration
• 20 Great Examples Of Icons In Navigation Design
• 55 Examples of Beautifully Integrated Social Media Links in Web Design
• 30 Examples of Excellent Website Navigation
• A Showcase of Website Navigations with Serious Click Appeal
• 22 Beautiful Blog Header Designs For Inspiration
• 36+ Unique Wordpress Header Design Inspiration
• Tips and Inspiration on Creating a Great Website Footer
• Showcase of 30 Super Stylish CSS Footers
• 65 Unique And Innovative Website Footer Designs For Inspiration
• Best of Breadcrumbs and How They Enhance Your Website

Fazit:

Inspirationsquellen gibt es ohne Ende!

Man hat nicht jeden Tag die super- genialen, kreativen Eingebungen – manchmal sitzt man einfach in einem tiefen schwarzen Loch. Lassen Sie es nicht zum Problem werden!

Manchmal hilft es schon wenn man sich mit ganz anderen Dingen beschäftigt oder ein bisschen frische Luft schnappen geht. Wenn alles nicht‘s hilft - lassen Sie sich inspirieren.

Aber aufgepasst: Meine Erfahrung ist – schaut man sich zu viel an bekommt man den „kreativen- Overflow“ und weiß hinterher noch weniger als vorher.

Sind Sie auf der Suche nach Diagramm- Icons zur Verschönerung Ihrer Webseite?

Vielleicht gefallen Ihnen diese 5 kostenlosen Graph- Icons im Vektor Format?!

Die Icons wurden mit Adobe Illustrator erstellt und können somit beliebig skaliert und modifiziert werden. Mit Hilfe der Vektor- Datei können Sie z.B. auch weitere Details hinzufügen.

Im Download- Archiv finden Sie zusätzlich jeweils 7 .png Dateien zu den einzelnen Diagramm Icons in den Größen 256, 128, 64, 32, 24 und 16 Pixel für die direkte Verwendung ohne Modifizierung.

Diese 4 kostenlosen Paket Icons wurden mit Adobe Illustrator erstellt und sind somit frei skalier- und modifizierbar.

Zusätzlich finden Sie im Download- Archiv jeweils 7 .png Files zu den einzelnen Paketen in den Größen 256, 128, 64, 32, 24 und 16 Pixel für die direkte Verwendung z.B. als Website- Icon.

CSS Sprites werden im „üblichen“ Webdesign dazu eingesetzt, verschiedene Bild- Sequenzen Performance- freundlich einzusetzen.

Typische Anwendung ist z.B. ein Grafik Wechsel bei „Mouse- Over“.

Eine Möglichkeit wäre dabei für jeden Status (Mouse-Out und Mouse- Over) jeweils eine Grafik- Datei zu erzeugen und den Wechsel via CSS Code zu definieren. Bei dieser Methode müssen via http- Request 2 physikalische Dateien vom Webserver geladen werden - also nicht so ideal für die Performance.

Bei der Verwendung von CSS Sprites werden beide Bild- Sequenzen in eine Datei nebeneinander oder untereinander positioniert und der Bild- Wechsel wiederum über CSS definiert (background-image).  Welcher Ausschnitt der Bildfolge angezeigt wird, wird über das CSS Attribut „background-position“ bestimmt. Bei dieser Variante wird nur eine physikalische Datei via http- Request geladen und ist somit Performance freundlich.

In dem oben genannten Beispiel ging es nur um 2 Bildfolgen. Richtig effektiv werden Sprites dann, wenn es sich um eine ganze Sequenz von Bildern – ähnlich eines Daumenkinos - handelt (z.B. ein flatternder Vogel, eine laufende Person etc.) .

Das jQuery Plugin spritely

Welche weiterführenden Möglichkeiten CSS Sprites bergen, zeigt Ihnen das jQuery Plugin spritely. Mit einfachen Konfigurationsmöglichkeiten lassen sich fantastische Animationen simulieren. Eine klasse Lösung für alle diejenigen die auf Flash verzichten möchten.

Schauen Sie sich die Plugin- Webseite unbedingt an! Dort werden die Möglichkietn eindrucksvoll präsentiert.

Weiterführende Links zum Thema CSS Sprites:

• jQuery & CSS Sprite Animation Explained In Under 5 Minutes
• CSS Sprites einfach erklärt
• CSS Sprites – Webseiten Performance 1
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• CSS Sprites w/out Using Background Images
• Display icons using a single image and CSS “Sprites”
• Saving Bandwidth and Improving Site Speed Using CSS Sprites

Ich habe in den letzten Wochen viele E-Mails mit der Frage nach neuen Vorlagen erhalten. Aus diesem Anlass hier mal eine kurze Info in eigener Sache:

Ja, es wird hier weitere kostenlose CSS Templates und WordPress Themes geben.

Die Entwicklung kostet jedoch Zeit und ich habe meine Ansprüche geändert und wie immer zu wenig Zeit :-D.

In Zukunft werden die Vorlagen mehr Funktionalität erhalten um es für Sie noch einfacher zu machen.

Eine Vorschau auf eine aktuelle Entwicklung die in Kürze hier erscheinen wird:

Office Service heißt das neue CSS Template von hpvorlagen24.de  und umfasst folgende Features:

• Innovative Navigation
• Image Slider
• 12 Templates inclusive
• Eine Vielzahl von CSS- Klassen für die optimal typografische Darstellung
• Kontaktformular
• Integrierte Google- Suche
• 6 Farbvariationen
• Flexibel erweiterbar
• Getestet in den Browsern: Firefox, Google Chrome, Internet Explorer 7 und 8, Opera und Safari
• PDF Dokumentation inklusive

So genug mit “Nase lang machen” ich geb’ Gas …

… und einen lieben Dank für die vielen vielen psotiven E-Mails!

Ach wäre das nicht schön: Alle Browser dieser WWWelt wären CSS3 und HTML 5- fähig. Keine Browser- Hacks mehr, keine Browser- Test- Odyssee mehr, keine Kompromisse mehr … seufz …

Noch ist das ein Traum, aber die Entwickler- Teams sind auf dem besten Weg uns Webdesignern in Zukunft die Arbeit ein wenig leichter zu machen.
Um Ihnen einen kleinen Einblick in den aktuellen Status der Browser- Entwicklung zu gewähren, stelle ich Ihnen in diesem Beitrag einige News zur Browser- Entwicklung vor. Des Weiteren finden Sie Links- und Ressourcen für Browser- Test- Tools und Browser AddOns.

Aktuelle Browser Versionen

Surfen Sie immer noch mit einer „ollen Kamelle“ durchs World Wide Web? Dann wird’s dringend Zeit für ein Update :-).  Neue Browser- Generationen unterstützen aktuelle Web- Standards, sind schneller und sicherer als die „Alten“.
Evtl. entgehen Ihnen Funktionalitäten weil Sie noch mit einer „alten Möhre“ unterwegs sind. Also – nix wie Updaten!

Hier die Liste der „Big 5“ und Ihre aktuellen Browser Versionen:
(Alle Browser können kostenlos heruntergeladen werden.)

• Apple Safari - für Mac + PC, Version 5
• Google Chrome, Version 5
• Mozilla Firefox, Version 3.6
• Microsoft Internet Explorer, Version 8
• Opera, Version 10.60

Nicht’s dabei? Dann lesen Sie doch mal den Beitrag von Henry Jones, erschienen bei Web Design Ledger unter dem Titel „12 Alternative Web Browsers You Should Try“.
Vielleicht finden Sie hier eine Alternative?!

Browser News

“Google Chrome 6 Beta Is Right Around the Corner”

Erschienen bei  www.webmonkey.com

Firefox 4.0 - Einblicke in das neue Standard Theme

Erschienen bei webstandard.kulando.de

Mozilla Explains Why Firefox 4 Has Tabs on Top [VIDEO]

Erschienen bei  mashable.com

Internet Explorer 9 Test Drive

Browser Vergleich mit Chrome 6, Firefox 4, Internet Explorer 9 und Co.

Erschienen bei webstandard.kulando.de

Japanese girl blogger, Mamipeko, has browser icons custom painted onto her nails. The nail artist only knew the IE icon, sadly. :-DDD

Browser Tools & Ressourcen

IE 6 Cheatsheet

Der Internet Explorer ist ja irgendwie nicht „wegzukriegen“. Wer sich täglich mit Hacks- und Anpassungen für den IE 6 rumschlagen muss findet im Beitrag „Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs“ eine wirklich schöne Zusammenstellung an bekannten Fehlern und Lösungsvorschlägen.

Browser Test Tools

Nicht nur im IE6 sondern auch in anderen Browsern sollte eine Webseite getestet werden. In dem Artikel „Cross-Browser Testing: A Detailed Review Of Tools And Services” finden Sie ein sehr gelungene Zusammenstellung von Tools die Ihnen im Gegensatz zum üblich Weg zur Verfügung stehen.

Useful Tools for Testing Cross Browser Compatibility

Seven Useful Web Development Tips & Tools for Cross-Compatibility

Browser Compatible Info for HTML and CSS

The Principles Of Cross-Browser CSS Coding

Resize My Browser - Browser Test für verschiedene Bildschirmauflösungen

20+ Online Tools for Website Validation and Testing

CSS3PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

Best Tools for Testing Cross Browser Compatibility

Browser AddOns

A Complete Collection of Firefox Extensions for Designers

In diesem Beitrag stellt Ihnen Stefan Nistor insgesamt 15 Firefox AddOns für Designer vor. Es geht um Schriftgrößen und –arten, um Farb- Paletten, Screen- Capture, Color Picker und vieles mehr. Eine wirklich schöne Zusammenstellung nützlicher Firefox Extensions.

20 Chrome Extensions for Web Designers & Developers

Eine umfangreiche Zusammenstellung an Google Chrome AddOns für Designer und Entwickler finden Sie bei allwebdesigninfo.com. Hier werden Ihnen insgesamt 20 Erweiterungen vorgestellt, die nützliche Werkzeuge sein können.

25 Most Wanted Google Chrome Extensions

Vielleicht wollen Sie diese ja auch ?!

Top 17 Safari Plugins to Enhance Your Browsing Experience

30+ Substantial Firefox Addons for Web Developer

15+ Popular Firefox SEO Extensions and Tools for Web Designers

Meine Empfehlung: Firebug

Nach wie vor ist Firebug meine absolute Lieblings- Erweiterung für Firefox. Es ist ein sehr nützliches Tool in vielen Aspekten des Webdesigns. Ich verwende es im Schwerpunkt zu Fehlerbeseitigung im Javascript Code und zu CSS Anpassungen.

Wie schnell eine Webseite geladen wird, ist nicht erst ein wichtiger Faktor im Webdesign geworden seit dem Google angekündigt hat dies in Zukunft  als Ranking- Faktor zu berücksichtigen.

Im Idealfall bestehen Webseiten aus verschiedenen Dateien der (X)HTML Datei, dem CSS- File evtl. aus JavaScript Dateien etc. .

Alle diese Daten werden beim Öffnen der Webseite in einem Browser geladen und haben somit Einfluss auf die Ladegeschwindigkeit.

Auch bei den CSS Dateien und den JavaScript Files kann man einiges an der Ladegeschwindigkeit optimieren in dem man die Dateien einfach komprimiert speichert.

Heute stelle ich Ihnen ein Online- Tool zur Komprimierung von CSS Dateien vor.

Üblicher CSS Code während der Entwicklungsphase

Bei der Entwicklung ist es angebracht den CSS Code sinnvoll zu strukturieren und die einzelnen Merkmale in eine Zeile der CSS Datei zu schreiben. Gerade CSS- Neulingen ist dies zu empfehlen um den Überblick zu behalten.

Ein Beispiel:

body {
background-color:  #cccccc;
color: #000000;
font-size: 12px;
font-weight: bold;
}
h1{
color: #cc0000;
font-size: 30px;

}

Ein solcher Code ist natürlich sehr gut lesbar, auf der anderen Seite aber auch sehr „geschwätzig“ - jede einzelne Zeile kostet physikalischen Speicherplatz und somit später auch Ladezeit beim Aufbau der Website.

Der komprimierte CSS Code

In einem komprimierten CSS Code werden in erster Linie die Zeilen der CSS Datei „zusammengezogen“ und Kommentare entfernt.

Für das obige Beispiel sieht das dann so aus:

body{background-color:#ccc;color:#000;font-size:12px;font-weight:bold;}h1{color:#c00;font-size:30px;}

Dies entspricht einer Verringerung der Dateigröße um ca. 22%.

Mein Beispiel war ja nun sehr klein - sicher können Sie sich vorstellen, dass es bei großen CSS Dateien extrem lohnenswert sein kann, die Dateien zu komprimieren und somit die Ladezeit der Website zu beschleunigen.

Der CSS Optimierer und Formatierer von CLEANCSS.com

Wer die Komprimierung nicht von Hand ausführen möchte, dem stehen eine Vielzahl von CSS Online- Kompressoren zur Verfügung die diese Aufgabe für Sie übernehmen.

Die Meisten dieser Tools basieren auf CSSTidy – einem Open Source CSS Parser der über eine Reihe von Komprimierungs- Funktionen verfügt.

Im Online- Tool von CLEANCSS.com wurden alle diese Funktionen berücksichtigt.

Sie können mit Hilfe dieses CSS Online- Komprimierers die CSS Daten in das dafür vorgesehen Feld kopieren oder von einer URL laden und eine Vielzahl an Komprimierungs- Optionen auswählen.

Das Ergebnis können Sie sich am Bildschirm anzeigen oder in eine Datei schreiben lassen.

Probieren Sie es einfach einmal aus – komprimieren lohnt sich.

Wird langsam Zeit das hpvorlagen24.de auch mal schnelle wird – seufz …

Weiterführender Link:

Eine schöne Zusammenstellung von weiteren CSS- Komprimierungs- Tools ist bei mostinspired.com unter dem Titel “Online CSS compressor tools to optimize your stylesheets” erschienen.

In diesem Beitrag werden Ihnen insgesamt 16 solcher Kompressoren vorgestellt.

Im dritten und letzten Teil der heutigen Ausgabe der hpvorlagen24 “Webpicks” zum Thema Schrift stelle ich Ihnen eine Reihe von verschiedenen Tutorials zum Thema Font und Typo vor.

Lernen Sie anhand dieser hervorragenden Tutorials wie Sie wunderschöne Text- Effekte mit Adobe Photoshop erstellen können oder lassen Sie sich einfach ein wenig beeindrucken

Zum Teil 1: Font Zusammenstellungen

Zum Teil 2: Font Tools und Font Ressourcen

Font Tutorials

3 cool text effects Gold , Metal & plastic in Photoshop

Erschienen bei themegamag.com

Using Cufon font replacement

Erschienen bei papermashup.com

Create a Cool 3D Graffiti Text Effect using Line Art in Photoshop

Erschienen bei design.creativefan.com

Create Awesome Splashing Water Text Effect in Photoshop

Erschienen bei psdvault.com

Top 10+ 3D Text Effect Tutorials

Erschienen bei zlwo.com

30 Innovative & Creative Text Effect Tutorials

Erschienen bei spyrestudios.com

Learn How To Create Metal Textured Text

Erschienen bei hv-designs.co.uk

Our Favorite Photoshop Text Effects Tutorials

Erschienen bei designreviver.com

20 New Photoshop Text Effects Tutorials-2010

Erschienen bei photoshopwebsite.com

10 Creative Text Effects For July

Erschienen bei josweb.co.uk

Dieser zweite Teil der heutigen Ausgabe der hpvorlagen24 “Webpicks” zum Thema Schrift beschäftigt sich mit Beiträgen zum Thema Font- Tools und Font- Ressourcen.

Die richtige Font- Auswahl ist ein existentielles Layout- und Design Mittel  für Print-und Webdesign Layouts.

Sie lernen Tools kennen die Ihnen den Umgang mit Web- Fonts erleichtern und erfahren wo Sie die besten kostenlosen Schriftarten finden können.

Wer sich einfach nur inspirieren lassen möchte findet sicher auch etwas bei der folgenden Auswahl:

(Teil 1 mit eine Liste von 41 Font- Zusammenstellungen finden Sie hier)

Font Tools

15 Best and Useful Typography Tools for Web Designers

Erschienen bei resources.savedelete.com

In diesem Beitrag prsentiert  Ihnen Vikas insgesamt 15 Font- Tools für Webdesigner vor.

FontFrenzy: A Font Manager with Extra Font Cleaning Features

Erschienen bei smashingapps.com

Umar Anjum stellt Ihnen das Windows Freeware Tool „FontFrenzy“ vor.

FontFrenzy wird auf Ihrem lokalen PC installiert und zeigt Ihnen alle auf Ihrem Rechner installierten Schriftarten an. Über verschiedene Funktionen können Sie mit diesem Tool z.B. Ihre aktuell installierten Schriftarten sichern, restaurieren und organisieren.

10 Tools for Better Web Fonts

Erschienen bei paper-leaf.com

Bisher konnten auf Web- Seiten nur „websichere Fonts“ verwendet werden. Bei diesen Schriftarten handelt es sich um Fonts bei denen die Wahrscheinlichkeit sehr hoch ist, dass Sie auf den meisten lokalen Rechnern von Online- Besuchern installiert sind.

In den letzten Monaten hat sich dahin gehend vieles geändert. Es gibt mittlerweile zahlreiche Font- Tools die es Ihnen ermöglichen auch andere Schriftarten innerhalb Ihrer Websites zu verwenden.

Jeff stellt Ihnen bei paper-leaf.com 10 solcher Tools vor. Ein wirklich lesenswerter Beitrag zu diesem recht neuen Webdesign- Thema.

Fonts online bestimmen mit WhatFontis.com

Erschienen bei pixey.de

Liegt Ihnen z.B. eine Grafik vor in der eine Schriftart verwendet wird von der Sie den Namen nicht kennen, ist WhatFontis.com das ideale Online- Tool für Sie.

Font Ressourcen

Learn the Basics: 25+ Sites And Resources To Learn Typography

Erschienen bei 1stwebdesigner.com

Ari Suardiyanti stellt Ihnen in diesem Beitrag 25 Ressourcen vor mit Hilfe denen Sie den Umgang mit Typographie erlernen können.

20 Beautiful Fonts You Can Implement With Cufón Font Replacement

Erschienen bei ourtuts.com

Mit Cufón können Sie auf einfache Art und Weise sehr elegante und schöne Schriftarten in Ihre Webseite einbinden. In diesem Beitrag von ourtuts.com werden Ihnen 20 dieser eleganten Schriftarten vorgestellt.

Showcase: Typography in WordPress Blog Design & Resources

Erschienen bei dynamicwp.net

In diesem Beitrag von Yahya bei dynamicwp.net finden Sie eine schöne Zusammenstellung  von Ressourcen zu kostenlosen Fonts, Tools, Tutorials sowie eine Auswahl verschiedener Showcases zur Inspiration.

30 of the Best Web Typography Resources Online

Erschienen bei webdesignerdepot.com