Responsive Weblayouts für mobile Bildschirme Einführung, Tipps und Beispiele
Designer haben es jetzt schwieriger als zuvor. Wir müssen nicht nur für stationäre Geräte, sondern auch für mobile Geräte wie das Tablet und das Smartphone konzipiert werden. Da es sich hier um eine Vielzahl von Bildschirmgrößen und Auflösungen handelt, ist dies eine gewaltige Aufgabe. Vor diesem Hintergrund, sich anpassendes Webdesign könnte die beste Lösung sein. Es bietet mehr als nur eine einfache mobile Vorlage. Stattdessen ist Ihr gesamtes Site-Layout so ausgelegt, dass es in jede mögliche Bildschirmauflösung passt.
Mit einem solchen Fluid-Design-Schema gibt es offensichtliche Vor- und Nachteile. Sehen Sie sich unten meine Beispiele an, wie responsives Webdesign den Übergang zu mobilen Geräten reibungsloser gestalten kann.
Wie Responsive Design funktioniert
Wenn ich das Wort benutze “ansprechbar” In Bezug auf Webdesign meine ich, dass das gesamte Layout auf der Bildschirmauflösung des Benutzers basiert. Stellen Sie sich dieses Szenario vor: Sie lesen eine Website auf einem Tablet und wechseln dann aus irgendeinem Grund zu einem anderen Gerät. Das Browserfenster hat jetzt eine neue Größe. Ein responsives Webdesign-Layout wird Schemata und ein Layout enthalten, das sich elegant auflöst und neu erfindet. Aus Sicht der Benutzerfreundlichkeit ist dies eine brillante Technik.
Beim Responsive Design geht es darum, ein homogenes Erlebnis zu schaffen, unabhängig von der Bildschirmgröße des Browsers oder Geräts. Ich habe das perfekte Beispiel aus "A List Apart" gefunden, um meinen Standpunkt zu veranschaulichen, der auch dynamische Bilder enthält. Die Breite wird in CSS festgelegt, wobei Prozentsätze für meist alle internen Containerelemente verwendet werden. Größere Websites reagieren auch gut auf das Entfernen dynamischer Inhalte wie JavaScript, wenn diese nicht unterstützt werden.
Warum Design für Mobile??
Es hat sich gezeigt, dass mehr Benutzer mobil sind, nicht nur für das Webbrowsen unterwegs. Tablet-PCs haben begonnen, den Kontext zu ändern, wenn Benutzer online im Klassenzimmer sind. Design für Mobile ist in modernen Web-Standards sicherlich eine Voraussetzung. Das einzige Problem besteht darin, Ihre Entwicklungsmethode zu wählen und Ihre Zielgruppe entsprechend anzusprechen.
Wenn Sie mit der Codierung für bestimmte Bildschirmauflösungen beginnen, erhalten Sie zu viele Stylesheets, mit denen Sie umgehen können. Medienabfragen in CSS3 können verwendet werden, um iPhone-spezifische Layouts für Hoch- und Querformat zu erstellen. Da Sie die Pixeldichte vorbestimmen können, können Sie jedes HTML-Template für mobile Geräte leicht umgestalten.
(Bildquelle: Bradfrostweb)
Wenn Sie jedoch ein Layout für responsives Design kodieren, werden standardmäßig die mobilen Aspekte berücksichtigt. Sowohl Desktopbenutzern als auch mobilen Benutzern wird ein ähnliches Erlebnis geboten, und Sie müssen sich keine Gedanken über externe CSS-Eigenschaften machen. Die einzige Recherche, die Sie durchführen müssen, ist die Planung für den kleinsten möglichen Bildschirm. Google Analytics-Verkehrsdaten können hierfür sehr hilfreich sein.
Ihre Website wird wahrscheinlich nicht zu 100% auf jedem einzelnen Gerät mit jedem Browser ausgeführt. Sie können jedoch eine Mehrheit basierend auf der durchschnittlichen Breite des Bildschirms festlegen. Ältere iPhone-Modelle verwenden eine Bildschirmauflösung von 320 × 480, was nicht so unglaublich ist. Ich würde für eine minimale Breite von 240px fotografieren, oder noch kleiner, wenn Sie es passen können.
Entfernen des Standardzooms
Wenn Sie mit einem Smartphone im Internet surfen, werden Sie feststellen, wie Websites so skaliert werden, dass sie vollständig auf dem Bildschirm angezeigt werden. Dies ist für den Benutzer angenehm, da die meisten Websites keinen mobilen Gegenüber haben. Daher ist das vollständige Layout die sicherste Sache.
Wenn Sie jedoch ein anpassungsfähiges mobiles Design erstellen, kann der automatische Zoom Ihre Layout-Elemente wirklich durcheinander bringen. Bilder und Navigationsinhalte erscheinen in Ihrem Layout möglicherweise zu klein oder zu groß. Es gibt ein spezielles Meta-Tag, das Sie an den Dokumentheader anhängen können, um diesen bei den meisten Android- und iPhone-Geräten zurückzusetzen.
Dies ist bekannt als Viewport-Meta-Tag Dadurch werden einige benutzerdefinierte Variablen innerhalb des Inhalts eingerichtet. Apple hat eine Dokumentationsseite zu einigen anderen Meta-Tags, die Sie prüfen sollten, obwohl sich diese speziell auf Websites mit iOS beziehen. Das Anfangsmaßstab Der Wert ist wichtig, da dadurch Ihre Website auf 100% vergrößert wird.
Der letzte Wert für vom Benutzer skalierbar entfernt diese Zoomfunktion vollständig, sodass der Benutzer das Layout nicht ändern kann. Dadurch wird das Design auf die gesamte Gerätebreite in einer Größe festgelegt. Beachten Sie, dass selbst wenn Sie die Zoom-Funktion deaktivieren, sich ein gutes responsives Design beim Übergang von Hochformat zu Querformat auf einem beliebigen Gerät anpassen kann! Es ist jedoch sinnvoll, ein responsives Design zu sperren und die generischen Skalierungsoptionen zu entfernen.
Dynamische Bildskalierung
Bilder sind eine weitere wichtige Facette von praktisch jeder Website. Mobile Benutzer suchen möglicherweise nicht nach Videos, aber Fotos sind eine ganz andere Geschichte. Dies sind auch die größten Schuldigen, wenn es um Layouts geht, die aus dem Boxmodell herausbrechen.
img max-Breite: 100%;
Die Standardregel für CSS besteht darin, eine Max-Width-Eigenschaft auf alle Bilder anzuwenden. Da sie immer auf 100% gesetzt werden, werden Sie keine Verzerrungen bemerken. Wenn der Benutzer das Browser-Fenster kleiner als Ihr Bild verarbeitet, wird das Fenster automatisch um 100% verkleinert. Das Problem ist, dass Internet Explorer diese Eigenschaft nicht verstehen kann, sodass Sie ein IE-spezifisches Stylesheet erstellen müssen Breite: 100%;.
Flexible Bilder sind auch möglich, wenn Sie JavaScript- oder jQuery-Plugins verwenden. Es gibt einige wirklich kluge Entwickler, die sich die Zeit genommen haben, um unglaublich reaktionsschnellen Bildinhalt zu erstellen. Dieser Thread ist nur einer von vielen in Stack Overflow, der eine ausgefallene und dennoch praktische Lösung für die Behebung der IE6 / 7-Fehler bietet.
Ich würde persönlich empfehlen, sich an die natürliche Größenänderung von CSS-Bildern zu halten. Wenn Ihre Website in einem mobilen Browser mit aktiviertem JavaScript ausgeführt wird, kann dies höchstwahrscheinlich auch CSS unterstützen. Wenn Sie wirklich tiefer graben möchten, lesen Sie diesen 24-Wege-Artikel Images for Adaptive Designs…
Designs berühren
Webentwickler vergessen möglicherweise, dass mobile Benutzer sich nicht mehr auf Tastaturtelefonen wie BlackBerrys befinden. Ein Großteil der Smartphones verwendet heutzutage Touchscreen-Oberflächen, die ein anderes Szenario als die Einrichtung von Maus und Tastatur darstellen.
Daher müssen Sie alternative Lösungen für mobile Elemente in Betracht ziehen. Dropdown-Menüs funktionieren möglicherweise besser, wenn sie auf der rechten Seite als einzelnes Menü angezeigt werden. Die meisten Benutzer sind in der Lage, Links auf der rechten Seite leichter zu tippen als links, aber in beiden Spalten wird weniger Platz benötigt. Mithilfe von Randeinrückungen können Sie die Link-Hierarchie ohne jQuery-Code leicht identifizieren.
Es empfiehlt sich auch, die Größe dieser Navigationslinks zu vergrößern. Mobile Benutzer haben nicht den Luxus eines großen Bildschirms, der sich auf Desktops oder sogar Laptops bietet. Sie müssen den Text um jeden Preis groß, übersichtlich, lesbar und lesbar halten. Möglicherweise möchten Sie sogar die Größe ändern, wenn der Benutzer zwischen Hoch- und Querformat wechselt - eine ziemlich häufige Wiederholung beim Surfen im mobilen Web.
Benutzerdefinierte CSS-Layouts
Im Allgemeinen ist es am besten, Ihr Layout anzupassen und eine natürliche Verschlechterung Ihrer Inhalte zuzulassen. Wenn Sie über eine Seitenleiste und einen Inhaltsbereich verfügen, sollten Sie sie in Breiten von Prozent oder Ems einstellen. Dies ist alles, was sich im Browserfenster ändern lässt. Wenn Sie einen Antrag stellen min-Breite Dies wird schließlich einen Teil des Layouts abbrechen; Ihr Seiteninhalt wird jetzt über dem Seiteninhalt angezeigt.
(Bildquelle: Pepperson)
Wenn Sie bedenken, wie sich dies auf das gesamte Design auswirkt, ist es viel einfacher, externe Stylesheets zu entwickeln. Sie werden jedoch wahrscheinlich auf Bildschirmauflösungen stoßen, die für das Rendern Ihres Layouts zu gering sind. Dies ist das perfekte Szenario, um benutzerdefinierte CSS-Eigenschaften hinzuzufügen, um Teile der Seite zu entfernen oder den Inhalt insgesamt neu zu formatieren.
Zusätzlichen Inhalt ein- / ausschalten
Beispiele für große Inhaltsblöcke sind Webformulare, dynamische Menüs, Bildregler und andere ähnliche Ideen. Anstatt diese Elemente vollständig zu entfernen, da das Layout kleiner wird, verstecken Sie sie einfach in einem “minimiert” Inhalt div? Sie können entweder CSS oder JavaScript verwenden, um die Änderungen vorzunehmen. Am Ende benötigen Sie jedoch wahrscheinlich JS-Code, um eine Umschaltfläche zu erstellen.
Diese Alternative ist ideal, um Ihre Homepage dynamisch und mit umfangreichen Webmedien zu füllen. Anstatt Ihre Dropdown-Navigation vollständig zu entfernen oder die Seitenstruktur neu anzuordnen, können Sie sie in einem Content-Div ausblenden. Wenn der Benutzer Ihre Links anzeigen möchte, tippen Sie auf eine Umschaltfläche, um das Menü zu öffnen / schließen.
Diese Formatierung ist auf Touchscreen-Geräten einfach, intuitiv und einfach zu handhaben. Innerhalb des div können Sie jedes Dropdown-Menü in einem Spaltenformat nebeneinander platzieren. Wenn die Fenstergröße noch kleiner wird, fallen sie natürlich unter einander und erhöhen die Seitenhöhe. Die Option, das gesamte Menü auszublenden, ist jedoch leicht erreichbar und nur einen einzigen Tastendruck entfernt. Diese Option ist auch ideal für Bildschieber in Verbindung mit der dynamischen Größenänderung von Fotos.
Medienabfragen verwenden
Wenn ein mobiler Bildschirm Ihr 2- oder 3-Spalten-Layout beschädigen würde, werden die Inhaltsbereiche jeweils übereinander gestapelt. Die gesamte Site scheint zu verbluten und kann sehr verwirrend wirken, ohne dass bestimmte Blockbereiche auftreten. Eine bessere Idee ist das Hinzufügen eines unteren Rahmens für jede Spalte, nur für mobile Geräte, indem ein externes Stylesheet verwendet wird mobile.css.
Mit diesen neuen Stilen wird Ihr Inhalt in teilbare Abschnitte unterteilt. Das obige Medienattribut wurde speziell für ältere iPhone-Geräte in der Querformatansicht entwickelt. Dies gilt jedoch auch für Geräte mit Bildschirmen, die kleiner als 480 Pixel sind. Nutzen Sie dies zu Ihrem Vorteil, damit Sie bestimmen können, an welcher Stelle des Layouts “bricht auf”.
Es gibt einige weitere Optionen, mit denen Sie die Ausrichtung des Geräts erkennen können. Dieser fantastische Leitfaden zu CSS-Medien kann Ihnen einige Ideen geben. Zusätzlich bietet das neue mobile Projekt ab 320 eine Plattform für mobiles CSS @Medien Stile. Diese können direkt in dieselbe mobile.css-Datei eingefügt werden und wenden Regeln für viele verschiedene Geräte an.
/ * Smartphones (Hoch- und Querformat) ----------- * / @media only Bildschirm und (Min-Gerätebreite: 320px) und (Max-Gerätebreite: 480px) / * Styles * / / * Smartphones (Querformat) ----------- * / @media only Bildschirm und (min. Breite: 321px) / * Styles * / / * Smartphones (Hochformat) ---- ------- * / @media only screen und (max-width: 320px) / * Styles * / / * iPads (Hoch- und Querformat) ----------- * / @ Nur-Medium-Bildschirm und (Min-Gerätebreite: 768px) und (Max-Gerätebreite: 1024px) / * Styles * /
(Quelle: Hardboiled CSS3-Medienabfragen)
Hilfreiche Tools
- Skelett - Schöne Boilerplate für Responsive Mobile Design
- Gehen Sie von adaptiv auf vollständig ansprechend um
Showcase: Wunderschöne Responsive Designs
Ich hoffe, diese Tipps und Designtechniken werden Sie dazu ermutigen, aufregende, responsive Layouts zu erstellen, nicht nur für mobile Bildschirme, sondern für jedes gängige Gerät mit Web-Browsing. Um die kreativen Säfte fließend zu halten, habe ich eine kleine Auswahl an responsiven mobilen Webdesigns zusammengestellt. Schauen Sie sich einige der einzigartigen Funktionen an und teilen Sie Ihre Gedanken zum Design oder zum Thema im Diskussionsbereich.
den Mond aufhängen
Macdonald Hotels
CSS-Tricks
Glückliches Zahnrad
Teixido
CSS-Zauberei
Information Architekten
KUNST = ARBEIT
Hartgesottenes Webdesign
Sony USA
Zukunftsfreundlich
Wir können nicht aufhören zu denken
Authentische Jobs
Colbow Design
320 und mehr
Gabel-CMS
Das glückliche bisschen
Elektrische Pulpe
Pflege-Requisiten
Plexikalisch
Preeti-Kuchen
Weitere Gefahren
Zahnarztinformationszentrum
Ribot - Interface Design
Hallo Fischer
Social Marketer's Summit
William Csete
Wolliger Roboter
Schmelzmedium
Bleib dran!
Im morgigen Beitrag werden wir einige präsentieren Kostenlose ansprechende WordPress-Themes Sie können herunterladen. Stellen Sie sicher, dass Sie sich darauf einstellen.
