SlideShare ist ein Scribd-Unternehmen logo
1 von 46
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Ähnlich wie More Than Media Queries - The Digital Pond

The Web Is Our Responsibility
The Web Is Our ResponsibilityThe Web Is Our Responsibility
The Web Is Our Responsibility
Sally Lait
 
Deck1 export-141101063436-conversion-gate01
Deck1 export-141101063436-conversion-gate01Deck1 export-141101063436-conversion-gate01
Deck1 export-141101063436-conversion-gate01
Melvin Salazar
 
System performance en-2
System performance en-2System performance en-2
System performance en-2
Michael Klein
 
Saturn 2014. Engineering Velocity: Continuous Delivery at Netflix
Saturn 2014. Engineering Velocity: Continuous Delivery at NetflixSaturn 2014. Engineering Velocity: Continuous Delivery at Netflix
Saturn 2014. Engineering Velocity: Continuous Delivery at Netflix
Dianne Marsh
 
Diana Carciu - Performance Testing with SoapUi and Siege.pptx
Diana Carciu - Performance Testing with SoapUi and Siege.pptxDiana Carciu - Performance Testing with SoapUi and Siege.pptx
Diana Carciu - Performance Testing with SoapUi and Siege.pptx
Codecamp Romania
 
Webbt user_centred_demos
Webbt user_centred_demosWebbt user_centred_demos
Webbt user_centred_demos
CUO-KUleuven
 
District Technology Workshop Overview
District Technology Workshop OverviewDistrict Technology Workshop Overview
District Technology Workshop Overview
metoo0958
 

Ähnlich wie More Than Media Queries - The Digital Pond (20)

The Web Is Our Responsibility
The Web Is Our ResponsibilityThe Web Is Our Responsibility
The Web Is Our Responsibility
 
Deck1 export-141101063436-conversion-gate01
Deck1 export-141101063436-conversion-gate01Deck1 export-141101063436-conversion-gate01
Deck1 export-141101063436-conversion-gate01
 
Deck1 export-141101063436-conversion-gate01
Deck1 export-141101063436-conversion-gate01Deck1 export-141101063436-conversion-gate01
Deck1 export-141101063436-conversion-gate01
 
2020 Chrome Dev Summit: Web Performance 101
2020 Chrome Dev Summit: Web Performance 1012020 Chrome Dev Summit: Web Performance 101
2020 Chrome Dev Summit: Web Performance 101
 
What companies need to know about web accessibility in 2020
What companies need to know about web accessibility in 2020What companies need to know about web accessibility in 2020
What companies need to know about web accessibility in 2020
 
Best Tech Practices for Professional Learning
Best Tech Practices for Professional LearningBest Tech Practices for Professional Learning
Best Tech Practices for Professional Learning
 
REST for .NET - Introduction to ASP.NET Web API
REST for .NET - Introduction to ASP.NET Web APIREST for .NET - Introduction to ASP.NET Web API
REST for .NET - Introduction to ASP.NET Web API
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
System performance en-2
System performance en-2System performance en-2
System performance en-2
 
API Reliability Guide
API Reliability GuideAPI Reliability Guide
API Reliability Guide
 
Saturn 2014. Engineering Velocity: Continuous Delivery at Netflix
Saturn 2014. Engineering Velocity: Continuous Delivery at NetflixSaturn 2014. Engineering Velocity: Continuous Delivery at Netflix
Saturn 2014. Engineering Velocity: Continuous Delivery at Netflix
 
Engineering Velocity: Shifting the Curve at Netflix
Engineering Velocity: Shifting the Curve at NetflixEngineering Velocity: Shifting the Curve at Netflix
Engineering Velocity: Shifting the Curve at Netflix
 
Diana Carciu - Performance Testing with SoapUi and Siege.pptx
Diana Carciu - Performance Testing with SoapUi and Siege.pptxDiana Carciu - Performance Testing with SoapUi and Siege.pptx
Diana Carciu - Performance Testing with SoapUi and Siege.pptx
 
Webbt user_centred_demos
Webbt user_centred_demosWebbt user_centred_demos
Webbt user_centred_demos
 
Microservices architecture examples
Microservices architecture examplesMicroservices architecture examples
Microservices architecture examples
 
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger BartelWeb Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
Web Performance in the Age of HTTP2 - Topconf Tallinn 2016 - Holger Bartel
 
District Technology Workshop Overview
District Technology Workshop OverviewDistrict Technology Workshop Overview
District Technology Workshop Overview
 
District technology workshop
District technology workshopDistrict technology workshop
District technology workshop
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
Makingweb: Great front end performance starts on the server.
Makingweb: Great front end performance starts on the server.Makingweb: Great front end performance starts on the server.
Makingweb: Great front end performance starts on the server.
 

Mehr von Sally Lait

Mehr von Sally Lait (18)

Changing the world with the web
Changing the world with the webChanging the world with the web
Changing the world with the web
 
Making the leap from execution to strategy
Making the leap from execution to strategyMaking the leap from execution to strategy
Making the leap from execution to strategy
 
Websites are a symptom, not the cause - DXN May 2017
Websites are a symptom, not the cause - DXN May 2017Websites are a symptom, not the cause - DXN May 2017
Websites are a symptom, not the cause - DXN May 2017
 
Websites are a symptom, not the cause
Websites are a symptom, not the causeWebsites are a symptom, not the cause
Websites are a symptom, not the cause
 
All these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and usAll these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and us
 
Working with the web and the future
Working with the web and the futureWorking with the web and the future
Working with the web and the future
 
All these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and usAll these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and us
 
An introduction to open data
An introduction to open dataAn introduction to open data
An introduction to open data
 
An introduction to open data
An introduction to open dataAn introduction to open data
An introduction to open data
 
All these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and usAll these moments will be lost in time: the web, the future, and us
All these moments will be lost in time: the web, the future, and us
 
Open Data: Open Your Mind
Open Data: Open Your MindOpen Data: Open Your Mind
Open Data: Open Your Mind
 
An introduction to open data
An introduction to open dataAn introduction to open data
An introduction to open data
 
Choosing the "right" CMS (and other things)
Choosing the "right" CMS (and other things)Choosing the "right" CMS (and other things)
Choosing the "right" CMS (and other things)
 
Choosing the "right" CMS
Choosing the "right" CMSChoosing the "right" CMS
Choosing the "right" CMS
 
With great power comes great (development) responsibility
With great power comes great (development) responsibilityWith great power comes great (development) responsibility
With great power comes great (development) responsibility
 
More Than Media Queries - Responsive Day Out 2
More Than Media Queries - Responsive Day Out 2More Than Media Queries - Responsive Day Out 2
More Than Media Queries - Responsive Day Out 2
 
Mini hacks, big difference
Mini hacks, big differenceMini hacks, big difference
Mini hacks, big difference
 
HTML5 - Create The Web London
HTML5 - Create The Web LondonHTML5 - Create The Web London
HTML5 - Create The Web London
 

Kürzlich hochgeladen

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Kürzlich hochgeladen (20)

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 

More Than Media Queries - The Digital Pond