Flexible Mobile-First-Layouts mit CSS3

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Einige Experten gehen davon aus, dass mobile Geräte innerhalb von fünf Jahren zum dominierenden Medium für das Surfen im Internet werden und das Surfen auf Desktop-Computern überholen werden. Unabhängig davon, wie genau sich diese Projektion herausstellt, ist es klar, dass das Formatieren von Websites für die mobile Anzeige zu einem festen Bestandteil des Webdesigns und der Webentwicklung werden muss. Es gibt natürlich viele Möglichkeiten, das zu erreichen. CSS3 bietet jedoch ein ziemlich umfangreiches Werkzeugset für die mobilfreundliche Formatierung, bei dem die Browserfunktionen des Clients anstelle von Back-End-Vorlagen verwendet werden.

Schritt 1. Denken Sie voraus

Es gibt einige Punkte, über die Sie nachdenken sollten, bevor Sie sich mit dem Gestalten eines Layouts befassen.

Mobiles Surfen im Internet

Was sollte man beim Entwerfen für mobile Browser beachten? Nun, hier sind ein paar Dinge ...

Beschränken Sie HTTP-Anforderungen: Die Datenübertragung über 3G kann sehr anstrengend sein. Das beinhaltet nach Möglichkeit das Einschränken von Bildern (z. B. aus dem CSS).
Unterschiedliche Bildschirmgrößen: Mobile Geräte bewegen sich in der Regel um die Bildschirmbreiten von 320 bis 480 Pixel, können jedoch je nach Gerät stark variieren. Das Vordefinieren von Breiten im CSS ist daher im Allgemeinen eine schlechte Idee für Dinge wie Absätze und DIVs.
Für eine Teilmenge optimieren: Es gibt Tonnen von Mobilgeräten, Browsern, Betriebssystemen usw. Versuchen Sie, Ihre Tests auf das zu konzentrieren, was Sie für das Wichtigste halten. Für mich gehören dazu iPhone, iPad, Blackberry und Android. Diese Liste sollte auch Windows Mobile enthalten, aber ich habe einfach keinen Zugriff auf ein Windows Mobile-Gerät.
Hover muss sterben: Okay, das ist ein bisschen dramatisch. Touchscreens unterstützen den Schwebeflug jedoch nicht. Verstecken Sie beim Erstellen von Menüs also keine Dinge hinter Schwebeereignissen. Hover sollte nur verwendet werden, um einige Effekte (wie Farbänderungen) zu verbessern und keine wichtigen Inhalte (wie Dropdown-Menüs) zu liefern.

"Der allgemeine Punkt ist, im Voraus zu wissen, wie Ihre Website in verschiedenen Browsern wahrscheinlich aussieht, bevor Sie sie sehen."

Browser-Unterstützung (auf Desktops)

Zweitens sollten Sie die Browserunterstützung berücksichtigen. Der sprichwörtliche "Elefant im Raum" ist natürlich IE. Gute Nachrichten! Wie sich herausstellt, müssen Websites nicht in jedem Browser genau gleich aussehen. Solange der Inhalt der Website nicht beeinträchtigt wird, bietet ein Browser, der CSS3 nicht verarbeiten kann, im Allgemeinen eine mehr als akzeptable Erfahrung. Der allgemeine Punkt ist, im Voraus zu wissen, wie Ihre Website in verschiedenen Browsern wahrscheinlich aussieht, bevor Sie sie sehen.

Schritt 2. Der HTML

Der Körper

"Halten Sie das Markup einfach und sauber."

Wir wollen nicht nur gültiges HTML erzeugen, sondern es auch so weit wie möglich vereinfachen. Während es immer eine gute Idee war, HTML rationalisiert und frei von unnötigen DIVs zu halten, ist es jetzt mit dem Anstieg des mobilen Webbrowsings noch wichtiger. Viele Effekte, für 7 verschachtelte DIV-Tags erforderlich waren, können jetzt mit ein wenig CSS3 reproduziert werden.

