Interview mit Stefania Trabucchi

Responsive Websites: „Ladegeschwindigkeit ist wichtiger als Design!“
Kommentare

Mit Frontend-Build-Tools wie Grunt, Bower oder Yeoman lässt sich der Responsive Workflow komplett neu organisieren. Im Rahmen eines solchen Reshapings geht es vor allem um die Automatisierung von Prozessen, wie z. B. um die Erstellung von HTML-Gerüsten, um das Management von CSS-Dateien oder der JS Library.

Auch die Verkettung und Minimierung von CSS-Dateien zur Performanceoptimierung oder das Live-Reloaden von Browserinhalten fürs Testing sind weitere Aspekte des Reshapings.

In ihrer Session „Reshape your Responsive Workflow“ auf der MobileTech Conference in München erklärt Stefanie Trabucchi, geschäftsführende Gesellschafterin der Abstract Technology GmbH, welche Benefits man erwarten darf, wenn solche Tools genutzt werden und was für den Responsive Workflow wirklich wichtig ist.
Im Interview fragen wir Stefania unter anderem, in welchem Rahmen sich diese Erneuerungen im Responsive Workflow bewegen und was man in solchen Projektszenarien beachten muss.

Was sind aus deiner Sicht und deinen Projekterfahrungen die häufigsten Mängel in Responsive Workflow-Prozessen?

Stefania Trabucchi: In meiner Rolle bei Abstract Technology als Frontend-Spezialistin, Expertin für Content Strategy und Projektmanagement bin ich meistens diejenige, die mit dem Kunden redet, dessen Wünsche und Erwartungen aufnimmt und für das Team übersetzt. Schon in diesem Teil des Prozesses kann es – wenn Kunde und Team unterschiedliche Vorstellung vom responsiven Prozess haben – zu Missverständnissen kommen. Wir erinnern uns an Stephan Hays Kritik zum Wasserfall-Modell. Was wir brauchen, ist sowohl ein konsistentes Design, als auch klare Definitionen, wie man das Design konsistent umsetzt. Gleichzeitig benötigen wir aber auch die richtigen Tools und die richtigen Techniken, um das Design zu implementieren und alles zu testen. Wir müssen also alle zusammen ein Verständnis aufbringen, was es z.B. bedeutet, die Ladezeiten für eine Seite auf zwei Sekunden zu minimieren, wir müssen alle verstehen, für wen eine responsive Applikation wichtig ist. Wir sollten nicht zuerst über Breakpoints reden, wenn wichtigere Punkte, zum Beispiel Navigationskonzepte, aber vor allem die Content Strategy, noch nicht besprochen worden sind. Die Ausgangsbasis im Prozess-Workflow soll womöglich identisch sein. Wenn wir von Reorganisation (Reshape) reden, ist es erforderlich, dass Elemente wie Features, Content, Bilder und Bilderanimationen, Formulare, responsive Tabellenkonzepte usw. mit Vorüberlegungen im Prozess definiert werden müssen. Deswegen arbeiten wir mit Prototypen, die uns erlauben rechtzeitig, zu testen und Änderungen vorzunehmen. Die Priorisierung von Responsive soll nicht vor die Performance gesetzt werden, weil eine responsive Applikation mit 1,4 MB und mit über 100 Objekten, die geladen werden müssen, keine Strategie sein kann.
Progressive Enhancement einerseits (welches eine Bereitstellung von Information für jeder Gelegenheit funktionieren muss) und Responsive Web Design andererseits sind meiner Meinung nach untrennbar miteinander verbunden.

 

MobileTech-Conference-2015Mobile Innovation & Enterprise Mobility
Die MobileTech Conference ist die führende Konferenz für Mobile Technologien und Innovation im deutschsprachigen Raum. Als Impulsgeber der Mobile-Branche führt sie erfahrene Experten aus allen Bereichen der mobilen Produktentwicklung zusammen.
Den Teilnehmern stehen mehr als 60 international bekannte Experten aus dem Mobile-Umfeld zur Seite, die ihr praktisches Know-how und hilfreiche Tipps weitergeben. Im Fokus des Konferenzprogramms steht die  erfolgreiche Entwicklung und Umsetzung von Mobile Services – sowohl im Consumer- als auch im Enterprise-Umfeld. Vom 23.-26. März findet die MobileTech Con in München statt. Bis 26. Februar profitieren Sie noch von attraktiven Frühbucherpreisen. Alle Infos zu Konferenz, Programm und Speakern unter: http://mobiletechcon.de

Was muss man unter dem Reshaping eines Responsive Workflows verstehen?

Stefania Trabucchi: Während wir auf HTML 6 warten, wo dann alles besser wird (?), haben wir die Aufgabe responsible responsive Applikationen (siehe auch Buch von Scott Jehl „Responsible Responsive Design“ auf www.abookapart.com/) zu entwickeln. Die Herausforderung, der wir uns heute stellen müssen, ist die Optimierung der verschiedenen Komponenten. Auch in 2015 wird das Hauptthema Performance sein, weil Ladegeschwindigkeit wichtiger geworden ist als Design. Die Erwartungen und die Geduld der User, was Ladezeiten angeht, ist gering: Eine Seite muss in weniger als zwei Sekunden aufrufbar sein. Wenn z.B. eine Shopseite über drei Sekunden zum Laden braucht, wird der User diesen Onlineshop einfach verlassen. Und wenn die Performance in dem Shop des Wettbewerbers besser ist, wird der Kunde nicht mehr zurückkehren. D. h. wir müssen die User auch teilweise remotivieren, unsere mobile Website zu besuchen, weil Responsiveness noch nicht allein bedeutet, eine responsive Website zu haben. Wir müssen im Prozess als gesamtes Team – vom Kunden bis zum Developer – ein Bewusstsein dafür entwickeln, wie Responsibility und Accessibility funktionieren.

