• Haupt / Wie Man

Erstellen Sie eine grundlegende reaktionsfähige Site mit CSS

• Erforderliche Kenntnisse: Grundlegendes CSS und HTML
• Benötigt: Texteditor
• Projektzeit: 1-2 Stunden

Alle reden über responsives Webdesign. Aber versteht jeder, wofür es ist? Ich bin mir nicht sicher. Viele Webdesigner und -entwickler scheinen mir das Problem, das sie zu lösen versuchen, falsch verstanden zu haben.

Einfach ausgedrückt geht es nicht darum, Websites für mobile Geräte zu erstellen, sondern darum, Layouts an die Größe von Ansichtsfenstern anzupassen.

In diesem Tutorial werde ich die Prinzipien hinter Responsive Web Design im Detail untersuchen, damit wir die Konzepte sicher richtig verstehen. Sobald wir das aus dem Weg geräumt haben, werde ich Sie durch die Erstellung einer Website führen, die sowohl auf großen als auch auf kleinen Bildschirmen perfekt skaliert.

• Quelldatei herunterladen 1
• Demo

Responsive Webdesign ist vor allem deshalb ein heißes Thema geworden, weil immer mehr Menschen mobile Geräte wie iPhones, iPads und BlackBerry-Geräte verwenden, um auf das Internet zuzugreifen.

Daher wird es immer wichtiger zu verstehen, dass sich eine Website nicht speziell auf den Desktop oder das mobile Gerät konzentrieren sollte, sondern darauf, dass das Layout an unterschiedliche Ansichtsfenstergrößen angepasst werden kann.

Wenn Sie an die neuen Erfindungen denken, die wir in Zukunft unweigerlich sehen werden, wird ein adaptives Layout, das automatisch auf die Vorlieben der Benutzer reagieren kann, zu einem unverzichtbaren und äußerst wertvollen Gut.

Einer der Hauptgründe, warum Medienabfragen immer beliebter werden, ist die Tatsache, dass Websites auf Geräten unbrauchbar sind, für die sie in der Entwurfs- und Erstellungsphase nicht berücksichtigt wurden. Das Navigieren in ihnen ist schwierig - oder die feste Breite ist breiter als das Ansichtsfenster des Benutzers, was es schwierig macht, hineinzuzoomen, zu schwenken, herauszuzoomen und zu finden, wonach sie suchen.

Frustrierend? Sicher. Als Entwickler ist es jedoch frustrierender, dass diese Websites so erstellt wurden, dass sie auf jede Größe des Ansichtsfensters verkleinert werden können.

Viele Websites, die Medienabfragen verwenden, entfernen Informationen und verbergen bestimmte Aspekte der Website, die sie für weniger wichtig halten. So erhält der Benutzer mit einem kleineren Gerät eine benutzerfreundlichere Website, jedoch mit reduzierten Inhalten.

Aber warum sollte ich auf einem mobilen Gerät nicht die gleichen Vorteile aus einer Website ziehen wie ein Desktop-Benutzer?

Mit Hilfe von Medienabfragen können wir das Layout unserer Website abhängig von der Bildschirmgröße vollständig anpassen. Was großartig ist, aber müssen wir wirklich mehrere Anpassungen unserer Website bereitstellen?

Und warum sollten wir uns mit einer Website zufrieden geben, die so schlecht gestaltet oder gebaut ist, dass sie nicht ordnungsgemäß skaliert werden kann?

Benutzerfrust

Einige Leute glauben, dass es in Ordnung ist, Funktionen zu kürzen und Inhalte zu entfernen, von denen sie glauben, dass sie für den Benutzer nicht wesentlich sind. Aber wie können Sie sicher sein, dass die Informationen, die Sie schneiden oder auf eine sekundäre Seite verschieben, nicht der Inhalt sind, der für mich am wichtigsten ist? Das kannst du nicht.

Als Beispiel war ich auf der Nike Fußball Website auf meinem MacBook und Lesen über die Fußballakademie, die sie mit der Premier League betreiben, was ich sehr interessant fand - dies ist eine der Hauptfunktionen, wenn Sie auf die Website gelangen.

Die vollständige Website von Nike Football bietet eine Hauptnavigation mit allen verfügbaren Optionen - einschließlich der Funktion in der Fußballakademie des Unternehmens, die im obigen Bild zu sehen ist ...

Als ich jedoch versuchte, einen Freund auf meinem iPhone zu zeigen, stellte ich fest, dass Nike eine eigene mobile Website hat und Nike Football nur aus zwei Optionen besteht: eine über die neuesten Mercurial Vapor-Stiefel (nicht interessiert) und eine über die neuen Technologie für Nike-Trikots (nicht interessiert).

