Die nexum AG ist Beratung und Agentur für digitale Medien.U can touch itWorauf achten wenn man die Website touchfähig mach...
2Global Unit Shipments Nicht-Touch vs. Touch-Devices
3Die Website auf verschiedenen Geräten
4Flash Animationen oder Funktionalitäten durch modernesHTML ersetzen.
5Kein Flash Video player – .mp4 nutzen und richtig kodieren           Flash                          Mp4
6Die Website schmaler als 980 px machen. Andernfallsschrumpft die Seite oder man scrollt horizontal (iPad).
7Schöne Typographie auf dem iPad – Anderer Leseabstand.                       www.zeit.de
8Größe von Touch-Targets und Abstände der ElementeBeste Größe des Touch-         Kleinste Touch-Target         Minimaler A...
9Touch-Target Größe in der Realität
10Interaction Feedback                       -webkit-tap-highlight-color: <css-color>
11Mouse Over Menü…
12… bekommt ein Schließen-Icon
13Komplizierte Hover Menüs sollten nicht zum Einsatzkommen
14Die Website muss schnell bleiben – Nicht zu viel Animation
15Kontrastreiche Farben für bessere Lesbarkeit               http://www.flickr.com/photos/matthewcooper/4749603193/
16Lightboxen und Ebenen sind problematisch
17Scrollbare Div-Boxen haben keine Scrollbars auf Touch-Geräten         Desktop                iPhone                    i...
18Data Input so kurz wie möglich halten
19HTML5 Input Types nutzendatetime-local search tel url email datetime date monthweek time number range color     Telefon ...
20Eingabe, Speichern und Ausdrucken von PDFs funktioniertnur bedingt auf Touch-Geräten
21Danke        Tamim Swaid, Konzepter & Berater        tamim.swaid@nexum.de Bild   Tel. +49 221 56939 - 4149        nexum ...
Nächste SlideShare
Wird geladen in …5
×

U can touch it

1.079 Aufrufe

Veröffentlicht am

M-Days 2012
Messe Frankfurt
Tamim Swaid, Berater
nexum AG
Das Blog der Messe Frankfurt zur Digitalisierung des Geschäftslebens:
http://connected.messefrankfurt.com/de/

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.079
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
557
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

U can touch it

  1. 1. Die nexum AG ist Beratung und Agentur für digitale Medien.U can touch itWorauf achten wenn man die Website touchfähig machtTamim Swaid, Berater, nexum AGM-Days Frankfurt 12.06.2011 – 2.2.2012
  2. 2. 2Global Unit Shipments Nicht-Touch vs. Touch-Devices
  3. 3. 3Die Website auf verschiedenen Geräten
  4. 4. 4Flash Animationen oder Funktionalitäten durch modernesHTML ersetzen.
  5. 5. 5Kein Flash Video player – .mp4 nutzen und richtig kodieren Flash Mp4
  6. 6. 6Die Website schmaler als 980 px machen. Andernfallsschrumpft die Seite oder man scrollt horizontal (iPad).
  7. 7. 7Schöne Typographie auf dem iPad – Anderer Leseabstand. www.zeit.de
  8. 8. 8Größe von Touch-Targets und Abstände der ElementeBeste Größe des Touch- Kleinste Touch-Target Minimaler Abstand zwischenTargets ist 9mm/34px Größe ist 7mm/26px Elementen ist 2mm/8px“The width of a finger limits the density of items on screen.If the items are too close, the user will not be able to choose a single one.”
  9. 9. 9Touch-Target Größe in der Realität
  10. 10. 10Interaction Feedback -webkit-tap-highlight-color: <css-color>
  11. 11. 11Mouse Over Menü…
  12. 12. 12… bekommt ein Schließen-Icon
  13. 13. 13Komplizierte Hover Menüs sollten nicht zum Einsatzkommen
  14. 14. 14Die Website muss schnell bleiben – Nicht zu viel Animation
  15. 15. 15Kontrastreiche Farben für bessere Lesbarkeit http://www.flickr.com/photos/matthewcooper/4749603193/
  16. 16. 16Lightboxen und Ebenen sind problematisch
  17. 17. 17Scrollbare Div-Boxen haben keine Scrollbars auf Touch-Geräten Desktop iPhone iPhone „Problem“ fixed in iOS 5
  18. 18. 18Data Input so kurz wie möglich halten
  19. 19. 19HTML5 Input Types nutzendatetime-local search tel url email datetime date monthweek time number range color Telefon URL E-Mail
  20. 20. 20Eingabe, Speichern und Ausdrucken von PDFs funktioniertnur bedingt auf Touch-Geräten
  21. 21. 21Danke Tamim Swaid, Konzepter & Berater tamim.swaid@nexum.de Bild Tel. +49 221 56939 - 4149 nexum AG Maarweg 149 – 161, 50825 Köln

×