U5 Mobiles Webdesign

Lena A.
Slide Set by Lena A., updated more than 1 year ago
Lena A.
Created by Lena A. about 5 years ago
515
4

Description

Thema U5; Konzeption und Planung (Mobiles Webdesign) für die Abschlussprüfung Mediengestalter Sommer 2016

Resource summary

Slide 1

    Layout vor MFRWD
    MFRWD = Mobile First Responsive WebdesignVor 2007 gab es kaum/selten kleine Displays (z. B. wie heute für das Smartphone), daher mussten Websites auch nicht auf diese Größe/das Format optimiert werden. Die Layouts wurden einfach zentriert, links und rechts davon wurde Weißraum angezeigt.Das Problem, Websites auf kleinere Displays zu portieren gab es nicht, da die Geräte schlicht und einfach nicht existierten. Man konnte also mit EINEM Layout (meist +/- 960 bis 980 px) die meisten Betrachtungsgeräte abdecken.Die Nachteile des einzigen, festen Layouts für Websites sind:  Inhalte werden sehr klein dargestellt (in einer "Totalen") die Website muss  umständlich mittels "pinch-to-zoom" vergrößert werden wechselt eine Seite, so muss der Vergrößerungsprozess ständig wiederholt werden Navigation und Inhalt bleiben weitgehend unlesbar schlechte Nutzerfreundlichkeit/Bedienbarkeit

Slide 2

    Responsive Webdesign
    Der Anspruch an das Mobile First Responsive Webdesign ist es, Websites auf allen Auflösungen und an das jeweilige Medium angepasst darzustellen.Die Grundidee des Responsive Web Designs besteht darin, Elemente auf kleinen Auflösungen anders anzuordnen als auf großen. Ändert sich also der Kontext oder die Größe des Browserfensters, so verbreitern sich die Elemente der Website dynamisch und nehmen mehr Platz ein, da ihre Größe prozentual definiert ist. Sie müssen umpositioniert werden, um den Anforderungen des jeweiligen Umfeldes gerecht zu werden. Im mobilen Kontext sind Inhalte zumeist übereinander gestapelt, wenn die Breite nicht ausreicht, um beispielsweise mehrere Spalten nebeneinander anzuordnen.  – RESPONSIVE WEBDESIGN –Flexibles Layout, dass sich je nach Format anpasst und dessen Größen prozentual definiert sind. Die Grundbestandteile des Responsive Webdesigns: Flexible Raster (Grids) Flexible Bilder und Medien Media Queries

Slide 3

    Responsive Layout
    Das Responsive Layout ist die bessere Lösung, um eine Seite für jede erdenkliche Displaygröße zu optimieren. Das Responsive Layout arbeitet mit einem flüssigen Gestaltungsraster, in Kombination mit Media Queries. Der Layouttyp ist demnach »fluid« oder »elastic«. Im Gegensatz zum Adaptive Layout wird hier nicht gezielt für einen bestimmten Ansicht optimiert, sondern das Design so entwickelt, dass der zur Verfügung stehende Platz immer optimal ausgenutzt wird. Lediglich nach oben ist häufig eine Grenze gesetzt, damit die Website auf großen Displays nicht zu breite Spalten erhält.Die Media Queries eines Responsive Layouts orientieren sich i.d.R. am Design und nicht an den Abmessungen eines bestimmten Displays. Die Hauptnavigation rutscht also beispielsweise dann unter das Logo, wenn das Design den Umbruch braucht, um die Information bestmöglich darstellen zu können. Das führt dazu, dass ein Responsive Layout häufig mit mehr Breakpoints bzw. Media Queries arbeitet als ein Adaptive Layout. Bei einem Responsive Layout steht das flexible Layout und die perfekte Informationsaufbereitung im Vordergrund. Bei einem Adaptive Layout steht das Ausgabegerät im Vordergrund.

