praegnanz.de büro für intervernetzte medien

Unser Weblog

Responsive Webdesign von Christoph Zillgens

Gerrit, 27.01.2013

Was für ein Buch! Was für eine Arbeit! Was für ein unerwartet breites Themengebiet! Doch ich will von vorne beginnen.

Im Vorfeld meines Seminars »Responsive Layout« für die Typografische Gesellschaft München war es ein absoluter No-Brainer für mich, das Buch von Christoph Zillgens beim Hanser-Verlag anzufragen, weil es sicherlich den einen oder anderen nützlichen Hinweis und Trick enthalten würde, den ich im Seminar gut gebrauchen könnte. Christoph ist ein geschätzter Webkrauts-Kollege, hat im 2012er-Adventskalender einen sehr feinen Grundlagenartikel zum Thema geschrieben, und eben auch ein brandaktuelles Buch, welches den Themenkomplex sehr umfangreich darstellt.

Denn man kann das Thema »Responsive Webdesign« auf verschiedenen Ebenen betrachten. Für die einen ist es nur eine Ansammlung von Media-Queries und Liquid-Layout-Anweisungen, mittels derer man eine Website fit für das iPhone macht. Für die anderen ist es viel, viel mehr.

Das Buch beginnt im ersten Abschnitt aber zunächst mit dem, was man erwarten würde: Ein starres Beispiellayout wird Schritt für Schritt responsiv gemacht. Das allein passiert auf ca. 50 Seiten, und für viele wäre danach das Buch beendet und man würde sich anderen Dingen zuwenden.

Doch Christoph Zillgens legt jetzt erst so richtig los und erläutert in einem angenehm unaufgeregten, pragmatischen und anti-dogmatischen Stil, dass man die responsive Idee auf noch viel mehr Ebenen betrachten kann als der schlichten Breite des Browserfensters. Es werden Ansätze bei der Projektplanung und der Kundenargumentation besprochen, man erfährt viele neue CSS-Tricks für clevere Layout-Techniken, hat immer einen Blick für die Performance und auch die visuelle Gestaltung. Man merkt, dass Christoph aus der Praxis kommt. Es driftet nie ins Philosophische oder allzu Akademische. Das Motto »Gemacht ist besser als perfekt« nimmt dem Leser die Hemmungen. Und mir gefällt Christophs differenzierte Grundhaltung bei kontroversen Themen wie »Mobile First«.

»Responsive Webdesign« ist mehr als vollständig, ich wüsste kaum einen Aspekt, der nicht kompetent und umfassend beleuchtet wird, außer vielleicht eine klarere Trennung zwischen »echt« responsiven Websites mit gleicher HTML-Codebase und eigenständigen mobilen Versionen wie m.spiegel.de. Hier hätte man noch ein wenig auf die jeweiligen Vor- und Nachteile bei dieser wichtigen Grundsatzentscheidung eingehen können.

Ansonsten bleibt die Kritik, die ich an fast jedem Buch mit über 300 Seiten auszusetzen habe: Es ist zuviel Stoff drin, der das eigentliche Thema nur sanft tangiert. Ich muss nicht zum neunten Mal die »neuen« HTML5-Elemente und Formularfunktionen erklärt bekommen, und die Performance-Tipps sind zwar nett, aber eben auch außerhalb des responsiven Kontext genauso wichtig und gültig.

Wenn man das Werk allerdings kurzerhand als umfassende Bibel des modernen Frontend-Designs betrachtet, stimmt das Bild wieder und macht dann auch richtig glücklich! Ein Buch ganz speziell zu responsiven Themen hätte ich mir etwas handlicher vorgestellt, was aber wirklich eher eine Feststellung als eine echte Kritik sein soll.

Denn Christoph ist ein Fachautor, der in der Lage ist, alle enthaltenen Themengebiete versiert, verständlich – und hochaktuell! – zu erläutern. Absolute Kaufempfehlung!

Kommentare [3]

Neues Galileo-Buch: Apps mit HTML5 und CSS3

Gerrit, 20.07.2012

