This page has been robot translated, sorry for typos if any. Original content here.

5 goldene Regeln des "adaptiven" Webdesigns

5 золотых правил «адаптивного» веб-дизайна

Im Mai 2010 schrieb Ethan Markott in seinem Artikel für "A List Apart" das Konzept des adaptiven (responsiven) Webdesigns und leitete damit eine neue Richtung ein.

Der Artikel zog die Aufmerksamkeit eines breiten Publikums auf sich und zwang den Autor, ein ganzes Buch über die Anpassung des Designs zu schreiben.

Eine detaillierte Beschreibung der maschenbasierten Layouts, flexibler Bilder und die Arbeit mit Medienabfragen hat den Prozess der Erstellung schöner Seiten radikal verändert.

Adaptives Webdesign ist seither eines der meistdiskutierten Themen in der Design-Community.

Inhaltsorientiertes Design

Bevor Sie einen Stift aufnehmen oder Photoshop öffnen, ist es sinnvoll, die Inhaltsstrategie zu aktivieren. Es ist notwendig, eine genaue Vorstellung von dem Inhalt zu machen, der für eine bestimmte Site bestimmt ist. Schließlich macht es keinen Sinn, die Website zu betreiben, ohne zu wissen, auf welche Art von Material das Material gelegt wird.

5 золотых правил «адаптивного» веб-дизайна

Wenn Sie Inhalte haben, können Sie bereits ausprobieren, wie alles aussieht - um ein Framework für Inhalte zu erstellen. Dieser Begriff wurde von Stephen Hey in dem Buch Responsive Design Workflow vorgeschlagen, das die Verwendung der grundlegenden rechteckigen Blöcke zum Erstellen eines Layouts für den Inhalt impliziert.

Diese Technik ist ideal, um das grundlegende Layout der Basisvorlagen zu demonstrieren. Die Hauptkomponenten der Navigation, ausgeblendete Navigationselemente, Seitenfuß und sekundäre Module. Zuerst wird der Rahmen erstellt, ohne übermäßige Detaillierung - zusätzliche Elemente werden später hinzugefügt.

Dann ist es notwendig, über "adaptive" Kontrollpunkte nachzudenken. Für Content, der innerhalb der Content-Strategie generiert wird, reicht ein einfaches einspaltiges Layout für mobile Geräte aus. Dies ist besser im Browser, mit einfachen HTML-Elementen, aber mehr dazu nach.

Wenn Sie das Design auf eine Spalte beschränken, können Sie bereits über die Hierarchie des Inhalts auf der Seite nachdenken. Was ist der wichtigste Informationsbestandteil der Seite? Wo sollte der Hauptberufungsbefehl liegen? Macht es Sinn, die Seite von Anfang bis Ende zu lesen?

Nach der Erstellung des erforderlichen Verfahrens für die Übermittlung von Informationen erscheint es angemessen, den Inhalt des Inhalts zu erweitern, jedoch nicht in dem Maße, in dem der Inhalt zu weit gestreckt erscheint. Es ist notwendig, die Breite zu fixieren. Dies wird der erste Checkpoint sein.

Passen Sie dann das Layout der Seite an die neue Breite an und fügen Sie beispielsweise eine Spalte für die Seitenleiste hinzu.

Design im Browser

Denken Sie daran, dass die flachen visuellen Elemente und Layouts von Photoshop den Prozess der Erstellung eines Website-Designs erschweren und eine Ansicht darüber bieten, wie die Website in Abhängigkeit von den Browsereinstellungen aussehen wird.

5 золотых правил «адаптивного» веб-дизайна

Aber das Endergebnis unterscheidet sich fast immer von dem ursprünglich geplanten. Die Erweiterung von Elementen, die Vergrößerung des Raums um sie herum und andere Nuancen beeinflussen das Ergebnis.

Das Problem mit visuellen Elementen ist, dass sie zu gut aussehen. Die Bilder sind klar, die Typografie ist geglättet, die Anwendung des Schatteneffekts und der Füllmethoden machen die Seite zum Kunstwerk. Aber die Erwartungen des Kunden sollten mit dem, was zum Ende führen wird, in Einklang gebracht werden.