Welche Vorteile birgt so ein Reshaping?

Stefania Trabucchi: Ein responsiver Workflow-Prozess kann die Grundlage dafür sein, eine konsistente Codeentwicklung zu haben, wo Tests und Performance von Anfang an im Mittelpunkt stehen. Wir kennen die „Killer“ im RWD: Bilder (nicht optimiert), zu viele eingebundene Codes von Social-Media- oder Tracking-Systemen, Nutzung von Frameworks, die für uns überladen sind, schlechter Aufbau von Datenbanken.
Tools wie PhantomJS helfen dabei, schnell die Funktionalität zu testen, und geben direkt auf der Kommandozeile die Ergebnisse aus. Mobile First und Prototypen sind auch ein Vorteil, weil Ergebnisse aber auch Fehler viel schneller erkannt werden können. Und wenn 20 Prozent mehr User nach einem Launch auf einer mobilen Seite sind als vor dem Relaunch, dann sind die Vorteile auch für die Kunden sofort messbar.

Wie sehr muss bei solch einem Reshaping das jeweilige Projektszenario beachtet werden? Oder ist eine Reshaping-Strategie universal anwendbar?

Stefania Trabucchi: Eben nicht! Genau diesen Fehler begehen Neukunden oft, wenn Sie mit dem Workflow-Prozess vertraut gemacht werden. Die Auswahl eines Frameworks scheint aus Kundensicht wichtiger als der Prozess. Der Kunde will beispielsweise wissen, ob wir auch Bootstrap nutzten, weil Bootstrap dann zur Genüge reponsive ist. Oft versuchen Kunden vorzugeben, wie viele Breakpoints im Design notwendig sind, ob fünf oder acht reichen. Dabei sehe ich das Thema Breakpoint ganz anders, weil man auch mit nur drei Breakpoints auskommen kann, bzw. die Breakpoints innerhalb der Komponenten ansiedeln kann (ich würde sie Micro-Breakpoints nennen). Die Annahme, alle Webseiten haben universelle responsive Anforderungen, ist fälschlicherweise genauso stark verbreitet, wie die Annahme, dass Tests für die Größe und Auflösung von iPhone und iPad ausreichend sind. Allzu oft habe ich erlebt, wie kaum reale Tests gemacht wurden.
Wenn dem Kunden klar ist, dass in einem Device-Lab über 130 bis 140 Geräte zum Testen zur Verfügung stehen und diese auch ihre reale Berechtigung haben, wird in der Diskussion immer klarer, worauf man im Workflow-Prozess tatsächlich achten soll.
In vielen Fällen würde ich mir wünschen, ein Lab in meinem Büro zu haben, wo ich die Kunden einladen und ihre Webseiten erstmal auf allen möglichen mobilen Geräten, sowie Fernsehern, verscheiden Monitoren, Laptops, Spielekonsolen, Smartwatches und anderen Wearables testen und Erfahrungen sammeln lassen kann.

In deinem Vortrag willst du zeigen, in welchem Rahmen sich solche Erneuerungen bewegen sollten. Kannst du uns schon einen kleinen Vorgeschmack geben? Was sind die Eckpfeiler dieses Rahmens?

Stefania Trabucchi: Wir schauen uns als Beispiel an, welche Unterschiede in der Performance auftreten, wenn zwei statt vier Fonts implementiert werden. Runde Ecken und Verläufe sind von Bootstrap 2.3 zu Version Bootstrap 3 nicht mehr vorhanden (flat und eckig geht doch auch). Warum? Was liegt der Unterschied? Oder warum SVG und SVG-Font sinnvoll sein können. Wir bauen Applikationen mit einem Design-Thinking-Approach. Das bedeutet, dass über die gesamte Dauer des Entwicklungsprozesses ein Prototyp zur Verfügung steht, und dass dabei quasi wie bei einer Dokumentation, in der alle Code-Schnipsel (siehe auch Pattern Lab) enthalten sind, diese vom Developer erst übernommen werden, wenn die Funktionalität implementiert wird. Der Kunde verfügt aber während des gesamten Entwicklungsprozesses immer über eine funktionierende Demo. Wir sind der Meinung, dass die Konsistenz von Code ein Vorteil genauso für Designer wie Kunde oder Developer darstellt.

 

Stefanie TrabucchiStefania Trabucchi ist geschäftsführende Gesellschafterin der Abstract Technology GmbH. Als Kompetenzcenter für Internet-Technologie, unterstützt die international aufgestellte Agentur Ihre Kunden aus den Bereichen Business, Government und Education in Ihren Entscheidungs- und Umsetzungsprozessen für ihr Online-Business. Abstract Technology entwickelt auf Basis von Open Source Software Lösungen für Internetpräsenzen, E-Commerce und Intranetanwendungen. Basierend auf ihrer langjährigen Projekterfahrung als Front-End-Entwicklerin sowie als Konferenz-Sprecherin und Dozentin für Webtechnologien liegt der persönliche Fokus von Stefania Trabucchi in der Beratung und Umsetzung von Content Strategy und -Choreography mittels Responsive Web Design Technologien und der Integration mobiler Anwendungen.

Aufmacherbild: Modern flat & responsive illustration of computer coding via Shutterstock / Urheberrecht: MPFphotography

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -