The document discusses key aspects of responsive web design, emphasizing that user experience is influenced by implementation rather than just visual elements. It highlights the importance of performance, stating that checkout speed is crucial for online shoppers. Additionally, it advocates for responsible web design ethics and the impact of technology on society.

1. SALLY JENKINSON · @sjenkinson · The Digital Pond · 7th August 2014
Media Queries
More than

2. Hello!
SALLY JENKINSON
@sjenkinson
sally@recordssoundthesame.com
www.recordssoundthesame.com

3. Discovery! Requirements! Workshops!
Research! Integration! APIs! CMS!
Architecture! Solutions! Planning things!
Strategy! Technical sketches/annotations!
Prototypes! Fighting to improve
documentation and processes! Drinking tea!

4. Responsive
Web design

5. 1. technology & experiences

7. technology
experiences

8. “We don’t have a UX Team. If the problem
with your service is that the servers are slow
and the UX Team can’t change that, then
they aren’t in control of the user experience
and they shouldn’t be called the user
experience team.”
https://gds.blog.gov.uk/2014/07/18/whats-the-design-process-at-gds/

9. User experience is affected
by our implementations.
User experience is
not just visual

10. of online shoppers cite checkout speed as the
number one factor that determines whether
or not they will return to a site.
http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/
46%

11. test
your experiences

12. evolve
your thinking

13. Modified from http://commons.wikimedia.org/wiki/File:Human_evolution.svg. Devices from icomoon.io

14. 2. Your websites can be
more responsive

15. fluid grid
+
flexible images
+
media queries

16. Size isn’t everything
(RWD > media queries > widths)
dev.w3.org/csswg/mediaqueries4/

17. dev.w3.org/csswg/mediaqueries4/
Scripting
pointer
hover
light-level
“used to query whether scripting languages, such as JavaScript, are supported on the
current document”
“used to query about the presence and accuracy of a pointing device such as a mouse”
“used to query the user’s ability to hover over elements on the page”

18. + + API

19. DeviceLightEvent = ? lux
LightLevelEvent = dim | normal | bright
(Approximate levels of dim: < 50 lux, normal: 50 - 10000 lux, bright: > 10000 lux)
www.w3.org/TR/ambient-light/
Media query translation: washed

20. sallyjenkinson.co.uk/blog/2014/05/18/light-level-demo/

21. Invisible
requirements

22. offlinefirst.org

24. Texas State Archives - https://www.flickr.com/photos/texasstatearchives/9079476324/in/set-72157634196756057, D-Tailor - http://d-tailor.deviantart.com/art/Howl-s-Moving-Castle-80916550
Responsive architecture

25. Kenny Stoltz -https://www.flickr.com/photos/42901313@N00/226740290/

26. Shelley Bernstein -https://www.flickr.com/photos/31484272@N00/7044075263/

29. http://www.gehealthcare.com/promo/advseries/

30. More than
media queries

32. 3. BE responsive
RESPONSIBLE

34. Narcissistic
web design

36. The only way is
ethics

40. Change is hard
(but it’s also good)

41. twitter.com/aral/status/450983599911997440
“Tech isn’t just about tech - the stuff you
make can (and does) change the very
character of the society we live in.”
!
- Aral Balkan, 2014

42. http://clientsfromhell.net/post/68277799025/i-have-a-champagne-taste-on-a-beer-budget
“I have a champagne taste
on a beer budget.”
- Clients From Hell, 2013

43. - Batman, 2005
“ It’s not who I am underneath, but
what I do that defines me. ”

44. I Can Make - @icanmakehq

45. 1. technology & experiences
2. Your websites can be more responsive
3. BE responsive RESPONSIBLE
–
–

46. Thank you
Sally Jenkinson
www.recordssoundthesame.com
sally@recordssoundthesame.com · @sjenkinson