Die Link-Essenz 2: Videos flexibel skalieren im Responsive Webdesign

Responsive Webdesign: Videos flexibel skalieren

Bindet man Videos in Responsive Layouts ein, reagieren die Videos grundsätzlich nicht auf die Vorgaben im CSS-Code und behalten stur ihre feste Größe. Abhilfe schafft das kleine jQuery-Plugin FitVids.js, welches die Videos mit CSS-Containern umschließt. Wer kein Script nutzen möchte, kann natürlich solche umschließenden Container auch manuell im CSS-Code einbinden.

Ribbon builder

Ein sehr beliebtes Gestaltungselement auf Websites sind sogenannte Ribbons bzw. Ordensbänder, die der Überschrift einen 3D-Effekt verleihen. Diese CSS-Dreicks-Technik wird meistens mit Hilfe der Pseudoselektoren :before und :after in Verbindung mit relativer und absoluter Positionierung umgesetzt. Wem das zu kompliziert ist, kann alternativ auch zum visuellen Tool Ribbon builder greifen. Größenverhältnisse, Farben und Schattierungen können angepasst werden, danach kann man sich den fertigen HTML- und CSS-Code herunterladen.

ProCSSor

Übernimmt man Codeschnipsel oder gar ein gesamtes Webprojekt, wird man in den CSS-Code stets so etwas wie die persönliche Handschrift des Erstellers wiederfinden. Häufig erschweren solche Eigenarten des Erstellers das erfassen des Quelltextes erheblich. Umgekehrt kann es aber auch sein, dass man seinen eigenen CSS-Code aufhübschen möchte, etwa wenn man ihn an eine andere Person weiterreicht. Weiterhelfen kann in beiden Konstellationen dar Web-Dienst ProCSSor. Erklärungen für die zahlreichen Einstellungsmöglichkeiten erhalten Sie übrigens, wenn Sie die Maus über dem jeweiligen Einstellungsdialog ruhen lassen.

The Web Fonts Combinator

Unter font-combinator.com lässt sich die Wirkung verschiedener Google Webfonts praxisnah vergleichen. Anhand von zwei Überschriften und eines Absatzes (H1, H2 und P) lassen sich so auf sehr einfachem Weg passende Kombinationen austesten. Hilfreich ist auch, dass die wichtigsten Systemfonts ebenfalls zur Verfügung stehen. Die vorgegebenen Texte des Tools lassen sich durch Klick darauf ändern, wodurch der Vergleich noch lebensechter gestaltet werden kann (beispielsweise bei der Konzeption einer Landingpage). Über einen Schieberegler lässt sich die Schriftgröße und die Zeilenhöhe verändern. Zusätzlich kann bei Bedarf auch die Schriftfarbe und auch die Farbe des Hintergrundes angepasst werden.