5372798
U5 Mobiles Webdesign
Descripción
Resumen del Recurso
Diapositiva 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
Diapositiva 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
Diapositiva 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.
Diapositiva 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
Diapositiva 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.
Diapositiva 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
Diapositiva 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
Diapositiva 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
Diapositiva 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
Pie de foto: : Tiny Tweaks Layout Pattern
Diapositiva 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
Pie de foto: : Mostly Fluid Layout Pattern
Diapositiva 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
Pie de foto: : Column Drop Layout Pattern
Diapositiva 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
Pie de foto: : Layout Shifter Layout Pattern
Diapositiva 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
Pie de foto: : Off-Canvas-Layout Layout Pattern
Diapositiva 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
Diapositiva 15
Aufbau von mobilen Webdesign
Progressive Enhancement
fortlaufende Erweiterung
von "klein" nach "groß"
Mobile First
Diapositiva 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.
Diapositiva 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)
Diapositiva 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.
Pie de foto: : Verschiedene Navigationsarten fürs mobile Webdesign
Diapositiva 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.
Pie de foto: : A – Icons
Diapositiva 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.
Pie de foto: : B – Balken
Diapositiva 21
Navigation – Reiter
Pie de foto: : 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.
Diapositiva 22
Navigation – Karussell
Pie de foto: : 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.
Diapositiva 23
Navigation – Toolbar
Pie de foto: : 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.
Diapositiva 24
Navigation – Menü
Pie de foto: : 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.
Diapositiva 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.
Pie de foto: : G – Shoji
Diapositiva 26
Navigation – Suchfeld
Pie de foto: : 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.
Diapositiva 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.
¿Quieres crear tus propias Diapositivas gratis con GoConqr? Más información.