Responsive Design: one report for all devices.

Responsive design allows for an ideal presentation of web content not only on large screens, but also on smartphones and tablet computers.

Dieser Beitrag ist auch in Deutsch verfügbar.

responsive-vw

“You never get a second chance to make a first impression” – this is a truism known in corporate publishing. The first impression is what counts – it doesn’t matter whether it’s made by the cover of a magazine, a brochure or the landing page of a corporate website. Many companies, however, do not entirely live up to this principle, particularly in the field of online reporting. Especially when it comes to mobile users, concessions are often willingly made in regard to presentation and usability. Without mobile optimisation, contents cannot be made available on smartphones without tedious zooming and panning. The consequence is that many users get frustrated and, in the worst case, may even leave the page.

Responsive Design enables companies to make a good first impression no matter which device is used. The “reactive” layout adapts dynamically to the available display sizes of smartphones, tablets and the like without the need for an additional mobile version of the report. When using a mobile device to access the report, images, graphics and texts adjust automatically to the size of the display, the navigation menu is replaced with a separate mobile menu and tables are prepared in a manner that can be easily viewed on smartphones. The optimisation process is based on web technologies such as HTML5, CSS3 and JavaScript.

A lot of questions

There is a wide range of options for mobile optimisation, but only some turn reporting into pleasure. Therefore, the starting point at nexxar is based on a set of criteria for every responsive project. In a first briefing, we determine i.a. the following issues:

  • For which devices (smartphones, mini-tablets etc.) and which operating systems (iOS, Android etc.) shall the report be optimised?
  • Which mobile browsers and which browser size shall be supported?
  • Shall the reports be optimised for retina displays?
  • How shall typical features of the reports function in the mobile version? Which features should not be implemented for media-specific reasons?
  • How should tables and graphics be displayed?

Optimised smartphone vs fully responsive version.

The first question plays a decisive role: At the beginning of every project, it has to be determined whether responsive design is to be adapted for smartphones primarily, or for all kinds of mobile device, which would e.g. also include devices such as the iPad. Many of our customers decide against the latter since the desktop version of the report can usually be displayed without significant limitations on most tablets. Besides, special reporting apps for iPads are frequently offered which cannot only be used offline, but provide a further distribution channel via iTunes.

In 2013, our customer ABB decided for a fully responsive version. For the optimisation of both, the annual and the sustainability report we used a so-called mobile-first approach. This approach goes beyond “standard” responsive design since the desktop version is no longer used as starting point for the web layout. Instead, it was somewhat to the contrary: the layout is based on the smallest possible screen (e.g. smartphone) leading to the largest version (e.g. desktop version), and covering various other formats such as the iPad-mini by defining various breakpoints (see graphic).

Conclusion

There is no doubt that the future of online reporting will continue to be shaped by the mobile trend: Our statistics demonstrate clearly that the share of mobile users of online reports has increased significantly over the past few years. Yet for all the enthusiasm, one should keep in mind that most users will continue to browse online reports via desktop computers in the years to come. Responsive design is one option to satisfy the needs of both user groups: with no additional “mobile version”, but one report for all devices / users.

Related topics in our lab:

Comments.

Add a comment.