As we are learning first-hand about the differences between designing for various interfaces, it’s helpful to look at existing examples. Today I look at how Google’s Gmail mobile and tablet app and desktop web interface compare.
The mobile app is the most stripped down version of Gmail. Due to the smaller screen size, each screen can only contain so much information and provide so much functionality. Each screen really only has one function. At the top are a search bar and a hamburger menu. The main content of the page is a list of the main email categories, followed by the inbox emails. At the bottom right corner is a button which allows the user to quickly open the screen to compose an email. The content can be refreshed by dragging down on the list. This type of gesture does not traditionally exist on desktops, so this function requires a discreet button instead.
The hamburger menu provides navigation options to different labels and folders within the user’s Gmail account, each of the linked Gmail accounts, or even view all the emails from every account linked to the app, which I don’t believe is a function available in the desktop web interface. This is also where the settings menu is housed. There are quite a few settings, but not as many as can be found on the desktop web interface.
Clicking on an email brings you to another screen which shows the contents of the email. Options to archive, delete, and mark the email are at the top while options to reply or forward the email are at the bottom.
The tablet’s larger size allows more functions to be present in a single screen. The categories, folders, labels, etc are accessible by buttons on the left side of the screen. The emails are listed in a similar format to the mobile app, topped by a search bar and with a button to compose an email at the bottom right of that section of the screen. The largest portion of the screen is taken up by whichever email conversation is highlighted by the user. This section of the screen is again similar to how it was laid out on the mobile app, with buttons to archive, delete, and mark the email at the top and the reply and forward buttons at the bottom.
Gmail’s desktop web interface allows much more customization than either the mobile or tablet app. Users can choose from a variety of themes which can change according to the weather or time of day. The mobile and tablet apps have no real customization options with regards to their looks, probably due to the lack of screen space and the possible readability issues.
Screenshot of Gmail on a desktop browser. 
The “New Message” window in the Gmail browser interface.
The web interface also allows users to see more information at once. The different folders and labels are included in a navigation list to the left of the main content of the page, which is where the emails reside. The email information (sender, subject line, date, etc) is spread horizontally across the screen rather than being stacked vertically as seen on the mobile and tablet apps. Users can also see the Google Hangouts chat window, Google Calendar, and the Tasks within the Gmail web interface rather than having to open a separate app to access these functions. Since it’s a web interface within a browser, a button at the top right corner of the screen connects the user to every other Google product available (search, maps, YouTube, News, etc). These open in a new window.
Besides increased the connectivity and larger amount of items able to fit on the screen, the desktop version allows users to archive, delete, mark, or snooze emails by hovering the cursor over it. A similar effect can be performed on the mobile and tablet apps by sliding the email to the left or right, however, only one function can be assigned to that gesture.
The button to compose a new email is in the top left corner of the window, opposite of the mobile and tablet apps’ button on the bottom right. Since the desktop window is so large, the function to compose a new message is a pop-up either nestled in the bottom left corner of the email list, or it can be expanded to center in the screen with an overlay. Replies to emails are simply text boxes within the email itself. Since space is limited on the mobile app, emails must be composed on a modal that takes up the entire screen. The functions to send and attach items to the email are on the bottom of the desktop email composition windows, but they are at the top of a stationary bar on the mobile app. This difference is probably to avoid any confusion with the mobile phone keyboard, which is positioned on the bottom of the screen.
When composing emails, the desktop web interface provides the user with more customization options, allowing the user to change the typeface, font size, text color, etc. Both the desktop web interface and apps allow users to attach photos and documents from the device itself or the user’s Google Drive. Users can also send and receive money through Gmail.
Overall, both the apps and the browser interface share the same core functionalities but make use of the screen real estate in different ways. The small mobile screen must provide the core functions of the app with as little space as possible. The tablet has slightly more space available and is able to display more information in one screen. The desktop browser interface provides the most information and functionality as well as customization options. The customization available on the browser interface does make it seem a little removed from the apps, however, commonalities in iconography, typeface, overall layout, and color palette can help tie them all together under one brand.