Content

Background

The openIMIS Initiative is a very diverse community of users, implementers and developers from all over the globe. Unfortunately the economic conditions are not the same for all of our members - which has an direct impact on what kind of hardware we are using. This is especially ‘visible’ when comparing the screen resolutions of computer screens: while the global standard in most places seems to be HD capable screens (1920x1080 pixels), developers and other nerds often use screens with a much higher resolution while users in underfunded government agencies often run on outdated material using a much lower resolution (e.g. XGA = 1024x768 pixels). Although most operating systems and browsers offer some sort of down-scaling of images, the results are not satisfying simply because the screen cannot display more pixels than were build in physically. The results can be very blurry, fine print becomes unreadable and GUI layouts get awfully scrambled. The size of the screen doesn’t matter - even a huge TV-screen might just have a FULL HD resolution and produce blurry fonts.

View the current distribution of screen resolutions around the globe:

• Asia: https://gs.statcounter.com/screen-resolution-stats/desktop/asia/

• Africa: https://gs.statcounter.com/screen-resolution-stats/desktop/africa

• South-America: https://gs.statcounter.com/screen-resolution-stats/desktop/south-america

Don’t be fooled by the low percentages of XGA machines: these are most likely old laptops which are still in frequent use in underfunded government agencies - our main target group. Anyway - a lot of the presentations I have seen were not even readable on the most commonly used Full HD screens.

Problem statement

People on high end screens produce graphics, presentations, user interfaces and other content for people on low-end screens. The result is often not usable on low end screens - either small fonts are not readable in presentations or user interfaces of web-based applications cannot be used efficiently.

Examples

• Developers on high end computer screens develop user interfaces for users on low-end laptops. The screen layout gets scrambled and can’t be used as the browser tries to arrange the elements in the best possible way on the little space available.

• Webinar presenters with high end screens share power point slides with too much detail. The video call client compresses the images into the smaller resolution which blurs the images - especially graphs with thin lines become unreadable.

• Trainers share code in on-line chats from high end screens with participants on low end screens - effectively only looking at maybe ten percent of their own screen content. The code samples are not readable. This is a screenshot from an openIMIS software demo viewed with an close to XGA resolution - not very useful for the user that needs to be trained:
  
  

  Open

  

Practical Solutions

Put yourself in the position of your users / viewers

• Download the below picture and view it in the original size (100% or 1:1) on your screen. Resize your browser window or the window of the application you want to share to the size of the openIMIS colored box and you’ll get an idea of the screen size of your users on older computers. That is all they’ll be able to see on their side.
  
  

  Open

  

• If you are working on an external Full HD screen, simply flip it into portrait mode and your window width will automatically be close to what your users will see.

Design of user interfaces

Always design your user interfaces with the end-user in mind. When you test your layout, reduce the size of your browser window so it would fit into an XGA screen. Does the layout still make sense?

Design of a slide-deck

Especially with the wide screen formats that are common today, presenters are tempted to crowd content side by side into one slide, that would have been two slides in the older XGA formats. This is not only disturbing for any kind of audience (too much information), but also becomes unreadable on older computers or when you present on-site on an older projector.

Simple resize your PowerPoint or Libre Office Impress Window to the size of the openIMIS colored square in the graphic above and you’ll be forced to design your slides with an adequate content. Even if you can use high end projectors, your audience will appreciate not being overwhelmed by a flood of details.

Design of pdf-reports, wiki and web-pages

• Stay away from multi-column layouts. What looks nice on your browser might look very squeezed on lesser resolutions. Why not stay in simple A4 or US letter widths?

• Simply resize your browser window to the size of the openIMIS colored square in the graphic above and you’ll be able to see what your layout looks like on older screens (or smartphones)

• In a pdf report - why would you want to force people to look at two pages side-by-side? If I want to view pages side-by-side, I will tell my pdf-viewer to do that - on a phone or small screen I definitly don’t want to do that.

• Stay away from over-layouting your content - the original idea of HTML formats was that a browser can adjust the format of the content to the needs of the device it is viewed on, e.g. small devices. Forcing your content into complex formats will make this impossible.

Sharing your screen in a video conference

• Never share your full screen! Even if you don’t care about the viewing quality of your end users you shouldn’t do that as you might have nasty messages popping up from your spouse. Don’t get embarrassed

• Simply resize the window of the application you want to share to the size of the openIMIS colored square in the graphic above and you’ll be able to see what your audience will see while you present. You’ll automatically zoom to an appropriate content.

• If you share code samples or other text, make sure to resize the application window to what you are talking about at the moment. Presenters often do the mistake of having the shared application in full window mode while on talking about a tiny text in the upper right corner of the window - the rest of the screen is a huge blank space.

• Collapse any extra navigation bars, developers tools and whatever side and top/bottom bars you fancy while working in your application - they are normally not needed for the presentation.

• Always be aware that video conferencing platforms and clients add additional elements to the viewers screen thus reducing the size of what you are sharing even further: even if you follow all of the practical tips above, they will still see less than you.

• If possible, share the link to the content you share on the screen - that way your audience can also try to zoom into the text in a separate browser window by themself (an scroll back as they want).