CSS Shapes - a Collection by Sven Wolfermann on CodePen 2014-11-14 12-59-54

CSS Shapes – neue Formen braucht das Web

Die Welt ist eine Scheibe und das Web ist eckig… so ungefähr könnte man anfangen um in das Thema einzusteigen. Aber ihr wisst ja, dass es anders ist.

Nachdem wir mit CSS3 schon die Möglichkeit bekommen haben, die Ecken einer Box optisch abzurunden, bleibt natürlich eines offen – der Text bricht nach wie vor an der „geraden” Box-/Bildkante um, dass heißt er orientiert sich z.B. nicht an der Kante von border-radius, erst recht nicht am Inhalt des Bilds. Die eigentliche Box bleibt viereckig. Das ändert CSS-Shapes.

Continue reading CSS Shapes – neue Formen braucht das Web

flattr this!

Responsive Tabellen

Responsive Retrofitting Teil 1

Wenn wir mit bestehenden Inhalten planen müssen, kommt es oft vor, dass wir Daten-Tabellen responsive darstellen sollen. Diese Tabellen sind naturgemäß meist sehr schwierig auf kleinen Bildschirmen abzubilden, viele Tabellen sind sehr groß und enthalten viele Daten. Das rührt daher, dass Redakteure (bzw. diejenigen, die für den Inhalt verantwortlich sind) versuchen über Excel-Tabellen komplexe Daten abzubilden und die Daten so ins Web übernommen werden (sollen). In der Vergangenheit war der Platz auf großen Bildschirmen vorhanden, im Multi-Screen-Zeitalter und in einer responsiven Website heutzutage, meist nicht mehr.

Continue reading Responsive Tabellen

flattr this!

Screenshot Icons Übersicht IcoMoon.io App

SVG Sprites vs. Icon-Fonts

Aktuell stellt sich mir häufiger die Frage „SVG-Icons oder Icon-Fonts” zu verwenden. Wer für ein Multi-Display-Web entwickelt, kommt nicht drumherum Bilder und Icons hochauflösend bereit zu stellen. Mit dem iPhone4 und dem sog. „Retina Display” hat man schnell gemerkt, dass normal auflösende Bildinhalte auf dem Display pixelig aussehen. Bisher war die einfache Lösung, die Icon-Sprites (PNG) in doppelter Auflösung anzulegen bzw. generieren zu lassen. Das Problem, dass die Icons dann trotzdem nur in einer „Ansichtsgröße” vorliegen, bestand weiterhin.

Iconfonts, also Schriften á la Dingbats, die anstatt Buchstaben und Ziffern Symbole haben, wurden bisher als ein adäquates Mittel für skalierbare Icons eingesetzt. Dass das auch immer mit Problemen behaftet ist, werden viele Webentwickler schon festgestellt haben.
Continue reading SVG Sprites vs. Icon-Fonts

flattr this!

Webfonts *richtig* verwenden

Da fragt sich jetzt der ein oder andere Webentwickler „Was kann man da falsch machen? Man bindet den (new) Bulletproof @font-face Syntax ein und gut ist“. Problem hierbei wie immer unser geliebte OldIE, der Webfonts zwar schon im zarten Alter von Version 5.5 beherrschte, aber immer noch einen „alten“ Syntax braucht.

Das Problem: faux-bold

faux bold text
Fehldarstellung – der Browser interpoliert die Schriftfetten

Continue reading Webfonts *richtig* verwenden

flattr this!

kitty-map

Responsive Imagemap

Ein Relikt aus dem Web 1.0 ist die Imagemap, bei der man Klickflächen über ein Bild positionieren kann. Der Vorteil zum normalen "Link um Bild" ist, dass dabei geometrische Formen und individuelle Polygone verwenden können, also z.B. eine Form die im Bild sichtbar ist, nachgebildet werden kann. Die Positionswerte dieser Klickflächen basieren allerdings auf Pixelwerten, und hier beginnt unser Problem. Continue reading Responsive Imagemap

flattr this!

responsive images demo

Responsive Images – width/height-Attribute entfernen, lazy loading & padding-bottom Trick

Für das Einbinden von Bildern im Responsive Webdesign wird häufig empfohlen die ‘width’- und ‘height’-Attribute im HTML-Quellcode zu entfernen. Das ist aber nicht nötig und meiner Meinung nach auch nicht gut in Hinblick auf hochauflösende Bilder.

Mit CSS kann man die im HTML festgelegten Breiten überschreiben und die Bilder so flexibel machen.

Responsive Images basics:

img {
  max-width: 100%;
  height: auto;
}

Das Bild passt sich somit immer dem Container an, wird aber nie größer als seine eigentliche Originalgröße in Pixel. Das dürfe sicherlich bekannt sein. Wenn das nicht funktioniert, liegt ein anderer „Fehler“ vor, wie ein anderer BFC durch ‘float’ oder ähnliches.

Continue reading Responsive Images – width/height-Attribute entfernen, lazy loading & padding-bottom Trick

flattr this!

Static Site Generators

Anfang letzten Jahres habe ich mir überlegt, wie ich meine hauptsächliche Arbeit beschleunigen und verbessern kann. Mein aktueller Job besteht zumeist darin, Responsive Webdesigns in HTML-Templates umzusetzen, die dann im Anschluss in der Software-Entwicklung weiter verarbeitet werden. Manchmal sind es Templates für Content-Management-Systeme, oft ist es aber auch die Grundlage für Java-betriebene Webseiten. Ich habe überlegt, wie ich schnell und flexibel statische HTML-Templates generieren, gleichzeitig mit Sass (Compass) entwickeln und ein Browser-Reload (Live-Reload) machen kann. Einige Systeme habe ich mir angeschaut und möchte kurz meine Erfahrung teilen.

Continue reading Static Site Generators

flattr this!

Styleguide Ausschnitt

Styleguide generieren mit Sass & Grunt

Ein in größeren Projekten immer wichtiger werdendes Thema ist in meinen Augen ein Styleguide, der einerseits als Dokumentation und andererseits für externe Dienstleister als Referenz genutzt werden kann.

Früher™ als man das Design ausschließlich in Photoshop machte, wurde natürlich auch der Styleguide in Photoshop erstellt — mit Bemaßung LOL! Diese Vorlage sollten Webentwickler dann nutzen, um ein Design möglichst pixelgenau umzusetzen. Ich kann mich an keinen „Styleguide“ erinnern, der zu 100% stimmte. Häufig waren Fehler in der „Bemaßung“ oder in Farbwerten… ihr kennt das.

Continue reading Styleguide generieren mit Sass & Grunt

flattr this!