Tweet
Tweet

Slide 1

Slide 1 text

Responsive Design Patterns #skillsponsive @markedup

Slide 2

Slide 2 text

#skillsponsive @markedup Responsive Design Patterns

Slide 3

Slide 3 text

#skillsponsive @markedup Responsive Design Patterns “Ensure project scoping happens collaboratively, with as many stake holders and project contributors as possible.”

Slide 4

Slide 4 text

#skillsponsive @markedup Responsive Design Patterns “Every website’s primary goal should be to share information as effectively and widely as possible.”

Slide 5

Slide 5 text

#skillsponsive @markedup Responsive Design Patterns Content Maps

Slide 6

Slide 6 text

#skillsponsive @markedup Responsive Design Patterns THE ABSOLUTE MINIMUM! Think of the users!

Slide 7

Slide 7 text

#skillsponsive @markedup Responsive Design Patterns Content Maps

Slide 8

Slide 8 text

#skillsponsive @markedup Responsive Design Patterns Content Maps 1 3 6 4 15 8 2

Slide 9

Slide 9 text

#skillsponsive @markedup Responsive Design Patterns Content Maps

Slide 10

Slide 10 text

#skillsponsive @markedup Responsive Design Patterns Content Maps 1 3 6 15 2 4

Slide 11

Slide 11 text

#skillsponsive @markedup Responsive Design Patterns Content Maps 1 3 6 15 2 1 3 6 4 15 8 2 4

Slide 12

Slide 12 text

#skillsponsive @markedup Responsive Design Patterns Start Coding

Slide 13

Slide 13 text

#skillsponsive @markedup Responsive Design Patterns Start Coding Set up different content types Identify common features

Slide 14

Slide 14 text

#skillsponsive @markedup Responsive Design Patterns TEST CONTINUOUSLY! My phone! Don’t be me

Slide 15

Slide 15 text

#skillsponsive @markedup Responsive Design Patterns Start Coding Set up different content types Identify common features Meaningful markup above all else

Slide 16

Slide 16 text

#skillsponsive @markedup Responsive Design Patterns Real Content

Slide 17

Slide 17 text

#skillsponsive @markedup Responsive Design Patterns Real Content Keeps whole project team engaged Reveals problems sooner Improve content and user experiences

Slide 18

Slide 18 text

Responsive Design Patterns #skillsponsive @markedup Designed & built by