Previous layout of the KB faceted browsing page on the iPhone. Text is tiny and must be zoomed and panned.
The NESCent Informatics group periodically holds “hack days”, one day mini-hackathons where we take a break from our usual schedule and push forward on a specific topic of interest. Most recently, the topic was support for the mobile web. I took a look at the Phenoscape Knowledgebase layout on the iPad and iPhone. In general the site did not adapt well to small screen sizes.
In order to avoid serving different layouts to specific devices, I applied techniques from the Responsive Web Design approach, which uses new functionality from CSS 3 to dynamically adjust the page layout based on the size of the browser window. In the new layout, when the window is small, controls move from the side to the top, allowing both the controls and the content table to use the full screen width.
Using responsive web design, the controls and content become stacked on small screens.
The new layout works across most of the pages on the Knowledgebase site. In general, it is a big improvement on mobile devices. However, there are a few remaining glitches to address, such as controls that appear upon mouse hover: difficult to use on a touchscreen device, where there is no mouse.
Phenoscape 