Da das kein HTML5-Tutorial ist, werde ich mich strikt an XHTML halten. In diesem Sinne kann ein Großteil des Markups hier mithilfe einiger HTML5-Elemente noch sauberer gestaltet werden. Hier ist also HTML für ein typisches Layout. Wir haben eine Seite mit einer Kopf-, Fuß-, Inhalts- und Seitenleiste.

<body>
  <div class='pg'>
    <div class='head'>
      <h1><a href='#'>My Blog</a></h1>
    </div>
    
    <div class='pg-main'>
      
      <div class='entries'>
        <h2><a href='#'>An Entry About Something</a></h2>
        <p class='preview'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem elit, suscipit tempus pretium eget, varius ut erat. Donec lobortis est sit amet felis pellentesque vel egestas sapien iaculis. Maecenas eget quam nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
        <p>Mauris nunc metus, pellentesque eget porta ut, facilisis ut metus. Etiam dignissim egestas semper. Aliquam tincidunt tortor non mi ultricies quis interdum quam scelerisque. Aenean risus libero, aliquam vel rhoncus sed, elementum eu leo. Pellentesque vitae ante urna, ut rhoncus sapien. In iaculis tristique lobortis. Nulla feugiat elit at odio dictum dignissim. Fusce tristique lacus nec justo porttitor egestas. Etiam vitae arcu risus, at interdum lacus. Ut dignissim, dui eu imperdiet accumsan, dui mauris hendrerit leo, vel fringilla mi ipsum vitae orci. Nulla libero quam, euismod eget rutrum sed, ullamcorper vitae felis. Mauris aliquam dignissim interdum. Sed sagittis blandit urna, sit amet pellentesque lorem egestas sed. Nam adipiscing, lorem non ornare volutpat, turpis ante sagittis elit, ac hendrerit arcu nunc ut est. Vivamus at arcu felis, eget porta odio.</p>
        <hr/>
        
        <h2><a href='#'>An Entry About Something Else</a></h2>
        <p class='preview'>Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, condimentum at mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus at pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut malesuada lorem. </p>
        <p>Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.</p>
        <hr/>
        
        <h2><a href='#'>A Third Entry</a></h2>
        <p class='preview'>Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, condimentum at mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis sit amet. Phasellus eros dolor, tempus at pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus eget eget felis. Donec ut malesuada lorem. </p>
        <p>Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sed accumsan malesuada iaculis. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.</p>
      </div>
      
      <div class='sidebar'>
        <h2 class='not-there'>Blog Menu</h2>
        <h3 class='subscribe'>Subscribe</h3>
        <ul class='subscribe'>
          <li><a href='#'>RSS</a></li>
        </ul>
        <h3>Social</h3>
        <ul>
          <li><a href='#'>Facebook</a></li>
          <li><a href='#'>Twitter</a></li>
        </ul>
        <h3>Categories</h3>
        <ul>
          <li><a href='#'>Something</a></li>
          <li><a href='#'>Nothing</a></li>
          <li><a href='#'>All Things</a></li>
          <li><a href='#'>No Things</a></li>
        </ul>
        <h3>Archives</h3>
        <ul>
          <li><a href='#'>June 2010</a></li>
          <li><a href='#'>May 2010</a></li>
          <li><a href='#'>April 2010</a></li>
          <li><a href='#'>March 2010</a></li>
        </ul>
      </div>
    </div>
    
    <div class='foot'>
      <p>© No one in particular 2010</p>
    </div>
    
  </div>
</body>

Wie Sie sehen können, handelt es sich um ein ziemlich einfaches und typisches Blog-Layout mit einigen Artikeln und einigen Menüoptionen in der Seitenleiste.

Ansichtsfenster-Metadaten

