Mobile Web: WenigerInhalt?Sollen oder müssen wir auf mobilen Gerätenmit kleinem Bildschirm weniger Inhaltzeigen?Januar 201...
Agenda 16.30   Begrüssung 16.40   Sollen wir weniger Inhalt anzeigen            3 Thesen            Mobile spezifische S...
Sollen wir denn überhauptweniger Inhalt anzeigen?
These: «Seperate Mobile Site»«In all areas of user experience— feature set, IA, writing, images, andmore— mobile usability...
Beispiel: Typische Situation heuteSeparate mobile Seite mit eigener URL. Mobile Seiteohne responsives Design (keine Breakp...
Mobile Geräte bilden heute ein Kontinuum vonBildschirmgrössenDiese Grössenabstufung setzt sich auch bei Netbooks und Lapto...
Die meisten Online Käufer beginnen heute einShopping auf dem Smartphone oder Tablet!                                65%   ...
Die meisten Medienkonsumenten benutzen heutemehrere Geräte parallel                                         81%           ...
Etwa die Hälfte aller Interaktionen werden zu Hause mitmobilen Geräten durchgeführt                                       ...
These «Mobile First»Es braucht einen zentralen Content mit einem liquiden Layoutkonzeptdas auf allen Geräten funktioniert....
These «Content First»Es braucht eine zentrale Contentverwaltung mit mehreren ContentVersionen und einem liquiden Layoutkon...
Müssen wir weniger Inhaltanzeigen?Teil 1: Patterns für fluide Layouts
Schon immer wurden fluide Layouts verwendet      A           B                 A             B   Fixed Size   Auto Size   ...
Wenn die minimalen Grössen keinen Platz mehr habenwurden horizontale Scrollbars angezeigt      A           B   Fixed Size ...
Neu werden Breakpoints vorgesehen, dieLayoutveränderungen auslösen                                    A      A         B  ...
Typisches Beispiel sind Bilder und Texte
In der Realität gibt es mehr oder weniger komplexeVerschachtelungen von Inhalten
Beispiel von Umbruch: Demo                      http://www.palentir.net
Zwischenschritte sind denkbarKonzept der Zwischenschritte auch beschrieben in «Christoph Zillgens: Responsive Webdesign, 2...
Zwischenschritte sind denkbar                      In diesem Beispiel ist                      der Text immer gleich      ...
Layout mit Zwischenschritten: Demo                       http://www.orestis.nl/
Durch neue Layouts können aber auch andere Gewichtungenentstehen                     B            A                       ...
Veränderung der Gewichtung: Demo                    http://www.anderssonwise.com/
Auch in diesem Fall können Zwischenschritte helfen                                  B                                     ...
Schwierig wird es bei Layouts ohne Spalten                                       Werden keine mehrspaltigen Layouts       ...
Layout ohne Spalten: Demo                     http://www.superyachtwifi.com
Dann kann eine Änderung der Reihenfolge helfen                                                                            ...
Müssen wir weniger Inhaltanzeigen?Teil 2: Patterns für adaptiven Content
Manchmal sollte auch der Content selber gekürzt werden  Wahlen im Kongresshaus: Wird Messi                                ...
Den Text einfach abschneiden ist dabei nicht die beste Alternative  Wahlen im Kongresshaus: Wird Messi                    ...
Verschiedene Versionen des Contents können verwaltet werden  Wahlen im Kongresshaus: Wird Messi                           ...
«Progressive Disclosure» für sehr lange TexteBei sehr langen Inhalten kann es sinnvoll sein, aufGeräten mit kleinerem Scre...
«Progressive Disclore» für gezielteZusatzinformationen
Teaser sind eine Form von «Progressive Disclosure»und können Inhalte in verdichteter Form wiedergeben           Obige Abbi...
Bilder lassen sich ab einem bestimmten Grad nicht mehr nurverkleinern, sie müssen geschnitten werden
Dazu gibt es ein Konzept des «Focal Points». Eineautomatische Optimierung des Bildes ist dannmöglich.             Siehe da...
Dazu gibt es ein Konzept des «Focal Points». Eineautomatische Optimierung des Bildes ist dannmöglich.Dazu existieren sowoh...
«Focal Points»: Demo            Siehe dazu: http://designshack.net/tutorialexamples/focalpoint/index.html
Manchmal braucht es Bilder auch in unterschiedlichenAusrichtungen  Wahlen im Kongresshaus: Wird Messi                     ...
Bei Grafiken können individuelle Ausschnitte odersogar andere Darstellungen notwendig sein                       Siehe daz...
Was tun bei breiten Tabellen?Name        Vorname      Adresse             PLZ    OrtTomas       Wunderlin    Benztalstrass...
Tabellen können häufig anders dargestellt werdenName        Vorname      Adresse             PLZ    OrtTomas       Wunderl...
Manchmal sollen Spalten aber verglichen werdenkönnenUnternehmen     Umsatz 2009   Umsatz 2010   Umsatz 2011   Umsatz 2012A...
Swipebare Bereich oder selektierebare Spalten Unternehmen     Umsatz 2010   Umsatz 2011   Unternehmen     Umsatz 2010   Um...
Müssen wir weniger Inhaltanzeigen?Teil 3: Patterns für mobile Navigation
Im «Select Pattern» wird die Navigation in einemDropdown abgebildet       Lösungen   Produkte   Über uns   Kontakt        ...
«Select Pattern»: Demo                         http://ux.crealogix.com
Im Toggle-Menü wird ein Menü zwischen dem Inhaltund dem Header eingeschoben      Lösungen   Produkte   Über uns    Kontakt...
«Toggle Pattern»: Demo                         http://bostonglobe.com/
Es wird ein Menü von der Seite eingeschoben.      Lösungen   Produkte   Über uns   Kontakt                                ...
Seitliches Menü: Demo                        http://mcdpartners.com/
Das Toggle-Menü kann auch als «Multi Toggle»implementiert sein                                 X                       X  ...
Eine Kombination von Toggle und «Landing Pages»für die Subnavigation ist möglich                               X          ...
Toggle und «Landing Page»: Demo                    http://worldwildlife.org/species
Im Toggle Pattern mit Drilldown unterstützt dasToggle-Menü eine Drilldown-Funktion                                        ...
Toggle mit Drilldown: Demo                     http://www.sony.com/index.php
Mit einem «Footer Anchor» Pattern wird im Header einAnchor auf ein Menü im Footer gelegt                                  ...
«Footer Anchor»: Demo                    http://builtwithmomentum.com
Kombination von Patterns: Zum Beispiel einfachesToggle mit erweiterter Footer-Navigation                         X        ...
Kombination von Patterns: Zum Beispiel «MultiToggle» und Drilldown mit «Landing Pages»                          X         ...
Implementierung bei Michigian University
Erweiterung: Gerätespezisches MenüDas Menü führt im kleinen Device die Menüpunkte zuerst an, die vermutlichmehr benutzt we...
Müssen wir weniger Inhaltanzeigen?Teil 5: Für alte Browser ProgressiveEnhancement
Idee von «Progressive Enhancement»                             Enhanced                 Basic            Screengrösse     ...
Beispiel für «Progressive Enhancement» Geschützte Tiere Wie der WWF Tiere schützt. Helfen Sie mit.  Mitglied werden  Warum...
Beispiel für «Progressive Enhancement» Geschützte Tiere                              Geschützte Tiere                     ...
Was sind dieSchlussfolgerungen?
Mit einem guten responsiven Design-Ansatz gibtes fast keinen Grund, nicht denselben Inhaltanzuzeigen.PS: Applikationen sin...
Eine nachhaltige Webstrategie bestehtheute aus folgenden Elementen   Sorgfältige Erhebung der Nutzerprofile und    Nutzer...
Anhang
Weitere Literatur zum ThemaBücherWebseiten
Dienstleistungen von CREALOGIX   Verankern einer multidevice fähigen UX Strategie   Erarbeiten von Benutzergruppen und S...
Nächste SlideShare
Wird geladen in …5
×

Mobile Web: Weniger Inhalt?

4.389 Aufrufe

Veröffentlicht am

Interaction Patterns zu Mobile Content, Responsive Design und zu Navigation in mobilen Webseiten.

0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.389
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2.842
Aktionen
Geteilt
0
Downloads
27
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mobile Web: Weniger Inhalt?

  1. 1. Mobile Web: WenigerInhalt?Sollen oder müssen wir auf mobilen Gerätenmit kleinem Bildschirm weniger Inhaltzeigen?Januar 2013, Toni Steimle
  2. 2. Agenda 16.30 Begrüssung 16.40 Sollen wir weniger Inhalt anzeigen 3 Thesen Mobile spezifische Szenarien? 17.10 Müssen wir weniger Inhalt anzeigen Patterns zu Layouting Patterns zu mobilem Content Patterns zu mobiler Navigation 17.40 Diskussion 18.00 Apéro Riche
  3. 3. Sollen wir denn überhauptweniger Inhalt anzeigen?
  4. 4. These: «Seperate Mobile Site»«In all areas of user experience— feature set, IA, writing, images, andmore— mobile usability requires stricter and more scaled-back designthan desktop usability. That’s why you need a separate mobile site.Simply using responsive Web design to make the full site accessibleon mobile devices often results in a substandard mobile UX. » (JakobNielsen, 2012) Mobiler User Nicht mobiler User Siehe dazu «Jakob Nielsen, Raluca Budiu: Mobile Usability, 2012»
  5. 5. Beispiel: Typische Situation heuteSeparate mobile Seite mit eigener URL. Mobile Seiteohne responsives Design (keine Breakpoints). MobileSeite hat einen reduzierter Umfang. Navigation stattContent first. www.hsr.ch und m.hsr.ch als Beispiele einer Desktop und mobilen Webseite
  6. 6. Mobile Geräte bilden heute ein Kontinuum vonBildschirmgrössenDiese Grössenabstufung setzt sich auch bei Netbooks und Laptops sowie grossen Monitorenfort. Dazu kommen noch die Ausrichtung der Devices (Portrait, Landscape) undunterschiedliche Pixeldichten.Rein duale Sicht: «Mobile – Desktop» macht keinen Sinn. Siehe zum Beispiel die Aufstellung von Viljamin Salminen: http://ebookbrowse.com/device-map-2012-pdf-d383364295
  7. 7. Die meisten Online Käufer beginnen heute einShopping auf dem Smartphone oder Tablet! 65% Der untersuchten Personen starten ein Shopping mit einem 49% Schicken sich dazu Emails Smartphone und 52% Navigieren direkt zur Seite führen es an einem 63% Suchen erneut anderen Device fort Siehe dazu die Google Studie vom August 2012: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf. Zahlen basieren auf einem Sample von 1600 Personen aus LA, Boston und Austin
  8. 8. Die meisten Medienkonsumenten benutzen heutemehrere Geräte parallel 81% der untersuchten Personen benutzen das Smartphone während dem sie TV schauen! Siehe dazu die Google Studie vom August 2012: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf. Zahlen basieren auf einem Sample von 1600 Personen aus LA, Boston und Austin
  9. 9. Etwa die Hälfte aller Interaktionen werden zu Hause mitmobilen Geräten durchgeführt 47%Smartphones werden nicht nur im mobilen Kontexteingesetzt sondern ganz intensiv auch zu Hause. Siehe dazu die Google Studie vom August 2012: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf. Zahlen basieren auf einem Sample von 1600 Personen aus LA, Boston und Austin
  10. 10. These «Mobile First»Es braucht einen zentralen Content mit einem liquiden Layoutkonzeptdas auf allen Geräten funktioniert. Am einfachsten ist es dabei mit denkleinsten Geräten zu beginnen. Siehe dazu «LUKE WROBLEWSKI: Mobile First, 2012, A Book Apart»
  11. 11. These «Content First»Es braucht eine zentrale Contentverwaltung mit mehreren ContentVersionen und einem liquiden Layoutkonzept das auf allen Gerätenfunktioniert Siehe dazu «Karen McGrane: Content Strategy for Mobile, 2012, A Book Apart»
  12. 12. Müssen wir weniger Inhaltanzeigen?Teil 1: Patterns für fluide Layouts
  13. 13. Schon immer wurden fluide Layouts verwendet A B A B Fixed Size Auto Size Fixed Size Minimal Size
  14. 14. Wenn die minimalen Grössen keinen Platz mehr habenwurden horizontale Scrollbars angezeigt A B Fixed Size Minimal
  15. 15. Neu werden Breakpoints vorgesehen, dieLayoutveränderungen auslösen A A B A B B
  16. 16. Typisches Beispiel sind Bilder und Texte
  17. 17. In der Realität gibt es mehr oder weniger komplexeVerschachtelungen von Inhalten
  18. 18. Beispiel von Umbruch: Demo http://www.palentir.net
  19. 19. Zwischenschritte sind denkbarKonzept der Zwischenschritte auch beschrieben in «Christoph Zillgens: Responsive Webdesign, 2012, Hanser»
  20. 20. Zwischenschritte sind denkbar In diesem Beispiel ist der Text immer gleich breit.Konzept der Zwischenschritte auch beschrieben in «Christoph Zillgens: Responsive Webdesign, 2012, Hanser»
  21. 21. Layout mit Zwischenschritten: Demo http://www.orestis.nl/
  22. 22. Durch neue Layouts können aber auch andere Gewichtungenentstehen B A A A C B B Der Layoutcontainer B ist plötzlich viel wichtiger. C C
  23. 23. Veränderung der Gewichtung: Demo http://www.anderssonwise.com/
  24. 24. Auch in diesem Fall können Zwischenschritte helfen B A A A C B C B Der Layoutcontainer C B und C werden nicht plötzlich viel grösser. Beispiel ist auch beschrieben in : http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/
  25. 25. Schwierig wird es bei Layouts ohne Spalten Werden keine mehrspaltigen Layouts eingesetzt wird eine geschickte Umbruchstaktik schwierig. A A B B
  26. 26. Layout ohne Spalten: Demo http://www.superyachtwifi.com
  27. 27. Dann kann eine Änderung der Reihenfolge helfen Dann wird nicht der benötigte Raum aber die Reihenfolge für die nötige B Gewichtung sorgen. B C C A Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d
  28. 28. Müssen wir weniger Inhaltanzeigen?Teil 2: Patterns für adaptiven Content
  29. 29. Manchmal sollte auch der Content selber gekürzt werden Wahlen im Kongresshaus: Wird Messi Wahlen im auch 2012 Weltfussballer des Jahres? Kongresshaus: Wird Messi auch 2012 Weltfussballer des Jahres? In Zürich wird am Montag In Zürich wird am Montag der beste Fussballer des der beste Fussballer des Jahres 2012 erkoren. Die Gegner Messis sind Jahres 2012 erkoren. Die Cristiano Ronaldo und Andres Iniesta. Gegner Messis sind Cristiano Ronaldo und Andres Iniesta. Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d
  30. 30. Den Text einfach abschneiden ist dabei nicht die beste Alternative Wahlen im Kongresshaus: Wird Messi Wahlen im auch 2012 Weltfussballer des Jahres? Kongresshaus: Wird Messi auch… In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren…. In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren. Die Gegner Messis sind Cristiano Ronaldo und Andres Iniesta. Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d
  31. 31. Verschiedene Versionen des Contents können verwaltet werden Wahlen im Kongresshaus: Wird Messi Wird Messi auch 2012 auch 2012 Weltfussballer des Jahres? Weltfussballer des Jahres? In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren. In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren. Die Gegner Messis sind Nicht abgeschnitten sondern Cristiano Ronaldo und Andres Iniesta. gekürzt. Siehe dazu beispielsweise: http://storify.com/meetcontent/creating-and-planning-content-for-responsive-web-d
  32. 32. «Progressive Disclosure» für sehr lange TexteBei sehr langen Inhalten kann es sinnvoll sein, aufGeräten mit kleinerem Screen nicht den ganzen Inhaltsofort anzuzeigen.
  33. 33. «Progressive Disclore» für gezielteZusatzinformationen
  34. 34. Teaser sind eine Form von «Progressive Disclosure»und können Inhalte in verdichteter Form wiedergeben Obige Abbildung ist nur ein Beispiel und eine freie Erfindung von CREALOGIX.
  35. 35. Bilder lassen sich ab einem bestimmten Grad nicht mehr nurverkleinern, sie müssen geschnitten werden
  36. 36. Dazu gibt es ein Konzept des «Focal Points». Eineautomatische Optimierung des Bildes ist dannmöglich. Siehe dazu: http://designshack.net/tutorialexamples/focalpoint/index.html
  37. 37. Dazu gibt es ein Konzept des «Focal Points». Eineautomatische Optimierung des Bildes ist dannmöglich.Dazu existieren sowohl server- als auchclient- seitige Beispiele. Siehe dazu: http://designshack.net/tutorialexamples/focalpoint/index.html
  38. 38. «Focal Points»: Demo Siehe dazu: http://designshack.net/tutorialexamples/focalpoint/index.html
  39. 39. Manchmal braucht es Bilder auch in unterschiedlichenAusrichtungen Wahlen im Kongresshaus: Wird Messi Wird Messi auch 2012 auch 2012 Weltfussballer des Jahres? Weltfussballer des Jahres? In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren.. In Zürich wird am Montag der beste Fussballer des Jahres 2012 erkoren. Die Gegner Messis sind Cristiano Ronaldo und Andres Iniesta. Beispiel aus dem Tages-Anzeiger vom 7.1.2013
  40. 40. Bei Grafiken können individuelle Ausschnitte odersogar andere Darstellungen notwendig sein Siehe dazu: http://yiibu.com/
  41. 41. Was tun bei breiten Tabellen?Name Vorname Adresse PLZ OrtTomas Wunderlin Benztalstrasse 23 8620 WetzikonMiriam Hofstetter Brunnenstrasse 3 8610 UsterPeter Ott Werkweg 13 8630 RütiHanspeter Kummer Benztalstrasse 24 8005 Zürich
  42. 42. Tabellen können häufig anders dargestellt werdenName Vorname Adresse PLZ OrtTomas Wunderlin Benztalstrasse 23 8620 WetzikonMiriam Hofstetter Brunnenstrasse 3 8610 Uster Tomas WunderlinPeter Ott Werkweg 13 8630 Rüti Benztalstrasse 23Hanspeter Kummer Benztalstrasse 24 8005 Zürich 8620 Wetzikon Miriam Hofstetter Brunnenstrasse 3 8610 Uster Peter Ott Werkweg 13 8630 Rüti Hanspeter Kummer Benztalstrasse 24 8005 Zürich
  43. 43. Manchmal sollen Spalten aber verglichen werdenkönnenUnternehmen Umsatz 2009 Umsatz 2010 Umsatz 2011 Umsatz 2012ABB 20 Mrd 22 Mrd 23 Mrd 25 MrdRoche 18 Mrd 23 Mrd 36 Mrd 38 MrdUBS 11 Mrd 12 Mrd 18 Mrd 19 MrdCredit Suisse 11 Mrd 12 Mrd 18 Mrd 19 Mrd
  44. 44. Swipebare Bereich oder selektierebare Spalten Unternehmen Umsatz 2010 Umsatz 2011 Unternehmen Umsatz 2010 Umsatz 2011 Umsatz 2009 Umsatz 2010 ABB 22 Mrd 23 Mrd ABB 22 Mrd 23 Mrd Umsatz 2011 Roche 23 Mrd 36 Mrd Roche 23 Mrd Umsatz 2012 36 Mrd UBS 12 Mrd 18 Mrd UBS 12 Mrd 18 Mrd Credit Suisse 12 Mrd 18 Mrd Credit Suisse 12 Mrd 18 Mrd Swipe-barer Bereich
  45. 45. Müssen wir weniger Inhaltanzeigen?Teil 3: Patterns für mobile Navigation
  46. 46. Im «Select Pattern» wird die Navigation in einemDropdown abgebildet Lösungen Produkte Über uns Kontakt Navigation Navigation Lösungen Produkte Über uns Kontakt Die Navigation verdichtet sich in ein Dropdown
  47. 47. «Select Pattern»: Demo http://ux.crealogix.com
  48. 48. Im Toggle-Menü wird ein Menü zwischen dem Inhaltund dem Header eingeschoben Lösungen Produkte Über uns Kontakt X Lösungen Produkte Über uns Kontakt Die Navigation verdichtet sich in ein Toggle. Dieser schiebt sich zwischen Inhalt und Header.
  49. 49. «Toggle Pattern»: Demo http://bostonglobe.com/
  50. 50. Es wird ein Menü von der Seite eingeschoben. Lösungen Produkte Über uns Kontakt X Lösungen Produkte Über uns Kontakt Die Navigation verdichtet sich in eine Seitliche Navigation. Diese schiebt sich neben den Inhalt.
  51. 51. Seitliches Menü: Demo http://mcdpartners.com/
  52. 52. Das Toggle-Menü kann auch als «Multi Toggle»implementiert sein X X + Lösungen + Lösungen + Produkte - Produkte Über uns Produkt 1 Kontakt Produkt 2 + Produkt 3 Über uns Kontakt Das Toggle beinhaltet eine aufklappbare Subnavigation
  53. 53. Eine Kombination von Toggle und «Landing Pages»für die Subnavigation ist möglich X Lösungen Lösungen Produkte Über uns Kontakt Anstatt ein «Multi Toggle» kann bei umfangreichen Inhalten auch ein einfaches Toggle mit Landing Pages verwendet werden.
  54. 54. Toggle und «Landing Page»: Demo http://worldwildlife.org/species
  55. 55. Im Toggle Pattern mit Drilldown unterstützt dasToggle-Menü eine Drilldown-Funktion Das Menü ist ein eigener Bereich in dem man hineindrillt. Der Content X X bleibt bestehen, bis man bei der Lösungen Produkt 1 Produkte Produkt 2 untersten Ebene angelangt ist. Über uns Produkt 3 Kontakt
  56. 56. Toggle mit Drilldown: Demo http://www.sony.com/index.php
  57. 57. Mit einem «Footer Anchor» Pattern wird im Header einAnchor auf ein Menü im Footer gelegt Die Navigation befindet sich am Ende, kann aber über einen Anker angesprungen werden. Lösungen Produkte Über uns Kontakt Lösungen Produkte Über uns Kontakt
  58. 58. «Footer Anchor»: Demo http://builtwithmomentum.com
  59. 59. Kombination von Patterns: Zum Beispiel einfachesToggle mit erweiterter Footer-Navigation X Lösungen Lösungen Lösung1 Produkte Über uns Kontakt Lösungen Lösung 1 Lösung 2 Produkte Produkt 1 Produkt 2 Produkt 3 Über uns Kontakt
  60. 60. Kombination von Patterns: Zum Beispiel «MultiToggle» und Drilldown mit «Landing Pages» X XLösungen + Lösungen + Lösungen Lösung1 + Produkte - Produkte Über uns Produkt 1 Kontakt Produkt 2 + Produkt 3 Über uns Kontakt
  61. 61. Implementierung bei Michigian University
  62. 62. Erweiterung: Gerätespezisches MenüDas Menü führt im kleinen Device die Menüpunkte zuerst an, die vermutlichmehr benutzt werden Obige Abbildung ist nur ein Beispiel und eine freie Erfindung von CREALOGIX.
  63. 63. Müssen wir weniger Inhaltanzeigen?Teil 5: Für alte Browser ProgressiveEnhancement
  64. 64. Idee von «Progressive Enhancement» Enhanced Basic Screengrösse Experience Experience BrowserfähigkeitenIn einem Progressive-Enhancement-Ansatz werden Anwendern ohnemodernen Browser ein alternative Experience geboten.
  65. 65. Beispiel für «Progressive Enhancement» Geschützte Tiere Wie der WWF Tiere schützt. Helfen Sie mit. Mitglied werden Warum Sie beim WWF unbedingt Mitglied werden sollten. «Basic Experience»
  66. 66. Beispiel für «Progressive Enhancement» Geschützte Tiere Geschützte Tiere Wie der WWF international Tiere schützt. Helfen Sie mit. Wie der WWF Tiere schützt. Helfen Sie mit. Mitglied werden Warum Sie beim WWF «Enhanced Experience» unbedingt Mitglied werden sollten. «Basic Experience»
  67. 67. Was sind dieSchlussfolgerungen?
  68. 68. Mit einem guten responsiven Design-Ansatz gibtes fast keinen Grund, nicht denselben Inhaltanzuzeigen.PS: Applikationen sind eine andere Fragestellung. Siehe dazu «Karen McGrane: Content Strategy for Mobile, 2012, A Book Apart»
  69. 69. Eine nachhaltige Webstrategie bestehtheute aus folgenden Elementen Sorgfältige Erhebung der Nutzerprofile und Nutzerszenarien Schulung der Content-Verantwortlichen Definition eines reduzierten und fokussierten Contents mit Contentvarianten Definition eines liquiden Layout- und Navigationskonzeptes Umsetzung mit «Progressive Enhancement»
  70. 70. Anhang
  71. 71. Weitere Literatur zum ThemaBücherWebseiten
  72. 72. Dienstleistungen von CREALOGIX Verankern einer multidevice fähigen UX Strategie Erarbeiten von Benutzergruppen und Szenarien Erarbeiten einer responsiblen IA Konzept für responsible Layouts Webdesign bei responsiblen Layouts Training für Erstellung von usable und responsive Content Training für mobiles und responsibles Formulardesign

×