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 Themes: Weiterlesen
Touch-Gesten Referenz-Kärtchen zum Ausdrucken
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. Weiterlesen
Diskussionsanregung: Wie wichtig ist die Webseiten-Optimierung für mobile Geräte heute schon?
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 gibt also oftmals noch keine standardisierte Vorgehensweise), möchte ich zu einer kleinen Diskussionsrunde anregen und fragen, ob und warum man bereits heute auf die Webseiten-Optimierung für mobile Geräte setzen sollte. Weiterlesen
Tipps für die Gestaltung von 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). Weiterlesen
Webseiten-Optimierung für mobile Geräte: Verschiedene Lösungen im Vergleich
Die rasant wachsende Verbreitung von mobilen Geräten (Smartphones und Tablet PCs) hat auch deutliche Auswirkungen auf die Gestaltung von Webseiten. Webdesign muss flexibler werden und auf die unterschiedlichen Geräte mit ihren verschiedenen Bildschirmgrößen und besonderen Eigenheiten angepasst sein. Denn schließlich möchte man Besucher, die eine Webseite von ihrem mobilen Gerät aus aufrufen nicht verlieren. Und ein ständiges Zoomen, um Inhalte lesen oder Buttons bedienen zu können, ist sicherlich kein optimaler Zustand. Zum Glück gibt es bereits einige Lösungen, um diese neue Herausforderung anzugehen. Im folgenden Artikel habe ich mir diese einmal genauer angeschaut und die unterschiedlichen Ansätze miteinander vergleichen. Weiterlesen
Webdesign goes »Mobile First«: Eine kleine Einführung in den neuen Webdesign-Trend
Die Optimierung von Webdesigns für unterschiedliche Bildschirmformate und Geräte (= responsive Webdesign) wird immer beliebter und wenn man sich einmal in der U-Bahn oder in einem Café umschaut wird einem auch schnell klar, warum das so ist. Immer mehr Menschen nutzen das Internet nicht mehr nur zu Hause an einem Desktop-Computer mit großem Bildschirm, sondern surfen auf ihrem Smartphone, Tablet-PC oder Laptop im Internet. Bei der Gestaltung von Webseiten wird es daher immer wichtiger, auf diese Entwicklung zu reagieren und ein Webdesign für unterschiedliche Formate und Geräte zu optimieren. Im ersten Moment liegt natürlich der Ansatz am nächsten, ein Webdesign in einem gewohnten Format zu konzipieren (z.B. mit einer Gesamtbreite von ca. 1000px) und dieses Design dann anschließend mit Hilfe von CSS Media Queries für kleinere Formate anzupassen. Der Ansatz »Mobile First« geht da allerdings noch etwas weiter. Hier dreht man die gewohnte Arbeitsweise einfach um und arbeitet von der kleinsten Layout-Version hin zur größten. Weiterlesen