U5 Mobiles Webdesign

Layout vor MFRWD

• MFRWD = Mobile First Responsive Webdesign
• Vor 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

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

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.

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

Adaptives Layout

• Adaptives Layout
• adaptive = 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«.
• 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.

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

Media Queries

• 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.

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

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
• 
• Bildunterschrift: Tiny Tweaks Layout Pattern

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
• 
• Bildunterschrift: Mostly Fluid Layout Pattern

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
• 
• Bildunterschrift: Column Drop Layout Pattern

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
• 
• Bildunterschrift: Layout Shifter Layout Pattern

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
• 
• Bildunterschrift: Off-Canvas-Layout Layout Pattern

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

Aufbau von mobilen Webdesign

• Progressive Enhancement
• fortlaufende Erweiterung
• von "klein" nach "groß"
• Mobile First
• 

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.
• 

Gestaltungsraster

• Platzierung der Inhalte
• In 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)
• 

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.
• 
• Bildunterschrift: Verschiedene Navigationsarten fürs mobile Webdesign

Navigation – Icons

• Icons
• Icons sind Computernutzern bekannt, seit es grafische Oberflächen gibt. Ihre Bedienung ist einfach, der Doppelklick
• der Maus wird einfach durch das Antippen mit dem Finger ersetzt. Damit die Icon-Navigation funktioniert, muss die
• hinter dem Icon verborgene Funktion erkennbar sein. Unter der Grafik wird die Bedeutung deshalb oft zusätzlich
• in 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.
• 
• Bildunterschrift: A – Icons

Navigation – Balken

• Balken
• Smartphones 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 eine
• Rückkehr zur Startseite erfolgen muss, bevor der Nutzer eine andere Schaltfläche antippen kann.
• 
• Bildunterschrift: B – Balken

Navigation – Reiter

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

Navigation – Karussell

• 
• Bildunterschrift: D – Karussell
• Karussell
• Das Karussell macht sich die Eigenschaft zunutze, dass mit dem Finger sehr einfach horizontale Wischbewegungen
• ausgefü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 Navigation
• auf Webseiten genutzt werden.
• Durch kleine Kreise kann dem Nutzer symbolisiert werden, wo er sich befindet. Der Nachteil dabei ist, dass er das nächste
• Thema nicht erkennen kann.

Navigation – Toolbar

• 
• Bildunterschrift: E – Toolbar
• Toolbar
• Der 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.

Navigation – Menü

• 
• Bildunterschrift: 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 symbolische
• Darstellung eines Menüs erfolgt durch waagrechte Balken oder kleine Quadrate.

Navigation – Shoji

• Shoji
• Der 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.
• 
• Bildunterschrift: G – Shoji

Navigation – Suchfeld

• 
• Bildunterschrift: H – Suchfeld
• Suchfeld
• Das 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 kommen
• ohne Suchfeld nicht aus.
• Es zeigt sich, dass meistens mehrere Methoden kombiniert werden, um dem Nutzer eine gewisse Wahlmöglichkeit
• zu 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.

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.