Ich mach’ das ja ganz gerne, wenn auch nicht immer zeitnah. Also, Rezensionen schreiben für Fachbücher, die mir von Verlagen kostenlos zugesendet werden. In diesem Falle hat es mich aber tatsächlich besonders interessiert, weil die beiden Autoren von »Apps mit HTML5 und CSS3: für iPad, iPhone und Android« keine Unbekannten sind: Florian Franke betreibt mit Laker ein feines webbasiertes Magazin-Framework, bei dem am Ende native Magazin-Apps für Tablets und Smartphones herauspurzeln. Florian hat, wie ich, an der FH Mainz Design studiert, und ich konnte ihm vor einen Jahr mal einen experimentellen Job vermitteln. Guter Mann!

Johannes Ippen hingegen ist einer der beiden Aside-Magazin-Schöpfer und hat ebenfalls vor etwa einem Jahr bewiesen, dass Touch-Magazine auf HTML5-Basis möglich sind, aber für die aktuellen Geräte-Generation noch ein wenig zu anspruchsvoll. Dazu hatte ich damals auch ein kleines Video gemacht.

Die beiden wissen also, was sie tun. Und sie haben sich entschieden, was gemeinsam zu machen, nämlich ein Galileo-Buch über die Konzeption und Umsetzung von webbasierten Apps für mobile Plattformen zu schreiben. Gleich vorweg: Ich konnte das Buch aus zeitlichen Gründen nur überfliegen, deswegen bitte ich um Nachsicht, wenn die nächsten Zeilen ein wenig vage formuliert sind.

Zunächst das Negative: Was mich an diesem (und übrigens an vielen anderen Fachbüchern) stört, ist das erste Drittel, in dem Gott und die Welt erklärt wird. Was ist eine App? Wie schreibt man HTML? Wie setze ich einen lokalen Webserver auf? Was macht eigentlich dieses CSS? Diese Grundlagen sind reines Füllmaterial, lieblos zusammengestellt und vollkommen nutzlos: Für den HTML-Kenner gibt es nichts Neues zu erfahren, der HTML-Neuling wird vom Husch-Husch dieser Kapitel komplett überrollt. Warum ist es nicht möglich, ein Buch zu schreiben und HTML/CSS-Kenntnisse einfach mal vorauszusetzen, bzw. auf die anderen Bücher des Verlages hinzuweisen, die zum Einstieg ergänzend hinzugezogen werden könnten? Ich tippe auf offizielle Verlags-Policy, denn Spaß gemacht hat das Verfassen dieser Einsteiger-Kapitel sicher nicht. Aber das Buch hat gleich 100 Seiten mehr. Fühlt sich nicht gut an.

Interessanter wird es dann definitiv, wenn es um die Konzeption von mobilen Apps geht. Hier werden schön die verschiedenen UI-Patterns erläutert, auf die unterschiedlichen Nutzungsszenarien eingegangen, nochmal die Stärken und Schwächen von Web-Apps und nativen Apps miteinander verglichen usw. Es lohnt sich, hier noch einmal genauer mitzulesen, auch wenn man sich schon als Experte fühlt – man bekommt sicher noch ein paar wertvolle Denkanstöße!

Dann stürzen sich die Autoren in die Praxis und nehmen die wichtigsten Aspekte der mobilen Webapp-Entwicklung unter die Lupe: Zu Fuß per selbstgeschriebenem HTML/CSS, danach mit Unterstützung durch die zwei gängigsten Frameworks (jQuery Mobile und Sencha Touch), und am Ende auch mit nativer Veredelung über PhoneGap. Dazu wird beschrieben, wie man per JavaScript-API mit Geo-Positionierung und Accelerometer umgeht.

Das alles wird anhand von sehr sinnigen und durchaus cleveren kleinen Beispielprojekten erläutert, und zwar stets mit einem Blick auf eine funktionierende Crossplattformfähigkeit, sprich: Die Entwicklung und das Testen (und natürlich die Screenshots im Buch) passieren immer parallel unter iOS und Android.

Das Buch selber ist in Schwarz-Weiß gehalten, was wohl dem niedrigen Preis geschuldet ist, und meines Erachtens aber okay geht. Vom Schreibstil bin ich nicht allzu begeistert; er wirkt an vielen Stellen doch allzu kumpelhaft und bemüht witzig. Kann man sicher mal machen, aber der Rahmen will nicht so recht dazu passen. Das Stil-Korrektorat hätte hier sicher noch einiges glätten können, um den Text geschmeidiger fließen zu lassen.

