Skip to content

How to access Gmail’s new iPad interface on your Mac

UPDATE: the scrolling fix doesn’t now work, as of 2010-11-08. This appears to be a server-side change and unfortunately I am not aware of a solution. ๐Ÿ™

I put together a short screencast on how to access Gmail’s new iPad interface on your Mac. If you’re a fan of Gmail’s web interface on the iPad and would like to use it on your desktop computer too, this is a cool trick.

The user agent you need to enter into Fluid is:

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

Transcript of the video

Note: this wasn’t a scripted video, I actually transcribed the audio afterwards for YouTube’s captioning support as well as a text record of the video.

Hi there, this is Peter Upfold and in this really short screencast I’m going to show you how to use Fluid on Mac OS X to create a Site Specific Browser, or SSB and access the new Gmail iPad interface, which is really quite nice.

So without any further ado, let’s get started straight away.

I’m going to go to my Applications folder and launch the Fluid application which allows me to create our SSB.

I need to enter the URL, which is mail.google.com and just give it a name, I’ll just say iPad, but you’ll probably want to give it a meaningful name.

And I’m having some problems with Fluid, so it’s actually going to do

do something a little strange here, but it’s created my new application, if I say OK. Again, I don’t know what it’s doing, you might not have the same problems as me.

I’ll just say OK, that’s created the browser and I now just need to open that up. And I have my new application here which I’ll use every time I want to access the iPad interface for Gmail.

Now, I’ve launched the application, it comes up with the Gmail login page as I expect, but it’s not actually going to use the iPad interface just yet, there’s one more tweak we need to make. And that’s just to go to the application’s menu bar here, and under User Agent, just select Other.

And in here, you just need to paste in the iPad’s browser identification, which I’ve got here. Now I’ll put this somewhere so you can copy and paste it rather than having to copy it manually off this video, but I’m just going to copy that text and paste it in the window here.

If I say OK, and if I now reload this page.

Well, actually, tell you what, I’ll quit the application and start the application back up again.

OK, now you see the login page has changed, it looks a bit more, a bit more like it would look on the iPad. If I now sign into a Gmail account.

It does actually take a little bit of time to log in, I have noticed, but if we just wait for that.

As you can see, we now have this really nice iPad interface. So, now, you can use the new Gmail iPad interface on your desktop computer anytime you want, just by creating a Site Specific Browser with Fluid. And you can just follow that process, you just create an SSB as normal for Gmail and then change the User Agent to the iPad User Agent string. So that’s pretty much it, thanks for watching, I’m Peter Upfold and goodbye.

Credit to Google Operating System for the inspiration to set this up and produce the video.

UPDATE:

There is a scrolling bug with the iPad inside Fluid, but thanks to Fabio Samji, there is an easy solution. Please see the addendum to the first video below.

The code you need to enter in the user styles section:

.BMRW0e{ overflow-y:auto !important; }

Transcript of addendum

Hi there, this is Peter Upfold with a quick addendum to my previous video about getting the Gmail iPad interface running on your Mac.

I got a great comment from Fabio Samji, I hope I’m pronouncing that right, and he just showed how you can fix the scrolling, let me just show you the problem at the moment. Now, this iPad interface works great with Fluid and a site-specific browser, but if you get to a long email or if you have long list of emails here, you can’t actually scroll very easily and it’s a bit of a problem for looking at long emails like this one.

So, thankfully, there is a solution. If we just go over to Fabio’s website here. You can see he has walked through the process of how to set this up, but there’s this little bit of code here in the user styles section of the Fluid preferences that’s actually going to fix that scrolling, so let’s apply that now.

So if I go across to my site-specific browser for Gmail and then go to the Preferences option in the application’s menu, then I just need to go to user styles and in here, you’ll see I’ve actually already set it up, but you need to add…

Let me walk you through it again, if I just remove that. You’ll need to add a new URL pattern and say mail.google.com, or actually, sorry, *mail.google.com*, so if we go and fix that.

And then inside here you just want to paste this little bit of code. I’ll put this on my website and in the YouTube video description so you can copy and paste it.

And just paste that in there.

