Responsive Design ist unsere derzeit beste Lösung für das Phänomen des allgegenwärtigen Webs. Auf das Internet wird von Menschen überall auf unzähligen, unglaublich unterschiedlichen Geräten zugegriffen, und responsive Seiten bieten eine einfache und funktionale Möglichkeit, diese Unterschiede zu berücksichtigen.
Heute gehen wir einen Schritt zurück von Diskussionen über Medienfragen und Fachjargon und konzentrieren uns auf die Kernaspekte, wie responsive Techniken Ihren Designprozess beeinflussen. Welche wichtigen Punkte müssen Sie bei der Beantwortung eines responsiven Webdesign-Projekts beachten? Lesen Sie weiter, um es herauszufinden.
Design ist mehr als CSS
In letzter Zeit wurde viel über die Techniken des responsiven Designs aus technischer Sicht diskutiert: Medienabfragen, prozentuale Breiten usw. Wenn Sie jedoch die CSS-Tricks für das Implementieren eines responsiven Designs beherrschen, stehen Sie vor einer Menge größere Hürde: das eigentliche Design.
? Es ist schwer genug, ein professionelles Design zu erstellen, wenn Sie sich um ein einzelnes Format sorgen. Wie viel schwieriger wird es für responsives Design?Das klingt nach einer entmutigenden Aufgabe, nicht wahr? Sie möchten ein zusammenhängendes, konsistentes Erlebnis schaffen, das auf fast jeder Bildschirmgröße perfekt aussieht. Es ist schwer genug, ein professionelles Design zu erstellen, wenn Sie sich um ein einzelnes Format sorgen. Wie viel schwieriger wird es für responsives Design sein?
Dies ist ein wesentlicher Grund für das Zögern vieler Designer, Responsive Design als Standard zu verwenden. Der häufigste Einwand, den ich von beiden Designern und ihren Kunden höre, ist, dass Responsive Design wie ein ziemlich zeitintensives Unterfangen klingt. Designer sind gezwungen, zu versuchen, entweder eine Preiserhöhung zu rechtfertigen oder Stunden im Namen einer qualitativ hochwertigen Arbeit zu essen.
Glücklicherweise haben Projekte wie Skeleton unter CSS-Gesichtspunkten wirklich weniger Zeit für die Codierung. Das bedeutet jedoch nicht, dass Sie nicht vom Haken sind. Als Designer müssen Sie sich weiterhin darauf konzentrieren, für jeden Benutzer eine solide Erfahrung zu schaffen. Das bedeutet, dass Sie sich ernsthaft Gedanken darüber machen müssen, wie sich der Designprozess angesichts dieser neuen Methode verändert . Werfen wir einen Blick auf einige der wichtigsten Überlegungen, die Sie berücksichtigen sollten.
Photoshop schneidet es nicht ab
Mit Responsive Design ist das Design im Browser keine Modeerscheinung mehr, sondern eine Notwendigkeit. In Photoshop können Sie definitiv einige Ideen angeben, wie die Website unterschiedliche Breiten betrachten soll. Dies könnte sogar zu besseren Ergebnissen führen. Die einfache Wahrheit ist jedoch, dass Photoshop nicht die Art von dynamischem Effekt reproduzieren kann, der auf Responsive anspricht Design.
Das Entwerfen im Browser ist keine Modeerscheinung mehr, sondern eine Notwendigkeit.Wenn Sie von einem einzelnen Design sprechen, das sich mit der Browserfenstergröße entwickelt, können Sie dies am besten planen, indem Sie die Reifen kicken und im Browser sehen.
Betrachten Sie dies nicht als Photoshop-Razzia, Sie müssen nicht auf Bilder, Texturen usw. verzichten, die in Photoshop, Fireworks oder andere Grafiksoftware erstellt wurden. Das Zusammenstellen in einem schnellen Modell wird jedoch wahrscheinlich am besten durch Live-Browser-Implementierungen und nicht durch statische Miniaturbilder erreicht.
Denken Sie daran, dass Ihre Modelle immer noch Low-Fidelity-Produkte sein können, unabhängig davon, ob Sie mit einem einfachen Drahtgitter beginnen möchten oder ein ziemlich fertig aussehendes Design ganz bei Ihnen liegt. Der Schlüssel hier ist, dass Sie etwas Live haben, mit dem Sie die verschiedenen Entwicklungen testen können, um Probleme zu lösen, wenn sie entstehen, anstatt wertvolle Stunden für eine grundlegend fehlerhafte Idee zu verschwenden.
Dramatisch anders
Manchmal ist das Skalieren eines Designs so einfach wie das Umfließen der Elemente aus mehreren Spalten in eine einzelne gestapelte Spalte. Wenn Ihr Design in nette kleine Stücke aufgeteilt ist, ist dies möglicherweise der Weg.
Denken Sie jedoch daran, dass drastisch unterschiedliche Geräte dramatisch unterschiedliche Designs erfordern können. Es ist oft so, dass eine wirklich bessere Lösung durch eine erhebliche Änderung in der Funktionsweise der Seite bereitgestellt werden kann. Um zu sehen, was ich meine, betrachten Sie das El Sendero del Cacao-Design unten.
Wie Sie sehen, unterscheiden sich die großen und kleinen Versionen des Designs erheblich. Der Schlüssel hier ist, dass sie immer noch wie zwei Versionen derselben Website aussehen, was bedeutet, dass die Markenkonsistenz auf dem Punkt geblieben ist. Der Designer entschied lediglich, dass die mobile Version mit deutlich weniger visuellem Flair besser funktionierte als die Vollversion.
Denken Sie daran, dass „anders“ nicht immer eine vollständige und völlige Abkehr bedeutet. Ihre mobile Version muss nicht langweilig und vorhersehbar sein. Es geht hier nicht darum, alles abzuschaffen, sondern alle unterschiedlichen Schlüsselgrößen, auf die Sie abzielen, kritisch zu überdenken und wie Sie die Erfahrung für jede verbessern können, indem Sie die Grundlagen des Designs überdenken.
Was ist absolut wichtig?
Eine der Hauptkomponenten bei der Umsetzung Ihres Entwurfs durch verschiedene Phasen besteht darin, die absolut lebenswichtigen Komponenten des Entwurfs anzugreifen und ihnen höchste Priorität einzuräumen.
Wie wir im vorherigen Beispiel gesehen haben, ist es definitiv nicht immer der Fall, dass Ihre mobile Version alles enthält, was Ihr Desktop-Design in voller Größe bietet. Der Trick besteht dann darin, alles, was Sie und Ihr Kunde planen, zu berücksichtigen und eine wichtige Hierarchie zu erstellen, damit Sie die für die kleineren Versionen unnötigen Elemente kürzen können.
Wir sehen diesen Grundsatz in der folgenden Website von Stephen Carver.
Beachten Sie, dass das Design für die mobile Version nicht nur umstrukturiert, sondern auch tatsächlich reduziert wurde. Einige der Inhalte wurden als wesentlich angesehen, während andere Inhalte eher "nett zu haben" sind, wenn genügend Bildschirmplatz zur Verfügung steht.
Das offensichtlichste Beispiel dafür ist der Navigationsbereich.Beachten Sie, dass die größere Version des Entwurfs kleine Unterüberschriften für jedes Navigationselement enthält. Diese helfen dem Benutzer, das Navigationsschema besser zu verstehen. Bei der kleinen Version wurden diese jedoch aus Platzgründen entfernt.
Bei der Analyse Ihres Designs nach wesentlichen Elementen ist das Experimentieren der Schlüssel. Versuchen Sie, verschiedene Komponenten zu entfernen, um zu beurteilen, ob die Verwendbarkeit darunter leidet. Beachten Sie, dass diese Entscheidungen in jedem Intervall getroffen werden müssen, nicht nur im kleinsten und im größten.
Berühren ? Klicken
Ein weiterer wichtiger Punkt, den Sie bei den Entwurfsskalen berücksichtigen sollten, ist, dass der aktuelle Berechnungsstatus in zwei verschiedene Kategorien unterteilt ist: berührungsbasierte Eingabegeräte und solche, die einen Cursor verwenden. Die sichere Annahme ist (vorerst) natürlich, dass größere Browserfenster in der Regel Desktop-Computern oder Notebooks entsprechen, während kleinere Browserfenster normalerweise eine berührungsbasierte Benutzeroberfläche anzeigen.
Dies sind sehr unterschiedliche Tiere, und Sie sollten daran denken, dass Sie bei der Strukturierung Ihrer Entwürfe daran denken, dass die Richtung, in die Sie dieses Wissen führt, ein wenig eingängig sein kann.
Obwohl wir die mobile Site eher als eine verkleinerte Version der Desktop-Site betrachten, ist es oft so, dass Elemente aufgrund des Unterschieds zwischen Berühren und Klicken tatsächlich größer werden. Ein Navigationselement, das mit Maus und Mauszeiger perfekt zugänglich zu sein scheint, ist mit dem großen, groben Eingabegerät, dem menschlichen Zeigefinger, nahezu unmöglich zu zielen.
Das Wichtigste, das Sie sich hier merken sollten, ist wie verrückt getestet. Es ist zu einfach, auf einem Desktop zu entwerfen und dann die Browsergröße zu ändern, um einen Blick auf die mobile Version zu werfen. Das erzählt Ihnen einfach nicht die ganze Geschichte. Sie müssen das Design in einer kleineren Größe erhalten, bevor Sie es gut nennen.
Es ist alles dazwischen
Entscheidend für das Responsive Design ist, dass es nicht nur um Bildschirmgrößen geht, sondern auch um Browserfenster. Nur weil jemand ein 13-Zoll-MacBook besitzt, bedeutet dies nicht, dass das Browserfenster diese Größe hat. Es ist häufig der Fall, dass Benutzer Browser-Fenster bei weit weniger als Vollbild öffnen und verwenden.
Der Einstieg hier ist, dass Sie nach dem Test einiger voreingestellter Fenstergrößen nicht aus dem Schneider sind. Verändern Sie die Größe des Browserfensters und beobachten Sie, wie das Design bei jedem kleinen Schritt reagiert. Das Standardargument ist, dass Benutzer, die keine Designer sind, diese Aktion niemals ausführen. Das ist richtig, aber sie verwenden ihre Browserfenster in einer unendlichen Anzahl von unvorhersehbaren Größen. Die Schönheit des responsiven Designs besteht darin, dass Sie ziemlich leicht sicherstellen können, dass Ihr Design aussieht perfekt in allen.
Betrachten Sie die mobile erste Route
Letztendlich liegt es bei Ihnen, wie Sie Ihre responsive Designs planen. Es gibt jedoch viele starke Argumente, um bei mobile-first anzutreten.
Wenn Sie mit der mobilen Version beginnen, wird sichergestellt, dass Sie Ihren mobilen Benutzern nicht einfach nur eine halbherzige Version Ihres ursprünglichen Designs zur Verfügung stellen. Es sorgt auch dafür, dass Sie die Besonderheiten jedes einzelnen Inhaltsbereichs genau durchdenken.
Wir haben oben gesagt, dass Sie Ihr Design durchkämmen und die absolut wesentlichen Elemente anvisieren müssen. Dies ist ein weitaus einfacher Prozess, wenn Sie eigentlich nur mit dem Nötigsten beginnen. Mit dieser Technik können Sie Ihr Design proaktiv hinzufügen, wenn die Seitengröße zunimmt, anstatt auszuschneiden, wenn die Seitengröße abnimmt. Dies folgt dem Konzept der progressiven Verbesserung, die mit einer soliden Funktionsbasis beginnt und wo möglich Verbesserungen bietet.
Ein weiterer Vorteil von Mobile ist, dass Sie häufig das Laden unnötiger Elemente auf kleineren Geräten vermeiden, die diese nicht verwenden. Mit Projekten wie 320 und Up können Sie die Ressourcen minimieren, die von der kleinen Version Ihres Designs geladen werden.
Fazit
Der Zweck dieses Artikels bestand darin, Sie dazu zu bringen, nicht lange genug über den Backend-Teil des responsiven Designs nachzudenken, um die Auswirkungen dieser Technik auf das, was der Benutzer sieht, zu berücksichtigen. Viel wichtiger als die Abfragesyntax für Medien ist das Endergebnis, wie sich Ihr Design aus visueller und funktionaler Sicht entwickelt, um die Anforderungen des Benutzers zu erfüllen.
Denken Sie daran, dass Sie Ihr Design im Browser aktiv weiterentwickeln müssen, nicht nur in einer statischen Designanwendung. Sie müssen auch eine konkrete Hierarchie der wichtigsten Elemente des Designs festlegen, um sicherzustellen, dass die Puzzleteile vorhanden sind und für jede Fenstergröße einwandfrei funktionieren. Denken Sie schließlich daran, dass das mobile Webdesign mehr ist als das Herunterskalieren von Desktop-Webseiten. Erwägen Sie eine mobile erste Route, um sicherzustellen, dass alle Benutzer eine absolut solide Erfahrung erhalten.
Bildnachweise: Claudia Regina