More Than Media Queries - The Digital Pond
46
SALLY JENKINSON · @sjenkinson · The Digital Pond · 7th August 2014 Media Queries More than
-
Upload
sally-jenkinson -
Category
Technology
-
view
670 -
download
5
description
Talk given at The Digital Pond on August 7th 2014. The event theme was "Responding To The Responsive Web - Insights On Reshaping User Experience". Talk summary: Responsive projects are about more than just serving up the same site across different screen sizes. When we do our planning, we should think about using technology to enhance experiences. A big part of that is making choices for the right reasons, and with wider principles (such as responsibility) in mind.
Transcript of More Than Media Queries - The Digital Pond
SALLY JENKINSON · @sjenkinson · The Digital Pond · 7th August 2014
Media QueriesMore than
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
–
–
