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; }