In unser Kopfelement werden alle typischen Elemente wie Stylesheets, Inhaltstyp, Titel usw. eingefügt. Es gibt jedoch ein zusätzliches Element, das wir hinzufügen werden, um mobile Browser zu glätten.

1	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Das ist ein kleines Metadaten-Tag, das von Apple vorgeschlagen wurde, um iPhones beim Rendern einer Seite zu unterstützen. Die Seite wird im Wesentlichen automatisch an das Ansichtsfenster angepasst und das Zoomen verhindert. Einige andere mobile Browser unterstützen dies ebenfalls, einschließlich des nativen Blackberry-Browsers. In meinen Tests schadet das Beibehalten dieses Tags dem Surfen auf dem Desktop überhaupt nicht. Also, lass es uns einfach in den Kopf stecken und es vergessen.

Über das Layout nachdenken

Dieses spezielle Tutorial konzentriert sich darauf, den obigen HTML-Code in zwei Layouts zu unterteilen. Ein Layout ist für das mobile Surfen und eines für das Desktop-Browsing vorgesehen. oder um dieser Einfachheit willen In der Praxis wird es wahrscheinlich nützlich sein, ein solches Layout in mehrere verschiedene "Ziele" aufzuteilen. Oder um dieser Einfachheit willen, konzentriert sich dieses Tutorial nur auf diese beiden.

Schritt 3. Das mobile Styling

Haftungsausschluss

Der Zweck dieses Tutorials besteht nicht darin, über reichhaltige Typografie oder brillantes grafisches Design zu sprechen. Die Präsentation hier ist also sehr einfach gehalten. Was wichtig ist, ist der Denkprozess, der das Stylesheet antreibt.

Die Vorgehensweise

Der Hauptschwerpunkt all dessen ist, zuerst über das Entwerfen eines mobilen Layouts nachzudenken. Der Grund dafür ist, dass alles, was Sie sich für ein Mobilgerät einfallen lassen, wahrscheinlich auch auf einem Desktop funktioniert. Anstatt ein zusammengewürfeltes mobiles Layout und ein brillantes Desktop-Layout zu erhalten, beginnen Sie mit einem brillanten mobilen Layout und verbessern es für den Desktop. Das stellt auch sicher, dass Ihre Website nicht ihr Publikum verliert, wenn die Welt mobil wird.

Die Inspiration

Dieser Ansatz ist inspiriert von Luke Wroblewski, der dieses Jahr bei An Event Apart in Boston sprach. Im Mittelpunkt seiner Präsentation stand das Denken "Mobile First".

Während dieses Tutorial seine Präsentation nicht vollständig erfasst, traf ein Teil davon mehr als der Rest (für mich). Der aktuelle Trend ist, dass Design zuerst an der Desktop-Version einer Website arbeitet, diese dann entfernt und bei Bedarf eine mobile Website zusammenstellt. Stattdessen sollten wir zuerst mit dem Design für die mobile Welt beginnen und dann das Design wie gewünscht für den Desktop ändern. Das Rationale ist im Wesentlichen eine progressive Verbesserung ... Wenn das Design auf Mobilgeräten nützlich ist, funktioniert es auch auf dem Desktop. Das Gegenteil ist jedoch normalerweise nicht der Fall.

Etwas CSS

Denken wir also einen Moment über das mobile Surfen nach. Lange Bildlaufbildschirme sind schwer zu handhaben. Nehmen wir also die Elemente der Blog-Menüliste und vereinfachen die Handhabung.

.sidebar ul{
  border-left:solid 1px #ccc;
  padding:0 0 0 5px;
}
.sidebar ul li{
  display:inline;
  padding:0 5px 0 0px;
  border-right:solid 1px #ccc;
}

