Bei der Gestaltung Ihrer Website ist es wichtig, dass sie auf jedem Gerät gut aussieht, unabhängig von Bildschirmgröße und -form. Responsive Websites sind so konzipiert, dass sie auf allen möglichen modernen Geräten wie Computern, Telefonen, Tablets, Fernsehern, Wearables und sogar Autobildschirmen gut aussehen. Damit eine Website responsive wird, müssen Sie Ihren CSS- und HTML-Code so ändern, dass die Größe der Elemente automatisch an bestimmte Bedingungen angepasst wird. In diesem wikiHow zeigen wir dir, wie du grundlegendes responsives Webdesign planst und umsetzt.
Schritte
Methode 1 von 3: Responsive Design planen
Schritt 1. Finden Sie heraus, wie Ihr Publikum Ihre Website nutzt
Heutzutage surft die Mehrheit der Menschen im Internet von Mobiltelefonen und Tablets aus. Damit eine Website reaktionsschnell ist, müssen Sie sicherstellen, dass sie unabhängig davon, wo sie angezeigt wird, ordnungsgemäß angezeigt wird. Wenn Zeit und Geld von entscheidender Bedeutung sind, konzentrieren Sie sich auf die Gerätetypen, die bei Ihren Benutzern am beliebtesten sind (sofern diese Informationen verfügbar sind) und wie sie Ihre Website verwenden. Finden Sie mit Ihrer Analysesoftware oder einer anderen Form der Recherche Folgendes heraus:
- Welche Art von Geräten sie am häufigsten verwenden, um die Website anzuzeigen, wobei besonderes Augenmerk auf die Marken von Mobiltelefonen/Tablets/Computern und Bildschirm-/Auflösungsgrößen gelegt wird.
- Welche Browser sind bei Ihren Benutzern am beliebtesten? Was die globalen Statistiken angeht, ist Google Chrome der beliebteste Webbrowser weltweit, aber Safari liegt knapp dahinter.
- Wie Ihre Besucher Ihre Website nutzen, z. B. wie viel Zeit sie damit verbringen, sie anzusehen, wo sie sie sich ansehen und welche Inhalte am beliebtesten sind. Auf diese Weise können Sie feststellen, welche Art von Inhalten wichtig sind und welche weggelassen werden können.
Schritt 2. Entwerfen Sie verschiedene Layouts für verschiedene Geräte
Sie können eine Kombination aus CSS und JavaScript verwenden, um das Gerät eines Benutzers sowie seine Fähigkeiten (ob es Java, Flash usw. unterstützt) zu erkennen und eine bestimmte Version Ihrer Website entsprechend anzuzeigen. CSS Media Queries sind besonders nützlich, um die Größe/Auflösung des Geräts zu bestimmen.
Schritt 3. Berücksichtigen Sie verschiedene Arten von Interaktionen
Ihr Besucher könnte mit Ihrer Website mit einer Maus, einer Tastatur, einem Touchscreen oder sogar einem Bildschirmlesegerät für sehbehinderte Personen interagieren. In Anbetracht dessen sollte Ihre Website auf Mausklicks, Tastaturtasten (Tab, Eingabetaste, Eingabetaste usw.) und Fingerberührungen auf dem Bildschirm reagieren.
Hover-Over-Effekte funktionieren nur mit einer Maus. Anstatt diese Effekte zu verwenden, können Sie den Besucher auffordern, auf eine Schaltfläche oder ein Symbol zu klicken, um anzuzeigen, was zuvor bei einem Mauszeiger angezeigt wurde
Schritt 4. Ziehen Sie in Betracht, ein Content-Management-System (CMS) zu verwenden
Eine einfache Möglichkeit, sicherzustellen, dass Ihr Website-Design responsive ist, besteht darin, ein CMS mit einem vorgefertigten responsiven Thema zu verwenden. Mit einem CMS wie Joomla, Drupal oder Wordpress können Sie sicherstellen, dass Ihre Website auf allen Geräten gut aussieht, ohne die responsiven Elemente selbst programmieren zu müssen. Erkundigen Sie sich bei Ihrem Webhosting-Anbieter, welche CMS-Tools für Ihren Dienst verfügbar sind.
Schritt 5. Verwenden Sie Online-Tools, um Ihre Website zu testen
Da Responsive Webdesign immer beliebter wird, gibt es eine Vielzahl kostenloser Tools, mit denen Sie Ihre Website testen können. Wenn Sie Ihre Website bereits codiert haben, verwenden Sie diese Tools, um zu testen, wie sie unter verschiedenen Bedingungen aussieht, damit Sie wissen, wo Sie die Reaktionsfähigkeit verbessern müssen:
- Mobile-Friendly-Test von Google: Zeigt Ihnen, ob Ihre Website auf Mobilgeräten genauso gut funktioniert wie auf Computerbildschirmen.
- resizeMyBrowser: Lässt Sie Ihre Site in verschiedenen Auflösungen anzeigen.
- Responsiator: Zeigt Ihre Website auf verschiedenen Gerätebildschirmen in verschiedenen Layouts an (seitlich oder rechts oben).
Methode 2 von 3: Das Seitenlayout reaktionsschnell gestalten
Schritt 1. Ziehen Sie ein kostenloses responsives Stylesheet-Framework in Betracht
Ein Framework ist ein vorgefertigter Satz von HTML, CSS und/oder JavaScript, den Sie als Grundgerüst für Ihre Site verwenden können. Alle Frameworks wurden getestet und optimiert, um mit allen Browsern zu funktionieren. Sie müssen also nur Ihren Inhalt einfügen, Ihre Medien- und Farbeinstellungen hinzufügen und Ihre Site veröffentlichen. Einige beliebte Frameworks sind:
- Bootstrap
- Skelett
- Stiftung
Schritt 2. Legen Sie das Ansichtsfenster mit einem Meta-Tag fest
Wenn Sie kein Framework verwenden, sollten Sie mit dem wichtigsten Aspekt beim Codieren einer responsiven Website beginnen: dem Viewport. Der Viewport ist der Teil der Website, der für den Benutzer sichtbar ist. Der Schlüssel zur korrekten Anzeige Ihrer Site unabhängig von der Bildschirmgröße besteht darin, die Größe des Darstellungsbereichs im META-Tag zu skalieren. Fügen Sie dazu dieses Tag oben auf jeder Seite der Website ein:
Schritt 3. Geben Sie die Textgröße in Bezug auf das Ansichtsfenster an
Sobald Ihr Ansichtsfenster eingerichtet ist, wird der Text auf Ihrer Seite skaliert, damit er auf den Bildschirm passt. Schriftarten werden jedoch möglicherweise zu groß oder zu klein angezeigt, wenn ihre Größe nicht in Bezug auf das Ansichtsfenster angegeben ist. Sie können dies tun, indem Sie die Schriftgröße als einen bestimmten Prozentsatz des Ansichtsfensters mit der vw-Einheit definieren. In diesem Beispiel wird angegeben, dass die H1-Header unabhängig von ihrer Größe mit 10 % der Breite des Ansichtsfensters angezeigt werden:
wikiHow
Schritt 4. Verwenden Sie Medienabfragen, um verschiedene Stile für verschiedene Bildschirmgrößen anzuzeigen
Bei Media Queries können Sie je nach Bildschirmgröße auswählen, ob bestimmte CSS-Elemente angezeigt werden sollen. Sie können die Einzelheiten Ihrer Medienabfrage in Ihrer CSS-Datei angeben. In diesem Beispiel wird die Hintergrundfarbe des Körpers rot, wenn die Bildschirmgröße des Benutzers 480 Pixel oder mehr beträgt:
wikiHow
@media screen und (min-width: 480px) { body { background-color: aqua; } }
Methode 3 von 3: Bilder ansprechend gestalten
Schritt 1. Verwenden Sie die CSS-Eigenschaft width, um Bilder zu skalieren
Anstatt die Breite des Bildes auf eine bestimmte Anzahl von Pixeln (z. B. 500 Pixel) einzustellen, verwenden Sie einen Prozentsatz (z. B. 100 %), damit das Bild die Breite seines übergeordneten Bildes betrachtet und entsprechend angepasst wird. Wenn die Breite eines Bilds auf 100 % gesetzt wird, wird das Bild je nach Größe des Betrachterbildschirms nach oben oder unten skaliert. Um dies inline zu tun:
Schritt 2. Verwenden Sie die Eigenschaft max-width, um die Skalierung der tatsächlichen Größe des Bildes zu begrenzen
Wenn Sie die Eigenschaft width im vorherigen Schritt verwenden, um ein Bild auf 100 % zu skalieren, wird das Bild unabhängig von der Größe auf 100 % seines Containers vergrößert oder verkleinert. Das heißt, wenn das Bild auf der kleineren Seite ist, wird es größer als seine Originalgröße skaliert und sieht von geringerer Qualität aus. Um dies zu verhindern, verwenden Sie max-width, um die maximale Skalierungsgröße des Bildes auf 100 % (die tatsächliche Größe) zu setzen. Hier ist wie:
Schritt 3. Verwenden Sie das HTML-Bildelement, um verschiedene Bilder auf verschiedenen Bildschirmgrößen anzuzeigen
Wenn Sie Bilder in benutzerdefinierter Größe erstellen möchten, die auf Bildschirmen unterschiedlicher Größe angezeigt werden sollen, können Sie angeben, welche Fotos in Ihrem HTML-Code angezeigt werden sollen. Erstellen Sie die unterschiedlich großen Bilder und verwenden Sie dann diesen Code als Beispiel, um anzugeben, welches Bild auf Bildschirmen mit einer Breite von 600 Pixel und 1500 Pixel verwendet werden soll:
