Illustrator CC für Webdesigner: Kernkonzepte

Was bedeutet responsives Webdesign?

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Video beschreibt die Unterschiede der Fachbegriffe "starres Design", "adaptives Design", "Fluid-Design" und "responsives Design".

Transkript

In diesem Video möchte ich Ihnen die genaue Erklärung des Begriffes Responsive Webdesign geben. Das ist zurzeit eine regelrechte Modebezeichnung und es wird vielfach verwendet, ohne dass die genau Bedeutung wirklich klar ist. Somit versuche ich etwas Licht in das Dunkle des Begriffes zu bringen und zeige auf, worauf Sie bei Ihrem Webdesign-Projekten mit Illustrator achten müssen. Das traditionelle Designparadigma, das teilweise immer noch in unseren Köpfen herum spukt, ist die Einteilung in Designs für Desktop-Computer und kleinere Bildschirme, wie beispielsweise Notebooks, also lediglich die Unterscheidung in großer Bildschirm oder eben nicht so großer Bildschirm. Aus diesen Zeiten stammen auch die heute leider immer noch nicht vollständig verschwunden Designs, beispielsweise 800 x 600 oder 1024 x 768 Pixel. Heutzutage müssen wir aber Designs für viele weitere Geräte planen und bauen. Mobiltelefone, Tablet-Geräte, mehrere Betriebssysteme und Auflösungen, damit sind wir als Webdesigner heute konfrontiert. Sie werden noch feststellen, dass Sie nicht für alle Geräte eine hundertprozentige Kontrolle über das Design und Anordnungen und die Verhältnisse haben. Damit müssen wir Designer einfach leben lernen und zusätzlich lernen, es zu akzeptieren. Mir ist sehr wohl bewusst, dass wir als Designer möglichst alles kontrollieren möchten, aber das ist nicht mehr möglich. Designs können auf unterschiedlichen Geräten unterschiedlich aussehen, müssen es manchmal sogar und selbst wenn Sie einen anderen Bildschirm anschließen, ist es möglich, dass auf ein und dem selben Gerät das Design beginnt zu differieren. Die Unterschiede sind also nicht problematisch, aber die Erfahrung, die ein Benutzer mit Ihrem Design macht, die ist es schon unter bestimmten Voraussetzungen. Design muss also zur Aussage passen, aber eben auch die Bedienbarkeit auf den Geräten berücksichtigen. Sie müssen wissen, was Benutzer wünschen, erwarten und benötigen und wenn Sie das nicht bereits kennen, dann sammeln Sie die Erfahrung mit passender Usability, also der Benutzerführung. Ein Benutzer wird eine Website auf einem Smartphone anders verwenden wie auf einem Desktop-Computer. Schaffen Sie einen Design, das diese unterschiedlichen Benutzererfahrungen ermöglicht. Was ich damit meine ist der Entwurf eines Designs für Desktop-Computer und der sieht eine andere Benutzerführung vor als ein Notebook. Das wiederum wird anders bedient als ein Tablet oder Smartphone. Designs für eine einzige Oberfläche oder Bildschirmgröße funktionieren heute nicht mehr. Punkt. Darüber muss man gar nicht diskutieren. Vielleicht haben Sie auch schon von vielen Fachleuten Bezeichnungen wie starres Layout oder adaptives Design gehört. Da wird von fließendem und responsivem Design gesprochen und alles wird ausgetauscht und wild durcheinander verwendet. Dabei steckt hinter jeder Technik tatsächlich eine andere Funktion und wir werfen jetzt Schritt für Schritt einen Blick auf diese vier Bezeichnungen, um zu guter Letzt wirklich zu verstehen, was Responsive Design bedeutet. Starten wir mit dem festen oder starren Layout. Dieser Begriff meint eine Art unveränderbares Design das auf festen Abmessungen aufgebaut ist und das man bis heute auch im Prinzip im Print-Design verwendet. Webdesigns mit beispielsweise 1024 x 768 Pixel, mehrfach schon angesprochen, gehören in diese Kategorie. Wie bei Zeitungen. Zeitungen haben nun mal nicht die Eigenschaft, dass sie während man sie liest und während man sie verwendet ihre Größe ändern, und so ist es auch hier. Egal was Sie mit Ihrem Browser gemacht haben oder machen werden, die Dimensionen der Webseite verändern sich nicht mehr. Problematisch wird dies insbesondere dann, wenn Sie eine solche Seite mit einem Smartphone aufrufen. Hier kann man fast nichts mehr erkennen und muss zoomen, um überhaupt die Chance zu haben, einen Menüpunkt oder Link zu erwischen und das ist sicherlich keine positive Erfahrung, die Sie einem Benutzer mit Ihrem Design verschaffen möchten. Design sollte sich auf das jeweilige Gerät mit dem es betrachtet wird anpassen. Das adaptive Design ist der erste Schritt in diese Richtung, aber bei weitem nicht so zukunftssicher wie echtes Responsive Design. Da kommen wir noch drauf. Was passiert also hier beim Adaptive Layout oder Adaptive Design? Sie versuchen anhand der Grundlage von Gerätegrößen und damit verbunden den Pixelmengen zu berechnen, wie Ihr Design aufgebaut sein muss. Aber im Grunde, seien wir ehrlich, arbeiten Sie hier doch wieder nur mit starren Layouts. Nur die Programmierung wird auf die Geräteunterschiede reagieren und einfach das nächste starre Layout anzeigen. Also auf der linken Seite beispielsweise 1024 x 768 und auf der anderen Seite 800 x 600 Pixel. Irgendwie hatten wir das schon. Wie gesagt, es ist ein Schritt in die richtige Richtung, aber beileibe nicht der beste Weg. Somit ist es auch nachvollziehbar, dass Begriffe wie fließendes Layout oder Fluid Design aufkamen. Das Fluid Design verwendet die Technik, ein Raster aufzubauen, das anhand von Prozentsätzen errechnet, wie sich die Spalten und Zeilen entsprechend innerhalb der Anzeigefläche verändern sollen. In erster Linie wird das abhängig gemacht, wie breit ein Browserfenster gerade ist. Das Fluid Design verwendet also die Technik Einraster aufzubauen und dabei ist es egal, ob es sich um einen Desktop-Rechner oder um ein Tablet handelt. Das funktioniert bereits wirklich sehr gut, viel, viel besser wie adaptives Design ist es aber auch nicht. Wie können wir es also besser machen? Die Antwort lautet Responsive Design oder die Fähigkeit, dass der Inhalt sich dem Gerät anpasst. Es handelt sich also um ein inhaltsorientiertes Gerätedesign. Es bestimmt, was ein Browser zu welchem Zeitpunkt, an welcher Stelle in einem Gerät sichtbar anzeigen und was ich lieber weglassen soll. Es ist nicht alleine von der Größe abhängig, sondern auch von der Benutzerhandlung. Die technische Umsetzung ist ähnlich wie bei fließenden Design, nur nutzen Sie hier die Pixelgrößen, um einen, na, eine Art Breakpoint zu setzen, wenn sich etwas verändert, verschieben oder verschwinden muss. Das bedeutet, dass ganz gleich welches Gerät Sie verwenden und ganz gleich, ob Sie es quer oder hochkant einsetzen, diese Breakpoints den Auslöser darstellen, was zum beschriebenen Zeitpunkt für den Benutzer wichtig ist. Hier verschiebt sich und skaliert sich also nicht nur der Inhalt, sondern es soll sichergestellt werden, dass die relevanten Inhaltspunkte auch in den Fokus der Betrachtung Rücken. Wird beispielsweise ein Layout in der Größe verändert, entscheidet das Responsive Webdesign darüber, welche Bereiche verschoben werden oder sogar ganz verschwinden. Man betrachtet also die Inhaltsbereiche wie modulare Blöcke, die je nach Gerät neu angeordnet oder ausgeblendet werden. Das beste Beispiel ist eine Menüleiste auf einem Desktop-Computer. Hier finden Sie ausgeschrieben jeden Menüpunkt horizontal nebeneinander. Bei einem mobilen Gerät verschwindet diese Leiste und macht einen schmalen Icon Platz, auf das ich zum Beispiel mit dem Daumen drücken kann oder es berühren kann, wenn ich Links aufrufen möchte. Der Fokus liegt aufgrund des zur Verfügung stehenden Platzes eben nicht auf dem Menü, sondern auf den anderen Inhalten. Responsive Design arbeitet also mit zwei wesentlichen Methoden. Wann soll etwas hinzugefügt, das ist das sogenannte Progressive Enhancement, und wann soll etwas weggelassen werden. Das ist das Graceful Degradation. Und so sichern Sie optimale Benutzererfahrung. Nun kann man sich fragen, wie Adobe Illustrator das alles schaffen soll, denn Sie können in Illustrator weder Code schreiben, der sowas abfragt, noch bietet es weitere Funktionen, um fließende Layouts oder adaptive Layouts zu kontrollieren und verwalten zu können. Können wir uns also die vorhandenen Funktionen zunutze machen, um möglichst einfach unser Design für alle Geräte anzupassen? Die Antwort ist einfach. Die Rede ist von Zeichenflächen und mithilfe der Zeichenflächen können wir ein Layout konstruieren, das, oder ein Design konstruieren, das auf unsere unterschiedlichen Gerätegrößen ideal zugeschnitten ist. Kombinieren Sie das noch mit den einzelnen Ebenen, Header, Footer und Content-Bereiche, dann brauchen wir im Grunde unsere Elemente und Objekte nur von einer Fläche auf die andere zu kopieren, zu skalieren und das geht in Illustrator hervorragend ohne Qualitätsverlust und dann einfach Objekte ausblenden, löschen oder vielleicht auch noch mal ein stückweit anders designen, also wie der Menüpunkt und dann die optimale Benutzerführung, beziehungsweise die optimale Benutzererfahrung zu gewährleisten. Somit ist die Antwort einfach. Responsive Design ist eine inhaltsbasierte Orientierung an den Geräten, Orientierung am Inhalt, nicht an den Geräten alleine und jetzt sind Sie in der Lage, auch den Experten zu erklären, wo der Unterschied zwischen starrem Layout, zwischen adaptivem und fließendem Design und Responsive Webdesign besteht.

Illustrator CC für Webdesigner: Kernkonzepte

Lernen Sie die grundlegenden Begriffe des Webdesigns kennen und konfigurieren Sie Illustrator für den teamfreundlichen Webdesign-Einsatz.

1 Std. 49 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.05.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!