• Share
  • Email
  • Embed
  • Like
  • Private Content
What is responsive design

What is responsive design



What is responsive design ...

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



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    What is responsive design What is responsive design Presentation Transcript

    • What is Responsive Design
    • • "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
    • "The medium is the message"
    • "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
    • What is responsive design?
    • What is responsive design?- Rearranging content to fit different devices- Streamlining content for smaller screens- Better user experience- Increased click-through
    • Why it should be used
    • What marketers still think email recipients are doing...What they are actually doing...
    • Different approaches
    • Normal Responsive- Starts as 2 columns- Re-arrange elements- Hide elements- Ends as 1 column
    • Advanced Responsive- Re-arrange elements- Hide elements- Drastic text changes- More reliance on stylesthan images forsmaller mobile file size
    • Scalable Responsive- Hide/resize elements - Resize text - Resize line spacing- Best for simple emails - Important content visible
    • How does it respond?
    • Media QueriesWikipedia definition:Media Queries is a CSS3 module allowing content rendering to adapt toconditions such as screen resolution (e.g. smartphone vs. high definitionscreen). It became a W3C recommended standard in June 2012.[1] andis a cornerstone technology of Responsive Web Design.
    • Normal CSS attributesIf this….Then use these CSS attributes
    • Designing for "touch"
    • Apples iOS Human Interface Guidelines- Make targets fingertip size: buttons no smallerthan 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 succinctWhat we also do- Making sure there is enough space around buttons- Making links look like buttons ie. clear call to actions’
    • Limitations- Not every email can be transformed into aresponsive email- Emails have to be designed specifically forresponsive design- The design has to conform to a grid layout- Image heavy designs with overlappingcomponents (right) will not work.
    • Support
    • FIN