Slide 4

    Responsive – Vor- und Nachteile
    Vorteile des Responsive Layout Jede Displaygröße wird optimal berücksichtigt Es wird kein Platz verschenkt Die Information steht im Vordergrund Zukünftige mobile Endgeräte werden automatisch mit abgedeckt
    Nachteile Responsive Layout Mockups, Wireframes und Skizzen stoßen an ihre Grenzen. Häufig muss mit Prototypen gearbeitet werden um Kunden das Verhalten der Website zu zeigen Komplexer in der Gestaltung Komplexer in der technischen Umsetzung Komplexer in der Anpassung der Seiteninhalte Zeitintensivere Umsetzung

Slide 5

    Adaptives Layoutadaptive = anpassungsfähig Ein Adaptive Layout ist ein für verschiedene (nicht für alle!) Displaygrößen optimiertes Web-Layout. Diese Lösung ist nicht perfekt, aber durchaus verbreitet. Der Kern des Adaptive Layouts ist ein starres Gestaltungsraster in Kombination mit Media Queries. Der gewählte Layouttyp dieser Variante ist also i.d.R. »fixed«.
    Adaptives Layout
    Bei einem Adaptive Layout, werden verschiedene Ansichten für exakte Ansichten entwickelt. Üblicherweise sind das eine Desktop-Ansicht, eine Tablet-Ansicht und eine Variante für Smartphones. Die Abmessungen der verschiedenen Ansichten orientieren sich dabei meist an bestimmten Geräten. Das iPad und das iPhone werden zu diesem Zweck gern verwendet, da die Geräte einerseits weit verbreitet sind, und darüber hinaus das mobile Internet populär gemacht haben. Im Grunde genommen wird die Website also für diese Geräte optimiert.Das Layout ist anpassungsfähig und passt sich wenigen, ausgewählten Displaygrößen an.

Slide 6

    Adaptive – Vor- und Nachteile
    Vorteile des Adaptive Layouts Es kann gut mit klassischen Mockups, Wireframe und Skizzen gearbeitet werden, da feste Abmessungen existieren Viel gestalterischer Freiraum, da mit einem starren Raster gearbeitet wird Technisch recht unkompliziert umzusetzen Inhalte müssen nur für klar definierte Abmessungen optimiert werden, aber nicht vollkommen flexibel sein Zeitsparendere Umsetzung
    Nachteile des Adaptive Layouts Es wird nur für bestimmte Ansichten / bestimmte Geräte optimiert Häufige Fehldarstellungen auf abweichenden Endgeräten Aufwändige Zielgruppenanalyse um die relevanten  Ansichten zu bestimmen Häufig mehr CSS-Code als notwendig

Slide 7

    Media Queries (deutsch: Medienabfragen) ordnen ein CSS Stylesheet einem Ausgabemedium zu und bestimmen dadurch, wie eine dazugehörige HTML-Datei auf verschiedenen Ausgabemedien dargestellt werden soll. So können durch bestimmte Merkmale, die in dem Stylesheet notiert werden, optimale Darstellungsvarianten für verschiedene Ausgabetypen wie Mobilfunk-Telefone, Tablets oder unterschiedliche Bildschirmformate ausgewählt werden. Allgemeine Informationen Media Queries sind ein wichtiger Teil von CSS3, der es Programmierern erlaubt, responsive Websites zu erstellen, die auf unterschiedlich großen Bildschirmen korrekt dargestellt werden. Korrekt bedeutet hier, dass der Inhalt nicht geändert wird, sondern die Art der Ausgabe bzw. der Darstellung. Im Zuge der Verbreitung von mobilen Endgeräten haben sich auch die Darstellungsformate grundlegend geändert. Bildschirme von Smartphones sind wesentlich kleiner als die von Desktop Computern. Auch Tablets, PDAs und Netbooks weisen verschiedene Größen der Screens auf. Um für alle Darstellungsformate optimale Auszeichnung mittels CSS treffen zu können, werden vor dem Laden einer Website die Medieninformationen mit Media Queries abgefragt. Dabei ist es nicht notwendig, für jedes einzelne Gerät die passende Bildschirmgröße zu notieren, sondern vielmehr können Typen von Geräten, Mediafeatures sowie sogenannte Breakpoints gesetzt werden. Das Endgerät lädt dann den richtigen Teil der CSS Datei automatisch und zeigt den Inhalt so an, wie es die Größe des Bildschirms erlaubt. Media Queries setzen ein »responsive« Layout für Webseiten um.
    Media Queries

