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

6.
technology
experiences

7.
“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/

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

9.
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%

10.
test
your experiences

11.
evolve
your thinking

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

13.
2. Your websites can be
more responsive

14.
fluid grid
+
flexible images
+
media queries

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

16.
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”

17.
+ + API

18.
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

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

20.
Invisible
requirements

21.
offlinefirst.org

22.
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

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

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

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

26.
More than
media queries

27.
3. BE responsive
RESPONSIBLE

28.
Narcissistic
web design

29.
The only way is
ethics

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

31.
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

32.
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

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

34.
I Can Make - @icanmakehq

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

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