the opportunity cost · • responsive design experts ... • emails that are too wide • emails...
TRANSCRIPT
![Page 1: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/1.jpg)
The Opportunity Cost of Designing with Crayons
Presents
![Page 2: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/2.jpg)
DISPLAY BLOCK
• Full service email agency • Responsive design experts • Management team with over 50 years email experience
![Page 3: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/3.jpg)
SET THE SCENE
!
• 60% of opens are on devices • This is the year
Education Magazines Books WeatherShopping Videos News Games Email
24%
19%
13%
25%29%
25%
35%
41% 42%
52%55%
46%
31%
63%
56% 57%
66%70%
50%
44%
51%
60%
37% 37%
43% 44%42%
![Page 4: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/4.jpg)
• Your customers are looking • MCommerce has grown 63%
Studies have found that people look at their phones an average of
times a day
150
SET THE SCENE
![Page 5: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/5.jpg)
WE’VE ALL WITNESSED
![Page 6: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/6.jpg)
WE’VE ALL WITNESSED
• Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy
![Page 7: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/7.jpg)
WHAT SHOULD YOU BE DOING
• Think mobile first • Think user engagement • Think brand identity
![Page 8: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/8.jpg)
• Device based email opens greater than desktop • Poor rendering • 48% of ALL your opens are at risk
SOME NUMBERS
![Page 9: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/9.jpg)
EVERYONE AGREE WE SHOULD GO MOBILE
![Page 10: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/10.jpg)
• Changing hierarchy • Changing navigation • Enlarging fonts • Changing colours
WHAT’S POSSIBLE?
CHANGE COLOURS
CHANGE HIERARCHY CHANGE NAVIGATION ENLARGE FONTS
Aa BbAa Bb
![Page 11: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/11.jpg)
WHAT’S POSSIBLE?
• Adding padding • Changing or hiding content • Changing layouts • Scaling images
ADD PADDING
CHANGE LAYOUT
CHANGE OR HIDE CONTENT
SCALE IMAGES
Aa Bb
ADD PADDING
CHANGE LAYOUT
CHANGE OR HIDE CONTENT
SCALE IMAGES
Aa Bb
ADD PADDING
CHANGE LAYOUT
CHANGE OR HIDE CONTENT
SCALE IMAGES
Aa Bb
![Page 12: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/12.jpg)
HOW
• Use building blocks • Cut down on unnecessary content • Action oriented copy
Examples of good layouts that can easily be used for responsive emails
![Page 13: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/13.jpg)
• Multiple images/columns on a single row can be stacked • Different mobile layouts are possible for a single desktop layout • Always follow the order from left to right
HOW
![Page 14: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/14.jpg)
• Don’t put copy over image blocks • 3 Columns, 2 rows become 1 column • Blocks still always stack Left to Right
Lendaest, que porepudi voloremque poribus simi, ut moluptatusto il ium quia non repratque ne nonseni minimped quiatiatis
Lendaest, que porepudi voloremque poribus simi, ut molup-tatusto il ium quia non repratque ne nonseni minimped quiatiatis
HOW
![Page 15: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/15.jpg)
• Hide blocks of content • Makes the email more stackable • Reduces length on mobile device
Lendaest, que porepudi voloremque poribus simi, ut moluptatusto il ium quia non repratque ne nonseni minimped quiatiatis
Lendaest, que porepudi voloremque poribus simi, ut molup-tatusto il ium quia non repratque ne nonseni minimped quiatiatis
HOW
![Page 16: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/16.jpg)
• Uneven column and row orders don’t stack • Cannot stack blue block and copy over the grey block • To achieve the condition we align the text blocks
Lendaest, que porepudi voloremque poribus simi, ut moluptatusto il ium quia non repratque ne nonseni minimped quiatiatis
Lendaest, que porepudi voloremque poribus simi, ut moluptatusto il ium quia non repratque ne nonseni minimped quiatiatis
Lendaest, que porepudi voloremque poribus simi, ut moluptatusto il ium quia non repratque ne nonseni minimped quiatiatis
Lendaest, que porepudi voloremque poribus simi, ut moluptatusto il ium quia non repratque ne nonseni minimped quiatiatis
HOW
![Page 17: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/17.jpg)
HOW THAT MANIFESTS
![Page 18: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/18.jpg)
RESULTS
• Improved user engagement • Improved branding experience • Increased clicks • Improved ROI
![Page 19: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/19.jpg)
COMPARE RESULTS
Standard design
Responsive design
![Page 20: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/20.jpg)
SERIOUSLY DON’T DO THIS
![Page 21: The Opportunity Cost · • Responsive design experts ... • Emails that are too wide • Emails where the text is too small • Pixellated images and broken copy. WHAT SHOULD YOU](https://reader033.vdocuments.us/reader033/viewer/2022052022/6037e40c878ca144fa753546/html5/thumbnails/21.jpg)
THANK YOU
14 The Green Richmond TW9 1PX United Kingdom
!0208 948 4699
displayblock.com