Advertisement

More Than Media Queries - The Digital Pond

Digital transformation consultant
Aug. 8, 2014
Advertisement

More Related Content

Advertisement

More Than Media Queries - The Digital Pond

  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
Advertisement