Ich habe mein iPad ausprobiert und es war wieder ganz anders - und immer noch keine Spur der Akademieinformationen, nach denen ich gesucht habe.

Es ist nicht nur Nike, das daran schuld ist - es sind Hunderte von Websites. Und ich finde es sehr frustrierend, dass ich für die Verwendung eines anderen Geräts bestraft werde. Ich bin der Meinung, wenn Inhalte es nicht wert sind, kleineren Gerätebenutzern gezeigt zu werden, lohnt es sich wahrscheinlich nicht, sie irgendjemandem zu zeigen.

Das erste, was wir verstehen müssen, ist, dass es beim reaktionsschnellen Webdesign nicht nur um Mobilgeräte geht, sondern um alle Größen von Ansichtsfenstern. Und zweitens erfordert die Entwicklung einer reaktionsschnellen Website mehr Zeit und Mühe als nur die Verwendung von Medienabfragen. Bei einer großen und wachsenden Anzahl von webfähigen Geräten ist es wichtig, Ihrer Website die bestmögliche Chance zu geben, eine solide Benutzererfahrung zu ermöglichen.

Wir wissen, dass wir durch eine reaktionsfähige Site eine einzige Codebasis verwenden können. Dies ist insofern großartig, als wir unseren Inhalt nicht für jedes Gerät anpassen müssen. Viele Websites verbergen jedoch Inhalte, die für mobile Benutzer als unnötig erachtet werden, und dabei gibt es zwei Probleme.

Erstens werden mobile Benutzer, die auf der Website surfen, effektiv bestraft. Und zweitens bedeutet das Einfügen eines versteckten Stils in unser CSS nicht, dass der Inhalt nicht heruntergeladen wird. Dies kann die Leistung massiv beeinträchtigen, insbesondere bei schlechten Verbindungen.

Der vielleicht beste Weg, um eine Website zu entwerfen, besteht darin, zuerst mobile oder kleinere Geräte in Betracht zu ziehen. Auf diese Weise können Sie sich auf die wichtigsten Informationen konzentrieren, die Ihre Website liefern muss. Bei Bedarf können Sie dann bedingte Ladetechniken verwenden, bei denen Ihr Layoutraster, große Bilder und Medienabfragen auf das bereits vorhandene Design für kleine Bildschirme angewendet werden.

Der wahre Grund, warum viele vollständige Websites auf Mobilgeräten unbrauchbar sind, liegt darin, dass sie auf jedem Gerät unbrauchbar sind. Wenn es von Anfang an gut genug entworfen und richtig gebaut wurde, sollte es elegant und effektiv vergrößert oder verkleinert werden. Eine reaktionsfähige Site muss nicht unbedingt auf mobile Geräte ausgerichtet sein. Wenn es richtig gebaut ist, muss es nicht auf ein bestimmtes Gerät ausgerichtet sein. Es wird einfach funktionieren. Und Ethan Marcotte fasst es in seinem Artikel „Responsive Web Design“ von A List Apart gut zusammen: „Anstatt getrennte Designs auf jedes der immer mehr Webgeräte zuzuschneiden, können wir sie als Facetten derselben Erfahrung behandeln.“ er schreibt. „Wir können für ein optimales Seherlebnis entwerfen, aber standardbasierte Technologien in unsere Designs einbetten, um sie nicht nur flexibler, sondern auch anpassungsfähiger für die Medien zu machen, die sie darstellen. Kurz gesagt, wir müssen responsives Webdesign üben. “

Auf der iPad-Version der Nike-Website steht 'Train like a Pro', aber der Artikel der Fußballakademie der Desktop-Version ist hier überhaupt nicht zu finden

Angesichts der enormen Entwicklung der Geräte hindert uns das reaktionsschnelle Webdesign nicht vollständig daran, Änderungen für neue Geräte vorzunehmen, aber es sollte die Notwendigkeit beseitigen, Änderungen im Zusammenhang mit Ansichtsfenstern vorzunehmen. Wir haben es alle durchgemacht - Websites zu erstellen, die in IE6 nicht ganz funktionieren. Es ist ein Problem, das uns alle verrückt gemacht hat und wir haben Stunden damit verbracht, Hacks anzuwenden, um es zu beheben. Es gab jedoch noch nie ein so großes Problem mit IE6. Wir haben lediglich unsere Websites falsch erstellt. Bei einer enorm wachsenden Anzahl von webfähigen Geräten ist es wichtig, dass wir unsere Websites so erstellen, dass sie sich an Änderungen anpassen können

