Heldenbanner – Responsives Design [geschlossen]

Responsives „Design“ muss von Natur aus extrem minimalistisch sein, damit sich Dinge leicht neu ausrichten und verschieben lassen.

Es ist auch fair zu sagen, dass diejenigen, die das beste Responsive Design machen könnten, (noch) überhaupt nicht daran interessiert sind. Die Werkzeuge sind einfach nicht bereit.

Es wird also von denen gemacht, die nicht viel Kreativität und Problemlösungsfähigkeiten im Design haben, eher Code-orientierte Leute, die mit Layout spielen. Daher ist es (in diesem Stadium) sowohl unglaublich einfach als auch simpel.

Um allen gerecht zu werden, die versuchen, reaktionsfähiges „Design“ zu erstellen, gibt es nicht viele Tools, mit denen man ernsthaft reaktionsfähiges Layout und Experimente durchführen kann, es sei denn, Sie wissen, wie man codiert. Und Codierungs- und instinktive Designfähigkeiten schließen sich fast gegenseitig aus.

ERLÄUTERUNG : Diejenigen, die im Umgang mit Code ausreichend kompetent sind, um signifikant experimentell und explorativ durch das Medium zu gehen, neigen im Allgemeinen weder zu visuellem Design, noch sind sie instinktiv zu gutem Design fähig. Und umgekehrt.

Das vielleicht beste aktuelle Tool sind Storyboards im neuen Xcode 7, aber es hat eine Lernkurve, die weit über die Interessen und Leidenschaften der meisten Designer hinausgeht, und ist nicht für die Webarbeit konzipiert. Es wurde entwickelt, um reaktionsschnelle Apps für unterschiedliche Bildschirmgrößen und Bereiche in der iOS- und OS X-Welt zu erstellen, aber zum Experimentieren mit Layout-Ideen ist es wahrscheinlich das beste Werkzeug des Augenblicks, abgesehen davon, dass man tatsächlich Programmieren lernt.

Es ist fast besser, Seitenverhältnisse und Größen auszuwählen, für die Sie entwerfen möchten, und von dort aus manuell fortzufahren. Größere anfängliche Schmerzen für einen viel einfacheren Abschlusslauf.

Wenn Sie mit „Hero-Banner“ (5) den Header einer Website meinen, dann geht es hauptsächlich um CSS und darum, auf allen Geräten das gleiche Bild laden zu wollen; Ihr Beispiel sieht so aus, als würde es CSS und kein einfaches Webbanner verwenden . Es gibt ein paar Gründe, warum ein Entwickler genau das gleiche Hero-Banner für alle Geräte verwenden würde, abgesehen davon, dass es schneller zu implementieren ist (1, 2), aber jedes Gerät kann leicht sein eigenes Hero-Banner haben, und in diesem Fall gibt es nicht viele Designgrenzen. Es ist eine Frage der Möglichkeiten, der Zeit/des Budgets und der Prioritäten.

Aber wenn Sie zum Beispiel einen Abschnitt mit CSS und HTML meinen , ist der Grund dafür Zeit und Budget, Entwickler verwenden oft Bootstrap , und in anderen Fällen ziehen es einige von ihnen vor, jquery nicht zu verwenden , um beispielsweise die Größe ihrer Galerien zu ändern (1, 2).

Sie haben bereits viele verschiedene Möglichkeiten, ein responsives Layout zu erstellen. UND idealerweise sollte das Design nicht mit Bildern überfrachtet werden. (2) Es ist normal, dass das Layout minimalistisch ist und nicht zu viele große Bilder enthält; es lädt schneller.

Es ist einfach mehr benutzerdefinierter CSS-Code für jedes Gerät erforderlich, wenn Sie sich für eine andere Methode zur Implementierung eines responsiven Designs entscheiden, aber es gibt keinen "besten" Weg, und alles ist möglich. Und da es Lösungen wie Bootstrap gibt, ist es eine nette Abkürzung, die bereits vordefinierte Möglichkeiten hat, den Inhalt „fließen“ zu lassen; Viele Entwickler werden es verwenden, weil es viel Zeit spart, aber viele Websites haben am Ende auch einen ähnlichen Stil. Wichtig ist, dass es auf jedem Gerät gut passt, schnell lädt und wenn möglich auch noch gut aussieht. Es hat auch den Vorteil für Entwickler, dass nur ein Website-Inhalt verwaltet werden muss.(3)