Das sollte uns ein schönes, sauberes Menü mit einigen Pfeifenabscheidern geben. Sie werden feststellen, dass ich das Menü nicht vom unteren Bildschirmrand weg verschoben habe. Die Menüs unten können beim mobilen Surfen hilfreich sein. Wenn Sie daran denken, durch eine Webseite zu scrollen, müssen Sie nach unten scrollen, um an einen anderen Ort zu gelangen. Das Scrollen kann je nach Gerät etwas lästig sein. Diese Methode hat Vor- und Nachteile, aber in diesem Fall funktioniert sie meiner Meinung nach gut.

Ich möchte jedoch das RSS auf das oberste Banner verschieben, also machen wir das auch.

h3.subscribe{
  display:none;
}
.sidebar ul.subscribe{
  position:absolute;
  top:25px;
  right:10px;
  border:none;
  color:#fff;
}
.sidebar ul.subscribe li{
  border:none;
}

Abgesehen davon ist der Rest so ziemlich nur eine Schriftgröße der Überschriftenelemente und eine Färbung der Anker. Für die Zwecke dieses Tutorials habe ich der Einfachheit halber oben auf dem Blatt einen CSS-Reset eingefügt. Das vollständige CSS-Blatt finden Sie im Quellcode dieses Tutorials.

Wie Sie sehen können, ist das mobile Styling nichts Besonderes, wenn Sie sich dem Design aus einem mobilen Blickwinkel nähern. Anstatt zu überlegen: "Wie soll das auf meinem Bildschirm aussehen?", Denken Sie: "Wie kann ich das Styling verwenden, um das auf einem mobilen Gerät am nützlichsten zu machen?"

Schritt 4. Das Desktop-Styling

Medienabfrage

Falls Sie es nicht erraten haben, wird diese ganze Sache von einer CSS3-Medienabfrage gesteuert. Falls Sie nicht vertraut sind, können Sie mit der Medienabfrage Deklarationen basierend auf verschiedenen Bedingungen ein- und ausschalten. Eine solche Bedingung und das Thema dieses Blattes sind die Bildschirmabmessungen.

Das vollständige CSS finden Sie in der Quelle, die diesem Tutorial beigefügt ist. Lassen Sie uns das jedoch einen Moment lang untersuchen:

1	.pg{
2	width:800px;
3	margin:0 auto;
4	}

In diesem Fall möchten wir nicht wirklich eine Seitenbreite von 800 Pixel, es sei denn, wir sind sicher, dass das Browserfenster des Benutzers mindestens 800 Pixel breit ist. Andernfalls erhalten wir eine dieser nervigen horizontalen Bildlaufleisten.

Wir werden diese Deklaration (zusammen mit mehreren anderen) in eine Medienabfrage einbinden.

@media all and (min-width:800px){
  .pg{
    width:800px;
    margin:0 auto;
  }
}

Das liest sich ziemlich leicht, oder? Das "Alle" bezieht sich auf "Verwenden Sie diesen Stil für alle Arten der Medien". Es gibt andere Dinge, die hier gehen können, wie "Drucken" für Drucker, aber es gibt nicht viel konsistente Unterstützung. Wie auch immer, "alle" werden dafür gut funktionieren.

Vorherige Stile "überschreiben"

Wir werden auch viele andere Dinge in diese Medienabfrage einfügen, aber das Wichtigste, an das Sie sich erinnern sollten, ist, vorherige Stile im Wesentlichen zu überschreiben und einige neue hinzuzufügen, um das neue Layout zu erreichen. Auf diese Weise können Browser, die keine Medienabfrage unterstützen, einfach auf das ursprüngliche Design zurückgreifen. Obwohl sie für Mobilgeräte optimiert sind, ist es nichts Falsches, dieses Layout in einem weniger leistungsfähigen Desktop-Browser anzuzeigen.

Zum Beispiel verschieben wir diese Seitenleiste aus dem unteren Bereich und lassen die Listen wieder wie Listen aussehen.

