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.
Weiterlesen

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

Weiterlesen

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. Weiterlesen

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.

Weiterlesen

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.

Weiterlesen

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.

Weiterlesen

flattr this!

Mobile First & IE8 Fallback mit Sass (Teil2)

Im ersten Teil Mobile First & IE8 Fallback mit Sass ging es darum, wie man mit dem IE8 umgeht, wenn man CSS und Media Querys nach dem „Mobile First“ Prinzip erstellt. Das Mixin-Plugin Sass-IE hilft dabei ein gesondertes Stylesheet für den IE8 ohne @media Angaben zu generieren. Die Lösung hat jedoch ein paar Schwächen, so können z.B. Media Querys nur für einen Wert (min-width bzw. max-width) und ein Medium (@media screen …) generiert werden. Es ist also nicht möglich ein Media Query für zwei Werte zu schreiben. Leider geht @media screen and (min-width: 450px and max-width: 650px) damit nicht.
Weiterlesen

flattr this!

Mobile First & IE8 Fallback mit Sass

Um die Begriffsklärung „Mobile First“ soll es heute nicht gehen. Das ist teils eine philosophische Frage und viele behaupten zurecht, bevor man sich über Design und die Umsetzung Gedanken macht, sollte der Content, für den man gestaltet, vorliegen — also quasi „Content First“. Für viele hat aber „Coffee First“ am Morgen eines Arbeitstages die höchste Priorität. ;)

In dem Artikel geht es um die technischen Möglichkeiten für den Internet Explorer 8 automatisiert eine optimierte ähnlich gute Ansicht der Responsive Website zu generieren.
Weiterlesen

flattr this!

Moderne Webentwicklung mit HTML5 & CSS3 / Responsive Webdesign