Gmail

Email, we all have it, we all use it, many of us loathe it. Gmail was originally invented to make Email better, and today Google is continuing that journey with responsive design being integrated into Gmail for the Web and Mobile.

Responsive design you say, isn’t that something to do with apps? Yes, but it also refers to any design – layout – that detects the constraints and specifications of the device viewing it and changes what the user sees based on those parameters. If you view the exact same content from the desktop or a mobile device you will be served a different view and UI to make the experience native to that form factor.

That’s what Google is bringing to Email. For content that is correctly coded, Gmail – no mention of Inbox at this time – will
now adapt the display based on where you view it from. View it on the Web and you’ll get the standard HTML view we all know and love, view it on mobile and you’ll see a new optimised version as shown below.

responsive

The new CSS library will allow designers to change styles based on width, rotation, and resolution, allowing for more responsive formatting to optimize your email for every device. If you’re an email designer check out the developer specific blog post here, or the code repository here.

With Email still an essential part of living online, or in the world really, it’s great to see Email finally getting some smarts in this area. There’s no mention of this being made an open standard that other email clients can utilise, which is a shame, a single unified approach to this would benefit users and content creators alike. Unfortunately, as this is a sender based change I wouldn’t expect all of those full page emails you receive to start displaying correctly on your mobile device for some time to come.

Source: Google.
2 Comments
newest
oldest
Inline Feedbacks
View all comments
AdamM

I’ve been playing around with Inbox for a while, but I might go back to the Gmail app for a while to try this out.

Duncan_J

I wouldn’t rush, developers still have to implement this