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

5 goldene Regeln des "responsiven" Webdesigns

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

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

Der Artikel erregte die Aufmerksamkeit eines breiten Publikums, das den Autor zwang, ein ganzes Buch über die Anpassung des Designs zu schreiben.

Eine detaillierte Beschreibung der Layouts basierend auf dem Raster, flexible Bilder und die Arbeit mit Medienabfragen hat den Prozess der Erstellung schöner Seiten radikal verändert.

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

Inhaltsorientiertes Design

Bevor Sie einen Stift aufnehmen oder Photoshop öffnen, ist es sinnvoll, den Inhalt mit einer Strategie auszustatten. Es ist notwendig, eine bestimmte Idee über den Inhalt für eine bestimmte Website zu machen. Schließlich hat es keinen Sinn, eine Website zu starten, ohne sich der Art des Materials bewusst zu sein, das darauf platziert wird.

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

Mit der Verfügbarkeit von Inhalten ist es bereits möglich, zu experimentieren, wie alles aussehen wird - um ein Framework für den Inhalt zu erstellen. Dieser Begriff wurde von Stephen Hey im Responsive Design Workflow-Buch vorgeschlagen, das die Verwendung von rechteckigen Grundblöcken zum Erstellen eines Layouts für Inhalte impliziert.

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

Dann müssen Sie über "adaptive" Kontrollpunkte nachdenken. Für Content, der als Teil der Content-Strategie generiert wird, reicht ein einfaches einspaltiges Layout für mobile Geräte aus. Es ist besser, dies in einem Browser mit einfachen HTML-Elementen zu tun, aber dazu später mehr.

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 wichtigste Aufruf zum Handeln sein? Macht es Sinn, die Seite von Anfang bis Ende zu lesen?

Nach dem Erstellen der erforderlichen Reihenfolge der Präsentation von Informationen, scheint es angemessen, die Gliederung des Inhalts zu erweitern, aber nicht in einem solchen Ausmaß, dass der Inhalt zu ausgedehnt erscheint. Es ist notwendig, die Breite zu fixieren. Dies wird der erste Bezugspunkt sein.

Korrigieren Sie dann das Layout der Seite so, dass sie der neuen Breite entspricht, indem Sie beispielsweise eine Spalte für die Seitenleiste hinzufügen.

Browserdesign

Es ist wichtig, zu berücksichtigen, dass flache visuelle Elemente und Photoshop-Layouts die Erstellung eines Website-Designs zu schwierig machen und eine Ansicht darüber bieten, wie die Website in Abhängigkeit von den Browsereinstellungen aussieht.

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

Aber das Endergebnis unterscheidet sich fast immer von dem ursprünglich geplanten. Die Ausdehnung der Elemente, die Zunahme des Raumes um sie herum und andere Nuancen - all dies beeinflusst das Ergebnis.

Das Problem mit visuellen Elementen ist, dass sie zu gut aussehen. Die Bilder sind klar, die Typografie ist geglättet, die Verwendung des Schatteneffekts und der Füllmethoden machen den Ort zum Kunstwerk. Aber die Erwartungen der Kunden sollten dem entsprechen, was am Ende passiert.

Dies wird dem Prototyp helfen, der mit HTML und CSS (Cascading Stylesheets) erstellt wurde und später verschiedenen Manipulationen unterzogen werden kann. Zeigen Sie dem Kunden, wie das Design auf verschiedenen Geräten und mit unterschiedlichen Bildschirmbreiten aussieht.

Machen Sie sich keine Sorgen darüber, dass Sie vielleicht kein Magier externer Schnittstellen sind, denn es gibt Werkzeuge, mit denen Sie Prototypen erstellen können (Macaw, Webflow und Adobe Edge Reflow). Sie können auch den Rat einiger Entwickler verwenden, aber es wird angenommen, dass es besser ist, zuerst die Grundlagen zu lernen - dies wird Ihnen helfen, eine Idee über den Prozess des Aufbaus eines responsiven Webdesigns zu bekommen.

Einer der Vorteile einer solchen Strategie ist, dass sie den Zeitaufwand für Änderungen reduziert.

Angenommen, es gibt 20 Photoshop-Layouts (oder Fireworks-Layouts), von denen jedes in drei Versionen vorliegt (für Desktop-, Tablet- und Mobilgeräte). Die Aufgabe besteht darin, den Stil der Schaltflächen für die Site oder die Navigationselemente zu aktualisieren. Dies bedeutet, dass 60 Seiten verarbeitet werden müssen, um den Stil zu ändern, kurz gesagt, die Arbeit ist sehr mühsam.

Aber aufgrund einfacher Manipulationen mit CSS muss eine solche Ä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 für die Ansichtsfenster festgelegten Parameter ersetzt. Sie können jedoch auch ein eigenes Design exportieren und an einen bestimmten Browser anpassen. Somit ist es möglich, das gewünschte Mobilitätserlebnis zu übertragen.

Musterbibliothek Entwicklung

