Avoiding the 5 Most Common Mistakes in Responsive Design

Size: px

Start display at page:

Download "Avoiding the 5 Most Common Mistakes in Responsive Email Design"

Clarence Davis
7 years ago
Views:

1 Avoiding the 5 Most Common Mistakes in Responsive Design Ira Horowitz, Cornershop Creative Blake Groves, Salsa Labs March 5, 2015 #15NTC #15NTC design

2 Avoiding the 5 Most Common Mistakes in Responsive Design

3 About Cornershop Creative Online services company that provides excellent design, expert web development, and innovative online strategy for nonprofits and small businesses

4 About Salsa Labs Software and education for nonprofits all in one place Raise funds Affect change Grow your list Engage supporters

5 ARE YOU WORKING HARD TO GROW YOUR LIST?

7 We re working hard to fill a leaky bucket. Attrition Change of Address Fatigue Unsubs

8 Why shoot yourself in the foot? Opens Deletes 29% Mobile Desktop Nonmobile Desktop 71%

9 Simple Math 50,000 targeted list Assume half on mobile 25,000 71% of 25,000 = 17,750 Net list 32,250 BEFORE bounces, opens, etc.

10 Are you currently mobile friendly Yes from top to bottom For most areas, but not all Only in a few areas Barely Not at all

11 WHAT IS RESPONSIVE DESIGN?

12 Responsive Design Approach to web design aimed at providing an optimal viewing experience, regardless of screen size or device Allowing for easy reading, without pinching, zooming, resizing, panning or scrolling

of screen size or device Allowing for easy reading,

13 Responsive Design Can be used in coding websites or You can target specific screen widths or devices and have an unlimited number of break points

17 WHY RESPONSIVE DESIGN?

18 DO YOU KNOW HOW YOUR SUPPORTERS OPEN YOUR MAIL?

20 53% of total opens occur on mobile devices

21 Responsive design results in 15% increase in clicks

22 Mobile usage is expected to grow by 23% in 2015 and 22% in 2016

23 The first link in a responsive has a 30% higher click rate than non-responsive s

24 USING RESPONSIVE DESIGN IN

25 WHAT IS YOUR BIGGEST CHALLENGE WITH MOBILE?

26 What s holding you back? Lack of technological approach Lack of time/resources Not a priority Other

27 Start with a Template

30 Common Break Points Screen Size XL Screen Desktop & Laptops Tablets Smartphones Breakpoints > 1920px 1024px 768px 1024px 320px 480px However, there are an infinite number of possible breakpoints. Here s a list of more than 30 options:

31 Responsive Coding The following must be included in the <head> to tell browsers and clients to size the content to the browser width: <meta name="viewport" content="width=device-width" />

32 Media Queries /* Screens Smaller than 640px only screen and (max-width: 640px) { img[id= header ] { max-width: 600px; } table[id= outer ] { max-width: 600px; width= 100% } td[class= content ] { font-size: 16px; } }

33 Media Queries /* Smartphones (portrait) only screen and (max-width : 320px) { img { max-width: 320px; width= 100%; } td[class= content ] { font-size: 18px; } }

34 Media Queries /* ipads (portrait) only screen and (min-devicewidth : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Specific ipad styles }

35 Tips Don t define fixed width Use percentages and max-width Increase font size for smaller screens

36 AVOIDING COMMON MISTAKES

37 #1. If it isn t broke, don t fix it Once you spend the time working on the template, don t change it. Create a template that works for multiple uses and replicate it

41 #2. No substitute for good content If a message didn t work on standard platform, then it won t work on mobile Use A/B testing to watch performance rates for both desktop and mobile users

44 #3. Short & to the Point Avoid long paragraphs Let people skim and understand at the top what they should do next Test on all platforms

48 #4. Watch Your Images Images are nemesis of responsive design Images can break the layout, if too wide Images with text can be unreadable on small devices

54 #5. Think it through to the end If you send an effective , people will click on your links Make sure you landing pages and forms are mobile responsive as well Create consistency between your and the pages you re directing them to

61 Conclusion Code for mobile devices Keep it simple Avoid text in images Avoid long paragraphs Make your forms and landing pages responsive too

63 Notes: Evaluation:

64 Get In Touch Ira Horowitz, Cornershop Creative Blake Groves, Salsa Labs

Mobile Optimise your Emails. Code & examples to make your email campaigns mobile friendly

Mobile Optimise your Emails. Code & examples to make your email campaigns mobile friendly Mobile Optimise your Emails Code & examples to make your email campaigns mobile friendly Email Marketing Guide June 2013 CONTENTS Introduction...01 The Growing Importance of Mobile...02 Key Mobile Devices...03