If I then apply that.

And then, I’ll want to go ahead and reload the page, so let me close that.

Open up a new.

Again, it still seems to take a little bit of time.

And, I’ll tell you what, the scroll bars aren’t appearing, but I am now able to use the scroll wheel on my mouse to actually scroll up and down here.

So, actually I haven’t had the same result, in that the scroll bars don’t seem to be appearing. Maybe that’s intended, I don’t know.

But anyway, the point is I can now scroll through this long email just with the mouse wheel and I can view the whole email.

So thank you Fabio for commenting and pointing that out to me, and hopefully with this, the Gmail iPad interface can be even more useful, especially for looking at long emails.

So thank you very much for watching this addendum. I’m Peter Upfold and goodbye.

UPDATE 2011-03-17:

Thanks to YouTube commenter elkdrummer, who suggests that the code required to apply this fix has now changed:

The code has changed, instead of ‘.BMRW0e’ it’s ‘.Tc’

Also, here’s all the code I used… changes the scrollbars and makes the content area larger.

.Tc{ overflow-y:auto !important; }
.body{ width: 1151px; height: 738px; }
.og_head, #footer { display:none; }
#views { top: 0px !important; bottom: 4px !important; }
::-webkit-scrollbar { width:รฏยปยฟ 4px; height: 4px; background-color: #CAD6F0; }
::-webkit-scrollbar-thumb { background-color: #FFF; border-left: 1px solid #CAD6F0; height: 50px; }

Like this post?

If you would like to support the time and effort I have put into my tutorials and writing, please consider making a donation.

15 Comments

  1. Lee Findlow wrote:

    Wow, I absolutely love that interface! Makes me want to start poking my MacBook’s screen to navigate, or, well, buy in iPad. Damn. Shouldn’t have tried that out, cue the iPad fund ๐Ÿ™

    Saturday, April 10, 2010 at 00:27 | Permalink | Using Safari Safari 531.22.7 on Mac OS X Mac OS X 10.6.3
  2. Fabio Samji wrote:

    Check this friend, gmail ipad interface on your desktop with scroll ๐Ÿ™‚

    http://samjitek.blogspot.com/2010/04/mac-os-x-new-gmail-app-for-mac-like.html

    You can add to your video ๐Ÿ™‚

    Thursday, April 22, 2010 at 01:38 | Permalink | Using Google Chrome Google Chrome 5.0.342.9 on Mac OS X Mac OS X 10.5.8
  3. Peter wrote:

    Fabio Samji,

    Thanks very much for your comment and for pointing me in the direction of that fix. I have posted a new video showing how to fix that, linked the two YouTube videos and updated my post.

    Once again, thanks! ๐Ÿ™‚

    Thursday, April 22, 2010 at 08:34 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.6.3 on Mac OS X Mac OS X 10
  4. Renรƒยฉ wrote:

    Hum, I can’t get it to work. The layout is changed, but only to the standard (from minimal). Does this work with Google Apps Mail too?

    Wednesday, May 19, 2010 at 08:14 | Permalink | Using Google Chrome Google Chrome 5.0.375.38 on Mac OS X Mac OS X 10.6.3
  5. Peter wrote:

    Renรƒยฉ,

    It does seem to work with Google Apps for me. You will just need to change the opening URL for your SSB from https://mail.google.com/ to https://mail.google.com/a/yourdomain.com.

    Wednesday, May 19, 2010 at 08:19 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.6.3 on Mac OS X Mac OS X 10
  6. Liam wrote:

    Your tutorial is brilliant… In a spot of bother though.. I tried to get mine to work, and it keeps launching my default browser and wanting me to re-login…

    This started when I set the ‘other’ user agent.

    I am using Google Apps account.

    What am I missing?

    Wednesday, September 15, 2010 at 02:51 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.6.9 on Windows Windows 7
  7. Liam wrote:

    Oi… Result!… I changed to disallow browsing URLs in preferences.. all sorted!.

    cheers!

    Wednesday, September 15, 2010 at 03:14 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.6.9 on Windows Windows 7
  8. Peter wrote:

    Liam,

    Glad you could get this fixed and working with your Google Apps account!

    Wednesday, September 15, 2010 at 07:45 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.6.9 on Mac OS X Mac OS X 10
  9. Jay wrote:

    Hmm, Fabio’s fix doesn’t work for me, on a MacBook Pro. Maybe it’s not trackpad friendly?

    Saturday, October 9, 2010 at 02:49 | Permalink | Using Safari Safari 533.18.5 on Mac OS X Mac OS X 10.6.4
  10. Al Cook wrote:

    Hi Peter,

    Thanks for a great tutorial. I’m having the same issue as Jay – I have done the fix for scrolling but it’s still not working? Do you have any ideas? I’m on an iMac.

    My userstyles prefs looks like this, for both *.gmail.com* and *mail.google.com*

    .BMRW0e{ overflow-y:auto !important; }
    .og_head, #footer { display:none; }
    #views { top: 0px !important; bottom: 4px !important; }
    ::-webkit-scrollbar { width: 4px; height: 4px; background-color: #CAD6F0; }
    ::-webkit-scrollbar-thumb { background-color: #FFF; border-left: 1px solid #CAD6F0; height: 50px; }

    Saturday, November 6, 2010 at 18:18 | Permalink | Using Google Chrome Google Chrome 9.0.570.0 on Mac OS X Mac OS X 10.6.4
  11. Peter wrote:

    Al Cook,

    Unfortunately this appears to have stopped working. ๐Ÿ™ It looks like a server-side change as my SSB and my user styles are exactly as they were when I created this tutorial.

    I’m afraid I’m not aware of a solution currently.

    Monday, November 8, 2010 at 07:34 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.6.12 on Mac OS X Mac OS X 10
  12. Selim Yoruk wrote:

    Hi there, i have a solution : ) It’s all about css class names that google gives. If they change again the name of css class, you can find the same div and rename it. Then you good to go : )

    Copy-paste this:

    .Lc { overflow-y:auto !important; }
    . Oc { overflow-y:auto !important; }
    . Nc { overflow-y:auto !important; }
    . Jc { overflow-y:auto !important; }

    Monday, December 27, 2010 at 09:01 | Permalink | Using Google Chrome Google Chrome 8.0.552.231 on Mac OS X Mac OS X 10.6.5
  13. Kerri wrote:

    Here’s the userstyles prefs I’m using. Seems to work pretty well. It’s actually a combination of a couple of the above ones, as well as the addition of a couple more CSS rules:

    body { overflow: hidden !important; }
    .Lc,.Tc { overflow-y:auto !important; }
    .Oc { overflow-y:auto !important; }
    .Nc { overflow-y:auto !important; }
    .Jc { overflow-y:auto !important; }
    .BMRW0e{ overflow-y:auto !important; }
    ::-webkit-scrollbar { width: 4px; height: 4px; background-color: #CAD6F0; }
    ::-webkit-scrollbar-thumb { background-color: #FFF; border-left: 1px solid #CAD6F0; height: 50px; }

    Tuesday, February 8, 2011 at 05:40 | Permalink | Using Google Chrome Google Chrome 9.0.597.84 on Mac OS X Mac OS X 10.6.6
  14. Arun wrote:

    None of the above CSS rules work anymore on Fluid. Anyone?!!

    Monday, August 29, 2011 at 18:43 | Permalink | Using Safari Safari 534.48.3 on Mac OS X Mac OS X 10.7.1
  15. Cory wrote:

    Userstyles and userscripts only work in the paid version of Fluid now (v 1.2 currently). WTF!?

    Friday, September 16, 2011 at 22:04 | Permalink | Using Google Chrome Google Chrome 15.0.874.15 on Mac OS X Mac OS X 10.6.8

Post a Comment

On some sites, you must be logged in to post a comment. This is not the case on this site.
Your email address is not made public or shared. Required fields are marked with *.
*
*
*

Posting a comment signifies you accept the privacy policy.
Please note — usually your comment will appear straight away but sometimes it will be held for approval (this is due to the spam filter). If your comment is waiting to be approved, please don’t post it again! It will appear eventually.