Responsive Design in Practice: Accommodating Both Mobile and Desktop Audiences

Background: Over the last few years, web audiences have changed as technologies (specifically mobile) have resulted in different web usage patterns and site needs. More people are viewing the web via mobile devices than ever before as Q3 2013 visits from mobile devices accounted for over 28% of total website traffic.

Program background: In 2008, the CDC.gov team released m.cdc.gov as a standalone mobile presence including a mobile friendly CDC homepage. In 2013, the mobile CDC homepage had over a million page views. CDC has recently released a responsive web template. As the most popular page on the CDC site, it is important that it be one of the first pages to apply the new responsive design web template. We knew from previous research that typical user behaviors on mobile devices are different than on desktops: however, we needed to understand how our CDC web mobile visitors’ needs different from our desktop visitors and whether they had unique needs that needed to be addressed in the new design.

Evaluation Methods and Results: Initial research for the redesign effort included an in-depth usage analysis of the existing CDC.gov homepage, 33 stakeholder interviews and 412 mobile and desktop visitor surveys. Information gathered from initial research was used to develop a working responsive design prototype which was evaluated during usability testing sessions with 25 participants on desktops and mobile devices. Key findings underscored the differences between mobile and desktop visitors. The largest percentage of mobile visitors surveyed were consumers while the largest percentage of desktop visitors were students. Mobile respondents were looking for information on “outbreaks” while desktop visitors were looking for information on “data and statistics”. While both groups ranked “outbreaks” as important to them, mobile respondents ranked it first while desktop respondents ranked it after “health & safety topics”. During usability testing, mobile participants commented that they preferred a less visual version of the homepage as it detracted from being able to quickly find what they needed on the page. Mobile participants also stated that when they were using mobile devices, searching the homepage was more important to them while desktop users seemed more content to browse for information.

Conclusions: Mobile web visitors have different needs that need to be accounted for when considering mobile designs. Searching is more critical for mobile visitors. Though mobile visitors appreciate visual elements, it can impact their ability to quickly find the information they are looking for. When designing a responsive design site it is important to understand and differentiate between mobile and desktop web visitors’ needs and goals, and find a balance of how to accommodate both user groups in the finished design.

Implications for research and/or practice: This session will provide research and lessons learned in moving an existing desktop site or page into a responsive design. We will discuss the importance of understanding the goals and needs of both desktop and mobile visitors as well as present strategies of how to accommodate mobile visitors without compromising the desktop experience.