Igor Syvets

Sail

November 2012
Sail is an alternative iPad browser that I’ve been working on. I wasn’t really happy while using Safari. There were two main things that I didn’t liked about it: different textfields for search and URL (iOS 6); when you re-open Safari some tabs may re-load. I also couldn’t find any alternative browsers that I would like in AppStore. I decided to create my own browser for iPad. Not only to design, I learned Xcode and wanted to code it too.

Address Bar

I used various browsers from AppStore and most of them have really different UI style from Safari. I didn’t liked it. I wanted my UI to look as native as possible, so icons and colors in my browser are similar to Safari. This approach creates better user experience for the people that have been using iOS Safari.

I’ve started with combining search and url textfield into one. I’ve seen this feature first in desktop version of Google Chrome and since then it became a standard in modern browsers.

Another thing that came to my mind that a URL of a website is not really informative for a user. A website title is much more clear and easy-to-read. So in my concept I replace the URL with the website title. It works this way: by default, a user sees a normal browser textfield. He types-in a URL, presses “go” and a website starts loading. When a website finished loading, a plate with a title rolls down to the url field. A user can tap on this plate and it will roll back, revealing the URL. URL is also visible when a user navigates through links. You will be able to see it in a video at the end of this article.
A bookmark in the top right corner illustrates that a website has been added to “Bookmarks”.
When a user starts typing a query into the text field he gets 3 types of suggestions: website URL, Google Search and website in-text search. In-text suggestions showing not only a number of matches, but also a context they used in. I believe this will help to find the needed result on a page more quickly.

A lot of iPad browsers, that have unified query textfield, create expansion to the original onscreen keyboard with additional keys (like “.com”). The reason is because iOS 6 doesn’t have a keyboard that contains space and “.com” keys at the same time. But for some reason they add only a few keys, leaving a lot of blank gray space (i.e. like here). I decided to use this space for number keys, because they sometimes used in URLs too. I also did my best to make them look like the original iPad iOS keyboard keys.

Tabs

Holding 3-4th generation iPad with one hand for a long time may not be very comfortable. I hold iPad with two hands (most of the time), so I decided to implement more comfortable way to switch between tabs or bookmarks. I’ve seen similar approach in Dolphin Browser for iPad. Basically, to access Tabs user needs to swipe from the right side of the screen. User can do it with a thumb while still holding iPad with two hands:

Bookmarks

Bookmarks accessed with a swipe from a left side of the screen. Every bookmark represented as a small screenshot of a relevant website. If a bookmarked website has an RSS feed, a number of new items in this feed will be shown on a bookmark (“2”). This way user can see if there’s any updates on the website before actually visiting it.

History & Downloads

Sometimes when you have a lot of tabs opened and accidentally close one of them, it may be hard to quickly find it in History and open it again. Google Chrome solves this problem with “Recently Closed Tabs” menu. I have a different solution: add website to “History” only when a tab with this website is closed. So when a user accidentally closed a tab, he will be able to see it in “History” right away.

Demo

Unfortunately, I haven’t been able to finish this project. There was a lot of technical problems that was beyond my area of knowledge. Some of the features that I been able to implement you can see in this video.