Wordpress Mobile First Theme I

Das Internet wird immer mobiler.

Wir nutzen das Internet immer mehr mit Smartphones oder Tablets. Wir informieren uns mit mobilen Geräten. Wir orientieren uns mit mobilen Geräten. Wir kaufen sogar mit mobilen Geräten ein. Mobiles Internet ist schon längst ein Teil unseres Lebens geworden. Also schauen wir, wie wir zusammen ein WordPress Mobile First Theme entwickeln.

Andererseits werden Webseiten meistens vom Arbeitsplatz aus, mit großen Computern geplant und umgesetzt. Daher liegt es nahe, dass die Webdesigner und ihre Kunden zuerst von ihrem großen Desktop-Bildschirmen ausgehen, wenn sie Webseiten planen. Die Methode nennen wir „Desktop First“. Man kann sagen, dass diese Methode nicht mehr ganz zeitgemäß ist. Denn damit werden die mobilen Geräte, ältere Browser oder schwächere Internetverbindungen einfach nicht berücksichtigt. Stellt Euch vor, Ihr seid unterwegs und wollt eine Seite aufrufen. Auf eurem Smartphone wird aber zuerst die Desktop Version der Seite aufgeladen. Wenn Ihr gerade eine schwache Internetverbindung habt und das System auf eurem Smartphone nicht das Neueste ist, ist es nahezu unmöglich, dass euer Smartphone die Seite aufladen kann.

Was tun?

WordPress Mobile First Theme.

Eric Schmidt, den man als Google CEO kennt, sagte schon 2009 dazu:

The simple guideline is whatever you are doing – do mobile first

6 Jahre später halten fast alle Internet Nutzer es wichtig, dass eine Webseite „mobile friendly“ ist. Mehr als die Hälfte der User geben an, dass eine Marke einen schlechten Eindruck hinterlässt, wenn deren Seite nicht mobil tauglich ist.

Webdesigner Luke Wroblewski hat 2009 zum Thema „Mobile First“ ein Buch veröffentlicht. Wer Interesse hat, kann sich gerne auf der Seite abookapart informieren.

Die Vorteile der Herangehensweise Mobile First liegen auf der Hand:

– man ist für die Zukunft besser gewappnet, weil die mobilen Geräte immer wichtiger werden.

– man konzentriert sich automatisch auf die wichtigsten Inhalte der Webseite, also ein schnellerer Informationszugriff. Wer ein Produkt zu verkaufen hat oder ein Dienstleister ist, ist mit dieser Methode bestens bedient.

– dadurch, dass zuerst die mobile Version, also die abgespeckte Version der Webseite, aufgeladen wird, wird die Webseite schneller.

– die Webseite wird nicht nur auf Smartphones und Tablets, sondern auf allen Bildschirmgrößen optimal dargestellt.

– mit den Möglichkeiten, die mobile Geräte per se haben, kann man interessantere Webseiten planen und umsetzen.

– die Erweiterbarkeit einer Webseite hinsichtlich der modernen Systeme und der unterschiedlichen Darstellungsgrößen werden verbessert.

Zugegeben, einen Nachteil gibt es doch noch. Wir müssen umdenken! Und das ist etwas gewöhnungsbedürftig, weil aus heutiger Sicht alles verkehrt rum läuft. Vom Konzept und Webdesign bis hin zum Programmieren der Webseite.

Das letztere betrifft aber viel mehr CSS. Dabei sind die wichtigsten Fragen, wo ich die Breakpoints setzte oder…

wie gehe ich mit den Media Queries um?

Wie gesagt, man hat ja zuerst die CSS-Daten der mobilen Version der Webseite. Die Breakpoints (Umbrüche) richten sich nach den Bildschirmgrößen. Die Reihenfolge ist also, erst Smartphone, dann Tablets, Desktops und die größeren Desktops. Die Bildschirmbreiten sind 320px, 480px, 768px, 1024px. Man schreibt in die CSS-Codes an den entsprechenden Stellen ein Media Querie, der dann beispielsweise so aussieht:

@media screen and (min-width: 768px) {…}

Zwischen den beiden geschweiften Klammern schreibt man die nötigen Korrekturen bzw. Änderungen.

Oben als wir über die Vorteile von Mobile First gesprochen haben, haben wir gesagt: „Man konzentriert sich auf die wichtigsten Inhalte.“ Das heißt, Content First! Hören wir mal auf den holländischen Webdesigner Stephen Hay, der über Breakpoints folgendes sagt:

Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT!

Ein Punkt ist doch noch wichtig. Man muss unbedingt mit dem Viewport-Metatag die Geräte Viewport Breite angeben. Man schreibt dieses Metatag im head-Bereich.

<meta name="viewport" content="width=device-width, initial-scale=1">

So viel zur Theorie.

Wir haben die Webseite „Prinzessin Woo und der Tellerwäscher“ in Mobil First konzipiert und umgesetzt. Die Arbeit hat uns sehr viel Freude bereitet. Diese Freude würden wir gerne mit Euch teilen. Auf dem II. Teil dieses Blogbeitrags werden wir uns auf die Praxis stürzen und gemeinsam ein WordPress Mobile First Theme entwickeln.

Wenn Du Kritik, Ergänzungen oder Anregungen hast, wir freuen uns auf Deinen Kommentar.