Mobile Blog Post Draft

MindTouch Deki Mobile was built on top of the existing API, providing a new web app separating the application from the desktop version of Deki. Users can view any page on the wiki, add comments to the page, share a page, and view attached files as well as tags and related pages. Users cannot, however, edit the pages. We added the ability to send a “Note” to another user on the wiki. This acts as a messaging system within Deki, similar to sending a short direct message to a user on a forum. It’s not to be confused with email, but it is a way to send a private message to another user in Deki. We also wanted the user page to be used as the user’s home page or dashboard. Notes show up under the comments on this page, and users can build this page on desktop Deki to be a personal control panel of shortcut links and other information for when they use the mobile interface.

I didn’t have too many assumptions going into this project since the iPhone was still new to me. Because the browser used on the iPhone is Safari, I expected it to act very similar to what I use on my desktop. Being able to explore Webkit for the CSS styles was definitely a bonus and saved me some time with styling.

But the best part about designing for the iPhone was that we knew what to expect. We knew the exact screen size (even though technically there are two -- portrait and landscape), the browser that the user will be using, that the font will be consistent, that the images will display properly, and overall, we could be sure that what we saw when testing it was identical to what the user will see. That kind of predictability is pretty refreshing in the web design world.

It wasn’t all fun and games though. We did run into a few challenges along the way, such as:

Not having control over content of the wiki pages that users create
Since the iPhone does not support tables, there is some overflowing content on pages where users added tables that requires the user to scroll horizontally, which is less than ideal. Also, many of the extensions in Deki (except for text-based extensions, such as news feeds) do not show up on the iPhone, and may cause frustrations for some users.

Fitting all of the controls/features into a small space
Apple prides themselves on having a clean style, and I wanted to maintain that. However, transferring all of the functionality of Deki onto a small device required some creative thinking. We had to strip Deki down to only the most important features, while also making sure the controls were large enough to tap with a finger. After several layout revisions, we came to a balance between the two.

Most of the applications on the iPhone had already developed a standard for control placement, such as putting the main controls in the top and bottom corners. We also struggled with the number of navigation bars and controls to be placed at the top of the screen. Without hiding the URL bar, there are four bars across the top, which takes up a lot of valuable space for content. In the future, I would like to have the ability to show/hide the search bar on all pages. This would only leave the top navigation bar and the tabs on each page, leaving more space to display content.

Minimizing user input
Texting has become pretty commonplace, yet typing on mobile devices can still be inconvenient and time-consuming. In an attempt to help you save time, we implemented auto-complete for the username on the login screen as well as the "To" field in the Notes section. We let the iPhone take care of the rest when typing a comment or note to someone (the auto-suggest feature). 

This is great, but when will I use it?
Having the ability to view your Deki on the iPhone would come in handy when you're meeting with co-workers or meeting with potential clients for, say, a lunch meeting. It's perfect for displaying information when you don't have access to a computer. Don't remember the names the potential clients who you're about to meet up with at a coffee shop? Easily check the wiki page that you built for that account on your way there. Need to alert a co-worker about adding information to a page? Send him a note or comment on that page.