Brian Harder, Manager, Strategic Web Services

Today marks the relaunch of our Health Information Library in a future-friendly, mobile-compatible format—what is considered “responsive design."

The concept is simple: build fluid templates, and fluid content, in order to serve the same page to all devices big or small. Easy in concept, a little tricky in the actual implementation.

The rollout required several critical changes:

  • All areas in the health library are now fluid in order to support big and small devices.
  • The library's landing page was simplified to focus predominantly on search.
  • All videos in the library are now served from our YouTube channel to ensure videos will play in the widest range of devices.

Rebuilding the Hopkinsmedicine.org Banner

In addition to these changes, the banner featuring the Hopkins Medicine logo, navigation, and on-site search was revised to introduce responsive features. The new banner will be rolled out across hopkinsmedicine.org in early January.

The enhancements include:

  •  Introduction of off canvas layouts to enable drop-in or slide-over menus on mobile devices.
  • Improved accessibility to users with disabilities. Our responsive design greatly improves font resizing, flexible display formats, and employs other techniques for improved accessibility.
  • Customizable site searching with results lists, now supported in mobile formats.
  • Extension of the emergency announcement display to be fluid on all devices.
  • Web services support for sharing the brand and banner with sites not on HopkinsMedicine.org (using simple JavaScript inclusions), including tracking capability to allow us to see which sites use this code.
  • Enhanced and standardized code performance with more advanced JavaScript methods.

In all, we are excited to relaunch the improved health library, the first completely responsive environment on hopkinsmedicine.org.

Want to learn more about responsive design? Check out this article in Smashing Magazine.

Share This Post