40 Beiträge
Bei der Gestaltung eines responsive Webdesigns ist die Optimierung der Schriftgrößen für unterschiedliche Geräte eine wichtige und nicht zu unterschätzende Aufgabe. Am besten ist es natürlich, wenn man die Lesbarkeit der ausgewählten Schriften und Schriftgrößen auf möglichst vielen Geräten live testet. Dennoch kann man schon vor der ersten Design-Testphase einige Dinge beachten. Lesbarkeit auf mobilen…
„Mobile-first“ bedeutet, dass man ein responsive Webdesign nicht vom großen Desktop-Layout Schritt für Schritt verkleinert, sondern dass man die mobile Webseiten-Ansicht als Ausgangsbasis nimmt, und das mobile Webseiten-Design dann schrittweise für größere Bildschirmformate optimiert. Eine solche Vorgehensweise bringt natürlich eine ganz neue Denkweise für Webdesigner und Entwickler mit sich und wir werden gezwungen, uns mit…
Das iPhone 4 hat ein spezielles Retina-Display. Auf diesem hochauflösendem Bildschirm können Bilder besonders scharf dargestellt werden. Um auch alle verwendeten Bilder in einem Webdesign oder WordPress-Theme (z.B. das Logo oder ein Hintergrund-Musterbild) für das Retina-Display des iPhones zu optimieren, kannst du CSS Media Queries in deinem Stylesheet nutzen.
Wie ich ja bereits auf Twitter angekündigt, habe ich ein paar erste Screenshots unseres neuen WordPress-Themes „Nori“ vorbereitet. Nori ist nach dem mobile-first Ansatz umgesetzt. Das bedeutet, wir haben bei Gestaltung und Programmierung mit der kleinsten Smartphone-Version begonnen und uns dann über die Tablet-Größe zu den größeren Desktop-Bildschirmansichten hochgearbeitet. Hier die ersten Eindrücke des neuen…
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.
Die Möglichkeiten zur Optimierung von Webseiten für mobile Geräte wachsen ständig und das Thema ist unter Webdesignern und Entwicklern derzeit auf jeden Fall ein „Hot Topic“. Da die Umsetzung eines mobile-optimierten Webdesigns (z.B. mit Hilfe eines responsive Layouts) aber auch einiges an Mehraufwand bedeutet und viele Techniken zur Umsetzung mitten in der Entwicklung stecken (es…