Slide 8

    Layout Patterns
    Die Planung des Screenlayouts auf unterschiedlichen Ausgabegeräten, wie dem Smartphone oder dem Desktop-Computer, sollte frühzeitig erfolgen, um bei der technischen Umsetzung der Websites vor vornherein alle notwendigen Bedingungen berücksichtigen zu können.Es existieren eine Reihe von Mustervorlagen für Screenlayouts, sog. Layout-Patterns.Layout Pattern sind also Mustervorlagen für die Darstellung und Strukturierung von Inhalten auf unterschiedlichen Ausgabegeräten.
    Gängige Layout-Pattern sind: Tiny Tweaks Mostly Fluid Column Drop Layout Shifter Off-Canvas-Layout

Slide 9

    Tiny Tweaks
    Einspaltiges Layout für alle Ausgabegeräte Layout passt sich in der Breite an die Breite des Ausgabegerätes an Vorteil: sehr einfach zu erstellen Seitenlayout bleibt (fast) gleich Nachteil: Seite kaum gegliedert für umfangreiche Inhalte nicht geeignet
    Caption: : Tiny Tweaks Layout Pattern

Slide 10

    Mostly Fluid
    Mehrspaltiges Layout für (fast) alle Ausgabegeräte Layout passt sich in der Breite an die Breite des Ausgabemediums an Vorteil: Seitenlayout bleibt (fast) gleich Umschaltung nur für schmale Smartphones Nachteil:Viel Weißraum (freie Hintergrundfläche) rechts und links bei breiten Bildschirmen
    Caption: : Mostly Fluid Layout Pattern

Slide 11

    Column Drop
    Variables Layout mit mehreren oder einer Spalte Layout passt sich in der Breite an die Breite des Ausgabemediums an Spalten werden nach unten umgeklappt. (Hier: dreispaltig -> zweispaltig -> einspaltig) Spaltenbreite der Layoutelemente bleibt lange erhalten Vorteil:Bildschirm wird immer voll ausgenutzt Nachteil:Ständig wechselnde Bildschirmaufteilung
    Caption: : Column Drop Layout Pattern

Slide 12

    Layout Shifter
    Breite der Layoutelemente bleibt möglichst lange erhalten Layoutelemente, die in der Breite bzw. Höhe nicht mehr in der Anzeigefläche des Bildschirms passen, werden nach unten verschoben Verschiebung erfolgt teilweise außerhalb der Bildschirmfläche Vorteil:Erstellung nicht so zeitaufwändig Nachteil: Wechselnde Bildschirmaufteilung Weißraum bei großen Bildschirmen
    Caption: : Layout Shifter Layout Pattern

Slide 13

    Off-Canvas-Layout
    Gleiches, mehrspaltiges Layout für alle Ausgabegeräte Layoutelemente, die in der Breite bzw. Höhe nicht mehr in die Anzeigefläche des Bildschirms passen, werden zur Seite bzw. nach oben/unten verschoben Verschiebung erfolgt außerhalb der Bildschirmfläche (Off-Canvas) Vorteil: Bildschirm wird immer voll ausgenutzt Es muss nur ein Layout erstellt werden Nachteil:Nur für geübte Benutzer geeignet -> ausgelagerte Elemente (Off-Canvas) müssen hineingeschoben werden
    Caption: : Off-Canvas-Layout Layout Pattern

Slide 14

    Aufbau von mobilen Webdesign
    Es gibt zwei Arten, wie man den Aufbau vom mobilen Webdesign anfangen kann (anfangen zu strukturieren):Graceful Degradation zierliche Verringerung von "groß" nach "klein" konventionell

