This document discusses responsive email design (RED) for various screen sizes. It notes that 41% of emails were opened on mobile in the second half of 2012 and that number will exceed 50% by the end of 2013. It addresses designing for the "bijillion" screens including smartphones, tablets and desktops. The key aspects of responsive design discussed are fluid grids, fluid media, and media queries. Breakpoints and techniques like stacking and shifting navigation are presented. Considerations for touch, images, and performance on mobile and tablets are also covered. Testing on real devices is recommended for evaluating touch ergonomics, debugging, and performance.
2. Anna Yeaman / @stylecampaign
Creative Director at
STYLECampaign.com
Leads the creative team. Also
responsible for customer education,
consulting and mobile boot camps.
4. 41% of emails were
opened on mobile in 2nd
half of 2012
- 14% increase in six months
- 50% increase over same time last year
- Will exceed 50% by end of 2013
http://www.knotice.com/reports/Knotice_Mobile
_Email_Opens_Report_SECONDHalf2012.pdf
Litmus.com to get your mobile stats
5. One shot: only 2%
will reopen email
on another device
http://www.knotice.com/reports/Knotice_Mobile
_Email_Opens_Report_SECONDHalf2012.pdf
57. Droid copy tips
More: http://twitpic.com/9w1u4h
Consult the documentation that came
with your phone for further instructions.
Read the instructions that came with
your phone.
1: Keep it brief.
Bad: Too formal Good: Better
Touch Next to complete setup using a
Wi-Fi connection.
To finish setup using Wi-Fi, touch Next.
2: Most important thing first
Bad: Task last Good: Task first
60. “Open rates increased, click thru
rates doubled and our own
engagement survey included in
the email showed that 80% of
recipients liked the new design!”
– Cameron Nouri of Rackspace
62. “We decided to prioritize the mobile
optimization of our transactional emails as
they are one of the main revenue drivers
within our automated email program.
Optimizing these valuable communications
was key to creating an engaging post -
purchase experience for our customers”.
Alfredo Caballero Marketing Manager at
oo.com.au (Australian retailer)
68. “15% of our newsletter sessions is generated by the
navigation header, so we decided to start small by
mobile optimizing different navigation patterns.
The amount of traffic generated by this content area
will allow us to gain insights fairly quickly and help
us plan larger optimization changes over time.”
– Alfredo Caballero of oo.com.au
69. retrofit:
Is the desktop code clean?
Clean but still incompatible?
Touch friendly?
Copy length
Performance
75. Zappos (invision blog interview)
Donny Guy – User Experience Manager
We had to ask ourselves, “Why are we
trying to push this description piece when
really a huge percentage of orders happen
without a person even looking at it?”
So we developed a hierarchy of what our
customers want: they want images first,
then they want to look at videos, and then
they’re looking at reviews.”
82. Grids test:
Thumbnail size
Deals per screen
Amount of copy
Button vs. text as CTA
1 col vs. 2 vs. 3 vs. list
Staggered vs. ordered
Scroll drop off
Contrast
118. push the contrast
Low contrast copy
that is easy to read
on a desktop
monitor, becomes
a fuzzy blur on a
smaller screen
Low contrast copy that is
easy to read on a desktop
monitor, becomes a fuzzy
blur on a smaller screen
124. “Purchase amounts on the
iPad an order of magnitude
higher than on iPhone,
Android and the web” - Fab
http://gigaom.com/2012/01/11/fab-com-
mobile-shoppers-buy-twice-as-often-as-web-visitors/
125. iPad not a 'mobile' device? I call
BS on that - everyone on the bus
or the train is on one every day
#aea @cbandes
138. “We’ve been doing a lot of
stuff to make it really easy
to interact with BB10 one-
handed, so something as
simple as moving the URL
bar down to the bottom…
143. 3G network connections are
currently 40% slower than
desktop connections, and
4G/LTE network connections
are 12% slower.
http://wpdaily.co/responsive-server-side/
160. MEDIA QUERY SUPPORT
iPhone Yes Surface (Hotmail/Outlook.com) Yes
iPad (including mini) Yes Win Mobile 6.1 No
iPod Touch Yes WP7 No
Android 2.1 No WP7.5 Yes
Android 2.2 Yes WP8 ?
Android 2.3 Yes BB OS 5 No
Android 4.0 Yes BB OS 7 Yes
Android 4.1 Yes BB OS 10 Yes
Droid Exchange No Palm OS 4.5 Yes
Android Gmail No Kindle Fire Yes
Droid Yahoo No Kindle Fire HD Yes
185. Context
Use cases - using devices in my
everyday life gives me a more
nuanced feel for a platform. When
do I reach for the 7“ vs. iPad, do
I use them in different ways?