Wednesday, October 27, 2010

Gmail in mobile Safari: now even more like a native app

Go to gmail.com from your iPhone and you’ll notice two improvements we’ve rolled out over the past few weeks. First, scrolling is snappier: the speed of scrolling reflects the speed of your swipe gesture. This is helpful for long conversations where a few quick flicks will get you to the information you need much faster than before. Second, the toolbars stay on screen while you’re scrolling rather than moving down into view after each scroll. Being able to access your toolbars from any point on the page should make it easier to triage your email and move around the app.



If you use Gmail in your mobile browser a lot, you may have noticed that we recently tried several different variations of these buttons. We‘ve iterated on the design and made improvements based on your feedback. If you have more suggestions, please post them in our forum, or if you use Twitter, mention #gmailmobile and we'll take a look. If you’re a developer and are interested in learning about the Javascript and HTML techniques we used to do this, we’ll post an article to code.google.com/mobile in the coming weeks.

You can see these improvements by visiting gmail.com from the browser of iPhone and iPod touch devices running iOS4 (English-only for now). And if you like Gmail in mobile Safari, make getting to it easier by tapping the “+” at the bottom of the screen and then “Add to Home Screen.” (Don’t see the new changes yet? Try clearing your cache and refreshing the page.)

Update, 12/8/10 9:10am PST: We promised you a code article. Here it is!

25 comments:

  1. I would be so great if you guys would open source your inertial scrolling javascript. Can't wait to read the post on /mobile. Thanks for your work!

    ReplyDelete
  2. Getting some weird behavior here after scrolling down a bit and tapping the time to scroll to the top. The address bar remains visible at all times, while it was hidden offscreen before.

    ReplyDelete
  3. Any plans to make the web app remove the Mobile Safari toolbar when launched as a web app from the home screen? Would be nice to "look" like a native app.

    ReplyDelete
  4. Just wondering why you are not also targeting Android (at least 2.1/2.2). I mean doesn't android 2.2 support position:absolute natively?

    ReplyDelete
  5. And what about BlackBerry Torch 9800 which also uses Webkit ?

    ReplyDelete
  6. Really Nice.. I love the mobile web app of gmail... Helps me keep my inbox more secured than the native app.

    Kudos to Google and gmail team for continuously improving mobile web app

    ReplyDelete
  7. +1 for open sourcing the the javascript!

    ReplyDelete
  8. It would be nice if the mobile gmail can mimic what the native iphone mail app does with resizing. The native app an make the email fit the width of the screen but the gmail mobile site can not, also when viewing html and trying to scroll it is a bit jittery. Makes it unusable for me.

    ReplyDelete
  9. The improvements have been terrific, and I never use the native app anymore. Key for me to make the final switch over last few months is speed and that last switch to anchor the archive bar. I will post additional ideas in the forum.

    ReplyDelete
  10. FYI, your new implementation breaks the iOS native copy paste function:

    If you highlight text and scroll, the physical area on the screen stays highlighted, but it doesn't highlight the txt any more, and the copy/paste pop over no longer appears.

    ReplyDelete
  11. I like the persistent toolbar, but since implemented when I tap on the top message in my inbox, if my finger stays on the screen for the least bit it deletes the message before even opening because the toolbar pops in under my finger causing me to inadvertently press the trash button.
    Also, to echo comments above, reading html mail is painful. Please make it fit to width on opening, with a pinch to zoom feature.

    ReplyDelete
  12. I absolutely love the new static bar, but would love to have you guys hide the navigation bar on the bottom as well so I can create a shortcut on home that feels completely like a native app.

    ReplyDelete
  13. FWIW, I preferred the floating toolbar. I find the fixed one "get in the way" as I try to check the boxes on multiple messages. The good thing about he floating toolbar is that it didn't stretch all way across the screen, it didn't block any of the checkboxes.

    The new toolbar image above shows the wasted space in the middle of the toolbar. I guess the fixed toolbar would be okay if it only used the right 2/3 of screen, like the floating one did.

    ReplyDelete
  14. What about.. Just submitting you app into the App Store =]

    ReplyDelete
  15. I love the static bars. I have used some code I found to remove the address bar and make it full screen so I can save it as a webapp in my home screen. However, the inability to check multiple accounts, no push notifications and the need to reload everytime I open the app simply stops me from switching completely from the native app.

    How about a native Gmail app for iPhone? And while you are at it give us the Google Voice iPhone app already.

    ReplyDelete
  16. It would be great if you can port it to Nokia S60 5th and 3rd edition platform as well

    ReplyDelete
  17. Great work! I've been a vocal critic of the old floating toolbar for a long time now - it was so annoying when reading messages. The new interface is a *huge* improvement so thanks for listening to user feedback.

    ReplyDelete
  18. I don't understand. Instead of making it "even more like a native app," why don't you actually make a native app? PLEASE?

    The web app will always be clunky, I think you've done what you can and it's decent, but a native app would run so much smoother. It's what the type of people who use iPhones want - a beautiful seamless experience that allows you to attach pictures, etc.

    ReplyDelete
  19. i like my phone
    Luxury Island Collection offers unrivalled luxury holiday experiences to luxury seekers worldwide. Let us tempt you with spectacular holidays, ...
    www.luxuryislandcollection.com

    ReplyDelete
  20. For the fixed toolbar I suggest moving the upward arrow (>>) away from the (X) button.. I've hit the X button many times already :(

    but nice job on the fixed toolbar!

    ReplyDelete
  21. Another +1 for explaining how you did the fixed toolbar!

    ReplyDelete
  22. Can you guys make this work for 3.x devices too?

    ReplyDelete
  23. I've been experimenting a little and I managed to get to this: http://goo.gl/WmvN. Aparently ontouchmove + translate3d works wonders. I'm guessing that's what Gmail is using.

    ReplyDelete
  24. I have been using the classic desktop version on my iphone for 2 main reasons:


    *The inbox all loads in one shot. The new app loads the interface and then does ajax calls to get the data for the inbox. This is really slow over edge.

    *I often want to copy paste from gmail and I can't do that in the newer version

    So speed it up and add copy paste, and you have a winner.

    ReplyDelete
  25. Nice, but shame we still can't see inline images in e-mails.

    ReplyDelete

You are welcome to contribute comments, but they should be relevant to the conversation. We reserve the right to remove off-topic remarks in the interest of keeping the conversation focused and engaging. Shameless self-promotion is well, shameless, and will get canned.