Phenoscape goes mobile

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.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 973 other followers

%d bloggers like this: