A Native Gmail App for iPhone

Get Ur Geek On

I’m a geek. I tinker with and develop things on your LCD. After waiting and eventually getting tired of waiting, I figured out a neat little way to get a “native” Gmail app on your iPhone.

The Problem:
What’s the problem? If you want Gmail, you can enter all of your SMTP/IMAP information into the Mail Application on your iPhone. But what do you miss out on by doing that? Everything that makes Gmail the most superior email client there ever was (seriously). For one, you lose the threading of emails into one email “conversation.” What does it look like when you’ve replied back and forth with some friends in an email? An organized conversation on Gmail. But an absolute mess on your iPhone app.

Why don’t you just navigate to Gmail on your iPhone’s Safari browser?

Ew. Why?

Yes, you get all of the advantages of Gmail. If you save the website as a favorite on your Home Screen, you even get a nifty – yet somewhat aesthetically unsatisfying – icon with your other apps. However, what happens when you tap it? It opens through your Safari browser; if you’ve opened it before, the phone could forget and open another tab in safari with the same Gmail website, leaving you with 10 Gmail tabs on your Safari at the end of the…hour; You lose about 40% of your screen real estate with the address bar and the bottom options bar.

Plus, it just feels ghetto.

Now why does using Gmail on Safari trump the Mail app?

HTML 5!

The UI is interactively brilliant. And best of all, it operates like a real native app because HTML5 allows it to store information (up to 10MB) locally on your iPhone storage for offline usage. Suppose you were reading an email that contained an address for a party. You’re on your way to the party and need the address, but your AT&T 3G connection sucks (as it typically does). You can view that email again in an automatic offline mode.

The Solution:
A Gmail app that’s really the web Gmail app, minus the loss of screen room with Safari UI junk and the unending sea of new tabs. Using my brain for about 5 seconds and little-to-no elbow grease in Dreamweaver got this to happen beautifully. A tutorial for this solution is below:

Let’s Begin!

 

Here is my home screen with my Gmail shortcut. I favor this logo rendering to the default. Maybe that's just me.

 

Let’s do this people. Here’s the app icon on my home screen. If you’re wondering what the heck is up with my home screen, I have a custom sense UI running on my iPhone. I’m a big fan of Android and especially of what HTC has done with the UI on the HTC Hero/Eris. That’s actually not the main screen. Like Android, there is a home screen with a vintage clock, weather, and a gray pullout to this shelf of apps.


The Boot Screen

 

Do you like?

 

When you boot the app, you will even be welcomed by this neat boot screen as the site loads in the background. I’m a big fan of the Gotham typeface lately, so it naturally became the weapon of choice.

Step 1:

 

Feel free to check out satchelldrakes.com!

 

Point your browser to “http://www.satchelldrakes.com/gmail”. Pay very close attention to the next steps before doing this. They must be executed with tact!

Step 2:

 

Your skills must be like that of a rogue for this.

Your skills must be like that of a rogue for this part.

 

Okay, here is the part that you need to do quickly. This app is nothing more than a portal to the Gmail website. In the HTML file that ports you there from my website, I have offset the loading time by approximately 4 seconds so that you can execute this next step. Once you hit “Go” for the website I’ve provided, quickly tap the “+” icon on the bottom bar of your Safari app. Next, hit the “Add to Home Screen” button and save it to your Home Screen.

Step 3:

 

If you see this screen, you have succeeded!

 

This is an image of success. Once it’s saved, boot up the app to your new, functionally native, full-screened Gmail app!

The new app icon should load correctly, though if you didn’t choose to save it quick enough, you may have to try again. I got it on the first try.

Advertisements

5 Comments

Filed under Geekery

5 responses to “A Native Gmail App for iPhone

  1. Could you please please please do the same thing you did here, for reader.google.com? It would be *immensely* helpful to me!

  2. Thanks for the encouragement over on my blog, man. I’ve been overwhelmed with support for the LessOfLen concept. What a blessing!

    And Satchell, that Google Docs interface is mad sweet! I love the loading screen (LOL); Thank you. There is only one hitch… I was looking for one for Google Reader, not Google Docs. Any chance I could convince you to do one for that? If not, that’s okay. I don’t want to burn all your time on web app hacks. ;-)

    Thanks again, bro!

  3. This is so cool, I’ve been looking for something like this everywhere. Thanks man. :)

  4. olli

    Thanks for the effort, man! Could you not give the image another background though? I was hoping to succeed in having this logo that’s a bit more dynamic, even though I’d change the background of that one as well.

    I would have make a reloading page like yours on my server (which is down after a merge)… So if you’d want it to improve and if you feel for some fiddling in your code, I d be a fan of it :)

    I’d also love the delay to be a lit less, like for the skilled ones amongst us…
    like 1 or 2 seconds, it’s easy to do new attempts by clicking the back button in Safari on the iPhone, or at least I would not mind trying it like 5 times to get it to load a bit faster.
    But once again, thanks for having this one up! Saved me some geekery

  5. Olli

    Found a fix:
    Go to this link:
    http://m.google.com/mail
    Click on the button, but make sure to quickly add the page to the homescreen before it fully loads. I now have an application icon with in it a tilted blue roinded square with g in it, linking to gmail.
    To know how it looks: add the above link without clicking trough to your mail. … G’d luck!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s