Touchscreens

4 Beiträge

  • Touch Gesture Cards

    Touch Gesture Cardslukew.com

    Auf dem Blog von Luke W kannst du dir eine hilfreiche Übersicht der gängigen Touch-Gesten für mobile Geräte (Touch Gesture Cards) herunterladen. Die Übersicht ist in praktischen Grafiken mit kurzen beschreibenden Texten umgesetzt und du kannst dir die einzelnen Touch.Gesten sogar auf einzelne Kärtchen ausdrucken. Natürlich werden die Standard-Gesten wie Tab (leichtes Antippen mit der Fingerspitze) oder Swipe/Flick (schnelles Wischen über den Bildschirm, z.B. zum Scrollen oder Weiterblättern) erklärt. Aber auch aufwändigere Gesten wie Rotieren, Skalieren oder das Schließen von Elementen per Fingerbewegung (oft ist eine Abfolge von Bewegungen nötig) sind aufgelistet.

    Mit Hilfe der Kärtchen kannst du dich leicht mit den gängigen Gesten, die auf Touchscreens unterstützt werden, vertrauter machen. Durch die farbige Unterteilung werden alle Gesten in Basis-Gesten, Core-, Navigations-, Drawing-, Object Related-, Apple iOS-, Android- oder Windows Phone 7-Gesten sortiert.

    Und auch wenn derzeit noch nicht alle Touch-Gesten gleichermaßen in den verschiedenen mobilen Web-Browsern unterstützt werden, finde ich es dennoch sinnvoll sich bereits mit den gängigen Touch-Gestures auseinanderzusetzen. Effekte wie Swipe können ja bereits in Bilder-Slidern (siehe PhotoSwipe oder RoyalSlider) zum Einsatz kommen.

  • Touch Target Sizes

    ·
    Touch Target Sizeslukew.com
    Maße für Touchscreen-Buttons

    Im Artikel „Touch Target Sizes“ von Luke W findest du hilfreiche Richtlinien für die Gestaltung optimierter Touchscreen-Buttons. Die dort aufgeführten Button-Maße wurden aus verschiedenen Quellen zusammen getragen (die Quellen wie z.B. die iPhone Human Interface Guidelines werden im Artikel mit verlinkt).

    Die Richtlinien und Tipps sind wirklich hilfreich, z.B. wenn du an einem responsive Webdesign arbeitest. Denn Buttons für die Bedienung mit dem Finger zu gestalten, ist noch einmal eine ganz andere Aufgabe, als Buttons für die Bedienung mit der Maus.

    Schließlich müssen Button-Größen an die Größe einer Fingerspitze angepasst werden. Und auch die Abstände zwischen einzelnen Buttons sollten großzügig bemessen werden, so dass man sich nicht ausversehen vertippen kann. Die Angaben von Apple für einen standardmäßigen Touchscreen-Button sind z.B. 44x44pt. Das wirkt im ersten Moment sehr groß, als Trick kann man aber auch nur die anwählbare Fläche in diesem Maß wählen und den wirklich sichtbaren Button kleiner gestalten.

  • 10 praktische Tipps für die Entwicklung von responsive Webdesigns

    ·

    Während der Arbeit an unseren responsive WordPress-Themes haben wir in den letzten Wochen jede Menge neue Erfahrungen dazu gewonnen, etliche Artikel zum Thema gelesen und natürlich auch das ein oder andere Script und Plugin zur Optimierung von responsive Webdesigns ausprobiert. Im folgenden Artikel habe ich daher 10 nützliche Tipps und Tricks zusammengestellt, die bei der…

    Read more: 10 praktische Tipps für die Entwicklung von responsive Webdesigns
  • PhotoSwipe

    PhotoSwipephotoswipe.com

    PhotoSwipe ist eine auf HTML/CSS und JavaScript basierende Bildergalerie, die sowohl für mobile Geräte wie iPhone, iPad, Android und Blackberry, als auch für Desktop-Browser optimiert ist. Besonders schön ist, dass der beliebte Swipe-Effekt (Bildwechsel beim Darüberfahren mit dem Finger) für Touchscreens unterstützt wird. Da die Bildergalerie so Plattform-kompatibel funktioniert, ist sie besonders gut für responsive Webdesigns geeignet. Du kannst dir ein kurzes Intro-Video von PhotoSwipe auf Vimeo anschauen oder gleich die Live-Demos der Bildergalerie ausprobieren.

Expand sidebarBCollapse sidebarBSearchKSearchK
DesignDFokusmodusFokusmodus beenden