Role of communicators in mobile-first web design

As Internet use shifts more toward mobile devices and as time spent on individual web pages falls, the content of web pages and its presentation become increasingly important. A mobile-friendly website should impart information in a simple, quick and attractive manner. As communicators, our role becomes increasingly important in creating accessible, responsive websites. Keep the following in mind when working on mobile-first websites.

The first focus of a communicator should be to prioritize content. Use web analytics to find what pages are viewed the most and which search terms are entered most frequently. These pages should be the most easily accessed on a mobile page. Mobile users generally spend shorter periods of time on websites. Making the most desired content easier to find helps make visitors’ experiences of our site less frustrating, more informative and overall more pleasant.

Prioritizing information is not solely what content is featured, however. It also ties in with website navigation. The larger the screen, the more navigation elements can be displayed. When designing mobile first, we need to keep the smallest screens in mind initially. Designing navigation for a smartphone screen means we must be concise. Rather than a long list of navigation options across the top of a wide screen or down the side of page, consider using nested menus. This allows navigation to take up minimal space, while still ensuring other pages can be accessed. When planning navigation structure, be sure the most used pages are near the top of the navigation tree. Site visitors spend less time looking for the pages they most likely want to see.

The second focus of a mobile-first communicator should be page layout. Mobile devices come in a variety of screen sizes ranging from smaller than 3 inches to nearly 10 inches. Laptops typically have screens ranging in size from 7 inches, all the way to 21 inches. Trying to come up with a single layout that looks acceptable on differently sized screens is impossible. Responsive web design, however, allows us to have one single website whose layout changes depending on the screen size. The specifics of coding a site to address multiple screen sizes is addressed in other articles on the Go Mobile site, but as communicators, we need to understand that the layout will be shifting.

Communicators should work with site coders to make sure that the prioritized information is displayed intelligently as screen size changes. The small screen can only effectively display a single column of information. We need to decide what needs to be on that column and what needs to be tucked under menu items. As the screen gets larger, additional columns can be added, and menu design can change. We need to decide what information gets added to the screen as more space becomes available.

The third focus of a communicator for a mobile-first website is presentation. In the Noel-Levitz.com 2012 E-expectations annual survey of incoming students, we see that 74 percent of surveyed students prioritize words over photos. While this survey is not specific to mobile web experiences, it is encouraging to those of us who create mobile content. By presenting information as text rather than pictures, we can provide a faster and more informative experience to our customers.

There are times, however, when graphics are the better way to present information. In these cases, communicators can take steps to minimize the impact pictures have on the mobile experience. Using smaller graphics minimizes load times and helps reduce data consumption for visitors. We also can make sure the graphics used reinforce the text we are providing.

The role of a communicator in a mobile-first design scheme has not changed. We still generate the content and decide how that content is served. Our duties and the importance of this role, however, have changed. We need to work more closely with our designers, both graphic and technical, to ensure information is presented simply, quickly and attractively.