Eine responsive Website zu haben, ist unglaublich wichtig. Dieses Tutorial ist besonders wichtig, wenn Sie noch ein statisches Theme verwenden, das Sie responsive machen möchten.
Dies kann oft einfacher sein, als ein bereits responsives Theme zu nehmen und es an Ihr Design anzupassen. Aber auch wenn Sie nur daran interessiert sind, zu lernen, wie man responsive Design praktisch umsetzt, ist dies der richtige Artikel für Sie.
Wie Sie Ihr WordPress-Theme in Responsive Design umwandeln
Zunächst müssen wir die Grundlagen des Responsive Design durchgehen:
- Fluid Site Grid mit proportionalen statt festen Maßen
- Flexible Bilder
- Implementierung von Designänderungen, um die Benutzerfreundlichkeit für Nicht-Desktop-Geräte zu gewährleisten
- Verwendung von CSS-Media-Queries zur Definition von Haltepunkten für Designänderungen
Von hier aus werden wir lernen, wie wir die oben genannten Punkte nutzen können, um ein statisches WordPress-Theme in ein responsives zu verwandeln.
Seien Sie sich jedoch bewusst, dass die Prinzipien zwar die gleichen bleiben, Ihr Theme aber möglicherweise anders aufgebaut ist als die Beispiele unten.
Betrachten Sie dies daher nur als grobe Orientierung. Möglicherweise müssen Sie einige Anpassungen für Ihre eigene Website vornehmen.
Benötigte Werkzeuge
Die Werkzeuge, die wir für die Umsetzung dieses Projekts benötigen, sind leicht verfügbar.
Zunächst einmal brauchen wir eine Möglichkeit, die HTML- und CSS-Struktur unserer Website zu überprüfen. Mein Lieblingstool dafür ist Firebug, aber Sie können auch die Chrome Developer Tools und die Firefox Developer Tools verwenden. In diesen können Sie Ihre Webseite in verschiedenen Größen anzeigen lassen. So lässt sich zum Beispiel die Breite von einem Ultrawide Monitor simulieren.
Darüber hinaus müssen wir einige PHP- und HTML-Dateien bearbeiten. Ein einfacher Texteditor wie Notepad++ wird dafür funktionieren, aber Sie können auch andere Optionen in diesem Artikel finden.
Vielleicht möchten Sie auch in Erwägung ziehen, Ihre Website in einer lokalen Entwicklungsumgebung einzurichten, damit Sie damit experimentieren können, sie responsive zu machen, ohne Ihre Live-Site durcheinander zu bringen.
1. Standard-Zoom definieren
Unser erster Schritt ist das Einfügen der folgenden Codezeile in den Header unserer Seite:
Damit wird den Browsern mitgeteilt, dass sie Ihre Seiten basierend auf der Gerätebreite rendern sollen, d.h. wenn der verwendete Bildschirm nur 320px breit ist, wird die Website in dieser Größe gerendert, anstatt auf eine größere Standardgröße zurückzufallen.
In WordPress wird dies typischerweise durch das Bearbeiten der Datei header.php in Ihrem Theme-Ordner erreicht, wenn Sie Dinge zum Header der Website hinzufügen. Der Code wird zwischen den Tagsundeingefügt.
2. Fluid-Element-Breiten und -Höhen einstellen
Als Nächstes müssen Sie die Container für die Hauptabschnitte Ihrer Website finden.
Hierfür bietet sich das bereits erwähnte Firebug an, da es die HTML-Struktur Ihrer Website im Browser anzeigen kann.
Ein typisches WordPress-Theme hat die folgenden Elemente:
-
- Body
- Wrapper
- Kopfzeile
- Menü
- Hauptinhalt
- Seitenleiste
- Fußzeile
Unsere Aufgabe ist es nun, dafür zu sorgen, dass diese nicht statisch, sondern fließend breit definiert sind. Wir tun dies, indem wir das CSS innerhalb des Stylesheets ändern.
Beginnen wir als Beispiel mit dem Wrapper und sagen wir, dass dies das ist, was Sie in Ihrem Stylesheet finden:
#wrapper {
width: 900px
}
Wie Sie sehen können, handelt es sich um eine feste Breite (900 Pixel), die wir nun in etwas Fließendes umwandeln wollen:
#wrapper {
max-width: 900px;
width: 100%
}
Was bewirkt diese Änderung? Im Grunde wird dem Element mitgeteilt, dass es den gesamten benötigten Platz einnehmen soll, aber seine Breite auf maximal 900 Pixel begrenzt ist.
Auf diese Weise sieht die Seite auf jedem Bildschirm, der größer als 900px ist, genauso aus wie vorher, nimmt aber auf jedem Gerät, das kleiner als 900px ist, die gesamte Breite ein.
Aber das ist im Grunde alles, was es braucht, um ein WordPress-Theme responsive zu machen.
Jetzt müssen Sie nur noch durch Ihre gesamte Seitenstruktur gehen und alle festen Breiten in flüssige Breiten umwandeln, indem Sie Pixel in Prozentwerte ändern. Auf diese Weise passen sich die Seitenelemente automatisch an die Größe des Bildschirms an, auf dem sie dargestellt werden.
Der Teufel steckt jedoch im Detail, deshalb hier einige wichtige Hinweise:
Jedes Element, das in einem anderen verschachtelt ist und sich über den gesamten Bildschirm erstrecken kann (oder so viel Platz, wie es zur Verfügung hat), kann einfach auf 100 % Breite gesetzt werden (oder sogar automatisch oder ohne Breite). Wenn das übergeordnete Element (z. B. ein Wrapper) eine festgelegte maximale Breite hat, hält sich das untergeordnete Element automatisch an dessen Abmessungen.
Bei anderen Elementen, die in ihrer Ausdehnung begrenzt werden müssen (z. B. Hauptinhalt und Seitenleiste nebeneinander), müssen Sie ein wenig experimentieren, um den richtigen Prozentsatz zu finden, damit das Layout gleich bleibt.
Beachten Sie, dass Prozentangaben in CSS relativ sind. Das heißt, wenn Sie die Breite eines verschachtelten Elements (ein Element innerhalb eines anderen Elements) auf 70 Prozent setzen, nimmt es 70 Prozent des übergeordneten Elements ein, nicht des gesamten Bildschirms. Capisce?
Firebug ist hier Ihr Freund, da es Ihnen erlaubt, Live-Bearbeitungen vorzunehmen und CSS-Änderungen auszuprobieren, während Sie die Auswirkungen auf dem Bildschirm sehen.
Dennoch kann ich aus Erfahrung sagen, dass es eine Weile dauern kann, bis Sie alle festen Maße gefunden haben.
Daher sollte man zusätzlich zu Firebug auch eine Textsuche in seinem Stylesheet durchführen, um alle Deklarationen von Breiten und, wenn man schon dabei ist, Höhen zu finden.
Letzteres liegt daran, dass sich jeder Text innerhalb von HTML-Elementen vertikal ausdehnt, wenn die Bildschirmgröße komprimiert wird.
Um sicherzustellen, dass er nicht aus dem enthaltenen Element herausbricht oder abgeschnitten wird, müssen Sie sicherstellen, dass Sie auch keine festen Höhen haben. Entweder deklarieren Sie überhaupt keine Höhe oder, falls nötig, stellen Sie diese auch auf Prozentwerte um.
Noch ein kurzer Hinweis zu Margins und Paddings, also den Abständen um und innerhalb von HTML-Elementen. Sie sorgen dafür, dass genügend Abstand zwischen den Seitenelementen und um den Inhalt herum vorhanden ist, damit alles verständlich und lesbar ist.
Während es sinnvoll sein kann, diese in relativen Zahlen anzugeben, deklarieren viele Themes da draußen (zum Beispiel das Genesis-Framework) sie in Pixeln.
Da diese Leute wissen, was sie tun, werde ich mich an ihre Methode halten. Die Wahl bleibt jedoch Ihnen überlassen.
Am Ende sollten Sie eine Webseite haben, die sich beim Verkleinern und Vergrößern an die Größe des Browserfensters anpasst.
An diesem Punkt werden viele Seitenelemente wahrscheinlich zusammengestaucht aussehen, was bei weitem nicht das ist, was Sie wollen, aber keine Sorge, dazu kommen wir weiter unten.
3. Bilder skalieren
Danach ist es an der Zeit, dafür zu sorgen, dass unsere Bilder automatisch entsprechend der Bildschirmgröße skaliert werden.
Das geht ganz einfach, indem Sie folgendes in die style.css einfügen:
img {
height: auto;
max-width: 100%;
}
Damit deklarieren Sie, dass Bilder in ihrer Originalgröße angezeigt werden sollen, bis ihr Containerelement (oder der Bildschirm) eine Grenze setzt.
Natürlich müssen Sie sich auch im Stylesheet umsehen, ob andere Deklarationen dies überschreiben. Eine Suche nach img hilft dabei.
Für den Fall, dass Sie Bilder in neuen Größen nachbauen müssen, um sie an Ihr neues responsives Design anzupassen, gibt es im WordPress-Verzeichnis genau das richtige Plugin dafür.
4. Implementieren Sie (die richtigen) Haltepunkte
Nachdem wir die grundlegende Responsivität (oder ist das Verantwortung?) eingeführt haben, gehen wir nun zu den Break Points für Ihre Designänderungen über.
Das sind Abbruchpunkte, an denen die Website einige größere Designanpassungen vornimmt, um weiterhin das beste Layout für Ihre Benutzer zu liefern.
Zwei Dinge dazu:
-
-
- Haltepunkte sollten immer designspezifisch sein, nicht gerätespezifisch. Es gibt einfach zu viele Geräte, um sie alle zu bedienen. Indem Sie sich darauf konzentrieren, was für Ihr Design am sinnvollsten ist, decken Sie automatisch alle Geräte ab, die in Zukunft auf den Markt kommen.
- Beginnen Sie mit dem kleinsten Bildschirm und arbeiten Sie sich dann nach oben vor. Der einfachste Weg, Sollbruchstellen zu identifizieren, ist, zuerst sicherzustellen, dass Ihr Design auf Mobiltelefonen gut aussieht, und dann den Bildschirm von dort aus zu erweitern. Wenn Sie einen Punkt bemerken, an dem Ihr Design anfängt, schrecklich auszusehen, ist das Ihr Haltepunkt.
Wenn Sie Ihr Browser-Fenster zum ersten Mal auf die Größe eines Handy-Bildschirms schrumpfen, wird es wahrscheinlich keine schöne Seite sein.
Eines der klassischen Probleme an diesem Punkt ist, dass Elemente, die nebeneinander platziert sind, zwar immer noch in ihrer jeweiligen Breite angezeigt werden, jedoch auf einem viel kleineren Raum, wodurch alles unmöglich zu lesen ist.
Daher ist das erste Gebot der Stunde, diese Elemente untereinander zu verschieben.
Ein klassisches Beispiel dafür ist, die Sidebar unter den Inhalt zu schieben, indem man die CSS-Eigenschaften mit einer Media Query ändert.
Dies könnte folgendermaßen aussehen:
@media only screen and (max-width: 500px) {
.content {
float: none;
display: block;
width: 100%;
}
.sidebar {
float: none;
display: block;
width: 100%;
}
}
Fügen Sie die Abfrage am Ende Ihres Stylesheets ein. Der obige Code sorgt auch dafür, dass sich Ihr Inhalt über den gesamten Bildschirm ausdehnt und lesbar ist.
Danach ist es an der Zeit, sich den Rest der Seite anzusehen und alle notwendigen CSS-Änderungen vorzunehmen, damit die Seite in ihrem aktuellen Format anständig aussieht.
Übernehmen Sie alle Änderungen in Ihre neu erstellte Medienabfrage und speichern Sie das Stylesheet. Gut gemacht!
Jetzt können Sie das Browserfenster langsam nach außen erweitern, um festzustellen, wann das Layout anfängt, unattraktiv auszusehen und Sie Anpassungen vornehmen müssen.
An diesem Punkt erstellen Sie eine neue Media Query und passen das Design entsprechend an.
Um herauszufinden, wie groß Ihr Browserfenster tatsächlich ist, kann ich die Chrome Developer Tools oder dieses Firefox-Plugin empfehlen. Kopieren Sie den obigen Code, passen Sie die max-width-Deklaration der Media-Query an und geben Sie anschließend alle CSS-Änderungen ein, die Sie umsetzen müssen.
Achten Sie darauf, dass Sie die neuen Media Queries am Ende des Stylesheets einfügen, aber oberhalb der bestehenden.
Da CSS-Stile weiter unten die Stile darüber überschreiben, ist es wichtig, dass die Media Queries von größeren zu kleineren Bildschirmgrößen übergehen.
Im Idealfall sollten Sie am Ende ca. 3-5 größere Umbruchpunkte haben und eine Seite, die bei jeder Fenstergröße ein lesbares und attraktives Layout zeigt, bei dem alle Seitenelemente durchgehend intakt bleiben.
Es wird ein bisschen Versuch und Irrtum erfordern, aber Sie werden es schaffen, da bin ich mir sicher.
5. Anpassen von Schriftarten
Als Nächstes wenden wir uns dem Inhalt zu, insbesondere dem Text auf Ihrer Website, da die Wahrscheinlichkeit groß ist, dass Sie irgendwann an dessen Größe herumschrauben müssen.
Besonders Kopfzeilentext passt oft nicht richtig auf kleinere Bildschirme. Achten Sie darauf, wenn Sie sich Ihre Website auf verschiedenen Geräten und in verschiedenen Browserfenstern ansehen.
Zum Glück lässt sich die Schriftgröße auch einfach per CSS innerhalb von Media-Queries steuern, etwa so:
@media only screen and (max-width: 450px) {
.site-title, h1 {
font-size: 22px;
}
}
Darüber hinaus sollten Sie die Gesamtschriftgröße abhängig von der Größe des Bildschirms, auf dem die Seite angezeigt wird, ändern.
6. Andere Änderungen
Wie bereits im ersten Artikel erwähnt, geht es beim Responsive Design nicht nur darum, dass die Dinge auf einen Bildschirm passen, sondern auch darum, dass die Website benutzbar bleibt.
Daher ist es eine gute Idee, als letzten Schritt Ihre Seite auf die Nutzbarkeit auf verschiedenen Geräten zu überprüfen.
Zum Beispiel kann es manchmal sinnvoll sein, Elemente auf kleineren Bildschirmen auszublenden, wenn sie ohne Maus schwer zu bedienen sind oder einen Teil der Seite verdecken.
Das ist einer der Gründe für die Existenz von ausklappbaren Menüs. Auf Handy-Bildschirmen ist einfach nicht so viel Platz vorhanden. Ich habe auch Schieberegler aus der Version der mobilen Website entfernt, weil sie fast unmöglich zu benutzen waren.
Gehen Sie also mit diesen Gedanken im Hinterkopf über Ihre Website. Wenn Sie ein Besucher wären, was würde Ihnen das Leben leichter machen? Mit Media-Queries können Sie im Grunde alles ändern, was Sie wollen.
Und wenn Sie schon dabei sind, sollten Sie Ihre neue responsive Website durch einige Cross-Browser-Test-Tools laufen lassen, um sicherzustellen, dass alles in verschiedenen Szenarien gut aussieht.
7. Fertigstellen und Feiern
Wenn Sie so weit gekommen sind, herzlichen Glückwunsch! Ihre Website sollte nun vollständig responsive sein und sich an jede Bildschirmgröße anpassen.
Jetzt ist es nicht mehr so schwer, oder? Ich wusste, dass Sie es schaffen können, und ich bin sicher, dass Ihre Besucher und Google sich über das neue Design freuen werden!
Zusammenfassung
Responsive Design ist heutzutage fast schon ein Muss für Websites, und zum Glück bietet WordPress jede Menge Themes, die standardmäßig mobilkompatibel sind.
Sollte Ihr Theme nicht dazugehören, keine Sorge. Mit unserer Fibel zum Responsive Design und den obigen Tipps sollten Sie nun in der Lage sein, diese Situation zu beheben.
Dieser Artikel kann Ihnen zwar nur die Prinzipien beibringen und nicht jeden Fall durchgehen, der auftauchen könnte, aber er reicht aus, um Ihnen den Einstieg zu erleichtern und Ihnen zu ermöglichen, die Details selbst herauszufinden.
