When Marker Seven worked with MedicAlert to create a fresh, professional and interactive website for the highly-respected emergency support network, it was clear that responsive design was going to be important. The site’s audience is demographically broad. The features it offers vary widely – from membership login and text chat, to a shopping cart.

What is Responsive Design?

Today’s websites must function on smart phone screens and full-size monitors alike. “Shrinking” a site to fit on a small screen can make text unreadable and links difficult to click by touch. Designing exclusively for a small screen makes for very sparse content and lots of empty space on a full-size screen. Responsive design takes into account the size of the screen that a website is being displayed upon, and adapts the content to fit the space available.

For MedicAlert, Marker Seven used responsive design in the following key areas:

Headers

• At the widest browser widths, images and Social links float to the edges to avoid blank space on the sides.
• At “middle” or normal desktop settings, the Slide Navigation font is smaller. Blank space collapses to the center.
• In a very narrow browser window, fonts are reduced even further and certain images in the navigation are dropped to allow text to collapse.
• On a smart phone screen, Top Navigation links will begin to stack vertically.

Body Text

• As screen width is reduced, text wraps with it, eliminating the inconvenience of horizontal scroll bars.
• Side navigation collapses to stack on top of body text.
• Floating chat prompt remains in bottom right corner.

Catalog

In addition to member and support information, MedicAlert.org offers a catalog of items for purchase.

• Body text and descriptions collapse to prevent horizontal scrolling.
• Product images and filters stack on small screens so products are not missed and filter boxes remain legible.

Conclusion

To reach the diverse audience MedicAlert seeks to reach, responsive design allows their website to adapt to many viewing devices and preferences.