Eine einfache Anleitung zum Erstellen einer responsiven Website

Haben Sie sich schon immer gefragt, wie viele moderne Websites so perfekt passen, unabhängig davon, welches Gerät Sie verwenden, um sie anzuzeigen? Das Codieren einer responsiven Webseite ist eine gängige Praxis, die heute auf vielen neuen Websites weit verbreitet ist. Responsive Webseiten führen einen cleveren Trick aus, indem sie ihre Größe an den Bildschirm des Geräts anpassen, das zum Anzeigen der Website verwendet wird. Das bedeutet, dass sie auf einem iPhone oder einem Desktop-Computer und allem dazwischen großartig aussehen.

Diese "Reaktionsfähigkeit" geschieht so nahtlos, dass Sie es vielleicht nicht einmal wirklich bemerkt haben. Ein großartiges responsives Webdesign sollte nahtlos von Gerät zu Gerät fließen und gleichzeitig sicherstellen, dass das optimale Surferlebnis erhalten bleibt. Responsive Websites haben sich von einem „nice-to-have“-Feature zu etwas entwickelt, das heute für jede Website so ziemlich obligatorisch ist. Wieso den? Ganz einfach, weil die Anzahl der Menschen, die jetzt mobile Geräte zum Surfen im Internet verwenden, in den letzten Jahren stark gestiegen ist und dieser Trend zu mobilen Geräten (und damit zu kleineren Bildschirmen) keine Anzeichen einer Verlangsamung zeigt.

Werfen Sie einen Blick auf die unten stehenden Daten (mit freundlicher Genehmigung von statcounter.com). Sie werden sehen, dass die bei weitem am weitesten verbreiteten Bildschirmgrößen klein sind (dh mobile Bildschirme).

Stellen Sie sich vor, all diese Millionen von Benutzern müssten auf diesen Geräten nicht reagierende Websites anzeigen. Sie wären sehr frustriert, da sie viele „Pinch and Zoom“-Aktionen ausführen müssten, um den Inhalt auf diesen jeweiligen Websites angemessen sehen zu können. Die Chancen stehen gut, dass diese Benutzer diese Websites zugunsten eines reaktionsschnellen Äquivalents aufgeben würden.

