Session: 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.

  1. Konzept
  2. Content-Strategie
  3. Coding (CSS/HTML)
  4. 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.

Kirsten Schelper

Mein Name ist Kirsten Schelper. Ich bin Webdesignerin aus München mit einer Passion für italienischen Kaffee, vegetarische Küche und Fahrradfahren. Ihr findet mich nicht bei Facebook, dafür aber auf Twitter.

3 Kommentare » Schreibe einen Kommentar

  1. Inzwischen würde ich das Thema Performance kritischer sehen – auch bei Mobile First kommt man ums Ausblenden von Elementen nicht herum. Insofern ist die pauschale Aussage “Mobile First = kleinere Datenmenge” nicht haltbar. Näheres dazu in der Session ;-)

  2. Klasse Thema, hierzu suche ich noch Kontakte zum austauschen. Meine ersten Erfahrungen habe ich zwar schon jedoch stellen sich gerne Probleme mit Browserversionen des IE ein….

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>