Dies wird dem mit HTML und CSS (Cascading Style Sheets) erstellten Prototyp helfen, der später verschiedenen Manipulationen unterzogen werden kann. Zeigen Sie dem Kunden, wie das Design auf verschiedenen Geräten und in unterschiedlicher Breite des Bildschirms aussieht.

Machen Sie sich keine Sorgen, dass Sie kein Experte für externe Schnittstellen sind, denn es gibt Tools, mit denen Sie Prototypen erstellen können (Macaw, Webflow und Adobe Edge Reflow). Sie können auch den Rat einiger Entwickler verwenden, aber es gibt die Meinung, dass es am Anfang besser ist, die Grundlagen zu lernen - das wird Ihnen helfen, einen Eindruck vom Prozess des Aufbaus eines adaptiven Webdesigns zu bekommen.

Einer der Vorteile dieser Strategie ist, dass die Zeit für Änderungen reduziert wird.

Angenommen, es gibt 20 Photoshop- (oder Fireworks-) Layouts in jeweils drei Versionen (für den Desktop, das Tablet und das mobile Gerät), und die Aufgabe besteht darin, den Schaltflächenstil für die Website oder die Navigationselemente zu aktualisieren. Dies bedeutet, dass Sie 60 Seiten bearbeiten müssen, um den Stil zu ändern, kurz gesagt, die Arbeit ist sehr zeitaufwendig.

Aber dank einfacher Manipulation mit CSS muss diese Änderung nur einmal vorgenommen werden - Aktualisierungen werden auf alle verfügbaren Seiten angewendet. Auf lange Sicht wird dies Zeit sparen.

Unter anderem wird es möglich sein, die Fähigkeiten von Geräten mit unterschiedlichen Bildschirmgrößen zu testen. Die meisten der genannten Tools werden durch die bereits festgelegten Parameter der Ansichtsfenster ersetzt, Sie können jedoch Ihr eigenes Design exportieren und an einen bestimmten Browser anpassen. So ist es möglich, die gewünschte Mobilitätserfahrung zu übertragen.

Entwicklung einer Musterbibliothek

Eines der Hauptmerkmale fast aller RWD-Projekte ist ein Style Guide. Es enthält normalerweise die grundlegenden Stile für das Projekt und die interaktiven Bestimmungen aller Module.

5 золотых правил «адаптивного» веб-дизайна

In diesem Stadium ist es notwendig, jedes der Muster der Interaktionserfahrung zu bestimmen.

Fireworks verwendet Symbole und Stile für allgemeine Komponenten und Module. Für ein gutes Design ist es notwendig zu veranschaulichen, wie jedes Modul an ausgewählte Kontrollpunkte angepasst wird.

Entwickler Brad Frost schlug das Konzept von Atomic Web Design vor, für seine Beschreibung verwendet es eine etwas wissenschaftliche Terminologie. Die wichtigsten Stile der Marke, nennt er die Atome, die die Grundlage des Designs bilden. So etwas wie Farbe, Schriftart und Icons entsprechen den Grundelementen von HTML für die Formulierung von "Molekülen". Moleküle werden verwendet, um "Organismen" zu erzeugen. Nehmen wir zum Beispiel einen Suchknopf. In diesem Fall können dem Button ein Eingabeformular und ein Label hinzugefügt werden.

Dann gibt es eine Mischung mit anderen Organismen, um "Schablonen" zu erstellen, zum Beispiel Überschriften. Mit den Vorlagen können Sie bereits Seiten erstellen - und voila! Sie haben Atomic Web Design.

Diese Theorie ist auf die Struktur der Musterbibliothek anwendbar. Zuerst werden die Markenstile erstellt und dann können sie an HTML-Elemente usw. angepasst werden. Ihre Musterbibliothek wird in der Lage sein, die Geschichte des Projekts zu erzählen - darüber, wie die Marke des Kunden im Netzwerk auf neue Art und Weise aussieht. Für Entwickler müssen Sie Notizen und Programmfragmente für eine bestimmte Bildschirmmenüoption hinzufügen.