(Mir ist klar, dass ich an diesen Worten gemessen werde, wenn im Herbst mein #webtypobuch erscheint, aber sei’s drum.)

Insgesamt kann ich dem Werk einen Daumen nach oben geben. Es beinhaltet alle wichtigen Informationen über die Entwicklung von webbasierten mobilen Apps, auch wenn es nicht unbedingt als ewiger Klassiker in die Geschichtsbücher eingehen wird. Für 30 Euro eine Empfehlung von mir!

Kommentare [3]

HTML5 – Webseiten innovativ und zukunftssicher

Gerrit, 17.06.2010

Der Bücherverächter lobt mal wieder ein Buch, so sieht’s aus! Meine Freizeitlektüre der letzten Tage war HTML5 – Webseiten innovativ und zukunftssicher von Bloggerkollege Peter Kröner.

Nun ist es ja so, dass es gar keinen richtigen Zeitpunkt für eine Buchveröffentlichung zu HTML5 geben kann. Die Spezifikationen und Implementierungen sind dem ständigen Wandel unterworfen, und prinzipiell müsste man schon jetzt anfangen, an der zweiten Auflage zu schreiben, und eigentlich jedes halbe Jahr eine überarbeitete Version veröffentlichen. Sei’s drum! Zum jetzigen Zeitpunkt ist das Buch dennoch perfekt. Es widmet sich am Anfang in aller Ausführlichkeit der Entstehungsgeschichte und den Hintergründen zur aktuellen HTML5-Situation, und ist dabei stets meinungsfreudig und unterhaltsam geschrieben. Somit sind die ersten beiden Kapitel tatsächlich meine Lieblingskapitel, dicht gefolgt vom letzten, wo es um den Ausblick in die Zukunft geht, und was es generell für Möglichkeiten gibt, mit so einem offenen Standard wie HTML umzugehen.

Doch zwischen diesen beiden extrem wertvollen Essays steht natürlich auch ein praxisnaher Blick auf all die neuen Funktionen, die es (nach der erweiterten Definition von HTML5) gibt: Neue semantische Elemente, Geo-Location, Offline-Funktionen, Drag&Drop, Canvas usw…

Das meiste davon ist sehr anschaulich und nachvollziehbar geschrieben und kann sofort angewendet werden. Mit zwei Kapiteln habe ich allerdings so meine Mühe. Da wäre zum einen die Drag&Drop-API, bei der der Autor nicht müde wird zu betonen, wie schrottig und unbenutzbar diese ist. Dennoch nimmt er heldenhaft den Kampf auf und entwickelt im Buch eine Cross-Browser-kompatible Lösung mit nativem JavaScript, und erklärt dabei jeden der Schritte im Detail. Das ist super-löblich und ein bisschen masochistisch, doch besonders gerne möchte man das als Leser trotzdem nicht gedanklich nachvollziehen. Aber einer muss es ja mal gemacht haben, wie?

Ähnliches gilt für die Beschreibung der Canvas-API. Hier könnte man meines Erachtens ein ganzes Buch mit befüllen, um alles genau zu erläutern. Peter versucht sich an einer extrem dichten und kompakten Beschreibung innerhalb eines Kapitels, die meines Erachtens ein Hauch zu anspruchsvoll ist und zu schnell voranschreitet. Eine schwierige Gratwanderung …

Grundsätzlich gilt: Das Buch setzt an der Basis an und bespricht keine Lösungen, die auf JavaScript-Frameworks aufsetzen. Das muss natürlich auch so sein, denn es geht um eine technisch korrekte und spezifikationsnahe Erläuterung von HTML5-Features. Für die tägliche Arbeit eines Webdesigners sind diese Basistechniken jedoch eher nebensächlich, weil man sich die nackten Canvas- und Drag&Drop-Schnittstellen bitteschön aus dem Blickfeld weg-abstrahieren möchte. Das wird im Buch natürlich auch empfohlen, deswegen passt das an sich alles schon!

Abschließend die konkrete Kaufempfehlung: Jeder professionelle HTML-Kenner, der einen umfassenden und meinungsfreudigen Blick auf die Zukunft der Webstandards benötigt (also alle!), sollte sich das Buch von Peter Kröner nicht entgehen lassen. Es lohnt sich allein wegen Anfang und Ende!

Kommentare [6]

Fortgeschrittene CSS-Techniken (Ingo Chao & Corina Rudel)

Gerrit, 29.10.2008

Üblicherweise verlose ich ja die Bücher, die ich hier im Blog bespreche. Zum einen, weil ich Fachbücher eigentlich gar nicht so gerne mag, zum anderen, weil die meisten Bücher für Einsteiger sind, zu denen ich mich schon länger nicht mehr zähle.

Fortgeschrittene CSS-Techniken

Aus der Fülle an CSS-Büchern sticht dieses klar hervor, weil es sich an Profis richtet, und das ist toll! Und daher behalte ich es diesmal ganz für mich allein :-)

