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.
Mobile First & IE8 Fallback mit Sass (Teil2) weiterlesen
Kategorie: RWD
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.
Mobile First & IE8 Fallback mit Sass weiterlesen
Individuelle responsive Gridsysteme mit Sass
Für Responsive Webdesign ist ein Gridsystem der Grundstock um den Inhalt auf vielen verschiedenen Ausgabegeräten flexibel auszugeben. Gridsysteme sind mittlerweile unbedingt notwendig um ein Design zielgenau (nicht pixelgenau) umzusetzen. Um genau zu sein, sollte das Design bereits einem Raster folgen, das dann in der Entwicklung so umgesetzt wird.
Der Viewport — das unbekannte Wesen
Seit wir uns mit Responsive Webdesign „herumschlagen müssen“, begegnet uns immer wieder das Wesen der Post-PSD-Ära – der Viewport.
Mittlerweile beherrscht er unser Tun und stellt uns immer wieder Fallen. Wir versuchen ihn zu beherrschen. Wir versuchen ihn einzugrenzen. Oft schlägt dies fehl. An dieser Stelle möchte ich meine Feldforschungsergebnisse der letzten Monate mit Euch teilen.
Vielerorts findet man Anwendungen, die über einen iframe die eingegebene Website „responsive“, also in einem bestimmten Viewport darstellen. Soweit so gut. Das ist durchaus nützlich, spiegelt aber oft nicht das Ergebnis auf den echten Geräten wieder. Man kann dabei lediglich sehen, ob die Layout-Container entsprechend umbrechen oder wie Texte laufen und Bilder sich anpassen, häufig reicht das ja auch. Vieles hängt aber bei der Darstellung auf den mobilen Endgeräten von den verwendeten Media-Queries und dem Viewport-Meta-Tag ab.
Der Viewport — das unbekannte Wesen weiterlesen
The Responsive Webdesign Process
Bei der TYPO3 Conference (T3CON12DE) in Stuttgart hatte ich die Gelegenheit einen Vortrag über den neuen Prozess in Responsive Webdesign Projekten zu sprechen. Meiner Meinung nach muss sich bei RWD Projekten der Workflow vom üblichen „Waterfall“ Prinzip zu einem iterativen Prozess ändern. Einen Großteil der Arbeit in Responsive Webdesign Projekten sehe ich eher in konzeptionellem Bereich, als in der Programmierung selbst. Vielleicht ist auch mal ein ausführlicher Artikel zum Thema notwendig, hier aber erstmal die Slides: http://maddesigns.de/rwd-process/