Responsive Design for the ETH Website
An ever increasing number of mobile devices are being used to surf the internet. And we wish to support this development at ETH Zurich. IT Services and Corporate Communications have carried out a joint project, that makes the websites on our Web Content Managment System responsive.
Background
The web design, which had been in use since 2013, was geared primarily towards presentation on desktop computers. It was usable on most tablets, but hardly any mobiles. The content was reduced in size proportionately, but not realigned. This meant the text was usually to small to read, and the links could only be used by users who really knew how to use the zoom and touch functions.
From the summer of 2015, the website m.ethz.ch was available, which displayed part of the main ETH website (www.ethz.ch) in a manner optimised for smartphones. However, those who wished to delve further into the content or who were following a Google search result, were taken back to the desktop view.
Retrofitting
In order to support mobile devices – without having to replace the design completely – we decided to use the retrofitting procedure for this project. This enabled us to build on top of the existing design and develop it further organically to make it responsive. This necessitated a great deal of expertise in the areas of design and usability, an extensive knowledge of the studies completed on this topic. We therefore needed a competent partner, which we found in the company Zeix AG. This company not only has a great deal of know-how, as it has also conceptual decisions extensively while avoiding subjective perceptions to a significant extent. Retrofitting, of course, always represents a compromise.
Breakpoints
The extended design contains multiple breakpoints (defined points in the CSS stylesheet, which can be used to adjust the representation of the website in line with different display sizes): one layout for mobiles, one for tablets, on (only marginally changed) for desktops an one for wide screen displays. This kind of view is intended for the presentation of, for example, a carousel on a public monitor. Those who do not want this view on their desktop computers, can reduce the size of the browser window to get the usual appearance.
Integration
Zeix not only worked on the design from a conceptual and optical perspective, but also implemented it on static HTML pages. Following this, the department ITS Software Services (ITS SWS) integrated the CSS and JavaScript code into the Web Content Management System (WCMS). The process of integration with a code review proved once again to be the right choice. A number of adjustments also had to be made to the HTML code. Some of this work was completed by ITS SWS, and some by our long-term partner Webtiser.
Automated tests
At the beginning of the project we had to make adjustments to the CSS files that did not have any influence on the appearance. Automated User Interface Tests from ITS SWS were used for this purpose, which are a very efficient method for detecting unwanted effects. During subsequent phases the Xamarin Test Cloud was also included, which is used for app development by ITS SWS and which enables the same app – or in this case website – to be displayed and compared on different devices. The advantage here: the devices are not simulated, but exist physically in a data centre. During the final phases the load tests were carried out, in order to ensure nothing new had been added that would slow things down. There is however one thing that cannot be avoided with a responsive design: the requirements regarding the layout and script abilities of the browser are significant and the high-resolution images require a certain amount of bandwidth.
Optical tests
It is of course not possible to completely automate all of the tests for a design project. This meant that not only Zeix, but also our colleagues from Corporate Communications (HK) and IT Services (ITS) spent many hours testing the pages and finding errors. And here, too, we had to be meticulous in ensuring real errors (cut, invisible areas, etc.) and personal preferences were not mixed up.
Assistance from authors
Despite all of our efforts, we could not simply convert all 548 websites, with around 40,000 web pages, without looking, and simply hope that everything would work without any problems. Because of this, the responsive design has been available to the authors sind July, who were able to view their own content and – where required – optimise or adjust it. Corporate Communications updated the Web Manual for this purpose and also provided an FAQ for the responsive design. The main changes for the authors relate to the images. Now that we are also supporting 4K (also known as “Retina”), all of the images require double the resolution. The authors also had the chance to report errors (with the same rules as above) in the design, which they all made use of. They thus made an important contribution towards the success of this project. Many thanks!
Contact
Christian Schär, Group Manager ITS WCMS, LMS & Mobile Applications, ITS Software Services
erstellt am
in News
