Mit „responsive“ ist gemeint, dass Webseiten sich selbst an die Maße eines Bildschirms anpassen.

Früher gab es ja praktisch nur den PC als Endgerät und man brachte die verschiedenen Bildschirmbreiten sehr oft so „unter einen Hut“, indem man die Webseite auf 640 Pixel beschränkte. Heute gibt es die verschiedensten Bildschirmbreiten (und -höhen) für Handy, Tablet und PC. Klassische Webseiten sind am Handy nur recht umständlich zu bedienen. Sie sind zu groß und die Schriften sind zu klein. Die Folge ist, dass man die Webseiten zoomen und verschieben muss, um den gewünschten Inhalt zu sehen. Die Bedienung der winzigen Bedienungselemente ist eine weitere Hürde,

Daher gab es zu vielen Webprojekten zuerst eigene mobile Versionen und oft parallel dazu eigene Apps. Die App zwingt den Inhalt in die Maße des Handys und verwendet ausreichend große Bedienungselemente. Das Problem haben die Entwickler, weil sie mehrere Versionen ein- und derselben Anwendung aktuell halten mussten. Für viele Anwendungen gibt es überhaupt nur mehr Handy-Apps, weil eben das Gros der Benutzer ohnehin nur mehr über das Handy darauf zugreift.

Schau Dir einmal (D)ein Web auf einem Handy an. Muss man es am Handy durch zoomen vergrößern, damit man etwas erkennen kann? Wenn ja, ist es eben ein klassisches Web, das eine Technik verwendet, die über keine besonderen Maßnahmen zur automatischen Anpassung an die Bildschirmdimensionen verfügt.

Man kann diese Entwicklung auch als einen Wettbewerb von Technologien verstehen. Die Websprachen HTML, CSS und JS standen in Konkurrenz mit den Apps am Handy. Die Websprachen haben sich entwickelt, Es gibt mit HTML-5, mit CSS-3 und den zahlreichen Javascript-Erweiterungen ganz neue Möglichkeiten, auf die Vielzahl der Endgeräte einzugehen und sich überall an die Gegebenheiten anzupassen. Wenn eine Webseite diese Fähigkeit hat, nennt man sie „responsive“.

WordPress-Web responsive machen

Am einfachsten ist es bei WordPress-Webs, denn alle mit WordPress mitgelieferten Themen und alle neu am Markt angebotenen Themen verfügen bereits über die „responsive“-Eigenschaft. Es könnte höchstens der Fall sein, dass eine ältere Installation noch mit einem starren Thema ausgerüstet ist. In diesen Fällen genügt es, das Thema zu ändern.

Die Menüs im WordPress sind am PC fast immer horizontal angeordnet, das entspricht dem Breitformat. Um die Bildschirmbreite besser auszunutzen, ordnet man die Inhalte gerne in nebeneinander liegenden Spalten an. Betrachtet man dieselbe Seite auf einem schmalen Display, verschwindet das horizontale Menü hinter einem Symbol mit drei horizontalen Strichen, das beim Anklicken dasselbe Menü aber in vertikaler Anordnung zeigt, die eben besser in das hochformatige Handy-Display passt.

• 

• 

• 

Bei einem mehrspaltigen Entwurf werden am Handy die Inhalte der Spalten übereinander gestapelt.

Alle diese Anpassungen erledigen komplexe CSS-Klassen selbsttätig.

Achtung beim Erwerb von Themen und PlugIns: Von kostenlosen Produkten sollte es eine Kaufvariante geben, denn damit wäre man sicher, dass das Produkt laufend an die Entwicklungen von WordPress angepasst wird.

Statische Webseite responsive machen

Will man eine händisch erstellte Webseite ebenso händisch „responsive“ machen, ist viel (Lern-)arbeit angesagt, es sein denn, man verwendet eine der gebräuchlichen Bibliotheken. Dieses Geschäft ist eines von Designspezialisten, die mit HTML/CSS/JavaScript perfekt umgehen können. Sie verpacken ihr Wissen in fertig anwendbaren Bibliotheken, die man auf den gewünschten Seiten im Header-Teil bekannt gibt. Und fast war es das schon. Solche Bibliotheken sind zum Beispiel

• bootstrap lernen referenz homepage
• w3.css lernen referenz

Ich habe in einigen Projekten bootstrap angewendet. Was bootstrap leistet, erfährt man auf der Homepage. bootstrap teilt eine Seite ein, bestimmt die Fonts und die Eigenschaften von Tabellen, alle aktiven Elemente wie Buttons, Sliders, Cards, Formulare, List-Gruppen uvam. Die damit gestylten Elemente sind für den PC und das Handy gleichermaßen geeignet. Alle mit bootstrap formatieren Objekte sind ohne weitere Programmierung „responsive“.

Damit ein Block (div) oder eine Tabelle (table) durch bootstrap formatiert wird, muss man ein class-Attribut entsprechend setzen. Der folgende eingebettete Block ist mit bootstrap formatiert:

Code zu dieser Darstellung

<div class="jumbotron text-center">
  <h1>Meine erste Bootstrap-Seite</h1>
  <p>Um den Effekt zu sehen, musst Du diese Seite in verschiedenen Größen betrachten</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Spalte 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Spalte 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Spalte 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Das einzige bearbeitennde Element sind die Namen in den class-Attributen. Sie bestimmen das Layout. Alles andere bleibt roh formatiert und erbt die Eigenschaften, die bootstrap dafür eingestellt hat.

Es ist verhältnismäßig einfach, eine klassische Webseite flexibel zu gestalten. Meine Österreich-Chronik wurde mit bootstrap 4 formatiert. Die Chronik ist eigentlich eine Webanwendung, fühlt sich aber auf einem Handy wie eine App an.

Eine bestehende Seite wird in folgenden Schritten handy-fit:

• Backup der Seite erstellen
• Direkte Formatierungen aus dem Code entfernen
• Bootstrap-Kopfzeilen in den Header einfügen
• Alles in eine div mit dem Attribut class="container" einpacken.
• Alle Bedienungselemente mit den entsprechenden Klassennamen versehen, zum Beispiel einen Button mit class="btn btn-primary".
• Bootstrap-Dokumentation verwenden: lernen referenz homepage