Nach einiger Zeit kann das Musterlabor zu einem modifizierbaren Webdesign werden, da der Übergang vom Seitendesign zum Design der Systemkomponenten erfolgt.

Vielseitigkeit

Bei der Gestaltung eines Designs ist es nicht möglich, jede Nuance der Benutzererfahrung zu erkennen, insbesondere im Hinblick auf mobile Geräte. Es gibt buchstäblich Hunderte von verschiedenen Szenarien, wie man mit der Seite umgehen kann - all dies aufgrund der großen Anzahl von Smartphones und Tablets, die sich in Bildschirmgrößen, Auflösungsparametern und Art der Dateneingabe unterscheiden.

5 золотых правил «адаптивного» веб-дизайна

Design sollte sich an jede Umgebung anpassen. Im Folgenden sind die Punkte aufgeführt, die nützlich sein können.

Bewährte Methode

Die meisten modernen mobilen Geräte sind mit einem Touchscreen ausgestattet, so dass Sie die Größe der interaktiven Elemente der Benutzeroberfläche berücksichtigen müssen. Es gibt keinen Konsens über den idealen Bereich für ein Smartphone zum Tippen. Apple-Ingenieure wählen 44px, Leute von Microsoft behaupten, dass 34px besser ist.

Vielleicht ist die Verwendung von 48px bei der Entwicklung interaktiver Elemente praktischer. Für jeden Bereich ist mindestens 6 Pixel übrig, und normalerweise ist 12 Pixel für die Basisschicht. In der Ära des allgemeinen Designs und der großen Größe lassen viele der heutigen Websites ein wenig mehr Platz für Desktops. Diese vergrößerten Elemente sollten auch in Formularen verwendet werden - zur Vereinfachung und Einhaltung mobiler Geräte. Manche Leute bevorzugen es, ihre eigenen erweiterten Formularfelder so zu gestalten, dass sie dem Stil der Site entsprechen.

Für mobile Geräte wird empfohlen, möglichst "native" Steuerelemente zu verwenden. Tastaturen und ein Dropdown-Menü sollten für ein bestimmtes Gerät optimiert sein. Und noch etwas: Entfernen Sie die Auswahl des Links, wenn Sie den Cursor für mobile Geräte bewegen.

Einige Anpassungen können die Interaktionserfahrung erheblich erweitern. Aber nichts kann schlimmer sein, als den Touchscreen wiederholt zu drücken, um eine bestimmte Aufgabe auszuführen. Und das alles wegen der Auslassung im Auswahlteil, wenn man den Cursor schwebt.

Navigation

Eine der häufigsten Fragen bei der Entwicklung einer "adaptiven" Website ist die Organisation der Navigation. Hierfür gibt es eine Reihe von Möglichkeiten, abhängig von der Anzahl der Kontrollpunkte.

Sprunglinks

Eine der einfachsten und vielseitigsten Techniken für die mobile Navigation ist das Sprungverbindungsmenü. Dies ist im Wesentlichen ein Link-Anker, der dem Benutzer am unteren Rand der Seite ein Menü zur Verfügung stellt.

Dies erfordert kein JavaScript oder andere zusätzliche Skripts, die eine Universalisierung für alle Browser und Geräte ermöglichen.

Dropdown-Liste

Ein weiteres gängiges Navigationsmuster ist das Dropdown-Menü, wenn das Menüsymbol die Möglichkeit bietet, mit einer weichen Animation zu navigieren. Für diese Technik wird Javascript benötigt - um das Menü unterhalb der Schaltfläche zu platzieren und es dann auszublenden, bis der Benutzer es benötigt.

In einigen Navigationselementen kann zu diesem Zweck ein Grafikelement "Garnishka" verwendet werden, mit dem Sie Navigationsebenen anzeigen können, ohne die einzelnen Seiten herunterladen zu müssen.

Ohne Leinwand

Diese Methode ist vielleicht am beliebtesten in RWD, da Websites zunehmend auf Anwendungen zurückgreifen. Der Pionier ist mit seinen mobilen Anwendungen zu Facebook geworden, es gibt Webentwicklern die Möglichkeit, die Websitenavigation am Rand des Betrachtungsfensters zu platzieren und auf Wunsch des Nutzers zu verschieben.

