What is responsive design 2. Table of content 3. The medium is the message 4. Marshall McLuhan 5. What is responsive design? 6. What is responsive design? 7. Example 8. Why it should be used 9. Devices 10. Breakdown by device type 11. What email recipients are doing... 12. Different approaches 13. Normal responsive 14. Advanced responsive 15. Scalable responsive 16. How does it 'respond'? 17. Media queries 18. CSS attributes 19. Designing for 'touch' 20. Apple's iOS Human interface guidelines 21. Limitations 22. Support

1. What is Responsive Design

2. • "The medium is the message“
• What is responsive design?
• Different approaches
• Why it should be used
• How does it 'respond'?
• Designing for 'touch'
• Limitations/Support

3. "The medium is the message"

4. "The medium is the message" (1964)
- Who was Marshall McLuhan
- Predicted the invention of the Internet
- The medium is the message not the content
- Responsive design can help overcome the medium

5. What is responsive design?

6. What is responsive design?
- Rearranging content to fit different devices
- Streamlining content for smaller screens
- Better user experience
- Increased click-through

8. Why it should be used

11. What marketers still think email recipients are doing...
What they are actually doing...

12. Different approaches

13. Normal Responsive
- Starts as 2 columns
- Re-arrange elements
- Hide elements
- Ends as 1 column

14. Advanced Responsive
- Re-arrange elements
- Hide elements
- Drastic text changes
- More reliance on styles
than images for
smaller mobile file size

15. Scalable Responsive
- Hide/resize elements - Resize text - Resize line spacing
- Best for simple emails - Important content visible

16. How does it 'respond'?

17. Media Queries
Wikipedia definition:
Media Queries is a CSS3 module allowing content rendering to adapt to
conditions such as screen resolution (e.g. smartphone vs. high definition
screen). It became a W3C recommended standard in June 2012.[1] and
is a cornerstone technology of Responsive Web Design.

18. Normal CSS attributes
If this….
Then use these CSS attributes

19. Designing for "touch"

20. Apple's iOS Human Interface Guidelines
- Make targets fingertip size: buttons no smaller
than 44 x 44px and text no smaller than 13px
- Elevate the content that people care about
- Give people a logical path to follow
- Minimise the effort required for user input
- Be succinct
What we also do
- Making sure there is enough space around buttons
- Making links look like buttons ie. clear 'call to actions’

21. Limitations
- Not every email can be 'transformed' into a
responsive email
- Emails have to be designed specifically for
responsive design
- The design has to conform to a grid layout
- Image heavy designs with overlapping
components (right) will not work.

22. Support

23. FIN