Mobile First: Webentwicklung mit CSS3 und Media Queries

15.12.2017
Von: Dennis Strathausen

Das Surfen im Internet mit mobilen Geräten wird immer beliebter. Ein Blick auf entsprechende Statistiken [1] bestätigen diese Vermutung.

Zu sehen ist, dass Ende 2016 der Bereich Mobile den Desktop bereits eingeholt hat und dass es dementsprechend sinnvoll ist eine angepasste Seite für mobile Geräte bereitzustellen. Es gibt verschiedene Möglichkeiten wie man dies erreichen kann. Eine davon ist der Ansatz ‚Mobile First‘. Mobile First beschreibt ein Konzept oder eine Denkweise in der Webentwicklung, bei der die Seiten für mobile Geräte höher priorisiert werden und somit zuerst entstehen. Im Prinzip folgt man hier dem Trend des wachsenden ‚mobilen‘ Internet. Wie aber lässt sich das technisch umsetzen?

Es gibt verschiedene Varianten. Eine Möglichkeit ist das Verwenden von CSS3 und Media Queries (Medienabfragen). Im Grunde bindet man abhängig von dem Ausgabegerät unterschiedliche CSS Ressourcen/CSS Regeln ein und bekommt so eine für das Ausgabegerät optimierte Darstellung.

Mit Media Queries werden aber nicht das Betriebssystem oder der verwendete Browser abgefragt, sondern einfache Eigenschaften wie Breite/Höhe des Anzeigemediums (Viewport), die Ausrichtung (Orientation: Portrait/Landscape) oder ganz allgemein der Medientyp (screen, print, all). Diese Abfragen können dabei beliebig komplex werden. Folgendes zeigt, wie ein Stylesheet abhängig von der Ausrichtung eingebunden wird:

<head>

    <link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

</head>

Hier ein Beispiel, wie eine einzelne CSS Regel eine Media Query verwendet:

@media only screen and (max-width: 768px) {

    .column {

        width: 100%;

    }

}

Diese Regel wird nur angewendet, wenn der Medientyp ‚screen‘ ist (Desktop, Smartphone, Tablet) und die Breite des Anzeigebereichs nicht 768px überschreitet.

Mit ein paar dieser Regeln kann man nun schon eine Seite so gestalten, dass sie sich dem entsprechenden Gerät anpasst:

<html>

<head>

<style>

    .container {

        display: flex;

        flex-wrap: wrap;

        align-items: stretch        

    }

   

    .content {

        background-color: aqua;

        height: 600px;

        flex-grow: 1;

    }

 

    .side {

        background-color: orangered;

        width: 100%

    }

 

    @media (min-width : 500px) {

        .side {

            width: 200px;

        }

    }

 

    @media (min-width : 800px) {

        .side {

            width: 400px;

        }

    }

 

</style>

</head>

<body

    <div class="container">

        <div class="content">Main content</div>

        <div class="side">Side info</div>

    </div

</body>

</html>

In diesem Beispiel gibt es zwei Elemente: content und side, die durch die beiden Regeln .content und .side untereinander positioniert werden. Ist der Anzeigebereich nun mindestens 500px breit, so wird die Breite des Side Elements auf 200px gesetzt. Durch den Flex-Container wandert dieses Element nun nach rechts neben Content. Ist der Anzeigebereich noch breiter, mindestens 800px, so wird das Side Element ebenfalls breiter. Wir haben hier also eine einfache Seite erstellt, die sich der verfügbaren Breite des Anzeigemediums anpasst. Zudem findet man hier den Mobile First Ansatz wieder. Die Seite wird zunächst für mobile Endgeräte (geringe Breite) entworfen und anschließend durch Media Queries für weitere Geräte angepasst. Öffnet man dieses Beispiel in einem Browser und ändert die Größe, kann man die Auswirkung gut beobachten. Das Ganze könnte man jetzt sogar noch mit einer CSS3 Transition versehen, damit der Breitenwechsel schön animiert wird.

Das hier verwendete Beispiel ist nur ein Ansatz dafür, wie man Webseiten oder Webanwendungen für mobile Geräte erstellen kann. Allerdings kann man mit wenig Aufwand viel bewirken. Da es auch zum Standard gehört und somit in den gängigsten Browser funktioniert, sollte man diese Möglichkeit zumindest in Betracht ziehen, wenn man vor der Entscheidung steht, ob und wie man Webseiten für mobile Endgeräte bereitstellt.

Sollten Sie weitere Fragen zum Thema Mobile First, CSS3 oder Media Queries haben, sprechen Sie uns gerne an. 

[1] Quelle: StatCounter Global Stats:: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet ; Letzter Zugriff: 15.12.2017


INDIVIDUELLE SOFTWARE

KONTAKT | IMPRESSUM | DATENSCHUTZ | AGB