Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What is responsive design

210

Published on

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

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
210
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 7. Why it should be used
  • 8. What marketers still think email recipients are doing...What they are actually doing...
  • 9. Different approaches
  • 10. Normal Responsive- Starts as 2 columns- Re-arrange elements- Hide elements- Ends as 1 column
  • 11. Advanced Responsive- Re-arrange elements- Hide elements- Drastic text changes- More reliance on stylesthan images forsmaller mobile file size
  • 12. Scalable Responsive- Hide/resize elements - Resize text - Resize line spacing- Best for simple emails - Important content visible
  • 13. How does it respond?
  • 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. Normal CSS attributesIf this….Then use these CSS attributes
  • 16. Designing for "touch"
  • 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. 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. Support
  • 20. FIN

×