CSS3 bietet bekanntlich viele neue Möglichkeiten für Animation und Bewegung. Ein weiteres Beispiel sind animierte Buttons. Beim Hovern werden Texte aus- und Icons eingeblendet. Oder die gesamte Form und Größe eines Buttons ändert sich. Dafür sind die in CSS3 neu hinzugekommenen Animations und Transitions. In sieben Beispielen wird hier schön demonstriert, was alles möglich ist.

Und das ist wirklich eine ganze Menge. Zusätzlich gibt es alles noch als CSS zum Nachvollziehen und natürlich auch als Download. Wie immer ist beim Einsatz von CSS3 noch ein wenig Zurückhaltung geboten, denn nicht alle Browser unterstützen aktuell die Animations und Transitions.

Mit CSS3 animierte Buttons

Die Demos und den Download gibt es auf Codrops

Neues Projekt im Anmarsch oder ein bestehendes optisch aufwerten? Aber es fehlen noch die richtigen Buttons für Social Media Aktivitäten? Dann möchte ich hier kurz ein paar kostenlose Buttons vorstellen, die wirklich einen guten Eindruck machen. Es werden schließlich nicht immer nur Icons benötig, die beim Hovern einen Tooltipp anzeigen. Diese Buttons sind individuell für jeden Social Media Service erstellt. Darauf ist klar zu erkennen, worum es sich handelt. Sicher, die meisten User wissen, wie das Facebook- oder Twitter-Logo aussieht. Aber was ist mit Dropbox oder Vimeo?

Der Webdesigner Patrick Larsson hat diese Buttons kreiert und stellt sie kostenlos zur Verfügung. Dabei handelt es sich um insgesamt neun Buttons und den dazugehörigen neun Icons. Ich finde die Idee gut, auch mal etwas längeren Text auf Buttons zu verwenden. Dadurch sind sie natürlich etwas größer bzw. länger und sicher nicht immer ganz einfach auf einer Website unterzubringen. Bieten unter Umständen aber doch entsprechenden Mehrwert.

Social Media Buttons Photoshop PSD

Das Photoshop File ist ordentlich aufgebaut und die Ebenen sauber benannt. Man findet sich einfach zurecht. Farb- und Textänderungen sind ohne Probleme möglich.

Wer auf der Suche nach neuen Buttons oder Icons ist, um seine Social-Media Aktivitäten ein wenig anzukurbeln, der ist mit diesem Photoshop-Set sicher gut bedient.

Hier geht es zum Download der Social Media Buttons

Für die Entwicklung von Websites längst Standard, gibt es nun auch für iPhone und iPad die Möglichkeit, den Entwicklungsprozess mit Wireframes zu unterstützen. Sicher noch nicht ganz so fein und angenehm wie mit Tools und Services a là Axure oder so, aber schon mal ein schöner Schritt.

Bei großen und Umfangreichen Projekten kommt man mittlerweile um ein vernünftiges Wireframing nicht mehr herum. Speziell für die Entwicklung von Apps oder auch Inhalte, die für mobile Endgeräte zur Verfügung gestellt werden sollen, hat mediumrare entsprechende Wireframe Templates erstellt. Wie gesagt, es handelt sich lediglich um Templates und nicht um eine Software oder einen Online-Service. Es werden drei unterschiedliche Dokumente angeboten: für iPhone, iPad und den mobilen Browser.

iPhone und iPad Wireframe Templates

Die Dokumente liegen im PDF-Format vor und sind wohl eher dazu gedacht, ausgedruckt zu werden, um dann per Hand entsprechende Skizzen aufzubringen. Für diejenigen, die auch PDF-Dokumente bearbeiten können oder möchten, muss entsprechende Software vorhanden sein (Acrobat, Photoshop, Illustrator).

Sicher ist das Ganze noch nicht zu vergleichen mit aktuellen Lösungen, wie sie seit langem für Webprojekte eingesetzt werden. Aber für die ersten Planungen eine App oder mobilen Inhalten ist es schon mal ein netter Schritt und eine gute Hilfe, ein entsprechendes Projekt anzugehen.

Die Templates können hier heruntergeladen werden

Anders als bei den WordPress Post-Formaten gibt es eine weitere Möglichkeit, Artikel mit entsprechenden Grafiken oder Icons aufzuwerten. Nicht nur, dass das Blog so an Attraktivität gewinnen kann (ist natürlich Geschmackssache), sondern auch die Besucher können so schnell zuordnen, zu welcher Kategorie ein Artikel gehört. Entsprechende Anpassungen müssen nur einmal vorgenommen werden und werden dann auf jeden Blogpost automatisch angewendet. Voraussetzung hierfür ist die Verwendung von Kategorien.