Die andere Möglichkeit, sich davon nicht einschränken zu lassen, besteht darin, eine Website mit einer Laptop-, Tablet- und mobilen Version mit jeweils einem eigenen Layout zu erstellen. Unternehmen werden dies oft verwenden, wenn ihre Priorität darin besteht, das Design für jedes Gerät bestmöglich zu präsentieren (z. B. Werbeaktionen, Wettbewerbe). Auf dieser Ebene ist es ein bisschen weniger schwierig, eine Version für jedes Gerät unabhängig voneinander zu erstellen. Dies könnte aber auch durch die Verwendung verschiedener Stylesheets erfolgen. (3, 4)

Sie sehen sicherlich viele Websites mit einem anderen responsiven Layout.

Dies sind einige Beispiele für verschiedene responsive Layouts:

http://stephencaver.com/

http://foodsense.is/

http://www.bk.com/

http://www.timhortons.com

http://hogash-demos.com/kallyas_joomla/index.php?option=com_content&view=featured&Itemid=156

Einige Referenzen:

(1) Die Strategie ist eine Weiterentwicklung einer früheren Webdesign-Strategie, bekannt als "Graceful Degradation", bei der Designer Webseiten für die neuesten Browser erstellen würden, die auch in älteren Versionen von Browsersoftware gut funktionieren würden. Graceful Degradation sollte es der Seite ermöglichen, "degradiert" zu werden oder präsentabel zu bleiben, selbst wenn bestimmte Technologien, die vom Design angenommen werden, nicht vorhanden waren, ohne den Benutzer solcher älterer Software zu stören. Leider ist ein Upgrade aufgrund von Richtlinien der IT-Abteilung, älterer Hardware und aus anderen Gründen (z. B. Regierungswebsites) oft nicht möglich. Die Einstellung „nur aktualisieren“ ignoriert auch bewusste Benutzerentscheidungen und die Existenz einer Vielzahl von Browserplattformen;, oder wo beispielsweise die Unterstützung für Ton oder Farbe und eine begrenzte Bildschirmgröße sich stark vom typischen grafischen Desktop-Browser unterscheiden.

(2) „Obwohl viele Verlage damit beginnen, responsive Designs zu implementieren, besteht eine ständige Herausforderung für RWD darin, dass einige Bannerwerbung und Videos nicht flüssig sind . Suchmaschinenwerbung und (Banner-) Display-Werbung unterstützen jedoch die Ausrichtung auf bestimmte Geräteplattformen und unterschiedliche Werbegrößenformate für Desktop, Smartphone und einfache mobile Geräte."

(3) Jody Resnick, Präsident von Trighton Interactive, erklärte in seinem Interview mit Forbes: „Responsive Websites vereinfachen Internet-Marketing und SEO. Anstatt Inhalte für mehrere Websites entwickeln und verwalten zu müssen, können Unternehmen mit responsiven Websites einen einheitlichen Ansatz für die Inhaltsverwaltung verfolgen, da sie nur eine responsive Website verwalten müssen.

(4) „Für verschiedene Plattformen können unterschiedliche Zielseiten-URLs verwendet werden, oder Ajax kann verwendet werden, um unterschiedliche Anzeigenvarianten auf einer Seite anzuzeigen. CSS-Tabellen ermöglichen hybride feste + fließende Layouts.“

(5) Hero-Image ist ein im Webdesign verwendeter Begriff für eine bestimmte Art von Webbannern. Ein Hero-Image ist ein großes Banner-Image, das prominent auf einer Webseite platziert wird, im Allgemeinen vorne und in der Mitte.

Bearbeiten: Referenz für Heldenbanner hinzugefügt, falls das Element in der Frage falsch benannt wurde. Einige Wikipedia-Referenzen hinzugefügt, die bereits von professionellen Entwicklern genehmigt wurden, und Experten zu diesem Thema zitieren.

Meiner Meinung nach wurde dieses Muster berühmt, weil so viele responsive Designs über das Internet verfügbar sind. Außerdem folgen viele Anfänger-Designer, dieser hier habe ich persönlich gesehen, gängigen Mustern, um eine Website schnell zu entwerfen, und diese ist einfach, leicht und schnell zu erstellen.