Silbentrennung und Umbrüche mit CSS3

CSS3 und Webtypografie: Neue Möglichkeiten für Silbentrennung und Umbrüche

Quelle: t3n.de

Silbentrennung – für Webdesigner und Content Manager bisher ein Buch mit sieben Siegeln. Dank CSS3 funktioniert Silbentrennung nun auch im Web – zumindest auf Englisch und Deutsch. Die neue CSS3-Eigenschaft „hyphens“ macht’s möglich. Bisher wird das neue Feature zwar noch nicht von allen Browsern direkt unterstützt, aber über die entsprechenden Vendor-Präfixe lässt sich „hyphens“ schon jetzt produktiv nutzen. t3n.de zeigt in einem kleinen Tutorial, wie’s geht. Darüber hinaus bietet CSS3 auch die Möglichkeit, überlange Wortungetüme (oder aber ellenlange Links) zwangsweise zu umbrechen. Dabei werden keine Bindestriche eingefügt, so dass umbrochene Links weiterhin funktionieren. „­“ war gestern!

Kostenlose SEO-Plugins für WordPress

5 kostenfreie WordPress Plugins für SEO

Quelle: t3n.de

Auf designmodo.com werden 15 kostenfreie SEO-Plugins für WordPress vorgestellt („15 Essential Free SEO WordPress Plugins„), t3n.de hat sich fünf der Plugins näher angesehen und beschreibt kurz, was sie können. Dabei geht’s um Themen wie Suchmaschinen-optimierte Seitentitel, Generierung von Metainformationen, Linkoptimierung, Bildoptimierung und Rankingvisualisierung. Wer ein kostenloses SEO-Plugin für WordPress sucht, sollte sich die beiden Artikel nicht entgehen lassen.

HTML5-Präsentationen mit impress.js

Link zur Demo-Präsentation

Quelle: bartaz.github.com

PowerPoint war gestern – wer nicht mehr nur Folie an Folie reihen will, dem sei „impress.js“ sehr ans Herz gelegt! Mittels HTML5, CSS3 und Javascript entstehen beeindruckende Präsentationen, bei denen die Zuschauer nicht mehr in den Standby-Modus schalten, sondern hellauf begeistert sind.

Basierend auf CSS3-Transforms und -Transitions entstehen atemberaubende Visualisierungen. Einfach den Quellcode herunterladen und die Inhalte nach den eigenen Vorstellungen anpassen. Neben Rotationen sind sogar 3D-Effekte möglich, sofern sie vom verwendeten Browser unterstützt werden.

Auf t3n.de gibt’s eine kurze Einführung ins Thema.

WordPress multilingual

Link zur Plugin-Site: Multilingual Press

Quelle: wordpress.org

Wer WordPress als CMS z. B. für kleinere bis mittlere Firmen-Websites nutzen wollte, der fand schon seit geraumer Zeit im Web diverse Anleitungen, Tipps und Tricks, wie das geht und was es dabei zu beachten gilt. Wer jedoch diese Websites auch in verschiedenen Sprachen anbieten wollte, der stieß mit WordPress bisher schnell an Grenzen, die unüberwindlich schienen. Ein neues Plugin soll hier Abhilfe schaffen: „Multilingual Press“ – zwar noch im Alpha-Stadium, also nicht für den Live-Einsatz gedacht und wohl noch mit einigen Fehlern behaftet, aber trotzdem schon einen Blick wert! Bereits angekündigt: Eine „Pro“-Version des Plugins mit zahlreichen zusätzlichen Features.

Responsive Webdesign online testen

Link zum Tool: Responsive Design Testing

Quelle: mattkersley.com

Matt Kersley, Webdesigner und -entwickler aus Peterborough (Großbritannien), hat ein Online-Tool programmiert, mit dem auf die Schnelle getestet werden kann, wie eine beliebige Website mit unterschiedlichen Bildschirmgrößen dargestellt wird. Einfach die Adresse mattkersley.com/responsive/ aufrufen und die Adresse des eigenen Projekts eingeben – schon spuckt das Tool die gewünschte Website in den unterschiedlichsten Auflösungen aus.

Dabei kann ausgewählt werden, ob nur unterschiedliche Breiten dargestellt werden sollen (240, 320, 480 Pixel usw.) oder ob gängige Geräteauflösungen als Basis dienen (240×320, 320×480, 480×640 Pixel usw.). Maximale Testbreite ist derzeit 1024 Pixel, was allerdings verschmerzbar ist, da die meisten Webdesigner und -entwickler selbst wohl vor Displays mit einer wesentlich höheren Auflösung sitzen und alles über 1024 Pixel sehr komfortabel am eigenen Display testen können. Für Entwickler, die Wert auf Responsive Webdesign legen, ist dieses Tool jedenfalls sehr zu empfehlen, zumal es sich bei der Ausgabe des Tools nicht um Screenshots, sondern um funktionsfähige Website-Versionen handelt. Danke, Matt!

Zum Thema: Responsive Webdesign verständlich erklärt

Ohne Flash und Javascript: CSS3-Animationen

Link zum Artikel: CSS3: Animationen ohne Flash und JavaScript erstellen

Quelle: t3n.de

Animationen ohne Flash und ohne Javascript? CSS3 macht’s möglich! t3n.de präsentiert eine kurze, leicht verständliche Einführung ins Thema. Dabei werden sowohl „Transitions“, also die automatisierte Animation zwischen zwei fest definierten, statischen Zuständen, behandelt, als auch die Animation mittels „Keyframes“. Dabei können natürlich auch Umfang, Dauer und Art der jeweiligen Animation genau festgelegt werden, inklusive Beschleunigung, Abbremsung und Loop. Einziges Manko: Der Internet Explorer unterstützt die CSS3-Animationen (noch) nicht. Hier geht’s zum Artikel: CSS3: Animationen ohne Flash und JavaScript erstellen.

Responsive Webdesign verständlich erklärt

Link zum Artikel: Responsive Web Design

Quelle: marctv.de

Der Smartphone-Boom und bezahlbare Datenflats fürs Handy machen’s möglich: Immer mehr Internetnutzer surfen statt mit Computer oder Laptop lieber mit ihrem „mobilen Endgerät“ durchs World Wide Web. Das ist nicht immer einfach, denn viele Webseiten sind für die Ausgabe auf mobilen Endgeräten nicht vorbereitet. Für den Smartphone-Nutzer bedeutet dies: Er muss ständig zoomen und scrollen, um sich den Inhalt einer Website mühsam zu erschließen. Dabei existieren längst Techniken, die eine Website für die Ausgabe auf den unterschiedlichsten Endgeräten optimieren – nicht nur für die Ausgabe auf einem Smartphone.

Responsive Webdesign“ heißt die Zauberformel, und sie zählt nicht ohne Grund zu den wichtigsten Webdesign-Trends des Jahres 2012. Mit Responsive Webdesign werden Websites fit gemacht für die unterschiedlichsten Displaygrößen und -auflösungen. Ziel ist es, dem Nutzer immer eine optimierte Darstellung zu liefern, egal mit welchem Endgerät er die Website gerade besucht. Eine allgemein verständliche Einführung in das Thema bietet der Artikel „Responsive Web Design“ von Marc Tönsing, einem Web-Entwickler aus Hamburg.