Alles Nötige bringt WordPress bereits mit. Was letztendlich getan werden muss, ist eine kleine Erweiterung in den Stylesheets. Exemplarisch habe ich das einmal kurzfristig hier im Blog getan und der Kategorie “CSS” ein Icon hinzugefügt. Das sieht dann so aus:

Eigene Icons für WordPress Kategorien

Das Icon am rechten Rand neben der Headline ist dann ab sofort in allen Ansichten zu finden. Auf der Homepage, der Kategorie- bzw. Archivseite und im Artikel. Zur Einbindung muss die Datei “style.css” angepasst werden. Diese findest du in deinem Theme-Verzeichnis (/wp-content/themes/dein-theme/style.css). Einfach folgenden Code einfügen:

.category-css {
background: url("http://www.dein-blog.com/wp-content/uploads/cat-icons/icon-css.png") no-repeat top right;
}

Der Klasse .category muss die entsprechende Kategorie aus deinem Blog hinzugefügt werden. Schreibweise natürlich genauso, wie du sie in den Kategorie-Einstellungen vorgenommen hast. Hast du z.B. eine Kategorie “Erbsen” deren Titelform (Slug) “erbsen” heißt, muss es also einfach “.category-erbsen” heißen. Die Styles können natürlich noch angepasst werden. So kann das Icon auch an anderer Stelle positioniert werden.

Mit den seit Version 3.1 eingeführten Post-Formaten hat dies wenig zu tun. Diese können zwar auch mit Icons kenntlich gemacht werden, doch mit den Post-Formaten klassifizierst du deine Artikel in vorgegebene Formate. Was für ein WordPress Theme viel weitreichendere Auswirkungen hat.

Wer viele Stammleser auf unterschiedlichen Plattformen hat und diese über neue Artikel informieren möchte, muss im Normalfall alles doppelt posten. Ein einfaches, aber nettes Feature von Feedburner ist das gleichzeitige Veröffentlichen von Artikeln auf Twitter. Voraussetzung dafür ist natürlich, dass man seine Feeds auch über Googles Dienst aufbereiten lässt. Nachdem ein Blogpost dann veröffentlicht wurde, kommt Feedburner ins Spiel und publiziert, je nach Einstellungen, den Artikel samt Short-URL auf Twitter.

Das ist eine praktische Angelegenheit, denn so braucht nicht alles zwei Mal veröffentlicht zu werden. Um dieses Feature zu aktivieren musst du in deinem Feedburner-Account zuerst den entsprechenden Feed auswählen. Danach klickst du in den Tabs auf “Publicize”. Nun findest du in der linken Navigation im 6. Menüpunkt “Socialize”. Hier wählst du dann deinen Twitter-Account aus, oder fügst einen neuen hinzu. Praktisch ist es, wenn du bereits in Twitter eingeloggt bist; so wird der Account automatisch hinzugefügt.

Für das Aussehen stehen dir einige Optionen zur Verfügung. Z.B. kann nur der Titel oder auch der Titel mit weiterem (Body)-Text hinzugefügt werden – sofern es denn die 140 Zeichen zulassen. Es können auch Hash-Tags aus der Kategorie erzeugt werden, in der du den Artikel verfasst hast. Eine kurze Übersicht am Ende der Seite zeigt dir, wie die Nachricht getwittert aussehen würde.

Mit Feedburner Artikel automatisch auf Twitter posten

Eigentlich eine sehr praktische Möglichkeit, seine Artikel automatisch auf Twitter zu veröffentlichen. Jedoch habe ich auch schon die Erfahrung gemacht, dass es nicht immer ganz so reibungslos abläuft. Ab und an sind die Artikel einfach nicht auf Twitter zu finden. Es macht also Sinn, einen kurzen Kontrollblick auf den eigenen Stream zu werfen.

Hier geht es zu Feedburner

Responsive Webdesign war im vergangenen Jahr in aller Munde und wird es auch noch in diesem Jahr bleiben. Wohl eher noch mehr, da Tablet-PCs sich nach wie vor ungebrochener Beliebtheit erfreuen. Nicht jede Website ist auf kleineren Bildschirmen genauso zu betrachten wie auf einem Monitor. Heranzoomen, um den richtigen Link zu erwischen oder überhaupt den Text lesen zu können sind momentan noch an der Tagesordnung. Die Jungs von Webdesignerwall haben ein kleines und einfaches Tutorial verfasst, wie man seine Website kurzfristig für mobile Geräte aufbereitet.

Das gesamte Tutorial beinhaltet nicht mehr als drei Schritte. Angefangen im Header, wo erläutert wird, wie mobile Browser den Inhalt darstellen bzw. skalieren. Ältere Internet Explorer-Benutzer werden nicht ausgeschlossen, denn es wird auch gleich ein entsprechendes JS-File angeboten, da der IE in der Version 8 und älter keine Media-Queries unterstützt.
Im zweiten Schritt wird lediglich eine einfache HTML-Struktur vorgeschlagen, die natürlich nach Belieben angepasst werden kann. Hier ist natürlich auf die maximale Browser- bzw. Bildschirmgröße zu achten.
Im letzten Schritt geht es um das eigentliche Responsive Design. Hier werden entsprechende CSS-Styles in Abhängigkeit der Browsergröße definiert. Das war es dann auch schon.