Wenn der Verlust potenzieller Kunden nicht ausreicht, um Sie vom Wert einer reaktionsschnellen Website zu überzeugen, dann könnte es vielleicht der Gedanke sein, Suchrankings zu verlieren. Google bestraft seit einiger Zeit Websites, die kein responsives oder adaptives Design für mobile Nutzer bieten. Das heißt, wenn Ihre Website auf einem Handy nicht gut funktioniert, müssen Sie mit einer Ranking-Strafe rechnen. Was bedeutet „gut funktionieren“ auf einem Handy? Nun, Inhalte müssen benutzerfreundlich dargestellt werden. Das bedeutet, dass es ohne Zwicken und Zoomen lesbar sein muss. Es muss auch schnell geladen werden (interessiert daran, wie WordPress Caching bei Ihren Geschwindigkeitszielen helfen kann, dann werfen Sie einen Blick auf diesen Artikel „WordPress Caching – Wie es funktioniert und warum Sie es verwenden sollten !')

Responsive Webseiten vs. adaptive Webseiten

Wenn wir ein oder zwei Jahrzehnte zurückgehen, waren Mobiltelefone nicht annähernd so verbreitet wie heute. Gewissheit, diejenigen, die gute Arbeit geleistet haben, um Ihnen das Surfen im Internet zu ermöglichen, kamen erst ab etwa 2005 wirklich auf den Markt (so unglaublich es scheint, dass das iPhone bis 2007 nicht einmal auf den Markt kam). Mobilfunknetze konnten auch nicht viele Daten übertragen, was bedeutete, dass es nur begrenzte Möglichkeiten zum mobilen Surfen im Internet gab. Das hat sich in den letzten zehn Jahren schnell geändert, und Websites mussten sich bemühen, aufzuholen, um ihre Kunden in der neuen mobilgesteuerten Welt, in der wir uns jetzt befinden, besser zu bedienen.

Es gab verschiedene Möglichkeiten, wie Webdesigner daran arbeiteten, das Problem zu lösen, eine „Desktop“-Website auf einen mobilen Bildschirm anzupassen. In den sehr frühen Tagen wurden eigenständige „nur für Mobilgeräte“-Websites entwickelt, die neben der „Desktop“-Hauptversion einer Website betrieben wurden. Diese waren normalerweise ziemlich grob im Design und boten häufig ein abgespecktes Surferlebnis, bei dem viele Funktionen ihres größeren Desktop-Geschwisters weggelassen wurden.

Danach kam Adaptive Design auf den Plan. Damit ging die reine mobile Version der Bereitstellung einer speziell gestalteten mobilen Website einen Schritt weiter. Es werden mehrere statische Layouts erstellt, die dem Benutzer ein überzeugenderes mobiles Surferlebnis bieten. Die Bildschirmgröße des Geräts, das die Website verwendet, wird geladen und die am besten geeignete Größe bereitgestellt. Typischerweise werden sechs Größen gebaut, um Bildschirmen gerecht zu werden, die von einem großen Desktop bis hin zu einem Mobiltelefon reichen. Adaptives Design ist jedoch etwas einschränkend und definitiv nicht zukunftssicher, da es nicht für Bildschirmgrößen geeignet ist, die nicht genau in die erstellten Kategorien von Set 6 fallen. Aus Designsicht ist es auch ressourcenintensiv, da 6 Versionen einer Website erstellt werden müssen.

Die Hauptnachteile bei adaptiven Designs wurden mit Responsive Design behoben. Anstatt ein vorgefertigtes Layout basierend auf einer Bildschirmgröße bereitzustellen, passen responsive Designs die Darstellung je nach Gerät an. Dies bedeutet, dass Sie eine gut aussehende und benutzerfreundliche Website erhalten sollten, unabhängig davon, welches Gerät (und die entsprechende Bildschirmgröße) zum Anzeigen der Website verwendet wird.

Responsive Design gilt heute als Industriestandard für mobile Websites. Tatsächlich empfiehlt Google selbst Responsive Web Design. In diesem Tutorial werfen wir einen Anfängerblick auf responsives Design und wie es auf Ihr Website-Layout angewendet werden kann.

Wie funktionieren responsive Websites?

Responsive Websites verwenden sogenannte CSS Media Queries, um das Layout einer Website basierend auf der Bildschirmbreite zu ändern. CSS Media Queries sind ein leistungsstarkes Tool, das eigentlich ziemlich einfach zu implementieren ist, wenn Sie ein grundlegendes Verständnis von CSS haben. Bevor Sie in den Prozess der Erstellung einer ansprechenden Website eintauchen, sollten Sie sich zunächst einige Live-Beispiele ansehen. Der beste Weg, dies zu tun, ist auf einem Desktop- oder Laptop-Bildschirm. Öffnen Sie einen Browser wie Chrome und gehen Sie zu einer beliebten Website. Vielleicht möchten Sie unser eigenes unter pressidium.com ausprobieren.

Reduzieren Sie die Größe des Browserfensters und beginnen Sie dann, indem Sie den Mauszeiger über den rechten Rand des Browserfensters bewegen, das Fenster zu verschieben, damit es schmaler wird. Sie werden sehen, dass sich das Layout der Website ändert, wenn sie kleiner wird. Wenn die Website eine vordefinierte Größe erreicht (z. B. 1.000 Pixel breit), wird eine CSS-Medienabfrage ausgelöst, die den Browser anweist, das CSS-Styling zu verwenden, das sich auf diese Bildschirmbreite bezieht. Die Website fließt dann elegant oder reagiert auf diese neue Bildschirmgröße und wird entsprechend angezeigt. Ziemlich clever!

Jetzt haben wir also ein grundlegendes Verständnis dafür, was vor sich geht. Lassen Sie uns ins Wesentliche eintauchen und sehen, wie wir selbst eine reaktionsschnelle Webseite erstellen können.

Aufbau einer responsiven Webseite

Wir werden in diesem Tutorial keinen Backend-Code verwenden, sodass Sie nicht auf einen Server zugreifen müssen, um dies auszuprobieren. Erstellen Sie einfach einen Ordner auf Ihrem Desktop und fügen Sie Ihre Arbeitsdateien hinzu.

Schritt 1: HTML

Erstellen Sie eine index.html-Datei in Ihrem neuen Ordner. Öffnen Sie diese Datei mit Ihrem bevorzugten Text-/Code-Editor und fügen Sie dann den folgenden Code ein:

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

Schritt 2: Externes CSS

Sie müssen eine externe style.css-Datei hinzufügen. Erstellen Sie dazu eine Datei namens style.css und platzieren Sie diese im selben Ordner wie Ihre index.html-Datei. Fügen Sie dann den folgenden Code hinzu:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

Wenn Sie an dieser Stelle Ihre index.html-Datei mit Ihrem Internetbrowser öffnen (in diesem Beispiel haben wir Chrome verwendet), sollten Sie auf Ihrer Seite ungefähr Folgendes sehen:

Werfen wir nun einen Blick auf die Entwicklertools unseres Browsers (auch hier verwenden wir Chrome für dieses Beispiel). Öffnen Sie Chrome und drücken Sie F12 und stellen Sie es so ein, dass es auf der rechten Seite angezeigt wird.

Ändern Sie die Fenstergröße, indem Sie den Trenncursor bewegen, und beobachten Sie, wie sich die Bildschirmauflösung in Echtzeit ändert.

Schritt 3: Relative CSS-Einheiten

In unserem Beispiel werden Sie sehen, dass, wenn Sie es auf eine Breite von 1396 Pixel ziehen, Sie feststellen werden, dass die rechte Seitenleiste mit dem Menü unter den Hauptinhalt verschoben wird, da es nicht mehr passt.

Das ist passiert, weil wir eine feste Breite von 900px auf der div#main und 300px auf der div#sidebar eingestellt haben. Lassen Sie uns das Format dieser Werte ändern und stattdessen Prozentsätze verwenden. (Bitte beachten Sie, dass Paddings und Ränder auch auf die Breite gezählt werden, also müssen diese Werte auch in Prozent umgerechnet werden.)

Wenn Sie diese Änderungen vorgenommen haben, sollte die style.css wie folgt aussehen:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

Das wird jetzt spannend, da wir eine Seite haben, die jetzt reaktionsschneller wird!

Obwohl sich die Dinge entwickeln, benötigt der Posts-Bereich noch etwas mehr CSS-Bearbeitung. Je schmaler die Breite, desto „hässlicher“ werden die Briefkästen. Um dies zu umgehen, müssen wir das Post-CSS bearbeiten, um ein hübscheres und reaktionsschnelleres Layout zu erzielen.

Sie werden feststellen, dass die visuellen Probleme nur auftreten, wenn der Bildschirm schmaler wird. Um dieses Problem zu lösen, müssen wir einige CSS-Medienabfragen verwenden, damit ab einem bestimmten Punkt alternatives CSS zum Einsatz kommt, das ein besser aussehendes Layout erzeugt.

Was wir versuchen werden, ist, unseren 3-Spalten-Beitragsbereich für einen breiten Bildschirm in einen 2-Spalten-Bereich umzuwandeln, der besser in einen schmaleren Bildschirm passt. Um dies zu erreichen, verwenden wir CSS-Medienabfragen.

Schritt 4: CSS-Medienabfragen

Für unseren „Breitbild“-Modus werden wir eine CSS-Medienabfrage wie folgt einführen: like this @media screen and (min-width: 1396px) . Diese Abfrage befindet sich ganz oben in unserem CSS-Stylesheet und umfasst den gesamten CSS-Satz, den wir ausführen möchten, wenn unser Bildschirm mindestens 1396 Pixel breit ist.

Wir können jetzt den gesamten Code kopieren und in unserem CSS-Stylesheet duplizieren (kopieren und unter dem aktuellen CSS einfügen, sodass Sie zwei identische Versionen in einer Datei haben). Bearbeiten Sie nun die CSS-Medienabfrage oben im zweiten CSS-Stapel, um @media screen and (max-width: 1395px) zu lesen. Dies sagt unserem Browser jetzt, dass er dieses CSS ausführen soll, wenn er kleiner als 1395 Pixel ist. Nachdem dies erledigt ist, können wir das CSS in diesem „kleineren“ Abschnitt so anpassen, dass es das Layout unserer Webseite ändert, damit es besser auf einen kleineren Bildschirm passt. In diesem Beispiel werden wir den div.post Prozentsatz von 31,1 % auf 45 % anpassen.

Sie sollten jetzt eine CSS-Datei haben, die so aussieht:

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

Nun, da die Posts-Boxen einen anderen Stil für Bildschirme mit einer Breite von weniger als 1395 Pixel haben, sehen wir uns an, wie sich dies in Aktion widerspiegelt:

Nett!

Sie werden feststellen, dass die Dinge beim Herunterskalieren und nach dem Überschreiten der Breite von 760 Pixel immer noch seltsam werden.

Um dies zu sortieren, können wir den gleichen Trick verwenden, den wir verwendet haben, um von 3 Spalten auf 2 zu wechseln. Dieses Mal verwenden wir jedoch einen „Bruchpunkt“ von 760 Pixel und ändern unser CSS div.post auf 94 %. Wenn wir dies tun, haben wir drei CSS-Medienabfragen, die wie folgt aussehen sollten:

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

Unser @media screen and (max-width: 760px) CSS enthalten unseren bearbeiteten div.post , der so aussehen wird:

 div.post { width: 94%; float: left; padding: 2%; }

Wenn alles in Ordnung ist, sollten Sie jetzt etwa Folgendes sehen, wenn Sie die Breite Ihres Browsers auf unter 760 Pixel Breite reduzieren:

Und das ist es! Wir haben jetzt eine responsive Webseite erstellt, die auf größeren Bildschirmen, Tablets und Handys funktioniert!

Mit dieser Vorlage können Sie mehr spielen und mit anderen CSS-Stilen experimentieren. Es gibt viel zu lernen, wenn man mit diesem Beispiel herumspielt und verschiedene CSS-Regeln anwendet, die später verwendet werden können, um schöne UND ansprechende Websites zu erstellen.

Hosten Sie Ihre Website mit Pressidium

60- TÄGIGE GELD-ZURÜCK-GARANTIE

SEHEN SIE UNSERE PLÄNE

Fazit

Wenn Sie ein CMS wie WordPress verwenden, fragen Sie sich vielleicht, warum es notwendig ist, sich mit den zugrunde liegenden CSS- und Medienabfragen zu befassen, die für eine reaktionsschnelle Webseite erforderlich sind. Schließlich sollte jedes anständig codierte WordPress-Theme bereits über ein integriertes responsives Design verfügen. Das stimmt zwar, aber zu verstehen, warum sich eine Website auf der Grundlage bestimmter Browserbreiten so verhält, wie sie es tut, kann enorm hilfreich sein. Es kann vorkommen, dass das ursprünglich vom Theme-Autor hinzugefügte responsive Design aus irgendeinem Grund nicht so funktioniert, wie Sie es benötigen. Wenn Sie wissen, wie Sie Medienabfragen anwenden, um zu ändern, welches CSS an bestimmten Unterbrechungspunkten angezeigt wird, können Sie fortfahren und Änderungen vornehmen, die zu dem gewünschten Aussehen und der gewünschten Funktion führen.

Und wenn Sie jemals vorhaben, Ihr eigenes WordPress-Thema zu erstellen, dann ist ein solides Verständnis von Medienabfragen ein absolutes Muss! Hoffentlich hat Ihnen dieser Artikel einen Einblick gegeben, was hinter den Kulissen der heutigen responsiven Websites vor sich geht. Viel Spaß beim Responsive Coding!