Share

Mobile Devices and the AgSci Sites: 2014 Update

Posted: March 25, 2014

In the first quarter of 2014, mobile devices (smart phones and tablets) accounted for approximately 25% of the traffic to the AgSci sites. There are some easy steps you can take to make your content more accessible to mobile devices.

In this graph, you can see the percentage of mobile traffic has increased from 1% in January 2010 to 25% in March 2014:

2010 to 2013 Mobile Traffic

The most commonly used devices were Apple's iPad and iPhone, as well as a variety of Android devices.

In response to this trend, the college implemented a technique called Responsive Web Design, which allows our site to be viewed on a variety of devices (desktops, laptops, smart phones, and tablets) with a layout of the site appropriate for that device.

This technique resolves most of the display issues on various devices, but there are a few cases where you'll need to adjust your content to ensure that all users have an optimal experience.

Graphics

Use the Lead Image field to include a graphic on the page. If images are required in the body text, use a half- to full-width image in its own paragraph. Wrapping text around images correctly is often tricky, and this usually places the image before the content in the mobile view.

Limit the images in the body text to only essential images to make the page cleaner, and reduce the download time for mobile devices.

Tables

Tables should only be used for tabular data, and never for layout purposes. To make content more friendly to mobile and disabled users, do not create "wide" tables with many columns. Alternatively, use headings in the document to present more, "narrower" tables.

Also, do not use abbreviations or footnotes in the table cells. Since visitors may only be seeing part of a table, it's confusing to scroll around the page to find what these are referencing.

PDFs

PDFs pose a problem for mobile users since, unlike the website, they're not optimized for small screens. The user must scroll and zoom around to read the information. In particular, tri-fold brochures are even more difficult to navigate on mobile.

Instead, convert the PDFs to web content (folders, pages, etc.) so all visitors can view them easily.