Der erste Satz lautet »CSS ist nicht einfach.« Und damit ist die Marschrichtung auch schon vorgegeben. Ingo Chao und Corina Rudel erklären eben nicht nur, wie man mit CSS umgeht, sondern wie CSS wirklich funktioniert: Was passiert eigentlich wirklich, wenn ein Objekt gefloatet wird? Und wie sind die Wechselwirkungen mit den anderen Objekten? Bereits nach 20–30 Seiten begreift man komplett, warum es so schwierig ist, klare CSS-Spezifikationen zu schreiben. Und warum die verschiedenen Browser teilweise so unterschiedliche Ergebnisse produzieren.

Das erste Drittel kümmert sich um eine ganze Reihe von grundsätzlichen Konzepten, die auch bei professionellen Webdesignern wie mir oftmals nicht gänzlich verstanden werden: Kollabierende Margins, vertikale Zentrierung, der Block Formatting Context und die mysteriösen Inline-Blocks. Wer das Buch aufmerksam liest, wird verstehen, was genau dahinter steckt. Und man wird vielleicht in Zukunft weniger frickeln müssen, um seine CSS-Wehwehchen zu lösen. Denn genau darum geht es doch: Ich selber habe zwar kaum Probleme mit dem Einsatz von CSS – weil ich es am Ende doch immer irgendwie hinbekomme, wie es sein soll. Mit dem Buch kann ich aber nun exakter bestimmen, warum eine bestimmte Anweisung mein Problem gelöst hat.

Immer mit dabei: Der Blick auf die Browserkompatibilität. Es wird vermittelt, welche grundsätzlichen Probleme der IE besitzt, vor allem in Bezug auf den Block Formatting Contect. Dadurch kann man sich viele Bugs, die einem stets wie Voodoo vorkamen, fast schon logisch erklären. Wenn man will. An manchen Stellen übertreiben es die Macher jedoch ein bisschen, wenn es um die Genauigkeit von Browserbugs geht – aber das ist wahrscheinlich eine Berufskrankheit.

Zwei Punkte möchte ich noch als Besonderheiten hervorheben:

  • Die Autoren sehen ein großes Potenzial in CSS-Tabellen (ähnlich wie Rachel Andrew in diesem Artikel). Mit DIVs um sich zu schmeißen, um dann eine CSS-Pseudotabelle daraus zu rendern, wird als freudige Aussicht auf eine bessere CSS-Zukunft empfohlen. Ich bin in dieser Hinsicht etwas kritischer eingestellt – Auch wenn DIVs laut Spezifikation keine semantische Bedeutung haben, so wird der HTML-Code dadurch dennoch unnötig tief verschachtelt und unübersichtlich. Hier wären ein paar Worte nötig gewesen, dass man das auch anders sehen kann.
  • Inline-Blocks werden (für mich) erstmals richtig gut erklärt. Und auch darauf hingewiesen, dass man sie im IE ganz gut über eine völlig andere Technik simulieren kann. Dies ist sehr spannend und an dieser Stelle habe ich am meisten gelernt.

Insgesamt ein sehr empfehlenswertes Buch für alle, die CSS nicht nur anwenden, sondern auch wirklich durchdringen möchten. Mit eine klaren Sicht auf die Zukunft (Der IE8 wird bereits mit einbezogen, obwohl zum Drucktermin nur als erste Beta verfügbar), und trotzdem stets mit Hinweisen, wie auch IE6 und co. versorgt werden können. Was vielleicht fehlt, ist ein ganzer Teil mit einem Ausblick auf CSS3. Dafür hätte man den Praxisteil ein ganzes Stück kürzen können, weil darin vieles gemacht wird, was in anderen Büchern auch gemacht wird.

