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! ...
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,...
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....
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 Ja...
+ + API
DeviceLightEvent = ? lux
LightLevelEvent = dim | normal | bright
(Approximate levels of dim: < 50 lux, normal: 50 - 10000 ...
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 - htt...
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...
http://clientsfromhell.net/post/68277799025/i-have-a-champagne-taste-on-a-beer-budget
“I have a champagne taste
on a beer ...
- 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
More Than Media Queries - The Digital Pond
More Than Media Queries - The Digital Pond
More Than Media Queries - The Digital Pond
More Than Media Queries - The Digital Pond
More Than Media Queries - The Digital Pond
More Than Media Queries - The Digital Pond
More Than Media Queries - The Digital Pond
More Than Media Queries - The Digital Pond
More Than Media Queries - The Digital Pond
More Than Media Queries - The Digital Pond
Upcoming SlideShare
Loading in …5
×

More Than Media Queries - The Digital Pond

1,548 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,548
On SlideShare
0
From Embeds
0
Number of Embeds
165
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

More Than Media Queries - The Digital Pond

  1. 1. SALLY JENKINSON · @sjenkinson · The Digital Pond · 7th August 2014 Media Queries More than
  2. 2. Hello! SALLY JENKINSON @sjenkinson sally@recordssoundthesame.com www.recordssoundthesame.com
  3. 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. 4. Responsive Web design
  5. 5. 1. technology & experiences
  6. 6. technology experiences
  7. 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. 8. User experience is affected by our implementations.  User experience is not just visual
  9. 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. 10. test your experiences
  11. 11. evolve your thinking
  12. 12. Modified from http://commons.wikimedia.org/wiki/File:Human_evolution.svg. Devices from icomoon.io
  13. 13. 2. Your websites can be more responsive
  14. 14. fluid grid + flexible images + media queries
  15. 15. Size isn’t everything (RWD > media queries > widths) dev.w3.org/csswg/mediaqueries4/
  16. 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. 17. + + API
  18. 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. 19. sallyjenkinson.co.uk/blog/2014/05/18/light-level-demo/
  20. 20. Invisible requirements
  21. 21. offlinefirst.org
  22. 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. 23. Kenny Stoltz -https://www.flickr.com/photos/42901313@N00/226740290/
  24. 24. Shelley Bernstein -https://www.flickr.com/photos/31484272@N00/7044075263/
  25. 25. http://www.gehealthcare.com/promo/advseries/
  26. 26. More than media queries
  27. 27. 3. BE responsive RESPONSIBLE
  28. 28. Narcissistic web design
  29. 29. The only way is ethics
  30. 30. Change is hard (but it’s also good)
  31. 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. 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. 33. - Batman, 2005 “ It’s not who I am underneath, but what I do that defines me. ”
  34. 34. I Can Make - @icanmakehq
  35. 35. 1. technology & experiences 2. Your websites can be more responsive 3. BE responsive RESPONSIBLE – –
  36. 36. Thank you Sally Jenkinson www.recordssoundthesame.com sally@recordssoundthesame.com · @sjenkinson

×