We often encounter adaptive website layouts in everyday digital life, without even realising it. Their visual representation takes place based on the requirements of the terminal device used to access the page. The display keypad on mobile terminal devices enables appropriate keypads to be shown, for instance. This behaviour is already familiar from native applications: in e-mail fields, the keypad offers a “@”, whereas numbers are displayed instead of letters for a telephone call. The same is possible for websites: with HTML5, input fields such as for e-mail addresses, figures or the date can be assigned semantically to a particular type. The corresponding keypad is then displayed based on this semantic reference.
Figure 1: example contact form on the NEBIS website when using a Smartphone
Among other things, this typing is also the basis for the validation of form fields. The correct form semantics includes the relationship between the input field and its label, and is thus also crucial for the use of a screen reader. An input field’s label is read by the display reader programme so the listener knows what to enter. If the reference is deposited correctly, all users stand to benefit. If you try in vain to click on a small checkbox on a touchscreen with your finger, you can touch its label instead. If the formulation of the form is semantically correct, it also shifts the checkbox.
A common area of tension between web developers and designers are the page layouts. Many designers – still characterised by traditional print design – create designs with a static pixel width, such as 980px. This reflects a misunderstanding of the web medium. After all, unlike a page in a book, a website is flexible. Statically defined layouts can therefore have a negative impact on the user-friendliness of websites. Nowadays, the breadth of the notebook or MacBook display no longer represents the narrowest possible width of a website, nor that of the iPad. This is because new devices with heavily varying display sizes keep appearing on the market. This wide variety increasingly begs the question as to how a website can and should adapt. The development of flexible layouts is therefore vital.
Figure 2: varying tablet sizes, source: Lukew Ideation + Design
New, supplementary flexibility technologies, such as “Media Queries”,emerged in the course of HTML5 and CSS3. With their help, a three-column layout can change into a two-column representation from a pre-defined width. The third column is then displayed underneath the two columns. On especially small terminal devices such as Smartphones, the page is only displayed in one column and all page sections lie underneath each other.
Figure 2: flexible layout, source: G. Garcia-Mont
Another subsection of flexibility is elasticity. For many people, it is pleasant to view websites with a larger font, which can be set in the browser. But how does this alter the presentation of the page? Do sections overlap? Do you keep having to scroll across while reading?
How well zooming works also depends on the layout. Fixed layouts are usually inadequate here. For a number of years now, there has been a unit in the CSS that is based on the browser’s set font size (“em”). “Media queries” also play a supporting role here. If you increase the font, the three columns flip over into two columns and, if increased further, one column. The actual textual content is blown up and at the same time has more space in the visible area of the display, which usually renders horizontal scrolling unnecessary. Classic accessibility norms (text enlargement) and current requirements that result from the wealth of devices come together at this point.
The contrast of the back- and foreground colour is also an important aspect of the layout. Some web designers prefer weak contrasts as they are perceived as elegant. However, a website is not just an attractive object of interest, but often a tool, too. As people grow older, their perception of contrast usually deteriorates. But contrasts that are too weak are also a hindrance when viewing notebook screens from the side or using Smartphones. In other words, good contrasts benefit everyone. Whether a contrast is sufficient can be verified objectively with an appropriate tool.
Figure 3: ETH-Bibliothek’s Knowledge Portal, contrast check with the Colour Contrast Analyser
Based on the aspects illustrated, it is evident that a modern website strategy always contains the need for unhampered accessibility, too. The established techniques to develop and test accessibility can make such a significant contribution towards the usability of websites that they can be used effectively on a large number of devices via various bandwidths. The techniques discussed are not only usable within the scope of web projects that have generous human resources at their disposal. On the web itself, there is a series of helpful open-source tools that enable individuals to guarantee unhampered accessibility to their own digital services and already test them during the development phase. A subsequent article on this blog will examine these tools.
Finally, we have “Access for all” , the Schweizerische Stiftung zur behindertengerechten Technologienutzung, to thank for information insights into the everyday use of assistive technology and training our colleagues.
Author: Bernd Uttenweiler
Coautor: Maximiliane Okonnek
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International Public License.
DOI Link: 10.16911/ethz-ib-1050-en