Seit 2011/2012 bringen die neuen Smartphones Bewegung ins Webdesign. Warum? Weil deren Display-Breiten bis ca. 2015 noch bei Einsteigermodellen weit unter 1024px liegen, und weil diese Geräte KEINE MouseOver-Ereignisse erkennen können: Typische Menüs v

Sowohl Smartphones, Tablets als auch die nächste Generation von Desktop-Bildschirmen sind Touch-Screens, ermöglichen also eine Interaktion nicht nur über Tastatur und Maus sondern durch Berührung mit einem Finger oder aber auch mit mehreren Fingern. Tap, Touch, Multi-Touch, Swipe, DoubleTap, TrippleTap: Es ist schon faszinierend, wieviele verschiedene Ereignisse man erfassen kann, wenn ein Nutzer mit dem Finger auf einem Bildschirm herumtrommelt und dabei möglicherweise noch den Finger bewegt.

Prinzipsskizze für eine mobile Webseitenansicht

Die nachfolgende Grafik zeigt eine Prinzipsskizze für eine auch durch Smartphones bedienbare Oberfläche. Die technische Grundlage ist TYPO3 CMS 6 als Framework wegen der seit zig Jahren praxiserprobten Multi-Domain- und Multi-Template-Fähigkeit in Verbindung mit PHP, XHTML, CSS und Javascript. Während einfache Smartphone-fähige Ansichten oftmals nur ein Menü anbieten gehen wir zunehmend dazu über, die Ansichten mit 2 bis 5 Navigationsvarianten parallel zu entwerfen.

 

Frage: Was sollte ich als Auftraggeber wissen / verstanden haben?

Frage: Was sollte ich als Auftraggeber wissen / verstanden haben? Ganz, ganz, ganz wichtig: Smartphones und Tablets kennen KEIN Mouse-Over-Event, dh. das Bewegen der Maus über Schaltflächen funktioniert NUR bei PCs/Macs mit Maus-Bedienung, NICHT aber bei Touch-Oberflächen.

Gerade Menüs, welche sich aufklappen sollen, wenn man nur die Maus darüber schiebt, funktionieren also NUR bei Maus-Bedienung. Ein Smartphone- oder Tablet-User kann also eigentlich nur "Klicken". Dafür werden aber bei Smartphones zig Varianten des Touch unterschieden; diese können im Gegenzug zwar zuweilen mit Mausbewegungen nachgemacht oder simuliert werden, aber der Maus-Nutzer macht / kann es dennoch nicht. Long-Touch, Swipe, Touch, Punch: Das ist für Maus-Nutzer Neuland.

Merke: Man bedient Oberflächen also je nach Gerät völlig anders, und deshalb ist es auch NICHT ausreichend, einfach nur die Abmessungen von Layouts anzupassen: Man muss zwingend andere Menüs programmieren und auch die Bedienung grundlegend überarbeiten bzw. gesondert betrachten.

Frage: Muss ich meine Webseite neu programmieren lassen?

Frage: Muss ich meine Webseite neu programmieren lassen? Wenn Sie eine von uns mit TYPO3 CMS programmierte Webseite installiert bekommen haben, gibt es verschiedene Varianten, wie wir Ihre Webseite um eine Smartphone- und Tablet-fähige Ansicht technisch ergänzen können, OHNE die gesamte Webseite umprogrammieren zu müssen.

  • Adressierung einer alternativen Smartphone-Ansicht der Webseite über eine Subdomain. Eingebürgert hat sich die Subdomain m, dh. m.domainname.de. Zusätzlich muss aber eine Smartphone-fähige alternative HTML/CSS-Ansicht programmiert werden. TYPO3 CMS ist in der Lage, mehrere Domains mit 1 einzigen CMS Installation zu verwalten, dh. wenn das CMS erkennt, dass der Aufruf über die Mobile-Adresse erfolgte, wird über eine Weiche im Programmcode die alternative Ansicht geladen.
  • Eine typische Alternative sind Media Queries mit CSS, dh. in Abhängigkeit von der Bildschirmgröße erkennt der Browser, dass eine andere Formatierung der Webseite geladen werden soll. Dieses Verfahren ist als responsive Webdesign, kurz rwd, derzeit "der Hype", aber das Verfahren setzt voraus, dass die Ansichten-Template vom HTML-Code und CSS-Code im Ist-Bestand überhaupt entsprechend umformatiert werden kann. Man muss also Layouts schon explizit so planen, dass der Ansatz überhaupt wirklich Sinn macht. Die Einschränkungen im Webdesign sind auf die Ideenfindung zuweilen so maßgebend, dass die 2-Template-Lösung oftmals für Auftraggeber, Kreative und Entwickler entspannter und auch billiger ist.

Frage: Sind Smartphone-Tempaltes das gleiche wie Apps?

Frage: Sind Smartphone-Templates das gleiche wie Apps? Kurz und bündig: NEIN. Smartphone-fähige Templates werden weiterhin in HTML, CSS und Javascript wie Oberflächen von Webseiten programmiert.

Apps für Android oder iOS (iPhones) werden in C, JAVA, objective C und anderen Programmiersprachen entwickelt, und zwar explizit für bestimmte Hersteller. Die direkte Programmierung von Oberflächen als kompilierte Apps ermöglicht es zwar, zusätzliche Tricks oder Features explizit für bestimmte Endgeräte nutzen oder programmieren zu können, führt aber dazu, dass Sie die selbe Oberfläche zigfach in völlig verschiedenen Technologien entwickeln müssen. Kurzum: Tolle Sache, aber ein riesen Aufwand. Und es kommt noch blöder: Um diese Informationen dann anzeigen zu können, muss man die App auch noch vorher installieren, anstatt schlicht und einfach die Seite mit dem Gerät nur aufzurufen.

  • Unsere programmierten Ansichten können von JEDEM Smartphone geladen und dargestellt werden.
  • Unsere programmierten Ansichten müssen NICHT erst installiert werden sondern können nach dem Laden sofort angezeigt werden.

Frage: Warum ist die Webseite von STUELKEN derzeit noch nicht responsive?

Frage: Warum ist die Webseite von STUELKEN derzeit noch nicht responsive? Responsive bedeutet, dass die Ansicht der Webseite automatisch auf das Endgerät angepasst wird. 

Die Antwort ist ziemlich einfach: Wir haben so viel zu tun, dass wir einfach noch keine Zeit dafür gefunden haben, uns das selbst zu programmieren.