With the strength of phone and tablet technology ever improving, more and more users expect to accomplish tasks that were previously only imaginable on a desktop computer.

Nonetheless, when we began to analyze the Great Lakes Observing System’s site analytics, we were floored to learn that 35% of their traffic over the past year has been on a mobile device. Given GLOS’ hosting of data tools, we expected a much larger majority of users to visit the site with via desktop. Continue reading to learn about the specifics of our implementation of these three methods.

The Challenge

The size of GLOS’ mobile users presented us with a unique challenge—how do we create a cohesive multi-platform user experience that is both visually stunning and highly usable on both desktop and mobile considering GLOS’ high percentage of mobile visits and the complexity of their tools.

Most sites faced with the level of complexity GLOS presents will simply resign themselves to a reduced mobile experience, removing certain functionalities and forcing users to visit the site on their desktop in order to have full access. For example, Google Drive’s website allows users to view files on their phones but does not support sharing or editing documents. We believed that it was important to GLOS’ users to retain full-functionality across all devices. In order to develop an all-platform-inclusive solution to crafting the best possible user experience, we took a mobile first strategy in designing the site.

Mobile First Design Strategy

As mobile browsing traffic continues to grow, responsive design is now a necessity. Every site we develop should retain its usability on mobile. However when it comes to sites that we know are being heavily trafficked by mobile users we start with a mobile-first design philosophy. This additional focus places the user experience of the mobile user first and ensures that all desktop functionality must be designed translate to a phone or tablet. A mobile-first design philosophy means the mobile user will have just as complete an experience as the desktop user. When designing the site, we created the desktop design knowing how elements would shift with screen size and what would create the best, most consistent user experience for users going between mobile and desktop platforms. Below, we have detailed three elements that embody this methodology.

glos_menu3

Navigation

Navigation is one of the most important and difficult factors of a responsive, mobile-first design. As we have written previously, there are several potential implementations of mobile-friendly navigation. GLOS had two levels of navigation that were important for users to have easy-access to, so we chose to implement a multi-level push navigation. Although many sites use this form of navigation for their mobile sites, less choose to also use it on their desktop site. However, using a hamburger-activated navigation made perfect sense for the GLOS site. Not only did we want to keep the navigation experience consistent across platforms, but also by reducing the navigation to the hamburger icon, we were able to create greater emphasis on the beautiful Great Lakes photography that is used across the site.

Sticky Header

Sticky headers—navigation bars that remain static at the top of a page as you scroll—are great for sites where the navigation would otherwise be buried by the amount of vertical space on a page. We wanted the user to easily access the search and navigation, particularly on the mobile platform when the user is scrolling through the tile-based pages. However, screen real estate is incredibly limited on mobile platforms and sticky headers, if poorly implemented, can hog valuable space. Our solution was to make the sticky header as compact as possible, reducing the size of the logo and having the search bar appear below the navbar when activated. The result was an easy-to-navigate mobile experience that does not distract from the main content. Having access to the navigation at all times greatly improves usability for browsing the site and accessing data tools.

Accordion

The accordion of featured data tools is a great example of a web component that we wanted to use on the GLOS homepage, but only if it was just as functional on mobile as it was on desktop. We wanted this accordion to open and close three different tabs of information on GLOS’ data tools. Many of the horizontal accordions on the web either are not responsive or shrink to match the screen’s width, dramatically reducing visibility and usability on mobile. Because we wanted our accordions to feature text over an image, we struggled to find an example of an accordion that allowed for varying amounts of text and good readability. After some research, our design and development teams crafted a solution for a horizontal accordion that would collapse into a vertical format, preserving both readability and the photo-heavy aesthetic to remain intact regardless of screen size.

Summary of Our Solution

The Great Lakes Observing System site challenged us to craft a great site experience for both mobile and desktop platforms. By utilizing a mobile first strategy and focusing on how elements such as the navigation, sticky header, and accordion behaved on mobile devices, we believe that we succeeded in designing an excellent responsive website that accomplishes our goal of making data tools easy to find. We hope that this case study has showed you the importance of small details in mobile user experience design. If your site is lacking a solid mobile user experience, reach out to us to learn more about how we can help you improve your mobile first design strategy.

Leave a Comment