Original iOS Interface

Wouldn’t be cool if we selected some native mobile UI and try to recreate them using only HTML5, CSS3 and JavaScript? So, today is Facebook’s extraordinary IPO and I took their clean & classy login screen and recreated it for the web! Here it is the final result, some code and also comments.

Disclaimer: I created this app with the iPhone Facebook App in mind. I only tested the app on iPhone. I already noticed that the radial gradient background looks pixelated on Chrome, and I also suspect that due to other gradients, alpha colors and etc this app will make some Android and BlackBerry devices scream. Please don’t blame me :)

This view above is an iframe, if you open this blog post with Chrome or Safari you’ll be able to see it running! You can also point your mobile device to the following URL:

• Live Example: http://brunotavares.github.com/SenchaExamples/touch/native-to-web-facebook-login/
• Source code: http://github.com/brunotavares/SenchaExamples/

View

The view it’s pretty simple. We have the logo, 2 fields and 3 buttons. The only thing that might look different is the component with CSS class ‘shadow’. Since I wasn’t able to create a box-shadow for the fields without creating conflicts with their borders, I use this component as a layer on top of the fields with the inner shadow.

Theming

About the theming, there’s a lot of CSS3 stuff inside. I’m using Sass with Compass framework, so it alleviates some of the hurdles of plain CSS. Logo is just a component with fixed size and a background image. I’m also providing the retina version of it using the medias queries.

As I wrote previously, the shadow component is a hack solution for making the inner box-shadow, without creating conflicts with the fields’ borders. The email field has a gray border on the bottom, and the password a white border on the top. It creates kind of an edge between fields. Something different about the fields is that you can style the text placeholder using ::-webkit-input-placeholder.

The buttons received new gradients, and also additional box-shadows. They also provide the same pressing state as the original interface.

Wrapping up

And that’s pretty much it. This is a great exercise, to see what we can accomplish using only web. Specially with Sencha Touch, since we hear a lot of questions asking how easy/hard it is to customize Touch components.

I wanted to use only CSS3, but for production it would be better to use a solid image for the radial background for non-iOS devices, and other sutil improvements. From my experience it performs way better.