Spacial is a easy and fun way to browse all your social networking information on your iPad.

Background

People love to spend time on mobile SNS

The following are some research from Facebook and Ground Truth.

There are more than 150 million active users currently accessing Facebook through their mobile devices.                 — Facebook

People that use Facebook on their mobile devices are twice as active on Facebook than non-mobile users.            — Facebook

The research shows that people love spending time on mobile devices to browse their social networking contents.

Browsing on iPad is not fun!!

However, right now, browsing on iPad, iPhone or other devise is not fun, either because the sites are not optimized for touch screen or they are just a regular website with bigger UI elements.

Facebook and Twitter have mobile version for their websites, but they just work and have nothing interesting inside. There are just a lot of lists and forms inside.

On the other hand, some third apps delivered a better and more interesting experience for the users, like Flipboard.

It re-organizes all your fackbook and twitter contents in a format of magazine. And it got very popular when it launched this summer. That means people would love to try a new way to browse the information which they can get more fun.

Inspiration

We were inspired by not only the current website, but also some video games.

Mrdoob.com

mrdoob.com is a personal website. The author “mrdoob” has done lot of html5 and flash work which explore the 2d & 3D html5 canvas and some other cutting edge web technologies.

Apple HTML5 Showcase

Apple launched a html5 gallery this summer including the 2D/3D transition effect, webfont, html5 video/audio and VR technology. They are done all by html5.

flOw – The Game

flOw is a multi-platform game which have very unique visual effect and interaction mode when it was launched. The reason I list it here is the feeling of the 3D space in this game is similar with our project, in some level.
Here is the trailer of this game on PS3.

Technologies

We are also inspired by the current technologies like html5, CSS3 transition animation and keyframe animation, PHP image processing and Javascript threading technologies.

What is Spacial?

Though mrdoob and apple have already done lots of amazing html5 stuff, their target is the regular PCs but not touch devises. First, the websites run very slow on the touch devises because they didn’t optimize them for the devices. Second, they are using mouse event to trigger the interaction, which doesn’t take the full advantage of the touch screen.

Therefore, we decide to improve these problem and deliver a better experience to the users.

First, it is 3D

The whole Spacial webpage is in a 3D space like the game flOw. By adding an extra z-axis we can hold more information in a single page. With the better CSS3 support on mobile safari, now we can make 3D transition much easier than before. More over, we can take advantage of the hardware acceleration which means the performance will be much better than traditional JS animiations.

Second, it is “touchable”

Spacial will be optimized for the touch devices, iPad this time, and use touch events instead of mouse event. Therefore, it is a truly “touchable” website living for the touch devices.

Third, it is your social networking hub

In Spacial, you can connect the website with their Facebook account and their Twitter, FourSquare and Youtube account. So, you can view all your feeds, tweets, images and even videos without leaving the website or even the webpage.

Last but not least, it is fun!

Even apple.com itself doesn’t have an iPad optimized version. The mobile version of Google, Facebook or Twitter is not fun at all! But Spacial will introduce a new web browsing experience you have never seen before. Browsing social networking contents will be so interesting that you will never want to look back!

How are we gonna make Spacial real?

Spacial will combine a large number of cutting-edge web technology to make this “impossible” mission be real.

We understand the web tech

We are all web developers and designers. We know about HTML, CSS, PHP, JS very well and we also have the capability to design the pretty and effective interface. We will combine the CSS3 and Javascript to make the 3D space on the webpage. The performance will be much better than the traditional JS method.

We understand the Mobile Safari

Some of our members worked for Apple before. And we know the advantage and the limitation of mobile safari. We will use certain CSS3 techniques to enable the hardware acceleration. And we will put most intense computing work on the server side to reduce the load for Mobile Safari.

We understand the iPad

We know that iPad doesn’t have decent hardware. So, we will optimize our code and media resources as best as we can.

We understand the APIs

In the first step, we will use Facebook API. We can pull many interesting information from it, like your basic information, your images, your wall-comments, the images you are tagged in and even the position of the photo tag. Therefore, besides the innovative interface we can also try to organize all the information in a new way that you can view then easier.

What is the risk?

The biggest risk is the performance. We will try our best to improve it. But if in the end we are still not happy with it. Here is our backup plans.

• Simplify the whole site, take out the unnecessary effects.
• Make it a native app instead of a web app.
• Run it on the iPad simulator.
• Run it on the regular web browser.

We don’t want these happen, but if we have to, we need to make sure our project still will do something that people never did before.