Eines der Hauptmerkmale fast aller RWD-Projekte ist der Style Guide. Es enthält normalerweise die grundlegenden Stile für das Projekt und die interaktiven Positionen 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 der Module an die ausgewählten Kontrollpunkte angepasst wird.

Entwickler Brad Frost schlug das Konzept von Atomic Web Design vor, um es zu beschreiben, verwendet er teilweise wissenschaftliche Terminologie. Die Hauptstile der Marke nennt er die Atome, die die Grundlage des Designs bilden. Dinge wie Farbe, Schriftart und Symbole entsprechen grundlegenden HTML-Elementen, um "Moleküle" zu formulieren. Moleküle werden verwendet, um "Organismen" zu erzeugen. Nehmen Sie zum Beispiel den Suchknopf. In diesem Fall können das Eingabeformular und das Label zur Schaltfläche 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 Zusammenstellung der Musterbibliotheksstruktur anwendbar. Zuerst werden 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 - wie die Kundenmarke zu einem neuen Aussehen im Web geworden ist. Für Entwickler müssen Sie Notizen und Programm-Snippets für eine bestimmte OSD-Option hinzufügen.

Nach einiger Zeit kann sich das Musterlabor zu einem veränderbaren Webdesign entwickeln, wenn es vom Seitendesign zum Systemkomponentenentwurf übergeht.

Vielseitigkeit

Bei der Entwicklung eines Designs ist es unmöglich, jede Nuance der Benutzererfahrung zu prognostizieren, insbesondere im Hinblick auf mobile Geräte. Es gibt buchstäblich Hunderte von verschiedenen Szenarien, wie man auf die Seite zugreifen kann - alles wegen der großen Anzahl von Smartphones und Tablets, unterschiedlichen Bildschirmgrößen, Auflösungseinstellungen und Art der Dateneingabe.

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

Das Design muss sich an jede Umgebung anpassen. Die folgenden Punkte können hilfreich sein.

Getestete Methode

Die meisten modernen Mobilgeräte sind mit einem Touchscreen ausgestattet, so dass Sie die Größe der interaktiven Oberflächenelemente berücksichtigen müssen. Es gibt keinen Konsens über den idealen Bereich des Smartphones zum Klicken. Apple-Ingenieure wählen 44px, Leute von Microsoft behaupten, 34px sei besser.

Vielleicht ist die Verwendung von 48px bei der Gestaltung interaktiver Elemente praktischer. Für jede Region sind mindestens 6px übrig und normalerweise 12px - für die Basisebene. Im Zeitalter des allgemeinen Designs und der großen Größe lassen viele der heutigen Websites ein wenig mehr Platz für Desktops. Diese erweiterten Elemente sollten auch in Formularen verwendet werden - zur Vereinfachung und Konsistenz mit mobilen Geräten. Manche ziehen es vor, ihre eigenen erweiterten Formularfelder so zu gestalten, dass sie dem Stil der Website entsprechen.

In Bezug auf mobile Geräte wird jedoch empfohlen, möglichst "native" Steuerelemente zu verwenden. Tastaturen und Dropdown-Menüs 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 in der Auswahl, 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, die von der Anzahl der Kontrollpunkte abhängen.

Sprunglinks

Eine der einfachsten und vielseitigsten mobilen Navigationstechniken ist das Sprungverbindungsmenü. Dies ist im Wesentlichen eine Ankerverknüpfung, die dem Benutzer unten auf der Seite ein Menü zur Verfügung stellt.

Es benötigt 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 die Menüsymbole die Möglichkeit bieten, mit einer weichen Animation zu navigieren. Diese Technik erfordert Javascript - um das Menü unter der Schaltfläche zu platzieren und es dann zu verbergen, bis der Benutzer es benötigt.

In einigen Navigationselementen kann zu diesem Zweck das grafische Element "Harmonika" verwendet werden, mit dem Sie die Navigationsebenen anzeigen können, ohne die einzelnen Seiten zu laden.

Keine Leinwand

Diese Methode ist vielleicht am beliebtesten in RWD, da Websites zunehmend Anwendungen verwenden. Das soziale Netzwerk Facebook mit seinen mobilen Anwendungen ist zu einem Pionier 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 wird angenommen, dass es bald ein Trend in RWD werden wird.

Aufgabenorientierte mobile Versionen von Websites

Ein weiterer wichtiger Punkt, auf den Sie beim Entwickeln einer mobilen Version achten sollten, ist die Position der Steuerelemente oben auf der Seite. Über die "Falte".

Die Entwickler argumentieren, dass es auf dem Gebiet des Webdesigns keine "Faltung" gibt. In letzter Zeit gab es eine große Vielfalt neuer Geräte mit verschiedenen Auflösungen, was die Bestimmung der Faltlinie einer spezifischen Stelle weiter erschwert. Anhand der Größe des kleinsten Gerätes kann die sogenannte "sichere Zone" ermittelt werden.

