Responsive web design involves creating layouts that adapt to different screen sizes using flexible grids and media queries. It allows for a device-agnostic approach and is easier to build than separate mobile sites. Key aspects of responsive design include planning with a mobile-first approach, prototyping, using consistent breakpoints based on content, usability testing, writing for different screens, designing visually hierarchical layouts, and addressing images and media. Testing is important throughout the process. While responsive design is a good base, other solutions like responsive or native apps may still be needed, and the job requires ongoing review.

1. respon
some stuff about responsive web design
sive

2. intro: about
phase 1: planning
phase 2: content
phase 3: design
phase 4: build
phase 5: after

3. about

4. the rise of mobile
half of all searches are mobile
some websites near 50% mobile
explosion of devices
we need to address mobile

5. what is
responsive?
creating flexible layouts
that can adapt to suit the
size or orientation of
any device.

6. three things
1. flexible, grid-based layout
2. flexible images/media
3. media queries
Ethan Marcotte

7. strengths?
device agnostic
easy to build (not plan)

8. weakness?
bandwidth
user experience
overall management

9. responsive/
mobile/apps
each has their place,
responsive is not the only solution
responsive is a perfect base

10. the future is ress
“Such a tempting solution...
you never have to touch
the server”
Luke Wroblewski

11. more than
techniques
65% planning & testing
35% design & content
5% build

12. planning

13. mobile first
plan for small
expand for large
http://www.lukew.com/ff/entry.asp?933

14. prototyping
loose wireframes
test the flow early

15. breakpoints
based on content
not devices

16. ux consistency
procedural memory and
confusing users

17. test frequently
don’t make assumptions

18. content

19. simple content
small screen does not always
mean “simple content”

20. write wisely
pyramid writing?
hide/reveal?
content folding?

21. desig
design

22. design small
design for small screen first

23. visual hierarchy
maintain hierarchy
at all screen sizes

24. content images
simply shrinking your images
may not be ideal

25. build

26. frameworks
you may need to roll your own
(but learn from others)
test frequently
http://twitter.github.com/bootstrap/

27. overlap?
should your CSS be
overlapping or contained?

28. javascript?
will you use javascript or
conditional comments?

29. responsive tables
some techniques look cool,
but be aware of the users
http://dbushell.com/2012/01/04/responsive-calendar-demo/

30. responsive media
there are so many solutions
so do your research
http://css-tricks.com/which-responsive-images-solution-should-you-use/
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

31. after

32. style guides
document your design
and code for others
that come after

33. review
the job is never done!

34. wrap

35. 1. responsive should be the base
2. you may still need RESS or mobile
3. the build is only part of the process
4. mobile first at every stage
5. test at every stage