@media all and (min-width:800px){
  .sidebar ul{
    border:none;
    padding:0;
  }
  .sidebar ul li{
    display:block;
    padding:0;
    border:none;
  }
  h3.subscribe{
    display:block;
  }
  .sidebar ul.subscribe{
    position:static;
    top:auto;
    right:auto;
    border:inherit;
    color:inherit;
  }
  .sidebar ul.subscribe li{
    border:inherit;
  }
}

Dadurch wird die Seitenleiste nach links verschoben (kombiniert mit einigen anderen Floats im Stylesheet) und das Abonnement wieder dort platziert, wo es hingehört, wenn Benutzer die Site mit einer Breite von mindestens 800 Pixel durchsuchen.

Wenn Sie also die Quelle in einem Browser öffnen und die Größe horizontal ändern, können Sie beobachten, wie das Layout zwischen dem Desktop-Format und dem mobilfreundlichen Format wechselt

Sie fragen sich vielleicht, warum 800px? Gibt es etwas Magisches an einer Breite von 800 Pixel? Tatsächlich würde ich argumentieren, dass es zu breit ist. Mit der Einführung von "snap" in Windows 7 würde ich argumentieren, dass 600px die neue Zielbreite für eine Desktop-Website sein sollte. Auf diese Weise kann der Browser auf einem 1280px-Bildschirm nach rechts oder links "eingerastet" werden und behält dennoch sein Layout bei. Das ist jedoch wirklich weder hier noch dort. Seien Sie sich nur bewusst, dass 800px nichts Besonderes ist.

Browser-Unterstützung

Wichtig: Die Website wird in IE8 und darunter als mobile Version gestaltet. Ist das okay? Ich glaube schon. Außerdem habe ich das schon einmal gemacht und bisher hat mich niemand verhaftet. Außerdem wird die Unterstützung von Medienabfragen in IE9 versprochen.

Schritt 5. Alternative Methoden

Das ist nicht der einzige Weg, dies zu erreichen. Der Zweck dieses Tutorials war es jedoch, eine sehr praktische Verwendung für Medienabfragen aufzuzeigen und einige Ideen für mobile Layouts vorzustellen, die nur auf CSS basieren.

Das heißt, hier sind einige andere Möglichkeiten, um ein mobiles Layout zusammenzustellen ...

Verschiedene Vorlagen bereitstellen: Wenn Sie Zugriff auf die Vorlagen für die Site haben, kann normalerweise ein Themensystem eingerichtet werden, in dem der anfordernde Browser erkannt wird. Je nach Browsertyp (mobil oder nicht) wird eine andere HTML-Vorlage bereitgestellt. Das wird normalerweise auch von einem separaten Set von CSS begleitet.
Subdomains: m., mobile. und .mobi sind hier in der Regel die Standards, auf denen eine völlig andere Website bereitgestellt wird. Das heißt, es ist normalerweise dasselbe wie "verschiedene Vorlagen bereitstellen", um doppelte Inhalte zu vermeiden.
Fließende Layouts: Man kann das Layout auch vollständig flüssig gestalten, sodass sich der Inhalt unabhängig von der Größe des Browserfensters selbst anpasst. Tatsächlich ist das "mobile" Stylesheet in diesem Tutorial ein flüssiges Layout. Das Schöne an der Verwendung von Medienabfragen ist, dass Sie die Hintergrundbilder reduzieren und weniger HTTP-Anforderungen erzeugen können.

Es gibt wahrscheinlich mehrere andere Methoden für das mobile Surfen im Internet, aber oft kommt es auf eine Art Hybrid an. Unabhängig davon, ob es sich um ein flüssiges Layout mit bestimmten "Kick"-Punkten handelt, die auf Medienabfragen basieren, oder um eine Subdomain-Umleitung, die verschiedene Vorlagen bereitstellt, ist es wichtig, mobile Layouts im Voraus zu planen, damit Ihre Websites im Laufe der Zeit nicht immer weniger nützlich werden nächste 5 Jahre.