files/themes/boldt-media/header/ap140427.jpg

SuitSat-1: Ein Raumanzug schwebt frei

27. April 2014: Vor etwa acht Jahren trieb ein Raumanzug von der Internationalen Raumstation ab, doch es wurde keine Untersuchung eingeleitet. Jeder wusste, dass er von der Besatzung der Raumstation weggeschubst wurde. Der als Suitsat-1 bezeichnete, ungenützte russische Orlan-Raumanzug war großteils mit alter Kleidung gefüllt, wurde mit einem schwachen Radiosender bestückt und in einen Erdorbit entlassen. Der Anzug umrundete die Erde zweimal, ehe sein Radiosignal unerwartet schwach wurde. Suitsat-1 umkreiste die Erde weiterhin alle 90 Minuten, bis er wenige Wochen später in der Erdatmosphäre verglühte. Oben wurde der leblose Raumanzug 2006 fotografiert, als er von der Raumstation forttrieb.

BOLDT MEDIA Blog

Ankündigungen, Beiträge, Tutorials und Code Snippets rund um die Themen Webdesign, Contao, eLAIX, ePUB, E-Learning und Schulungen

Common First - Emanzipation im Webdesign

(Kommentare: 1)

"Als Gott die Erde schuf, übte sie nur." Feministische Ideologien haben ihren Platz in der gesellschaftlichen Entwicklung, gelten mittlerweile aber als überholt, und wir haben erkannt, dass Emanzipation erst dann Realität sein wird, wenn man sie nicht mehr benötigt.

Der Vergleich mag vielleicht etwas weit hergeholt erscheinen, aber bei genauerer Betrachtung passiert mit dem Postulat "Mobile First" gerade etwas Ähnliches. Wir haben verstanden, dass mobile Nutzung derzeit einen Stellenwert hat, den wir als Webentwickler berüchsichtigen müssen. Aber müssen wir deshalb bei der Entwicklung einer Website mit der mobilen Variante beginnen?

Anstatt den Spieß herumzudrehen, plädiere ich dafür, dass wir alle relevanten Endgeräte im Blick haben und dabei bewährte CSS-Designprinzipien berücksichtigen:

  • Möglichst wenig CSS-Regeln schreiben (DOM und Vererbung nutzen),
  • CSS browserkonform einsetzen,
  • CSS-Regeln nicht überschreiben.

In der Konsequenz bedeutet dies, dass wir zunächst ein Design entwickeln, das in weiten Teilen auf Desktops wie auch auf mobilen Geräten eine gute Figur macht. Dies ist zunächst einmal eine designtechnische Aufgabe, die jedoch Wissen über die User-Experience auf den verschiedenen Endgeräten erfordert. Für dieses Design entwickeln wir nun ein Stylesheet, dessen CSS-Regeln so formuliert sind, dass sie auf allen Endgeräten greifen. Nennen wir dieses Stylesheet "common.css".

Zum Differenzieren erstellen wir weitere Stylesheets mit entsprechenden Media Queries für die Desktop-Variante (desktop.css) und ein oder mehrere Stylesheets für mobile Endgeräte (mobile-767.css, etc.). Idealerweise werden in den weiteren Stylesheets nur zusätzliche Regeln formuliert, so dass keine Eigenschaften überschrieben werden. Im Umkehrschluss werden im common.css keine Endgeräte-spezifischen Angaben gemacht.

Nachteilig an dieser Strategie ist sicherlich, dass CSS-Regeln gesplittet werden. Nicht mehr das zu stylende Element mit seinen Unterelementen steht im Vordergrund, sondern der Fokus auf verschiedene Endgeräte. Definitionen, etwa für eine News-Liste, sind nun in drei oder mehr Stylesheets untergebracht. Die Herausforderung hier wird sein, möglichst viele der CSS-Regeln im Sinne eines "One fits all" in der common.css unterzubringen. Oder anders gesagt: Je kleiner unsrere desktop.css und mobile-x.css ausfallen, desto besser.

Fazit: Es stellt sich aus meiner Sicht nicht die Frage, mit welchem Endgerät wir beginnen. Mobile Geräte sind wichtig, aber nicht wichtiger als Desktops. Im Sinne der Emanzipation plädiere ich daher für den Ansatz "Common First" statt "Mobile First".

Zurück

Einen Kommentar schreiben

Kommentar von Peter |

Genau genommen entspricht die common.css dem mobile first, bzw. grandpa-first.
Ich würde die common.css als fallback sehen, wenn ältere Webbrowser wie IE die mediaqueries nicht interpretieren. Hier ist das Basis-Design im guten flowable-Design in der common.css zu finden. Die Spezialisierung der Endgeräte wie mobile,tablets,desktops finden dann wieder ihre eigenen css-datien, wie oben beschrieben.

Also: Grandpa-First ;)