Die Komplettlösung

Für dieses Tutorial habe ich eine Website zusammengestellt, die sich wunderbar zwischen großen und kleinen Bildschirmen skalieren lässt. Sie behalten den gesamten Inhalt in allen Größen. Und mit Hilfe von Medienabfragen habe ich die Navigation von einer horizontalen Anzeige auf eine vertikale Anzeige für kleinere Geräte umgestellt und dem Benutzer genügend Polster für die neu ausgerichtete Anpassung gegeben, damit sie auf Touchscreens gut funktioniert.

Eine Sache, die mir besonders gefällt, wenn Sie Versionen von Websites mit kleinerem Bildschirm anzeigen, bei denen die Hauptnavigation den Bildschirmbereich ausfüllt, ist die Möglichkeit, mithilfe von Seitenankern zum gewünschten Inhalt zu springen. Wenn dies oben auf der Seite angezeigt wird, müssen mobile Benutzer nicht nach unten scrollen müssen, um zum Hauptinhalt zu gelangen.

Mediaqueri.es ist eine schöne Website, die sich perfekt inspirieren lässt, da sie Ihnen Versionen vieler Websites zeigt, die sich in kleinere Bildschirmgrößen verwandeln

Das Schlüsselelement für Flexibilität beim reaktionsschnellen Design ist eine flüssige Layoutbreite. Sie müssen lediglich einen Wrapper, Inhalt und Spaltenbreiten erstellen, die sich an unterschiedliche Gerätebreiten anpassen. Es ist nichts Neues, aber jetzt wichtiger als je zuvor. Um die Dinge einfach zu halten, werde ich Ihnen zeigen, wie Sie eine flüssige Seite erstellen, die aus Navigation, Feature-Image und zweispaltig besteht und das Layout auf Geräten unterschiedlicher Größe berücksichtigt. Sie werden feststellen, dass ich aufgenommen habe reply.min.js Dies ist eine einfache Polyfüllung, mit der Medienabfragen in IE6-8 ausgeführt werden können. Hier ist die grundlegende HTML-Struktur:

Demo | Responsive Web

• 
  Zum Hauptinhalt springen
  

Demo

• Zuhause


• Über


• Arbeit


• Kontakt

Hauptteil

Lorem ... p>

Unterabschnitt

Lorem ... p>

Wenn es um CSS geht, setzen Sie a maximale Breite ist eine gute Idee, um die Skalierung der Website über riesige Bildschirme hinweg zu stoppen - und dies verhindert nicht, dass die Seite verkleinert wird. Ein Hauptproblem beim Wechsel von festen Breiten zu Fluid sind Bilder. Und dafür gibt es in Ihrem CSS eine einfache Lösung. Stellen Sie einfach die Breite Ihres Bildes auf 100% ein:

float: left;
Bildschirmsperre;
Hintergrund: URL (../ images / demo.gif) 0 0 no-repeat;
Texteinzug: -9999px;
}}
/* Sind nicht */
Header Navi {
schweben rechts;
Rand oben: 40px;
}}
Header nav li {
Anzeige: Inline;
Rand links: 15px;
}}
#Überspringen zu {
Anzeige: keine;
}}
#skipTo li {
Hintergrund: # b1fffc;
}}
/ * Banner * /
#banner {
float: left;
Rand unten: 15px;
Breite: 100%;
}}
#banner img {
Breite: 100%;
}}

Ihr Bild wird nun in voller Breite an den übergeordneten Elementen angezeigt und zieht sich mit. Stellen Sie einfach sicher, dass Ihr Bild ist maximale Breite überschreitet nicht die maximale Breite von seinem Behälter - sonst kann es draußen platzen. Denken Sie daran, diese Methode effektiv anzuwenden. Das Bild muss groß genug sein, um auf die Größe Ihres größten festgelegten Ansichtsfensters skaliert zu werden.

Wenn Sie das Tutorial-Layout auf einem großen Bildschirm anzeigen, verhindert die maximale Breite, dass es zu weit erweitert wird

Die Verwendung großer Bilder kann sich auf die Ladezeit auswirken. In kleineren Ansichtsfenstern, in denen sie nicht erforderlich sind, gibt es eine reaktionsschnelle Bildmethode, bei der Sie die Bildschirmgröße des Benutzers erkennen und je nach Bedarf kleinere / größere Bilder einlesen. Es gibt immer noch einige große Herausforderungen bei dieser Methode, aber es lohnt sich immer noch, sie zu untersuchen. Mat Marquis, ein Mitglied des jQuery Mobile-Teams, hat einen großartigen Artikel über diese Methode geschrieben und er erklärt die Vor- und Nachteile .