Auf Websites wie Teehan + Lax und Squarespace wird die beschriebene Technik als einzige Navigationsmethode verwendet. Es gibt eine Meinung, dass es in kurzer Zeit zu einem Trend in RWD werden wird.

Mobile Versionen von Websites, die aufgabenorientiert sind

Ein weiterer wichtiger Punkt, der bei der Entwicklung einer mobilen Version berücksichtigt werden sollte, ist die Position der Steuerelemente oben auf der Seite. Über der "Falte".

Entwickler argumentieren, dass es auf dem Gebiet des Webdesigns keine "Faltung" gibt, vor kurzem gab es eine große Anzahl von neuen Geräten mit einer Vielzahl von Auflösungen, was die Bestimmung der Faltlinie einer bestimmten Seite noch komplizierter macht. Basierend auf der Größe des kleinsten Gerätes ist es möglich, die sogenannte "sichere Zone" zu bestimmen.

Aufgrund der Tatsache, dass Nutzer von mobilen Geräten eher unterwegs sind und nur wenig Zeit und Bandbreite haben, ist es wichtig, dass die Oberfläche eines Elements der Kategorie "call to action" (Banner und Zeug) immer oben auf dem Bildschirm und zusätzlicher Inhalt angezeigt wird - unten.

Ein anschauliches Beispiel hierfür ist das mobile Design für E-Commerce, wo viele Seiten zu Produkten neben der Websitenavigation den Namen des Produkts, den Preis, Bilder in Miniatur und Aufrufe zum Kauf von allem, was über den Fächern liegt, enthalten. Sekundärer Inhalt wie Produktfunktionen und Spezifikationen können am Ende der Website platziert werden.

Dies ist aufgrund der strikten Einhaltung der Content-Strategie und sorgfältiger Abwägung möglich, wie der obere Teil der Website in der Anwendung aussehen wird.

5 золотых правил «адаптивного» веб-дизайна

Produktivität

Es ist unmöglich vorherzusagen, welches Gerät in den Händen des Benutzers ist und welche Konnektivität er haben wird. Daher ist es notwendig, das Design einer "adaptiven" Site unter Berücksichtigung der Performance zu erstellen. Niemand möchte Zeit verschwenden und warten, vor allem im Internet. Wenn die Website in einigen Sekunden nicht geladen wird, kann der Benutzer verlassen.

5 золотых правил «адаптивного» веб-дизайна

Wenn die Website ein gutes Design hat und alle anderen Komponenten ebenfalls in Ordnung sind, werden die Benutzer sicherlich wieder dazukommen. Die Hauptsache, auf die Sie achten sollten, ist, die Seiten so leicht wie möglich zu machen. Mehr als 60% des "Gewichts" der meisten Websites - es sind nur Bilder. Der Rest: Skripte, Stylesheets und andere Medienelemente.

Am einfachsten können Sie die Größe von Site-Dateien reduzieren, indem Sie sie direkt aus der grafischen Anwendung exportieren. Dies ist jedoch nicht genug. Insbesondere bei Verwendung von PNG-Dateien.

Websites wie TinyPNG helfen, das Gewicht von Dateien zu reduzieren, den Ballast zusätzlicher Daten zurückzusetzen und die Farbe zu reduzieren. Solche Portale sind ein echter Fund, und viele Designer fügen TinyPNG einer Reihe häufig verwendeter Tools hinzu.

"Adaptive" Bilder

Neben der Reduzierung der Bildgröße ist es manchmal wichtig, dass unterschiedliche Bilder für unterschiedliche Geräte geeignet sind. Immerhin sind riesige Bilder (für Hunderte von Kilobyte) nicht für mobile Geräte mit Datenbeschränkungen und schlechter 3G-Konnektivität gedacht.

