Kategorien
Design IMHO Responsive Design

Der responsive Webdesign-Schrott oder die Rückkehr Blogdorfs

Dieser Tage fühle ich mich geradezu zurückversetzt in die goldenen Jahre Blogdorfs, als großmäulige Blogger sich gegenseitig die Butter vom Brot geschrieben haben, dabei nicht zimperlich, im Gegenteil mit schöner Regelmäßigkeit so aggressiv vorgingen, dass im Vergleich dazu die Idee, einen Sonntagsspaziergang im Gaza-Streifen zu machen, schon fast idyllische Assoziationen weckte. Das waren noch Zeiten. Heutzutage, in den Zillionen unterschiedlicher sozialer Netzwerke mit ihrer Aufmerksamkeitshalbwertzeit von fünf Minuten, wäre so etwas gar nicht mehr möglich. Andy Warhol hat sich seinerzeit maßlos verschätzt. Na komm. Wollen wir es ihm nicht übel nehmen…

violence-102966_640

Die Rückkehr Blogdorfs oder die Schöpfungshöhe einer Meinung

Umso mehr müsste es einen alten Blogveteranen wie mich doch freuen, wenn ein paar Haudegen die Nullerjahre wieder aufleben lassen, wie nach dem Beitrag von Patrick Voelcker bei Mobile Zeitgeist passiert. Es betrübt mich fast schon, in mich hinein zu horchen und im Ergebnis festzustellen: Nein, freut mich nicht. Ich vermute, es liegt am Alter. Wobei es nicht das Alter ist, was mich ruhiger hat werden lassen. Sondern es ist vielmehr das Alter, dass mir immer wieder Erfahrungen dieser Art beschert hat, so dass ich heutzutage sagen kann: Die Menschen ändern sich nicht. Meinungsfreiheit gibt es defacto nicht. Zumindest nicht in der Form, wie sie gemeint war:

I disapprove of what you say, but I will defend to the death your right to say it. – Voltaire (evtl. auch Evelyn Beatrice Hall)

Meinungsfreiheit wie sie heute verstanden wird, ist lediglich die für sich selbst in Anspruch genommene Freiheit, andere verbal komplett ohne jegliche Hemmschwelle weg zu kloppen. Eine asoziale Art der Konfliktbewältigung würde man sagen, wenn es um körperliche Gewalt ginge, obschon der Unterschied nicht mal groß ist. Schnell wären auch die gegenseitigen Toleranzschwellen bis hin zu staatlichem Eingriff erreicht. Aber da es ja nur verbal abläuft, hey, da ist es dann eben Meinungsfreiheit…

Und – komm schon – wenn der andere doch nun wirklich ein kompletter, desinformierter und inkompetenter Idiot ist (alles Zitate), dann ist es ja auch gar nicht schlimm, die ganze Härte des nicht mal so ausgeprägten Wortschatzes auf ihn loszulassen, oder? Er hätte sich ja immerhin nicht zu äußern brauchen…

Die Geschichte erinnert mich an einen uralten meiner Beiträge für das Dr. Web Magazin mit dem Titel “Lebenszeitverschwendung 2.0”.

Ist responsives Webdesign Schrott?

So weit zum Grundsätzlichen, kommen wir zum Inhaltlichen. Herr Voelcker wollte provozieren. Das wird man nicht abstreiten wollen. Responsives Webdesign als Schrott zu bezeichnen, ist schon etwas gewagt, sollte aber natürlich als Überschrift wirken und einen Diskurs anregen. Das hat funktioniert, allerdings scheint die Virtualität jedwede Hemmschwelle zu beseitigen, so dass der Diskurs schnell ins Maßlose abdriftete.

Früher, als man noch von Angesicht zu Angesicht diskutierte, hätten viele der nun zu findenden Aussagen niemals stattgefunden, nicht zuletzt aus Angst davor, dass der dermaßen attackierte Zeitgenosse einem was auf’s Maul gehauen hätte. Wer weiß, ob es nicht auch wesentlich weniger Mobbing-Fälle gäbe, wenn es schlicht mal wieder mehr auf’s Maul gäbe. Wieso darf man psychisch morden, aber physisch nicht mal schubsen? Ich schweife ab…

Responsives Webdesign, wie es etwa mein persönlicher Blog, die Blogmanufaktur, trägt, ist – seien wir ehrlich – kein Knüller. Die Blogmanufaktur sieht auf einem Smartphone richtig gut und auf einem FullHD 27 Zoller richtig bescheiden aus. Da es hier um Inhalte, nicht um Optik geht, kann ich damit gut leben. Hätte ich ein opulentes Design – wie in den letzten 10 Jahren gelegentlich passiert – müsste ich mir, wenn ich denn wollte, Gedanken darüber machen, wie Menschen mit mobilen Clients meine Ergüsse konsumieren können. So lasse ich es einfach “fließen”.

