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

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

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

Responsive
Web design

1. technology & experiences

technology
experiences

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

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

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%

test
your experiences

evolve
your thinking

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

2. Your websites can be
more responsive

fluid grid
+
flexible images
+
media queries

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

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”

+ + API

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

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

Invisible
requirements

offlinefirst.org

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

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

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

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

More than
media queries

3. BE responsive
RESPONSIBLE

Narcissistic
web design

The only way is
ethics

Change is hard
(but it’s also good)

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

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

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

I Can Make - @icanmakehq

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

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