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 :)
*Touch compatibility webkit onlyThis 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.
“@extdesenv: Recreating the Facebook Native iOS Login with Web #HTML5, #CSS3, #SenchaTouch” cc @Sencha
Building the Facebook login UI using Sencha Touch + SASS + Compass http://t.co/BwOMZss6 App Example: http://t.co/880WpLj6 by @bt_bruno
Native Mobile to Web #1: Facebook Login http://t.co/HeXSpdHl #senchatouch
Hey @pkellner, here it is the blog url I told you about: Native Mobile to Web #1: Facebook Login http://t.co/TLjLKwLF
#sencha (Platinum sponsor) has awesome integration with facebook with their mobile UI #senchatouch. from @bt_bruno : http://t.co/DEB28UpN
Daniel Ricardo de Amorim liked this on Facebook.
Luiz Paulino liked this on Facebook.
Jether Netto Canhada liked this on Facebook.
[…] where I take some cool native UI and reproduce using only HTML5 technologies. The first one was the Facebook Login page. The result was a pixel perfect UI, just as nice as the native one. Now I’m taking the Path […]
[…] where I take some cool native UI and reproduce using only HTML5 technologies. The first one was the Facebook Login page. The result was a pixel perfect UI, just as nice as the native one. Now I’m taking the Path […]
hai