Elmastudio

Mobile Web

7 Beiträge

  • Content Strategy for Mobile

    2commentsURL kopierenAls Markdown kopieren
    Content Strategy for Mobileabookapart.com

    Gestern ist das neueste Buch der A Book Apart-Serie „Content Strategy for Mobile“ von Karen McGrane erschienen und wir haben uns natürlich gleich die eBook-Version gekauft. Inzwischen habe ich schon etwas im Buch geschmökert und ich bin jetzt schon total begeistert.

    Content Strategy for Mobile von Karen McGrane, A Book Apart
    (Bild: A Book Apart)

    Karen bespricht in einer leicht verständlichen Sprache (wenn auch auf Englisch) darüber was zu bedenken ist, um Webinhalte mobile-ready zu machen und welche Problematiken auf Designer, Entwickler und Autoren zukommen, wenn Webinhalte für die verschiedensten Geräte zugänglich gemacht werden müssen.

    Und mit „Mobile“ sind dabei nicht mehr nur Smartphones und Tablets gemeint. Vielmehr geht es inzwischen darum, Webinhalte für eine große Vielzahl von Geräten mit ganz unterschiedlichen Bildschirmformaten (vom kleinsten Blackberry Screen, über SmartTVs und Kühlschränke mit eingebauten Screens) vorzubereiten.

    Get your content ready to go anywhere because it’s going to go everywhere.

    Brad Frost in For a Future-Friendly Web

    Karen analysiert in ihrem Buch viele aktuelle Webseiten-Beispiele und bespricht worauf man achten sollte, um für diese spannende und bunte neue Welt des Webs gewappnet zu sein. Das Buch ist als eBook-Version für 9 US-Dollar oder als Taschenbuch für 18 Dollar + Versand bei A Book Apart erhältlich.

  • Jeffrey Zeldman: Mobile first denken

    3commentsURL kopierenAls Markdown kopieren

    Wer mobile first denkt, ist gezwungen, auf einer Website nur das zu behalten, was wirklich zählt. Wir müssen an Bedienbarkeit und Inhalt denken, denn Menschen am Handy haben sehr wenig Zeit und sehr wenig Platz auf dem Bildschirm.

    — Jeffrey Zeldman, Vortrag „Content First“ auf der An Event Apart, mitgeschrieben von Luke Wroblewski, 2012.

    Der Satz stammt aus Luke Wroblewskis Mitschrift von Jeffrey Zeldmans Vortrag „Content First“ auf der An Event Apart 2012. Wir bauten damals gerade unsere ersten mobile-first Themes, und der Satz brachte auf den Punkt, warum: Nicht das Layout wird kleiner, der Inhalt wird wichtiger.

  • Responsive Navigation Patterns

    6commentsURL kopierenAls Markdown kopieren
    Responsive Navigation Patternsbradfrost.com

    Brad Frost gibt in seinem Artikel eine hilfreiche Übersicht unterschiedlicher Lösungsansätze für responsive Webdesign-Menüs. Für jeder Lösung stellt er die Pros und Cons gegenüber und nennt Beispiele aus dem Web. Ein sehr lesenswerter Artikel für alle responsive Webdesign-Fans!

  • Touch Gesture Cards

    2commentsURL kopierenAls Markdown kopieren
    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

    ·
    5commentsURL kopierenAls Markdown kopieren
    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.

Expand sidebar⌘BCollapse sidebar⌘BSearch⌘KSearch⌘K
Design⌥DFokusmodusFokusmodus beenden