Blog  Subscribe to our RSS feed RSS

World Health Organization Goes Responsive

No doubt, the mobile world has been growing rapidly these past few years. By now there should be more mobile devices on earth than people, according to an infographic posted on digitalbuzzblog.com. This increases the importance of Responsive Web Design; and the World Health Organization (WHO) didn’t want to miss out on the potential user base.

Creating a Responsive Website for the WHO

Rather than creating an entirely new web design, the WHO preferred to undertake a ‘retro-fit’ to their existing website and asked us to make as few changes as possible to the current design. As a consequence, we focused on the responsive layout and usability at smaller screen widths, while keeping the site as light as possible to ensure countries with slower internet connections still had decent performance.

WHO's original implementation was not optimized for mobile screens.

WHO’s original implementation was not optimized for mobile screens.

Although changes to the existing live site were minimal, the implementation of responsive design did require some adjustments to the code in order to achieve an optimal responsive layout. Things like modifying the navigation to expand and collapse on smaller screens, widening the space for lists and navigation items, and playing with slider interactivity needed to be done to accommodate a new medium of user interaction. After discussing our suggested changes and layouts for the different screen sizes with the WHO, we started working on the desired solution.

yes

WHO Responsive Wireframes

Challenges for Implementing a Responsive Website

There’s no question about the importance of having a responsive website, however implementing it is not the easiest task. Responsive web design often requires more code which can adversely affect the size and load time of a website. Extra lines of JavaScript, jQuery plugins, and additional CSS code will need to be added to display a module or make it behave in a different way on mobile sizes.

User behaviour also changes significantly on mobile devices vs. laptops/desktops – users no longer point and click with a mouse, but tap and swipe with fingers. In addition to adjusting an optimized design to all possible screen sizes, we also kept in mind to give the user the best user experience (UX) possible on these sizes. Large text and prioritized content makes the most efficient use of the screen real estate.

Implementing the New Design

Using responsive design best practices, we implemented a responsive WHO template that took into account all aspects of the WHO site, and optimally displayed it in various screen sizes. Things we did:

  • Navigation and Menu options: After the screen hits a certain size, the menu bar disappears and is replaced with an icon on the top left.
  • Carousel and Slider Images: The user is able to slide through a few topic bars on the mobile size screen that makes it easier to display all of the content also on smaller screens.
  • Drop-down menus: The content is hidden behind drop-down menus that need to be clicked on to display. This allows for better organization and prevents the user from scrolling down too much at a smaller screen size.
test

WHO Responsive Implmentation

With retina displays, high pixel density is a concern – we optimized icons to ensure they displayed sharp and crisp on all Apple devices.

The WHO’s New Responsive Website

The WHO’s new website is fully responsive and adjusts to every screen size without disruptive changes in the overall layout and user interface. Additionally, we kept their homepage at a total size of 538KB with a load time of 1.57 seconds.

Wanting to go responsive? We can help your site be accessible to all your visitors – no matter how they reach you. Let’s Talk.