What is responsive design


Published on

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

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

What is responsive design

  1. 1. What is Responsive Design
  2. 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. 3. "The medium is the message"
  4. 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. 5. What is responsive design?
  6. 6. What is responsive design?- Rearranging content to fit different devices- Streamlining content for smaller screens- Better user experience- Increased click-through
  7. 7. Why it should be used
  8. 8. What marketers still think email recipients are doing...What they are actually doing...
  9. 9. Different approaches
  10. 10. Normal Responsive- Starts as 2 columns- Re-arrange elements- Hide elements- Ends as 1 column
  11. 11. Advanced Responsive- Re-arrange elements- Hide elements- Drastic text changes- More reliance on stylesthan images forsmaller mobile file size
  12. 12. Scalable Responsive- Hide/resize elements - Resize text - Resize line spacing- Best for simple emails - Important content visible
  13. 13. How does it respond?
  14. 14. 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.
  15. 15. Normal CSS attributesIf this….Then use these CSS attributes
  16. 16. Designing for "touch"
  17. 17. 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’
  18. 18. 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.
  19. 19. Support
  20. 20. FIN