15. Responsive Design is:
The way forward
Fluid grids, flexible images, and media
queries are the three technical ingredients
for responsive web design, but it also
requires a different way of thinking…
~Ethan Marcotte
16.
17. Remember what a pixel is?
Short for Picture Element, a pixel is a single point in a
graphic image. Graphics monitors display pictures by
dividing the display screen into thousands (or millions) of
pixels, arranged in rows and columns. The pixels are so
close together that they appear connected.
In short, it’s how web developers “used to” measure
elements on a web page.
19. Fluid grid systems
Responsive Design:
Fluid grids, flexible images, and media queries are the three
technical ingredients for responsive web design, but it also
requires a different way of thinking…
~Ethan Marcotte
42. Responsive best practices…
Web safe text (helvetica, arial, times, georgia) for emails
Larger font size (13px minimum)
Less content (your audience is often on the go)
Single column (keep it simple if you can)
Headlines and call-outs are your user’s best friend
Bullet proof buttons – finger- touch proof – (minimum 44px)
Scrolling is good, as long as you have various elements to break up content
Avoid pinching and/or zooming
43. …can yield significant results.
visitors time on site # gifts revenue CR
+68% +95% +299% +830% +137%
6/13 – 5/14 Δ 6/12-5/13
44. “In times of change, learners inherit the earth,
while the learned find themselves beautifully
equipped to deal with a world that no longer
exists.”
- Eric Hoffer
50. A few things to get you started…
bit.ly/frdny-rwd
and more…
Editor's Notes
Brand identity + character + positioning, audiences, engagement, experience, acquisition, fundraising, workflow, capacity, and budgets
How we reach, act, convert and retain prospects and constituents
Mobile web usage now exceeds desktop usage at 51% which wasn’t expected to occur until 2016. There are 1.4 billion smartphones (1 in 7 people worldwide). What does this mean for us as marketers - as brands?
Desktops are no longer be the primary vehicle potential donors will learn about your brand / mission and the context isn’t fixed.
It’s important to ensure a consistent branded experience across each device.
Here is our new website– 1 year old… that holds to these principles
88% of people check their email on a mobile device daily
41% open email on mobile actually occured on a mobile device – this just happened, increasing 32% in the last 2 years.
It’s not like users only use one device. They might start an action on 1 and continue on another.
So consistent messaging and brand is critical.
86% of smartphone users watch TV while browsing a smartphone.
The device we choose is largely driven by our context.
Whatever is accessible.
80% of people will delete an email that doesn't look good on their mobile device. Even worse 33% will unsubscribe (source: litmus).
A lot of our design thinking comes from print, but how would you design a print piece if no one told you the size of the paper?
Designing for responsive is like designing for a canvas that could be any size. Terms like page and the dreaded fold are inherited from print.
CEO Story
How do we design without knowing the paper size?
Dave: Refrigerator example
Regina; we’ve had clients tell us, they have a mobile version
That’s great, but going back to Dave’s story, do you have a fridgeversion as well?
Dave: The question becomes how do we deal with this? 10 different sites?
SO the design community has embraced this challenge, and the answer is RD - the goal is your organizations mission and value proposition are experienced as intended.
Single URL, set of content, and code for multiple devices
Different than a “mobile site” – m.website.com
Responsive design allows an organization to easily adapt in an era of rapidly proliferating connected devices
The dictionary definition as told by the founder of RWD – Ethan Marcotte is:
Don’t get overwhelmed! We know those terms are tricky
Let’s start with our original definition—begins with the fluid grid system.
Framework of modern poaching
Grids
Background image – set to % as well
This is 1 breakpoint
Allows to scale when proportions are similar
What happens when user flips that tablet?
In the case of Modern Poaching, we have a new breakpoint
New grids
But what happens if you’re on a phone, whose screen real estate is considerably smaller.
Another new grid - 1
Another key takeway, with context in mind
Click becomes scroll
Ask audience:
How many people here use outlook? Which version of outlook? How many use gmail? How many use gmail app on their phone? How many use macmail? How many use yahoo in a browser? Etc.
In addition to all of the different devices out there, there are also a ton of email clients.
READ SLIDE
Desktop varies year by year, and users don’t often update
Webmail is constantly evolving
But there are tons of industry resources to help us navigate these challenges, Litmus is a great company that informs us on which email clients to really focus on.
Apple devices are consistent, however there’s considerably more fragmentation in the Android market.
Today, we can basically break down email design into 4 design approaches
Ah the ol email with sidebar appeal! It’s great when 100% of your constituents were on a desktop when viewing your email.
This email we designed over a year ago, and it kept to best practices as much as possible:
Web safe fonts
13px font-size
41% open emails on mobile
Designed at 600px wide – everyone thought this was safe… but not on your phone
Pinch and zoom, zoom, swim around that screen. Just like the safari sweepstakes
Ultimately, the CTA is out of reach on the phone
It’s 500px email
Simple, 1 column
Sent this last fall
This worked great when we were sending an email of engagement, that consisted of 2 sentences
Large button – CTA – Apple studied average finger touch size to be 44px
Dave: This email got a 30% CTO rate
Users are forced to do a hefty bit of scrolling,
Not good when lots of copy with such a simple design
which would be poor user experience when there is an action involved.
Show AWF responsive email,
A line of code can decipher device
Multi column option (more complicated)
Collapses to “user optimized” single column (like modern poaching landing)(
Swap content
Mobile devices rely on touch, to scroll, it’s more natural, and so getting long – as long as you have proper content type (graphics, call-outs) to stagnate user experience
At sanky we’ve created several responsive emails that did not yield to original expectations because not every email provider is the same… and as Dave said earlier, there are tons of different devices that don’t cooperate the same way either.
responsive is not supported by every known email client…
Hence the 4th category of email design, which is highly recommended by Sanky for consistent rendering across all clients and devices is the fluid email
Works for appeals
No changes in proportions
No new elements
All the same
In conclusion, the email design landscape is complex… and is likely to become more complex. We’ve highlighted 4 options that have emerged now. But because of the importance of email in direct marketing, it’s vital that you test so that you can provide the best end user experience to keep constituents engaged, as a critical tool in your fundraising efforts.
Show AWF modern poaching email – Do we want to break this into multiple slides?
Having relaunched our website about 1 year ago and in conjunction with our partners at Sanky, AWF has embraced responsive practices across channels. And we have seen impressive results:
Time on site
Mobile: FY13 – 0:53 | FY14 – 1:56
Tablet: FY13 – 1:32 | FY14 – 2:37
TOTAL: FY13 – 1:08 | FY14 – 2:12
Conversion rate
Mobile: FY13 – 0.04 | FY14 - 0.16
Tablet: FY13 – 0.24 | FY14 - 0.48
TOTAL: FY13 – 0.12 | FY14 – 0.28
So responsive design enables us to be nimble and adaptable towards the future, as more devices and new technology emerges
What might the future hold?
People, and right now it’s currenlty more on the West coast will browse the web and check email from their glasses
James Bond might have his headquarters make a gift on their wall sized screen.
It’s really a matter of time.
While it seems like a lot of work, ultimately the rise in mobile adoption offers marketers more opportunities to to connect with constituents and deepen relationships
A book apart – Responsive web design and Mobile first
Campaign monitor – Will it work, canvas
Litmus – Gmail offers,
Google –
Smashing Magasine
Quirktools - screen fly
place.it
http://screensiz.es/about
