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

Ringgalaxie AM 0644-741 von Hubble

Wie kann eine Galaxie die Form eines Ringes annehmen? Der Rand der abgebildeten blauen Galaxie ist eine gewaltige ringähnliche Struktur mit einem Durchmesser von 150.000 Lichtjahren, bestehend aus jungen, extrem hellen massereichen Sternen. Die Galaxie AM 0644-741 ist als Ringgalaxie bekannt und entstand durch eine gewaltige Galaxienkollision. Wenn Galaxien kollidieren, durchdringt eine die andere - ihre Einzelsterne kommen selten in Kontakt. Die ringähnliche Form ist das Ergebnis des gravitativen Auseinanderreißens, verursacht durch eine kleine eindringende Galaxie, die als Ganzes eine große durchdringt. Wenn das geschieht, werden interstellares Gas und Staub verdichtet, dadurch entsteht eine Sternbildungsfront, die vom Einschlagspunkt aus wie eine Welle auf der Oberfläche eines Teiches nach außen wandert. Die eindringende Galaxie liegt knapp außerhalb des Bildes, das mit dem Weltraumteleskop Hubble fotografiert wurde. Das dargestellte Bild wurde zur Feier von Hubbles Start 1990 fotografiert. Die Ringgalaxie AM 0644-741 ist etwa 300 Millionen Lichtjahre entfernt.

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 ;)