{"id":10601,"date":"2017-10-20T15:36:33","date_gmt":"2017-10-20T13:36:33","guid":{"rendered":"https:\/\/wpethzprd.ethz.ch\/id\/?p=10601"},"modified":"2017-10-25T13:04:40","modified_gmt":"2017-10-25T11:04:40","slug":"responsive-design-fur-den-eth-webauftritt","status":"publish","type":"post","link":"https:\/\/blogs.ethz.ch\/id\/2017\/10\/20\/responsive-design-fur-den-eth-webauftritt\/","title":{"rendered":"Responsive Design f\u00fcr den ETH Webauftritt"},"content":{"rendered":"

Das Internet wird mehr und mehr mit mobilen Endger\u00e4ten benutzt. Dieser Entwicklung wollen wir auch an der ETH Z\u00fcrich Rechnung tragen. Die Informatikdienste und die Hochschulkommunikation haben deshalb ein gemeinsames Projekt durchgef\u00fchrt, welches die Webseiten auf unserem Web Content Management System (Adobe AEM) responsive<\/a> werden l\u00e4sst.<\/p>\n

<\/p>\n

Vorgeschichte<\/h2>\n

Das Webdesign, welches ab 2013 im Einsatz war, besass eine Darstellung prim\u00e4r f\u00fcr Desktop-Computer. Auf den meisten Tablets war diese auch benutzbar, allerdings kaum auf Handys. Die Inhalte wurden lediglich proportional verkleinert, nicht aber neu angeordnet. Somit wurde die Schrift unlesbar klein und Links waren nur noch sehr versierten Benutzerinnen und Benutzern der Zoom- und Touch-Funktionen vorbehalten.
\nAb Sommer 2015 existierte dann die Webseite m.ethz.ch, welche einen Ausschnitt der ETH-Hauptseite (www.ethz.ch<\/a>) \u2013 optimiert f\u00fcr Smartphones \u2013 darstellte. Wer tiefer in die Inhalte einsteigen wollte oder einem Google-Suchresultat folgte, wurde aber zur\u00fcck auf die Desktop-Ansicht gezwungen.<\/p>\n

Retrofitting<\/h2>\n

Um den mobilen Ger\u00e4ten gerecht zu werden \u2013 ohne das Design komplett zu ersetzen \u2013 haben wir uns bei diesem Vorhaben f\u00fcr das Retrofitting-Verfahren entschieden. Dieses erm\u00f6glicht, auf dem bestehenden Design aufzubauen und es organisch zu einem responsiven Verhalten weiterzuentwickeln. Dies setzt breites Wissen im Bereich Design und Usability voraus, insbesondere umfassende Kenntnisse \u00fcber die Studien zu diesem Thema. Wir haben uns deshalb einen kompetenten Partner gesucht und ihn mit der Firma Zeix AG<\/a> gefunden, die dieses Know-how vorweisen kann und dar\u00fcber hinaus auch eigene Untersuchungen durchf\u00fchrt. Auf diese Weise konnten wir die konzeptionellen Entscheide breit abst\u00fctzen und subjektive Empfindungen weitgehend meiden. Nat\u00fcrlich bleibt aber ein Retrofitting auch immer ein Kompromiss.<\/p>\n

Breakpoints<\/h2>\n

Das erweiterte Design besitzt mehrere Breakpoints (definierter Punkt im CSS Stylesheet, mit dem sich die Darstellung der Webseite an die unterschiedliche Displaygr\u00f6ssen anpasst): ein Layout f\u00fcr Handys, eines f\u00fcr Tablets, das (nur marginal ge\u00e4nderte) f\u00fcr Desktop und eines f\u00fcr Wide-Screen. Wide-Screen bedeutet dabei \u00abgrosse Bildschirme\u00bb. Diese Ansicht ist z.B. f\u00fcr die Pr\u00e4sentation eines Karussells auf einem \u00f6ffentlich ausgestellten Monitor gedacht. Wer diese Ansicht auf seinem Desktop-Computer nicht m\u00f6chte, kann das Browser-Fenster verschm\u00e4lern und erh\u00e4lt die gewohnte Ansicht.<\/p>\n

Integration<\/h2>\n

Zeix hat das Design nicht nur konzeptionell und optisch erarbeitet, sondern auch auf statischen HTML-Seiten implementiert. Die Sektion ID Software Services (ID SWS) hat den CSS- und JavaScript-Code anschliessend in das Web Content Management System (WCMS) integriert. Hierbei hat sich der Prozess der Integration mit Code-Review einmal mehr bew\u00e4hrt. Auch am HTML-Code mussten einige Anpassungen durchgef\u00fchrt werden. Diese erfolgten teils durch ID SWS, teils durch unseren langj\u00e4hrigen Partner Webtiser<\/a>.<\/p>\n

Automatisierte Tests<\/h2>\n

Gerade zu Beginn des Projekts war es erforderlich, Umstellungen in den CSS-Dateien vorzunehmen, die keinen Einfluss auf die Optik haben sollten. Hier kamen die automatisierten User Interface Tests von ID SWS zum Einsatz. Sie sind eine sehr effiziente Technik, um ungewollte Effekte zu detektieren. In sp\u00e4teren Phasen wurde dann auch die Xamarin Test Cloud<\/a> mit einbezogen, die in der App-Entwicklung von ID SWS eingesetzt wird und es erm\u00f6glicht, dieselbe App \u2013 oder in diesem Fall Webseite \u2013 auf unterschiedlichen Ger\u00e4ten anzeigen zu lassen und zu vergleichen. Der Clou dabei: Die Ger\u00e4te sind nicht simuliert, sondern existieren physisch in einem Rechenzentrum. In den sp\u00e4ten Phasen wurden auch Lasttests durchgef\u00fchrt, um sicherzustellen, dass wir keine neuen \u00abBremskl\u00f6tze\u00bb einbauen. Was sich bei einem Responsive Design aber nicht vermeiden l\u00e4sst: Die Anforderungen an die Layout- und Script-F\u00e4higkeiten der Browser sind hoch und die hochaufl\u00f6senden Bilder erfordern eine gewisse Bandbreite.<\/p>\n

Optische Tests<\/h2>\n

Selbstverst\u00e4ndlich kann ein Design-Projekt nicht komplett automatisiert getestet werden. So haben nicht nur bei Zeix, sondern auch bei der Hochschulkommunikation (HK) und den Informatikdiensten (ID) unsere Kollegen viele Stunden investiert, um die Seiten zu pr\u00fcfen und Fehler zu finden. Auch hier musste akribisch darauf geachtet werden, dass echte Fehler (angeschnitten, unsichtbar, etc.) von pers\u00f6nlichen Vorlieben getrennt werden.<\/p>\n

Mithilfe der Autorinnen & Autoren<\/h2>\n

Selbstverst\u00e4ndlich ist es trotz allem nicht m\u00f6glich, die gesamten 548 Websites mit ihren rund 40\u2019000 Webpages blind umzustellen und zu glauben, dass alles problemlos funktioniert. So war das Responsive Design seit Juli den Autorinnen und Autoren zug\u00e4nglich und sie konnten ihre eigenen Inhalte ansehen und \u2013 wo n\u00f6tig \u2013 optimieren oder anpassen. Die Hochschulkommunikation hat dazu das Web-Manual um ein FAQ f\u00fcr das responsive Design erweitert. Die Haupt\u00e4nderung f\u00fcr die Autoren liegt dabei bei den Bildern. Da wir neu auch 4K (auch bekannt als \u00abRetina\u00bb) unterst\u00fctzen, ben\u00f6tigen die Bilder die doppelte Aufl\u00f6sung. Auch die Autoren hatten die M\u00f6glichkeit Fehler (es galten die gleichen Regeln wie oben) im Design zu melden, und haben davon auch Gebrauch gemacht. Sie haben damit ebenfalls einen wichtigen Beitrag zum Projekt geleistet. Herzlichen Dank!<\/p>\n

Kontakt<\/h2>\n

Christian Sch\u00e4r, Gruppenleiter ID WCMS, LMS & Mobile Applications, ID Software Services<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Die Informatikdienste und die Hochschulkommunikation haben deshalb ein gemeinsames Projekt durchgef\u00fchrt, welches die Webseiten auf unserem Web Content Management System (Adobe AEM) responsive werden l\u00e4sst.<\/p>\n","protected":false},"author":40179,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1179,25,898],"tags":[3054,46822,1530,891,148],"class_list":["post-10601","post","type-post","status-publish","format-standard","hentry","category-mail-web","category-news","category-support","tag-informatikdienste","tag-software-services","tag-wcms","tag-web","tag-www"],"_links":{"self":[{"href":"https:\/\/blogs.ethz.ch\/id\/wp-json\/wp\/v2\/posts\/10601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ethz.ch\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ethz.ch\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ethz.ch\/id\/wp-json\/wp\/v2\/users\/40179"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ethz.ch\/id\/wp-json\/wp\/v2\/comments?post=10601"}],"version-history":[{"count":0,"href":"https:\/\/blogs.ethz.ch\/id\/wp-json\/wp\/v2\/posts\/10601\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.ethz.ch\/id\/wp-json\/wp\/v2\/media?parent=10601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ethz.ch\/id\/wp-json\/wp\/v2\/categories?post=10601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ethz.ch\/id\/wp-json\/wp\/v2\/tags?post=10601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}