Responsive Webdesign in drei einfachen Schritten auf Webdesignerwall erklärt

Für alle Einsteiger in Responsive Webdesign und jene, die ihre Website kurzfristig auch für mobile Geräte optimieren möchten, ist dieses kleine Tutorial eine wirklich gute Hilfe. Mit diesen Grundkenntnissen lässt sich der eigene Content vernünftig auch auf kleinen Monitoren vernünftig betrachten. Heranzoomen und “Blind”-Klicken wird vermieden und Benutzer von Tablets oder Smartphones kommen einfacher an die gewünschten Inhalte.

Hier geht es zum vollständigen Tutorial über Responsive Webdesign von Webdesignerwall

Dieses Website-Template als Photoshop-PSD ist wirklich klasse. Farben und Formen sind optimal aufeinander abgestimmt und es wirkt sehr aufgeräumt. Der Freelancer Joshua Geiger hat es erstellt. Er ist Gründer der Seite SuiteTuts: 1080p. Dort sind Tutorials und Video-Trainings rund um Adobe´s CreativeSuite zu finden. Ab und an gibt es dann auch mal so ein Schmankerl wie dieses Website-Template. Wirklich rostig wirkt es dabei nicht, sonst wäre sicher mehr Grunge verwendet worden. Bis auf den Hintergrund (der halt in rostigem Rot-Braun gehalten ist) sind keine Texturen zu finden.

Das Template beinhaltet sieben PSD-Files. Von der Homepage über die About-Seite, das Portfolio und Blog inklusive deren Detail- bzw. Artikelseiten bis hin zur Kontaktseite ist alles dabei, was für eine ordentliche und vollständige Website nötig ist. Schön gemacht sind auf der Startseite die Bereiche für Featured Content und der Tab-Bereich, der auch die letzten Blogartikel enthält. Die Farbwahl ist wirklich gelungen. Alles ist gut lesbar und bietet genügend Kontrast. Hier und da hätte vielleicht auf kursiv gestellten Text verzichtet werden können – es stört aber nicht sehr.
Die Seite des Blogs beinhaltet lediglich große Teaserbilder und die Headline des Artikels. Das ist mal etwas anderes: Text ist dort nicht zu finden; richtet sich also eher an Designer und Grafiker. Sonst ist wirklich an alles gedacht worden.

Photoshop Website Template - rostig aber edel und aufgeräumt

Auch an erweiterte Anpassungen wurde gedacht. So sind alle Elemente in den Ebenen mit Formen oder Smart-Objekten erstellt worden. Das hat den Vorteil, dass einer Größenanpassung nichts im Wege steht. Alle Ebenen sind eindeutig benannt und in Gruppen zusammengefasst. Man findet sich schnell zurecht. Auch auf ein vernünftiges Rastermaß wurde geachtet. Die eigentliche Seite hat eine Breite von 960 Pixeln und ist ordentlich mit Hilfslinien versehen. Das voll ausgestattete Template mit den sieben PSD-Files hat eine Downloadgröße von mehr als 48MB – das ist für ein Website-Template  schon recht ordentlich.

Sollte dieses Template genauso wie es ist als Theme für WordPress o.ä. umgesetzt werden, ist dies sicher nicht mit wenig Aufwand verbunden. Doch lohnen wird es sich allemal.

Ich bin gespannt, wann die ersten umgesetzten Seiten damit zu sehen sein werden.

Zum Download und weiteren Informationen geht es hier auf SuiteTuts

Normalerweise wird für den schicken Lightbox-Effekt, der auf vielen Seiten zu sehen ist, immer ein Schnipsel JavaScript benötigt. Oft umgesetzt mit jQuery, gibt es Unmengen an fertigen Lösungen. Als bekannte Größen nenne ich hier mal die Fancybox, ThickBox, prettyPhoto und die Slimbox 2. Wie gesagt, funktioniert alles nur mit jQuery. Aber eine Lightbox komplett mit CSS3 und ohne jegliche Skripte umzusetzen, das ist doch mal etwas Neues. 

Die Lösung stammt von Codrops und bedient sich CSS3 Transitions und Animations. Mithilfe der Pseudo-Klasse :target (Selektion von Elementen, die Ziel von Verweisen sind), ist es möglich, sich durch die einzelnen Bilder zu klicken. Damit ist schon mal klar, dass es derzeit nur für Browser in Frage kommt, die diese Klasse bereits unterstützen. Der Internet Explorer gehört aktuell nicht dazu. Öffnet man die Demo mit dem IE, fehlt nicht nur die Möglichkeit der Navigation zwischen den Bildern, auch jeglicher Effekt (Transitions und Animations) wird nicht dargestellt.

