Designing for Tablets & Small Screens

With the upcoming launch of Windows 8, we designed Outlook to work great on the new breed of touch devices that will become mainstream over the next few years. Outlook 2013 adapts itself based on the device you are using while still being the Outlook that you are familiar with. When you boot Outlook on a tablet, you’ll notice that the layout changes to provide a great touch experience! Likewise, when you boot Outlook on a device with a small screen, you’ll notice that Outlook makes the most of screen real estate and puts your content in the spotlight.

Tablets

On Windows 8 tablets, the navigation pane and ribbon are collapsed to give you maximum real estate for actual content. This also means your thumb can reach the message list comfortably to scroll. Outlook also turns on Touch Mode by default for tablets. This triggers certain optimizations that make it easier to use Outlook on hand held touch devices.

One of the most notable touch mode enhancements and one of our favorite features is the Touch Actions Bar. It’s conveniently located on the right edge of the screen so you can use your thumb to quickly perform common actions such as Reply, Delete, Flag and Mark Unread.

In touch mode, the Mail, Calendar, People, and Task icons are bigger so you can easily tap it to change modules. Folder names, ribbon buttons and the Quick Action Toolbar (QAT) buttons are spaced out to make them easier to touch.

We did not forget the calendar when we started designing for touch devices! Try swiping to switch between Day/Week views and pinching to switch between different views. It’s fast, fun, and natural.

On a convertible device like a touchscreen laptop, Outlook may not default you into the touch optimized settings. But don’t worry, you can still get all the goodness of touch mode! Click on the drop down in the QAT and select Touch Mode; the icon below will appear. Click to manually turn on all the “Touchy” goodness.

Small Screen Devices

In addition to the optimizations we made for tablets, we also realized that an increasingly large number of Outlook users are opting for compact devices with smaller screens. In Outlook 2013 we have made many optimizations to make sure users are getting the most out of Outlook.

Outlook will detect that you are on a compact device, and collapse the navigation pane and ribbon by default just as it does for tablets. Email headers and the Outlook Social Connector use smaller pictures and shrink in size.

Many people are going to have difficulty discovering the Touch Mode option in a obscure place like Quick Action Toolbar. Also it my understanding you have to do this in each Office application…that is very painful. I suggest you detect if the user has touch capable device and prompt if they wish to enable this by default.