These are the slides from the workshop I gave at the 'Make & Do' weekend of Digital Shoreditch 2013 - They explore the challenges and opportunities web & UX designers are faced with when it comes to responsive web design (RWD). I shared experiences, techniques and general approaches from the work we do at Cyber-Duck: www.cyber-duck.co.uk.

1. Adapting to
Responsive
Matt Gibson
@duckymatt
#DS13

2. How do we define
responsive?

3. Flickr credit: @alui0000
A website that reacts to the plethora of
ways that our users will access our content.

5. You don't get to decide
which device people use
to access your website.
Karen McGrane
http://bondartscience.com/

6. The web doesn’t
have a fixed width.

7. We should embrace the fact that
the web doesn’t have the same
constraints [as the printed page]
and design for this flexibility.
John Allsopp, A Dao of Web Design
http://alistapart.com/article/dao

8. Responsive is
about...

9. Content
http://xkcd.com/773/

10. Performance

11. Big screen
≠
Better connection

12. Accessibility
Flickr credit: @furbyx4

13. Navigation

14. Layout & flow

15. Future friendliness

16. RWD means
assuming less
about our users

17. Task 1.
Looking at the Digital
Shoreditch website, what is the
most important content the
user needs
(list down the top 5)

18. Task 2.
Based on this, what would be
the core experience for our
users and what is secondary?

19. http://www.cennydd.co.uk/2012/why-i-dont-wireframe-much
Sketching and prototyping

20. Style tiles

21. Style guides and
pattern libraries

22. Task 3.
Prototyping - Sketch out our
homepage based on our core
experience we’ve already
defined.