Natürlich gibt es auch responsive Designs, die fantastisch aussehen. Wir haben bei Noupe und Dr. Web immer wieder Showcases mit entsprechenden Layouts. Da ist es dann aber so, dass der Aufwand im Rahmen der Erstellung nicht vergleichbar mit dem Aufwand ist, den ich und andere noch vor ein paar Jahren betrieben haben, wenn ein Kunde eine Website beauftragte.

futureofwebdesign_london2013

Mal Hand auf’s Herz. Klar, auch ich habe auf der Internet World in Berlin im Jahre 2000 schon von barrierefreiem Webdesign geschwärmt und der großen Bedeutung, die das mal eines Tages haben würde. Wieder zuhause baute ich die nächste Website mit Tabellen und der Kunde fand es großartig, dass das Layout kontrolliert wie ein Flyer war. Und ich behaupte, und meine Erfahrung legt da gar keinen anderen Schluss nahe, dass auch heutzutage der Durchschnittskunde mit einem Design von der Stange, meinetwegen sogar im Tabellen-Stil, vollkommen zufrieden sein wird.

Dann jedoch gibt es die Evangelisten, die Standards-Taliban, diejenigen, die glauben, alles, was man tun kann, müsste man auch tun.

Natürlich ist es möglich, die Website vom Klempner Meier responsiv zu gestalten. Er wird mit großer Wahrscheinlichkeit nicht danach fragen. Wenn man ihm den Vorschlag machte, und ehrlicherweise den Mehraufwand nennen würde, würde er mit ziemlicher Sicherheit fragen, ob denn die Verwender von Smartphones ansonsten seine Seite, vor allem seine Kontaktdaten, nicht würden sehen können. Und an dieser Stelle müsste man ihm ehrlicherweise sagen, dass auch Seiten, die nicht responsiv sind, auf modernen mobilen Clients natürlich vernünftig genutzt werden können. Da wird ein bisschen Pinchen und Zoomen im Spiel sein, aber nutzen kann man sie. Speziell, wenn man berücksichtigt, wie Herr Voelcker richtigerweise bemerkt, dass die modernen Smartphones nicht mehr mit 320 sondern 1080 Pixeln Breite daher kommen.

Und dann – mal im Ernst – wieso soll man den Prognosen unbedingt die Speerspitze sein? Zeig mir doch erstmal die Millionen Besucher meiner Website mit mobilen Clients. Dann kann ich immer noch handeln. Meine Websites sind auf Webspace gespeichert, nicht in Stein gemeißelt…

Ein anderer Fall zeigt sich schon heute da, wo die Website nicht eine Art virtueller Visitenkarte ist, sondern etwa ein Shop oder andere Art des direkten Verkaufens dahinter steckt. Hier empfiehlt sich möglicherweise zwar auch nicht unbedingt ein responsives Design, aber in jedem Falle eine angepasste Variante für mobile Clients. Denn hier geht es darum, den Vorgang des Kaufens möglichst gut zu unterstützen. Schon im nicht-responsiven Webdesign gibt es dazu haufenweise Literatur, auf mobilen Clients potenzieren sich die Probleme naheliegenderweise.

Dennoch: Wäre ich ein Shopbetreiber, so würde ich vermutlich am ehesten auf eine App setzen. Denn da ist die User Experience am besten zu kontrollieren und ich würde meine Konversionsziele vermutlich so am wirksamsten erreichen.

Was haben wir noch? Nehmen wir eine Fotografen-Website. Ist der Fotograf daran interessiert, sein Portfolio möglichst umfassend zu präsentieren, also auch für mobile Clients zugänglich zu machen, so wird er in der Tat mit einem responsiven Design gut bedient werden können. Gerade Portfolios lassen sich außerordentlich gut, auch im Sinne von mit relativ wenig Zusatzaufwand, responsiv umsetzen. So wie dem Fotografen geht es auch dem Designer, Architekten, Illustratoren, Entwickler etc.

Anders sieht es wieder aus, wenn ich ein Onlinemagazin betreibe und dazu womöglich noch eines, das sich aus Werbung finanziert. Natürlich lässt sich ein dermaßen inhaltsfokussierter Auftritt ordentlich responsiv umsetzen. Die Frage ist da eher, ob man das wollen können kann.

Die Erfahrung aus etlichen Projekten zeigt, dass responsive Websites etwa die doppelte Zahl an Seitenaufrufen brauchen, um die gleiche Zahl an Werbeauslieferungen zu generieren. Oder einfacher ausgedrückt: Der Besucher mit einem mobilen Client bringt mir nur halb so viele Werbeeinnahmen wie ein Desktop-Besucher. Aber das gilt nur – und das ist entscheidend – wenn ich ein responsives Design einsetze. Ist da noch jemand überrascht, dass Flipboards Modell auf rege Nachfrage, auch und gerade bei den Content-Publishern stößt?

Was mir in der Debatte sauer aufstößt, ist, dass die Betrachtung stets nur aus der Sicht des Users, des Konsumenten geführt wird. Die Sicht des Inhalteanbieters, seine Ziele, sowohl die kommunikativen, wie auch die wirtschaftlichen, sind jedoch zunächst für ihn, der die Rechnung des Webdesigners bezahlen soll, weit wichtiger. Und ideologische Grundsatzfragen, die sich mit technischen Machbarkeiten oder wünschenswerten Idealvorstellungen befassen, sind da nur dann von Bedeutung, wenn sie mit eben diesen Zielen einigermaßen konform gehen, was zumeist nicht der Fall sein wird, aber natürlich ausnahmsweise doch kann.

