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 styles than images for smaller 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 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.

Normal CSS attributes

If this….

Then use these CSS attributes

Designing for "touch"

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’

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.

Support

FIN