Post on 08-May-2015
description
SALLY JENKINSON · @sjenkinson · The Digital Pond · 7th August 2014
Media QueriesMore 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 isnot 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/
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 youSally Jenkinson
www.recordssoundthesame.com
sally@recordssoundthesame.com · @sjenkinson