Slide 15

Slide 16

    Gestaltungsraster
    Die Vielzahl an Geräten mit unterschiedlichen Abmessungen und Auflösungen macht pixelgenaues Layouten unmöglich. Sie müssen für jedes Gerät ein eigenes Layout vorsehen.Durch die Verwendung von (relativen) Prozentangaben umgehen Sie dieses Problem. Der Entwurf bezieht sich dabei nicht auf die Breite des Displays in Pixel, sondern auf seine maximale Breite von 100%.Prozentangaben führen dann auf allen Geräten zu einer proportional gleichen Aufteilung.Auch wenn später Prozent- und keine Pixelangaben verwendet werden, ist der Entwurf im Pixelraster sinnvoll. Auf diese Weise können Sie das Raster in Photoshop oder Illustrator planen.

Slide 17

    Gestaltungsraster
    Platzierung der InhalteIn diesem Rastersystem können Sie nun die Bereiche platzieren, die im Layout untergebracht werden müssen, z. B. Kopfbereich (Header) Navigationsbereich(e) Contentbereich Fußbereich (Footer)

Slide 18

    Navigation
    Auf Monitoren ist genug Platz vorhanden, um die Navigation vom IOnhalt einer Website zu trennen. Dies ist im Sinne einer klaren Benutzerführung wichtig. Leider ist der zur Verfügung stehende Platz bei mobilen Geräten, z. B. Smartphones, im Vergleich zu Monitoren sehr knapp. Erschwerend kommt hinzu, dass die Navigation mit dem Finger bedient werden muss, ohne dass dies zur Zielübung führen soll.Einige Navigationsarten haben bereits einen gewissen Standart erlangt.
    Caption: : Verschiedene Navigationsarten fürs mobile Webdesign

Slide 19

    Navigation – Icons
    IconsIcons sind Computernutzern bekannt, seit es grafische Oberflächen gibt. Ihre Bedienung ist einfach, der Doppelklickder Maus wird einfach durch das Antippen mit dem Finger ersetzt. Damit die Icon-Navigation funktioniert, muss diehinter dem Icon verborgene Funktion erkennbar sein. Unter der Grafik wird die Bedeutung deshalb oft zusätzlichin verbaler Form beschrieben.Das Problem von Icons ist, dass sie nach dem Antippen nicht mehr sichtbar sind. Der Nutzer muss immer erst zur Startseite zurückkehren.
    Caption: : A – Icons

Slide 20

    Navigation – Balken
    BalkenSmartphones werden üblicherweise in senkrechter Position gehalten. Aus diesem Grund bietet es sich an, die Navigationselemente untereinander anzuordnen. Ein Pfeil am rechten Rand weist darauf hin, dass weitere Informationen verfügbar sind. Auch hier besteht der Nachteil, dass zunächst eineRückkehr zur Startseite erfolgen muss, bevor der Nutzer eine andere Schaltfläche antippen kann.
    Caption: : B – Balken

Slide 21

    Navigation – Reiter
    Caption: : C – Reiter
    ReiterReiter bezeichnen die kleinen Schilder zur Beschriftung von Akten in Hängeregistern. Diese Metapher wurde schonzu Beginn der grafischen Benutzeroberflächen auf den Bildschirm übernommen – Verzeichnisse werden bis heuteals Aktenmappen dargestellt. Der Vorteil der Reiter-Navigation ist, dass diese immer sichtbar bleiben und damit sofort zu einem anderen Thema navigiert werden kann.

Slide 22

    Navigation – Karussell
    Caption: : D – Karussell
    KarussellDas Karussell macht sich die Eigenschaft zunutze, dass mit dem Finger sehr einfach horizontale Wischbewegungenausgeführt werden können. Dies entspricht im Grund dem Umblättern einer Buchseite. Die Technik eignet sich ideal zum Betrachten von Bildern, kann aber auch zur Navigationauf Webseiten genutzt werden. Durch kleine Kreise kann dem Nutzer symbolisiert werden, wo er sich befindet. Der Nachteil dabei ist, dass er das nächsteThema nicht erkennen kann.