Was wirklich schön ist, sind die drei Demos, die aufgeführt werden. Beispiel Eins zeigt eine von innen heraus größer werdende Lightbox. Bei dem zweiten Beispiel füllt das Bild zuerst den gesamten Bildschirm aus und wird dann kleiner, bis es die endgültige Größe erreicht hat. Im dritten Beispiel öffnet sich die Lightbox so, wie wir es schon von vielen Varianten gewohnt sind – und die sehen auch immer wieder toll aus. In allen drei Demos sind die Bilder zuerst transparent, wobei diese während der Animation immer mehr abnimmt.

Lightbox mit CSS3 von Codrops

Bei all der Euphorie, die derzeit auf CSS3 (und auch HTML5) gelebt wird, sei jedoch gesagt, dass solche Lösungen derzeit noch mit etwas Vorsicht zu genießen sind. Wie oben bereits erwähnt ist nichts davon im Internet Explorer zu sehen bzw. funktioniert auch nicht. Wenn man seine Zielgruppe und damit auch die Browserverbreitung und -Nutzung kennt, kann die eigene Seite sicherlich mit diesen Elementen aufgewertet werden. Und: man spart sich jQuery bzw. weitere Serveranfragen des Browsers.

Hier geht es zu den Demos bzw. zum Tutorial

Zugegeben, Social Media Icons gibt es wie Sand am Meer und wirklich neue und beeindruckende Innovationen sind schwer zu finden. Dennoch möchte ich hier auf ein weiteres Pack hinweisen. Diese Social Media Icons liegen nämlich nicht, wie gewohnt, im AI-, EPS-, GIF- oder PNG-Format vor, sondern als Schrift. Für Social Media Icons habe ich das so noch nicht gesehen. Alles, was du tun musst, ist die Schrift herunterzuladen und in deinem System verfügbar zu machen. Dann steht sie in Illustrator, Photoshop oder auch in deiner Textverarbeitung zur Verfügung.

Die Icons gibt es einmal als pures Logo, mit dem dann natürlich vielfältig weiter gearbeitet werden kann. Aber auch eine eingekreiste Version ist vorhanden. Dazu muss der entsprechende Buchstabe einfach in groß oder klein geschrieben werden. Ich finde diese Möglichkeit wirklich gut. Sonst musste man sich das Logo eines Dienstes immer irgendwie selbst beschaffen. Sei es über brandsoftheworld oder direkt beim Dienst. Meistens war dann noch eine umfangreiche Bearbeitung nötig. Nun aber hat man auf jeden Fall schon mal das Logo oder Markenzeichen zur Verfügung und kann damit seine eigenen Icons erstellen.

Social Media Icons als Schriftart

Das Schöne daran ist, dass die “Icons” in der Größe somit fast uneingeschränkt sind und es somit viele Möglichkeiten zur Weiterverwendung gibt.

Weitere Beispiele und den Download findest du auf fontfabric.com

Webfonts sind eine schöne Alternative zu den Standard-Schriftarten, die nur Clientseitig unterstützt werden. Und, wenn wir mal ehrlich sind, hat man diese Standards a là Verdana oder Arial im Web doch auch ein wenig satt. Manch ein Blogger möchte daher vielleicht die verwendete Schrift seines Blogs gegen Webfonts austauschen; Codegefummel ist aber zu aufwendig oder nicht immer einfach am Theme umzusetzen. Mittlerweile gibt es eine Reihe von WordPress-Plugins, die dies auf einfache Weise ermöglichen.

Gerade dann, wenn man sein Theme oder Layout öfters mal ändern möchte, ist es recht mühsam, immer wieder alles auf die eigenen Bedürfnisse anzupassen. Abhilfe schaffen hier die vom Webdesigner Depot zusammengestellten Plugins. Nicht alle sind kostenlos – so muss zum Beispiel bei den Typekit Fonts for WordPress bezahlt werden, wenn über die Standard-Auswahl hinaus weitere Schriften genutzt werden sollen.
Unter den Webfonts ganz vorn mit dabei sind sicherlich die Google-Fonts. Die Auswahl ist groß und auch die Einbindung fällt nicht schwer.

Google Web Fonts mittels WordPress Plugin verwenden

Natürlich darf man nicht vergessen, dass für die Lesbarkeit von Texten im Web noch immer von serifenlosen Schriften das Mittel der Wahl darstellen. Daher sollte man darauf achten, für Fließtext nicht gerade Schrift zu verwenden, die vor Schnörkeln nur so strotzt.

Hier geht es zu der Plugin-Auswahl bei Webdesigner Depot