Web design for mobile devices
Since many websites are now accessed via mobile devices with relatively small screens, it is essential to tailor content to this type of reception. Initial approaches such as the creation of special “light” versions with limited content (and crossreferences to the desktop version if more detailed information is required) have proven unsatisfactory. Unless adequate strategies are sought, numerous problems arise: confusingly truncated titles and texts, arbitrarily cropped photos, informative diagrams shrunk to the point of illegibility and tables reduced to a jumble.
The solution, so-called adaptive content, can also improve an existing desktop site. It is both organisationally and technically challenging, requiring as it does a powerful CMS system. Small chunks of content are arranged into a pool (e.g., title, subtitle, summary and running text, ideally segmented with subheadings), augmented by meta-information on status, and the whole assembled appropriately for the front- end device in question (cf. McGrane 2012: 47-82). Initially, content is generated in presentation-independent form; only later is it converted into text using devicespecific layout information. Formatting and selections are applied to specific screen situations, as well as to services such as blogs, Facebook, Twitter, search engine result lists and the like.
The ultimate goal of rendering all content suitable for mobile devices may demand the preparation of alternative versions to suit reception conditions, e.g., shorter titles with a meaning as close as possible to the original, or graphics displaying portrait format data shown in landscape format on a desktop.
Of course, smartphones and tablets also present different challenges as regards navigation. Since the home page remains extremely valuable as the first point of contact, it would be unwise to give it over entirely to navigation buttons. Where there are very clear user priorities, though, the most important buttons and fields can be positioned here (e.g., input masks for ticket bookings with Lufthansa); a second step is then needed only to access other pages. Increasingly standard use of an icon with three horizontal bars (also known as a “hamburger”) to denote navigation is helpful as it is widely used and understood. The time-consuming business of struggling through content on smaller screens (as more steps are generally needed) makes progressive disclosure a guiding principle in the packaging and distribution of content (cf. McGrane 2012: 111; see also Section 3.5). Given the responsiveness of modern smartphone displays, the elementary (and highly ergonomic) action of swiping has made even longer texts relatively easy to read - more so, in fact, than scrolling. Admittedly, it is impossible to obtain a proper overview of a longer text on a small screen, but the accordion principle can help to compensate for this.