5 Schritte zur Implementierung der Responsive Webdesign-Methode und zum Abschied vom Wasserfallmodell (Grafik-Tutorial)
 Responsive Einführung Sie sind vielleicht mit dem typischen Entwicklungsprozess im „Wasserfallmodus“ vertraut: Beginn ist die Analyse der Systemanforderungen, dann folgt das Design, dann die Front-End- und Back-End-Entwicklung und schließlich die Evaluierung und Implementierung. Das Hauptmerkmal der Wasserfallentwicklung ist die lineare Natur: Wenn eine Phase abgeschlossen ist, beginnt sofort die nächste Phase und die beiden arbeiten fast nahtlos zusammen. Der Entwicklungsprozess des „Wasserfallmodells“ ist so konzipiert, dass er nacheinander in einer Reihe von Schritten durchgeführt wird und die Arbeit nur in eine Richtung vorantreiben muss. Leider müssen sie mit der Anhäufung von Problemen langsamer vorankommen, um verschiedene schwierige Probleme zu lösen. Demonstrationsdiagramm des Entwicklungsprozesses „Wasserfallmodell“:  Der „responsive“ Designprozess wird in der folgenden Abbildung dargestellt:  Die Wirkung von Responsive Design auf verschiedenen Geräten:  So implementieren Sie responsives Webdesign Schritt 1: Wasserfallentwicklung planen Bei der Wasserfallentwicklung besteht das Rahmendiagramm hauptsächlich aus Layouts und Widgets. Sie sind auf eine bestimmte Größe eingestellt (normalerweise in Pixeln) und bieten wenig Spielraum für Anpassungen. Diese Drahtmodelle geben bestimmte Raster-/Layoutabmessungen vor, doch unterschiedliche Bildschirmauflösungen führen dazu, dass sich das Layout ändert und nichts mehr Sinn ergibt. Dies führt dazu, dass das Navigationsmenü unbrauchbar wird, auf die Formularseite nicht zugegriffen werden kann und die Benutzeroberfläche unübersichtlich wird. Responsive Webdesign löst dieses Problem problemlos. Sie müssen für unterschiedliche Ansichten unterschiedliche Widgets entwerfen und dürfen eine Seite nicht als eine ganze „Seite“ behandeln. Dabei stellt nicht die Seite die kleinste Einheit dar – vielmehr sind Scrollbalken, Textinhalte, Formulare und andere Komponenten die kleinsten Elemente, aus denen sich die gesamte Seite zusammensetzt. Wireframes müssen unterschiedliche Bildschirmgrößen berücksichtigen, daher sind die Layoutabmessungen nicht festgelegt. Das Layout lässt sich von dreispaltig auf zweispaltig umstellen und bei den kleinsten Anzeigegeräten (mobile Smartphones) sogar auf eine einspaltige Anzeige anpassen. Gleichzeitig muss sich auch die Benutzerfreundlichkeit der Website ändern – auf kleinen Bildschirmen muss die Scrollleiste nicht nur mit der Maus, sondern auch mit den Fingern bedient werden können. Dies bedeutet, dass das Blockdiagramm lediglich ein Prototyping-Tool und keine Vorlage ist und einige Entwicklungs- und Testarbeiten erfordert, um die Funktionsfähigkeit der Anzeige sicherzustellen. Wenn mit der Konstruktion vor diesen ersten Tests begonnen wird, können unbekannte Entwicklungsprobleme auftreten. Ungeachtet dessen muss die zugrunde liegende Vision des Projekts erhalten bleiben. Daher ist die Aufrechterhaltung offener Kommunikationskanäle zwischen den Abteilungen von wesentlicher Bedeutung. Schritt 2: Entwicklung des Designs im Wasserfallmodus Bei der Entwicklung im Wasserfallmodus besteht der nächste Schritt darin, das Design gemäß dem Rahmendiagramm zu erstellen und es durch Schriftarten, Farben, Abstände und andere Designtools und -techniken farbenfroh und voller Leben zu gestalten. Normalerweise wird das Design immer wieder modifiziert und durch kontinuierliche Aktualisierung des Designs werden die Marken- und Designspezifikationen schrittweise verbessert. Responsive Webdesign: Um die zugewiesene Projektzeit und -ressourcen besser zu nutzen, sollten beim Responsive Webdesign Layouts und Komponenten in unterschiedlichen Größen erstellt werden. Beim Responsive Webdesign geht es nicht mehr länger um pixelgenaues Design. Wir glauben, dass der Arbeitsaufwand, der mit der Gestaltung flexibler Widgets in einem nicht festgelegten Raster und mit der Gestaltung von Layouts und Widgets in verschiedenen Größen verbunden ist, überschaubar ist, obwohl es bereits eine große Herausforderung darstellt, ein Design fertigzustellen, das mit Desktop-Browsern kompatibel ist. Verbessern Sie Ihre Designqualität, indem Sie HTML mit flüssigen Layouts in allen Umgebungen verwenden. Es ist eine enorme Zeitverschwendung, jede Browserbreite zu berücksichtigen, anstatt sich auf das allgemeine Benutzererlebnis zu konzentrieren. Sie müssen beispielsweise sicherstellen, dass der Text des rotierenden Banners auf kleinen Mobilgeräten reagiert und so gestaltet ist, dass er in die von der Branche empfohlene Mindestgröße von 44 Pixeln passt, die einer normalen menschlichen Fingerspitze entspricht. Das Design auf die Benutzererfahrung auszurichten ist genauso wichtig wie das Design auf das Erscheinungsbild des Produkts für alle Bildschirmgrößen auszurichten. Schritt 3: Entwicklung im Wasserfallmodus: Sobald der Kunde bei der Wasserfallentwicklungsmethode die Entwurfszeichnung bestätigt hat, werden bei der anschließenden Front-End-Entwicklung verschiedene Probleme auf kleinen Bildschirmen festgestellt. Aufgrund der linearen Natur des Wasserfallmodells können diese unvorhergesehenen Probleme leider erst im weiteren Projektverlauf auftreten. Responsive Webdesign: In einem agilen, responsiven Entwicklungsprozess müssen Designs auf flexiblen Rastern basieren. Komponenten müssen von Entwicklern geplant, als Prototyp erstellt und in jeder Phase getestet werden. Um sicherzustellen, dass die Komponenten möglichst kleine Bausteine sind, muss der Code optimiert werden. Da Komponenten leicht zum Layout hinzugefügt und daraus entfernt werden können, war dies im ursprünglichen Entwurf nicht vorgesehen. Vermeiden Sie Probleme durch notwendige Änderungen durch eine gute Zusammenarbeit zwischen Entwicklern, Designern und Planern. Auf diese Weise können die Teammitglieder einen Konsens erzielen und Probleme frühzeitig erkennen und lösen. Schritt 4: Geduldiges Testen der Wasserfallentwicklung Die letzte Phase der standardmäßigen Wasserfallentwicklung besteht in der Evaluierung der Site durch Unit- und Funktionstests. Werden in dieser Phase Probleme entdeckt, ist möglicherweise eine Neuplanung des ursprünglichen Projektkonzepts erforderlich. Manchmal kann ein neu eingeführtes Gerät dem Projekt sogar einen schweren Schlag versetzen. Das Anforderungsanalyseteam und das Designteam müssen neu planen und neu entwerfen, um diese Änderungen zu berücksichtigen, und werden mehr Zeit aufwenden, um Modifikationen vorzunehmen. Responsive Webdesign Bei der responsiven Entwicklung wird jeder Schritt in mehreren Browsern und auf unterschiedlichen Bildschirmgrößen getestet, um Probleme frühzeitig zu erkennen. Dadurch können auch Probleme aufgedeckt werden, wenn eine bestimmte mobile Umgebung nicht mit dem Rahmendiagramm übereinstimmt, und die Leistung des Designs auf verschiedenen Plattformen ermittelt werden. Beim Responsive Webdesign wird der Projektprototyp so früh wie möglich fertiggestellt, sodass die Kunden die Ergebnisse früher prüfen und eine Win-Win-Situation erreichen können. Schritt 5: Erkennen Sie Probleme frühzeitig und lösen Sie sie so schnell wie möglich. Im traditionellen Wasserfall-Entwicklungsprozess gibt es keinen Prozess der Design- und Schnittstelleniteration. Bei der Wasserfallentwicklung werden kleine Details im Projektkonstruktionsprozess ignoriert, was zu einigen Problemen führt und im Widerspruch zu den Kundenerwartungen steht. Obwohl die Probleme letztendlich durch ständige und zeitnahe Kommunikation mit dem Kunden gelöst wurden, blieb die Schwere dieser schlechten Entscheidungen unbemerkt. Responsive Webdesign: Ein responsiver Ansatz erzielt die gleichen Fortschritte, während dynamischer Code verwendet wird, um den Kunden den Implementierungsprozess Schritt für Schritt anzuzeigen. Auf diese Weise trägt diese Vorarbeit zur Entwicklung der nächsten Arbeitsphase bei und ermöglicht die Durchführung wichtiger Überarbeitungen vor Ablauf der Frist. Zusammenfassung: Durch die Einführung eines agilen, responsiven Webdesigns können Sie sich vom Wasserfallmodus befreien. Es vereinfacht Ihre Design- und Entwicklungsarbeit, macht Sie effizienter und maximiert Ihr Markenimage auf allen möglichen Plattformen. Die wahre Herausforderung besteht darin, aus der Wasserfallentwicklung auszubrechen und ein reaktionsfähiges Designteam zu werden. Aber befolgen Sie einfach diese fünf Schritte und Sie können dem Wasserfallmodell „Tschüss“ und dem responsiven Webdesign „Hallo“ sagen. Gastautor Travis Sheppard ist Vice President of Technology bei BGT Partners. BGT wurde 2010, 2011 und 2012 von Advertising Age zu einem der 15 besten Arbeitgeber gekürt. Es bietet Unternehmen auf der ganzen Welt interaktive Marketing- und Technologielösungen, die ihnen dabei helfen, die Markenwerbung zu stärken, mehr Partner zu gewinnen und ihre Geschäftstransformation voranzutreiben. Originalquelle: Bye, Bye Waterfall: 5 Schritte zur Implementierung von Responsive Webdesign |