Da die Benutzer mobiler Geräte in der Regel in Bewegung sind und nur wenig Zeit und Bandbreite zur Verfügung haben, ist es wichtig, dass die Oberfläche aller Elemente der Kategorie "Call to Action" (Banner usw.) immer oben auf dem Bildschirm und der zusätzliche Inhalt angezeigt wird - unten.

Ein anschauliches Beispiel ist das mobile Design für E-Commerce, bei dem viele Produktseiten neben der Websitenavigation den Produktnamen, 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 der sorgfältigen Abwägung des oberen Teils der Website in der Anwendung möglich.

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

Leistung

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, ein Design einer "adaptiven" Site zu erstellen, wobei die Performance berücksichtigt wird. Niemand möchte Zeit verschwenden und warten, vor allem im Internet. Wenn die Website nicht innerhalb weniger Sekunden geladen wird, kann der Benutzer die Website verlassen.

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

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

Am einfachsten können Sie die Größe der Site-Dateien reduzieren, indem Sie sie direkt aus der Grafikanwendung exportieren. Dies ist jedoch nicht genug. Insbesondere wenn PNG-Dateien verwendet werden.

Websites wie TinyPNG helfen dabei, das Gewicht von Dateien zu reduzieren, den Ballast zusätzlicher Daten zurückzusetzen und die Farbe zu reduzieren. Diese Portale sind ein echter Fund, und viele Designer fügen TinyPNG zu 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. Schließlich sind riesige Bilder (Hunderte von Kilobyte) nicht für mobile Geräte mit Datenbeschränkungen und schlechter 3G-Konnektivität ausgelegt.

Es gibt viele Skripts, um dies zu erreichen (Picturefill Scottle Jelphy und Adaptive Images), abhängig von den Anforderungen der Site und den Fähigkeiten des Servers. Aber mach dir keine Sorgen. Webdesigner stellen sich normalerweise vor, wie Bilder an verschiedene Kontrollpunkte und Geräte angepasst werden und entsprechende Anpassungen vornehmen. Idealerweise ein Style Guide oder Musterlabor.

Skriptabkürzung

Die Größe der Site hängt möglicherweise auch von verschiedenen Skripts ab, z. B. von JavaScript und zusätzlichen CSS-Stylesheets.

Manche mögen sagen, dass Entwickler sich über all das Gedanken machen sollten, und sie werden recht haben - aber nur teilweise.

Wenn der Schwerpunkt auf der Kompatibilität der Website mit dem mobilen Gerät liegt, sollten das CSS und alle anderen Stylesheets für große Kontrollpunkte entsprechend geschrieben werden.

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

Für Neophyten, die zum ersten Mal an mobilen Standorten arbeiten, ist es besser zuerst dem Weg des geringsten Widerstandes zu folgen, der größtenteils statische Elemente begrenzt. 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.

Serving Inhalt in kleinen Portionen

Eine gute Möglichkeit, die Größe von Dateien zu reduzieren und dadurch die Leistung zu verbessern, besteht darin, Inhalte in kleinen Blöcken zu "schneiden" und bei Bedarf bereitzustellen, wenn Benutzer danach fragen. Hier geht es nicht um die Segmentierung aller Inhalte, sondern nur um sekundäre.

Es gibt viele progressive Techniken, zum Beispiel Scroll laden - viele soziale Netzwerke nutzen sie für Nachrichten-Feeds - so können Nutzer mehr Inhalte herunterladen, je nach Bedarf (anstatt nach dem Zufallsprinzip mehr Inhalte herunterzuladen, wenn sie unten auf die Seite klicken).

Eine weitere nützliche Möglichkeit, um mehr Details anzuzeigen und mehr Sekundärinformationen anzuzeigen, besteht darin, den Inhalt auf der nächsten Seite für die mobile Anzeige anzuzeigen. Sie können zum Beispiel einen übersichtlichen Link verwenden, um zu der Seite zu gelangen, auf der die Informationen enthalten sind.

Und zum Schluss ...

Die Zeiten, in denen Webdesigner nur darauf achten mussten, Inhalte mit Farben, typografischen Stilen von Webseiten und anderen Dingen zu kombinieren, waren unwiederbringlich vorbei. Die Designwelt hat dramatische Veränderungen durchgemacht: Jetzt werden Webentwickler nicht eingestellt, um nur einen detaillierten Rahmen in einem typischen Wasserfallprojekt zu malen.

Es ist notwendig, viele Punkte zu berücksichtigen, eine Idee über den Prozess des Aufbaus einer Website zu haben und Prioritäten in Bezug auf Inhalte zu wählen, die den Anforderungen des Benutzers entsprechen. Alles wird experimentell ausgewählt, nur indem man die Theorie auf eine 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 Zeit, den Designhorizont zu erweitern und die Sphäre des Webdesigns ein wenig besser zu machen - für jedes elektronische Gerät.

In diesem Beitrag wurden fünf Merkmale des Responsive Webdesigns vorgestellt, aber natürlich viel mehr. Und zu der Zeit, wenn der Leser diesen Text beherrschen wird, wird eine Liste aller Arten von Nuancen zu etwas Neuem hinzugefügt.

Danke für ein tolles Material.