Es gibt viele Skripte, die dazu beitragen werden (Picturefill Scotia Gelfi und Adaptive Images), abhängig von den Anforderungen der Site und den Fähigkeiten des Servers. Aber mach dir keine Sorgen. Webdesigner geben normalerweise an, wie Bilder an verschiedene Kontrollpunkte und Geräte angepasst werden und entsprechende Anpassungen vornehmen. Ideal im Styleguide oder Labormuster.

Das Skript abschneiden

Die Größe der Site kann auch von verschiedenen Skripts wie Javascript und zusätzlichen CSS-Stylesheets abhängen.

Irgendjemand kann sagen, dass sich die Entwickler um all das kümmern müssen, und wird recht haben - aber nur teilweise.

Wenn die Kompatibilität einer Website mit einem mobilen Gerät im Vordergrund steht, sollten CSS und alle anderen Stylesheets für große Kontrollpunkte entsprechend geschrieben werden.

Die Gesamtmenge der Animation erfordert eine ständige Überwachung. Durch die Animation wird in diesem Fall alles, was sich bewegt und schreibt Skripte impliziert. Animation erhöht die Größe der Dateien erheblich.

Für Neophyten, die zum ersten Mal an mobilen Standorten arbeiten, ist es besser, zuerst den Weg des geringsten Widerstands zu gehen und sich auf die meisten statischen Elemente zu beschränken. Wenn Sie eine schöne Folie hinzufügen müssen, können Sie ein wenig experimentieren und sehen, wie sich dies auf die Leistung der Website auswirkt.

Einreichung von Inhalten in kleinen Portionen

Eine gute Möglichkeit, die Größe von Dateien zu reduzieren und dadurch die Produktivität zu erhöhen, besteht darin, den Inhalt in kleinen Portionen zu "schneiden" und bei Bedarf bereitzustellen, wenn Benutzer dazu aufgefordert werden. Es geht nicht darum, den gesamten Inhalt zu segmentieren, sondern nur sekundär.

Es gibt viele progressive Techniken, zum Beispiel "scroll laden" - es wird von vielen sozialen Netzwerken in Bezug auf News-Feeds verwendet - so dass Benutzer mehr Inhalte herunterladen können, anstatt auf mehr Inhalte zu klicken, wenn Sie unten auf die Seite klicken.

Ein weiterer nützlicher Weg, der mehr Details bietet und Ihnen ermöglicht, mehr sekundäre Informationen anzuzeigen, besteht darin, den Inhalt auf der nächsten Seite für die mobile Anzeige zu platzieren. Sie können zum Beispiel einen übersichtlichen Link verwenden, um zu einer Seite zu gelangen, auf der weitere Informationen angezeigt werden.

Und zum Schluss ...

Die Zeiten, in denen sich Webdesigner nur darum kümmern mussten, Inhalte mit Farbe, typografischen Stilen von Webseiten und anderen Dingen zu kombinieren, sind unwiederbringlich weg. Die Design-Welt hat drastische Veränderungen durchgemacht: Web-Entwickler sind nun nicht mehr damit beschäftigt, ein detailliertes Framework in einem typischen Wasserfall-Projekt zu zeichnen.

Es ist wichtig, viele Punkte zu berücksichtigen, eine Vorstellung vom Aufbau einer Website zu haben und Prioritäten für Inhalte zu setzen, die den Anforderungen des Nutzers entsprechen. Alles wird experimentell ausgewählt, nur indem man die Theorie auf die praktische Ebene überträgt, ist es möglich, all diese Nuancen zu verstehen.

Die Webdesign-Industrie versucht, mit der Zeit Schritt zu halten und moderne Realitäten zu berücksichtigen, wenn eine große Anzahl von mobilen Geräten produziert wird. Es ist an der Zeit, den Designhorizont zu erweitern und den Bereich des Webdesigns ein bisschen besser zu machen - für jedes elektronische Gerät.

In dieser Note wurden fünf Merkmale des adaptiven Webdesigns vorgestellt, aber natürlich gibt es noch viel mehr. Und zu der Zeit, wenn der Leser diesen Text beherrscht, wird eine Liste aller Arten von Nuancen mit etwas Neuem gefüllt.

Wir danken der Durchführbarkeit für das ausgezeichnete Material.