<<: Beispiel für die Implementierung von Textumbruch in HTML (gemischter Text und Bilder in HTML)
>>: Der Unterschied zwischen „where“ und „on“ in MySQL und wann sie verwendet werden
Artikel empfehlen
Wissen Sie, warum Vue-Daten eine Funktion sind?
Erklärung auf der offiziellen Website: Wenn eine ...
So installieren Sie eine MySQL-Datenbank unter Ubuntu
Ubuntu ist ein kostenloses und quelloffenes Deskt...
Vue implementiert einfache Kommentarfunktion
In diesem Artikel wird der spezifische Code von V...
Detaillierter Installationsprozess von mysql5.7.21 unter Win10
In diesem Artikel erfahren Sie mehr über die Inst...
MySQL 5.7.17 Installations- und Konfigurations-Tutorial unter Linux (Ubuntu)
Vorwort Ich habe MySQL 5.6 bereits installiert. D...
So machen Sie React-Komponenten im Vollbildmodus
einführen Dieser Artikel basiert auf React + antd...
Installieren Sie mysql5.7 unter Ubuntu 18.04
Ubuntu 18.04 installiert MySQL 5.7 zu Ihrer Infor...
Der gesamte Prozess der Installation von Gogs mit Pagoda Panel und Docker
Inhaltsverzeichnis 1 Installieren Sie Docker im B...
Implementierung der Validierung mehrerer Elemente im Formular
Im Projekt werden häufig Formulartests durchgefüh...
CSS-Anfänger-Tutorial: Hintergrundbild füllt den gesamten Bildschirm
Wenn Sie möchten, dass die gesamte Benutzeroberfl...
MySQL verwendet Union, um die Daten zweier Tabellen zusammenzuführen und anzuzeigen
Verwenden des UNION-Operators Union : Wird verwen...
So ändern Sie das Standardnetzwerksegment der Docker0-Brücke in Docker
1. Hintergrund Wenn der Docker-Dienst gestartet w...
Eine kurze Analyse des MySQL-Index
Ein Datenbankindex ist eine Datenstruktur, deren ...
Lösungsideen und Implementierungsschritte für das Problem, dass CSS und JS nach einem Struts2-Sprung ungültig werden
Wenn die JSP angezeigt wird, zu der nach der Ausfü...
So implementieren Sie den Vue-Mausrad-Scrolling-Umschalt-Routing-Effekt
Eine Root-Routing-Komponente (die Root-Routing-Ko...