MobileMe Mail Beta Visual Walkthrough

Posted on May 17, 2010 by

Graphicpeel has created a visual walkthrough of the new MobileMe Mail beta.

From Graphicpeel:

When MobileMe launched two years ago we saw a major improvement from Apple’s original service “.Mac.” MobileMe came with the use of the cloud and “push” technology and a brand new set of desktop-class web applications (or allowed anyone to access their email, contacts, calendars, photos, and files from any computer with an internet connection.

One of the reasons I love (other than being an Apple fanboy) is that it looks great. Every little aspect of the interface was thought out, from the icons to the scrollbars. It was a major improvement over the original .Mac interface which was filled with brushed metal, serif fonts, and aqua buttons. uses an interface based of applications on the Mac, but formatted for the web. This way, we’re already familiar with how to use before we even open the browser. But recently, this all changed.


So what’s all of the talk of the MobileMe Mail beta? A short time ago Apple updated their mail application. They’ve added server-side rules and a simple archiving feature (like Gmail) as well as redesigned the entire mail interface. It’s gone from resembling a application on the Mac, to an application on iPad. It’s a giant clue that Apple is planning for a more touch-based future.

The new interfaces includes tons of iPad-esque elements. There’s a new toolbar using glyphs as buttons. The default mail reading view resembles an iPad “split-view.” “Popovers” are now used in a few places, such as adding a link to an email (right). There’s also other positive changes like search moved to a different location, redesigned preferences and buttons, and webkit animations. Here’s a summary of what’s new visually.

The beta focus’ on a new color: blue. What was previously gray, is now a shade of blue, most noticeably the toolbar. The new toolbar (top) is a much simplified version of the previous design (bottom). The tiny colored icons are now glyphs, without a surrounding button. Reply, reply all, and forward has been consolidated into a popup after clicking on the reply icon. Apple’s also added an archive icon (second from left) that moves the selected message into the new archive folder. You’ve never have to delete an email again! Also, the delete symbol has been replaced with a trashcan glyph, just like the iPad and iPhone. Each of these icons gets a faint glow when hovered, a nice touch.

If a brand new user looked at each of these toolbars, which would be more intuitive?

Finally, the search bar has been moved to a more prominent side of the page, to the left. It’s been brightened and elongated too. I’m assuming, just like the recent Facebook redesign, this change was added to put more emphasis on the search bar. I never used search on MobileMe that often, maybe this redesign will remind me it’s there.

There’s also a faint shadow under the toolbar, this seems to be a new addition to Apple’s toolbars. iTunes 9 and the latest iPhoto have the same effect. I’m not sure I love it, but we’ll see how it comes along.
Formatting Bar

The formatting bar brings a lot of new functionality to the compose window, and brings a lot closer to a desktop application.

You can choose between 14 different fonts including Helvetica, Marker Felt, Georgia, and my personal favorite: Comic Sans MS! There’s 6 different font sizes available as well as a color picker, link editor, list maker, and the basics (text style and weight, text alignment, indentation). Apple even manages to make the color picker and link editor beautiful (see above). Apple’s done a great job with the design of the new toolbar.

There’s a new look for the preferences, very different (aesthetically speaking) from the preference windows on a Mac.

Just like parts of the iPad, and previous versions of, the preferences window floats on top of the background. It’s got a new tab style, using rounded squares with glyphs as icons. The selected tab turns bright blue, and hovering over one creates a blue glow around it. All of the buttons and check boxes in the beta use this same style.

As for the preferences themselves, I think they’re pretty much the same as before except for the rules, and maybe the vacation setting? It allows to auto-reply when you’re on vacation or away, useful!
Other Changes

A few more notes: To access your account, help, and sign out you click on your name in the top right and select from the popover, just like Facebook. There’s also a new loading indicator, like the ones on iPhone that float on top of the content. Drafts autosave (I love the folded paper icon). There’s a new “flag” icon, which is noticeably different. You can view your mail in three ways: widescreen, compact, and classic view all which use the new scrollbar design. There are also new buttons, checkboxes, and drop-down handles which are all matte instead of glossy.

That’s the MobileMe Mail beta! If you’ve got MobileMe be sure to apply for beta so you can try it out yourself. For those who don’t have it, maybe this will convince you to sign up.

The new is just starting to take shape. I’m sure Apple will continue to update the rest of their MobileMe web app suite with iPad-esque redesigns very soon. Could these new designs be hinting us towards a Mac OS redesign? Oh, I sure hope so. Say goodbye to poor Mac OS, and hello to iPad OS. Next stop, the tablet age!

Comments are closed.