Nach dem letzten WordCamp in Köln hatte ich mir vorgenommen, beim nächsten Camp selbst eine Session anzubieten. Und weil ich mich mit dem Bereich Theme-Entwicklung noch am besten auskenne, möchte ich etwas dazu erzählen.

Ich arbeite zur Zeit intensiv an einem Framework für Responsive-Design-Projekte. Das Framework basiert auf dem „Mobile First“-Ansatz von Luke Wroblewski. Mit dieser Methode kann man einige Nachteile umgehen, die Responsive Design mit sich bringt.

Alle Session-Vorschläge werden ab sofort auf der Website des WPCamp Berlin den Teilnehmern vorgestellt.

Session-Vorschlag: WordPress-Themes und „Mobile First“

Worum geht es?

„Mobile First“ gehört in den Zusammenhang des „Responsive Web Design“. Die Idee dahinter ist, dass sich das Layout einer Website automatisch an den Bildschirm des Geräts anpasst, mit dem sie aufgerufen wird.
Bei einem Responsive Design beginnt man üblicherweise mit der Ansicht für Desktop-Rechner und bricht dann Design, Inhalt und Code Stück für Stück auf die mobile Ansicht herunter.

Das hat aber eine Reihe von Nachteilen. Ruft man zum Beispiel eine solche Seite mit dem Smartphone auf, sieht man zwar eine abgespeckte Version, aber die Seite lädt sehr lange. Der Grund für die lange Ladezeit: In der Mobilansicht sind die Daten der Desktop-Ansicht nur ausgeblendet, geladen werden sie aber trotzdem. Bei langsamen Mobilfunkverbindungen ist das nicht ideal.

Mobile First beschreibt den umgekehrten Ansatz. Man beginnt den Aufbau einer Website mit der Darstellung für Mobilgeräte (Mobiltelefone, Smartphones, Tablets) und arbeitet sich langsam nach „oben“ bis zur Desktop-Ansicht vor. Die Mobilansicht ist damit frei vom Daten-Ballast der Desktop-Ansicht.

Für wen ist die Session gedacht?

Für Designer und Coder, die WordPress-Themes entwickeln und sich für das Thema interessieren, aber selbst noch keine oder wenig praktische Erfahrungen damit haben.

Welche Inhalte will ich vermitteln?

„Mobile First“ ist mehr als ein Trick um die Ladezeit einer Seite für mobile Geräte zu verbessern. „Mobile First“ ist zwar in erster Linie eine CSS-Technik, es ist aber auch ein sehr spannender Denkansatz. Dieser Denkansatz beeinflusst jeden Arbeitsschritt, der bei der Entwicklung eines WordPress-Themes anfällt.

  • Konzept
  • Content-Strategie
  • Coding (CSS/HTML)
  • Design

Ich möchte in meiner Session skizzieren, was „Mobile First“ für die unterschiedlichen Bereiche des Theme-Designs bedeutet.

  • Was muss ich beim Konzept einer Seite bedenken?
  • Welche Auswirkungen hat „Mobile First“ auf die Inhalte?
  • Wie funktioniert ein CSS, das mit der kleinsten Darstellung anfängt?
  • Was muss ich bei grafische Umsetzung einer Seite beachten?

Aufbau der Session

Vortrag, anschliessend ist Zeit für Fragen.
In unserem Blog stelle ich meine Slides und Links zu Ressourcen zum Theme (Tutorials und weiterführende Artikel) zusammen.