Das Buch ist im Galileo-Verlag erschienen und kostet völlig realistische und gut angelegte € 39,90. Beigelegt ist eine CD mit den Code-Beispielen und einigen Videotutorials zu YAML und YUI Grids, die ich aber noch nicht angesehen habe.

Kommentare [10]

Mobiles Webdesign (Manuel Bieh)

Gerrit, 24.10.2008

Die erste von zwei Buchbesprechung, die in kurzem Abstand hier zu lesen sein werden, befasst sich mit Manuel Biehs Mobiles Webdesign aus dem Galileo-Verlag. Das Werk kommt in schickem Mattschwarz daher, ist leider nur im 300-seitigen Graustufendruck erhältlich und kostet 34,90 €, was verhältnismäßig happig ist, aber aufgrund der mutmaßlich kleinen Zielgruppe wohl kaum anders lösbar.

Mobiles Webdesign

Was Manuel Bieh in dem Buch macht: Er lässt sich vor allem nicht verrückt machen vom derzeit sehr in Mode gekommenen Infragestellen der Notwendigkeit der Anpassung von Inhalten und Designs für das mobile Web. Kurz gesagt: Er liefert Tipps und Techniken für die verfluchten Handybrowser, die derzeit auf den Minidisplays der jetzigen Mobilfunktelefone existieren, und mit denen man real im Jahr 2008 mit 40 kbps zurechtkommen muss. Sobald die Gesamtbevölkerung mit einem WebKit-Browser und UMTS mobil unterwegs ist, kann man das Buch getrost zu den Akten legen. Aber bis dahin hat es seinen Wert: Zum ersten Mal erfahre ich hier kompetent erläutert, was es mit der seltsamen Wandlung des Begriffes WAP auf sich hat. Ich erhalte konkrete Handlungsanweisungen für auszuliefernde MIME-Types. Und ich erfahre, wie man mittels eines PHP-Scripts die Parameter des eingesetzten Mobiltelefones auslesen kann. Sehr schön. Aber nur ein Bruchteil der Dinge, die ich lernen konnte!

Etwa die Hälfte des Buches ist wirklich sehr gut gemacht und hält lückenlos alle Informationen bereit, die man als Webdesigner benötigt, wenn man eine moderne und nutzerfreundliche mobile Website bauen möchte.

Ein Viertel beschreibt, wie man gutes XHTML-MP schreibt – und die Unterschiede zu gutem regulärem XHTML sind sehr gering. Das heißt: Wer schon vorher semantisch sauber Websites und Templates umgesetzt hat, wird nicht viel Neues erfahren und viel überfliegen können. Hier wäre es sinnvoller gewesen, die Unterschiede stärker herauszuarbeiten und Gemeinsamkeiten nur ganz knapp zu erwähnen.

Ein letztes Viertel geht sehr stark auf die vom W3C herausgegebenen Best Practises ein. Auch diesen Teil hätte man sehr stark kürzen können, weil er ausufernd und umständlich alle Postulate noch ein zweites und drittes Mal erläutert, obwohl das eigentlich schon alles aus den vorderen Teilen bekannt ist. Ein bisschen zu gründlich und konzeptionell gedacht – und zu wenig pragmatisch.

Insgesamt jedoch hat das Buch großen Spaß gemacht. Manuel besticht mit einer lockeren und motivierenden Sprache, wenn auch nicht immer vollständig pointensicher. Ich weiß nun ein ganzes Stück weit besser, wie ich eine mobile Website planen und umsetzen würde, und kann im Kundengespräch sicher das eine oder andere Argument zitieren. Was mir gefehlt hat, ist ein Analyse-Teil, wo konsequent eine Handvoll Beispielseiten mit verschiedenen Handys unter die Lupe genommen wird. Damit man ein Gefühl bekommt für die Vielfalt und die Nichtkontrollierbarkeit der Darstellung, und wie man damit dann doch irgendwie kontrolliert umgehen kann. Also »best practice« im wirklich praktischen Sinne, und nicht als theoretisches Erklären von W3C-Empfehlungen.

Für 20 Euro und mit weniger Umfang wäre das Buch ein Pflichtkauf für alle modernen Webdesigner. In der jetzigen Form ist es immer noch ein echter Kauftipp für alle, die sich ernsthaft mit dem mobilen Web auseinandersetzen wollen, wie es derzeit (noch) Realität ist.

Kommentare [4]