Das wiederum ist eine grundsätzliche Wahrheit, die sich allerdings in unserer Branche weit weniger dramatisch auswirkt als in anderen Lebensbereichen, in denen gleiches gilt. Biologischer Landbau und Viehzucht, der Verzicht auf Massentierhaltung, das 3-Liter-Auto, regenerative Energien, weichmacherfreie Babyflaschen und Spielzeuge und etliche wunde Punkte mehr – alles möglich und teils vorhanden, aber dennoch nicht Standard.

Und wir Gebrauchskunstschaffende werden zum Tier, wenn einer seine Meinung zu responsivem Webdesign sagt? Das ist nicht gerechtfertigt und erinnert mich an die spontane FDP-Grillparty als Protest gegen den Veggie-Day, während die gleiche Partei in Sachen PRISM weit weniger demonstrationsbereit auftrat…

Kategorien
JavaScript & jQuery Programmierung

Sidr für jQuery: Moderne Sidebar-Navigation mit vielen Finessen

Das sogenannte Panelmenu, oder korrekter Off-Canvas-Menu, ist seit dem Siegeszug mobiler Clients immer populärer geworden. Seitlich rein slidende Navigationsmenüs kennen Sie von nahezu jeder größeren Smartphone-App. Wenn ich mich recht erinnere, war es Facebooks mobile Anwendung, die das Sidebar-Menü als erste einsetzte. Vor einiger Zeit stellten wir mit dem jQuery-Plugin jPanelMenu bereits eine Variante vor, die das Sidebar-Menü für beliebige Websites verfügbar macht. Unsere neueste Entdeckung Sidr kann noch mehr…

sidr-homepage

Sidr für jQuery: Hochflexible Navigationslösung auch für mobile Clients

Technisch betrachtet ist ein Off-Canvas-Menü, also eines, dessen Inhalte sich außerhalb des Viewport befinden und erst auf Anforderung in den sichtbaren Bereich bewegt werden, keine große Sache. Schon zu DHTML-Zeiten, also vor gut zehn Jahren, hätte man ähnliche Ergebnisse erzielen können.

Will man jedoch mehr als die Basisfunktionalität, muss man sich einige Gedanken mehr machen. Damit wir das nicht alle für uns selber im stillen Kämmerlein tun müssen, übernahm Alberto Varela Sanchéz diese Aufgabe und entwickelte Sidr.

sidr-schematic

Und Sidr ist so ziemlich die flexibelste Off-Canvas-Menülösung, die ich bisher gesehen habe. Dabei ist der Einsatz auf der eigenen Website in der simpelsten Variante extrem einfach. Zunächst gilt es, das Script und eines der zugehörigen Stylesheets einzubinden. Im Head:

    

Im Body, am Ende des Dokuments:

    
    

Die Einbindung der einfachsten Variante des Sidebar-Menüs erfolgt auf der Basis eines DIV mit der ID sidr. Das DIV enthält die Menüinhalte, der Link öffnet das DIV:

Toggle menu 
 

Mit dieser Funktionalität könnte man bereits zufrieden sein, Sidr bietet jedoch deutlich mehr. Zunächst ist es möglich, beliebig viele Sidebars in einer Seite unterzubringen. Man muss ihnen dann lediglich Namen geben, um sie programmlogisch unterscheiden zu können.

Die Inhalte für das Menü können auf verschiedene Weisen eingebunden werden. Die einfachste Möglichkeit, die direkte Einbindung im DIV habe ich bereits dargestellt. Ebenso kann bestehendes HTML lokal, aber auch remote gerufen werden. Die komplexeste Methode setzt auf die Callback-Funktionalität.

sidr-themes

Die aus meiner Sicht beeindruckendste Funktionalität ist der Einsatz als responsives Menü. Sanchéz zeigt es direkt anhand der Projekt-Website. Die Projekt-Website verfügt über ein horizontales Menü als Topbar. Verkleinert man nun das Browserfenster, greift ab einem bestimmten Punkt Sidr ein, verwandelt die Topbar in eine Sidebar und blendet einen zusätzlichen Button ein, um die Sidebar öffnen zu können. Auf mobilen Clients können Swipe-Gesten für das Öffnen und Schließen der Sidebar genutzt werden.

Sidr setzt auf Themes, bringt das typische helle und dunkle Theme gleich mit. Auf der Basis dieser Stylesheets können Sie sich ihr eigenes Layout zusammenstöpseln.

Meiner Meinung nach ist Sidr die derzeit beste Lösung für Off-Canvas-Menüs. Wenn Sie eines brauchen, greifen Sie zu Sidr. Zumal das Plugin kostenlos für private, wie kommerzielle Zwecke unter MIT-Lizenz zur Verfügung steht.

Links zum Beitrag