Hauptnavigationsschalter

Der Hauptgrund, warum Sie möglicherweise die Navigation wechseln möchten, ist, dass die Verkleinerung möglicherweise nicht mehr lesbar und schwer zu klicken ist. Mit dieser Methode können Sie dem Benutzer den Zugriff erleichtern. Sie werden auch im Code feststellen, dass wir einige Änderungen am vorgenommen haben #Main und beiseite Abschnitte, um sie in eine Spalte zu wechseln.

/* Struktur */
#wrapper {
Breite: 96%;
maximale Breite: 920px;
Rand: Auto;
Polsterung: 2%;
}}
#main {
Breite: 60%;
Rand rechts: 5%;
float: left;
}}
/ * Medien-Anfragen * /
@ Media-Bildschirm und (maximale Breite: 480 Pixel) {
#Überspringen zu {
Bildschirmsperre;
}}
Header Navi, #main, beiseite {
float: left;
klar: links;
Rand: 0 0 10px;
Breite: 100%;
}}
Header nav li {
Rand: 0;
Hintergrund: #efefef;
Bildschirmsperre;
Rand unten: 3px;
}}
Header Navi a {
Bildschirmsperre;
Polsterung: 10px;
Textausrichtung: Mitte;
}}
}}

Auf einigen Mobilgeräten werden Sie feststellen, dass sich Ihre Website automatisch verkleinert, um sie an den Bildschirm anzupassen. Hier treten die Probleme auf, dass Sie zoomen müssen, um durch fummelige Inhalte zu navigieren.

Damit Ihre Medienabfragen ihre volle Wirkung entfalten können, enthält eine typische für Mobilgeräte optimierte Website Folgendes:

Die Eigenschaft width steuert die Größe des Ansichtsfensters. Sie kann auf eine bestimmte Anzahl von Pixeln wie width = 960 oder auf den Wert für die Gerätebreite eingestellt werden, bei dem es sich um die Breite des Bildschirms in Pixel auf einer Skala von 100% handelt. Die Eigenschaft für die anfängliche Skalierung steuert die Zoomstufe beim ersten Laden der Seite. Die Eigenschaften für maximale Skalierung, minimale Skalierung und Benutzerskalierbarkeit steuern, wie Benutzer die Seite vergrößern oder verkleinern dürfen.

Durch die Kombination einer Reihe von Greifern kann die Auswirkung von Übergängen zwischen Bildschirmgrößen vollständig erkannt werden

Wie ich bereits sagte, ging es bei Responsive Web Design nie darum, Websites für mobile Geräte zu erstellen. Es geht darum, Layouts an die Größe von Ansichtsfenstern anzupassen. Eine reaktionsfähige Site, die sich an unterschiedliche Ansichtsfenster anpasst, sollte die Standardoption sein. Wenn Sie eine mobile Version erstellen möchten, die völlig anders aussieht und nur 'wichtige' Inhalte anzeigt, fahren Sie fort, aber lassen Sie dem Benutzer dieser Auswahl zumindest die 'vollständige' Website zu. Wir sollten uns darauf konzentrieren, die Technologien zu nutzen, die unter dem Dach des „Responsive Design“ stehen, um ein besseres Web zu schaffen.

Etwas, das uns beim fließenden Layout enorm helfen wird und über das ich mich sehr freue, ist das Flexible Box Layout Module. FlexBox bietet auch eine Methode zum automatischen Ändern der Größe von Elementen innerhalb des übergeordneten Elements, ohne dass Höhen- und Breitenwerte berechnet werden müssen. FlexBox kann nicht nur die Größe eines Elements dynamisch ändern, sondern auch Eigenschaften auf ein übergeordnetes Element anwenden, die steuern, wo ein leerer Bereich verteilt wird. Wenn Ihnen FlexBox nicht bekannt ist, überprüfen Sie Artikel von Peter Gasston .

Entwickler müssen in Betracht ziehen, denselben Inhalt so zu organisieren, dass er für alle gleich ist. Der Mindeststandard, den wir uns als Entwickler setzen sollten, ist die Erstellung von Websites, die für alle und überall funktionieren.

• Dieses Tutorial hat eine technische Überprüfung von erhalten Stephanie Rieger
• Dieser Artikel erschien erstmals in Ausgabe 231 des .net-Magazins - dem weltweit meistverkauften Magazin für Webdesigner und -entwickler.