Slide 23

    Navigation – Toolbar
    Caption: : E – Toolbar
    ToolbarDer untere, manchmal auch obere Displayrand wird häufig für eine sogenannte Toolbar (dt.: Werkzeugleiste) reserviert. Für die Darstellung der Toolbar werden üblicherweise grafische Elemente (Icons) verwendet.Die Toolbar zeigt Themen, die immer sichtbar bleiben sollen, beispielsweise die Hauptnavigation. Bei Apps dient die Toolbar auch oft dazu, um die gewünschten Einstellungen in der Software vorzunehmen. Auch im Betriebssystem wird mit Toolbars gearbeitet.

Slide 24

    Navigation – Menü
    Caption: : F – Menü
    MenüMenüs bieten den Vorteil, dass sich viele Unterpunkte hinter einer einzigen Schaltfläche verbergen lassen.Hierdurch wird Platz gespart. Menüs kombinieren somit den Vorteil von Icons mit dem der Toolbar. Die symbolischeDarstellung eines Menüs erfolgt durch waagrechte Balken oder kleine Quadrate.

Slide 25

    Navigation – Shoji
    ShojiDer Begriff bezeichnet die in Japan traditionell verwendeten verschiebbarenRaumteiler. Übertragen auf Software erfolgt bei Shoji die Navigation wie beim Karussell mit einer horizontalen Wischbewegung des Fingers.
    Caption: : G – Shoji

Slide 26

    Navigation – Suchfeld
    Caption: : H – Suchfeld
    SuchfeldDas Antippen des Suchfelds blendet die Tastatur ein, so dass danach Suchbegriffe eingegeben werden können.Alternativ ist eine Spracheingabe möglich. Vor allem die großen Portale wie Amazon, eBay oder YouTube kommenohne Suchfeld nicht aus.Es zeigt sich, dass meistens mehrere Methoden kombiniert werden, um dem Nutzer eine gewisse Wahlmöglichkeitzu lassen. Letztlich fehlt es aber sowohl den Anbietern als auch den Nutzern noch an Erfahrung, wie die optimale Navigation auf mobilen Endgeräten aussehen wird.

Slide 27

    Technische Aspekte
    Nicht nur die Gestaltung muss beim mobilen Webdesign beachtet werden, sondern auch die technischen Aspekte.Welche Fragen sind noch wichtig, die man sich beim mobilen Webdesign stellen sollte? Auf welchem Betriebssystem soll meine Website wiedergegeben werden? (iOS, Android, Microsoft) Möchte ich eine Website, eine Web-App, eine Native App oder eine Hybrid-App erstellen? -> Website: "Klassische" Variante. Man benötigt eine Internetverbindung und einen Browser.-> Web-App: Kombination aus Website und Anwendungsprogramm; eine Software, die im Browser funktioniert (z. B. Google Maps,      Google Mail, Google Drive etc.)-> Native App: Werden für die jeweiligen Betriebssysteme separat/exklusiv entwickelt-> Hybrid-Apps: Mischform zwischen Web-Apps und nativen Apps; machen sich die jeweiligen Vorteile zunutze, ermöglichen also      einen Zugriff auf die jeweiligen Systemressourcen, ohne dass für jedes Gerät eine eigene App programmiert werden muss.
Show full summary Hide full summary

Similar

U12 (Print) Ausschießen
Lena A.
U9 Farbcodierung
Lena A.
U2 Farbseparation
Lena A.
U10 (Print) Bild-Dateiformate
Lena A.
U6 Bildbearbeitung
Lena A.
U3 Netzwerkprotokolle
Lena A.
U1 Buchproduktion
Lena A.
U8 Datenbanken in CMS
Lena A.
U10 (Print) Gestaltungsraster
Lena A.
U4 Hardwareschnittstellen
Lena A.
U8 SQL
Lena A.