SlideShare a Scribd company logo
1 of 56
Download to read offline
the future
of media queries?
A brief chat (and my personal thoughts)
on Level 4 Media Queries (etc…)
!
(W3C First Public Working Draft, 3 June 2014)
@media (scripting)
The scripting media query enables us to apply a style
based on the presence/absence of JavaScript.
what it does
@media (scripting)
value: none | initial-only | enabled
the user agent either
doesn’t support a
scripting language, or the
support isn’t active for
the current document

scripting is enabled
during the initial page
load, but not supported
afterwards e.g. printed
pages, proxy browsers
user agent supports
scripting of the page
and that support is
active for the current
document
The ability to apply new styles when scripting is enabled
feels like a stop-gap or (even worse) a false promise.



If you haven’t taken the time to build an application that
functions without JavaScript, and/or progressively layer
functionality based on feature-detection, applying a few
last minute styles using a media query won’t save you.
thoughts...
Besides, on modern browsers, lack of JavaScript “support”
is rarely the problem.
!
Far more common are factors such as this...
• Scripts that don’t load due to poor connectivity.
• Scripts that execute much later or slower than expected.
• Scripts that fail due to differences in support level.
thoughts...
@media (light-level)
The light-level media query enables us to apply
styles to suit one of three luminosity levels.
what it does
@media (light-level)
value: dim | normal | washed
used in a dim environment,
where excessive contrast and
brightness would be
distracting or uncomfortable
e.g. night time

light level is in
the ideal range
for the screen,
and doesn’t
require adjustment
exceptionally bright
environment, causing
the screen to be washed
out and difficult to read.
e.g. bright daylight
The specification intentionally refrains from defining
the 3 levels in terms of a measurement in lux, for
several reasons:
!
• Devices equipped with a light sensor usually adjust the
brightness of the screen automatically
!
• Different screen technologies wash out at different
ambient light levels. e.g. e-ink vs. liquid crystal
!
• Many light sensors are inaccurately calibrated.
more...
“
• Automatically adapting styles based on luminosity feels as
if it could often do more harm than good.
!
• Testing the impact of styles may also be difficult given the
device diversity, and the fact that each device/browser may
have different adaptation thresholds.



e.g. How quickly they adapt to changes in luminosity and what
amount of change will trigger an adaptation.
thoughts...
For the time being, this specification might best be reserved as a
trigger to prompt a manual change in theme or reading mode.
We notice it’s getting a bit dark in
here. Would you like to switch to
night mode?
No thanks! Yes please!
Don’t show this again.
thoughts...
@media (pointer)
the primary input
mechanism of the device
includes an accurate
pointing device
the primary input
mechanism of the
device DOES NOT
include a pointing
device

the primary input
mechanism of the
device includes a
pointing device of
limited accuracy

what it does
@media (pointer)
value: none | coarse | fine
touchscreen,
Nintendo Wii
controller, Kinect,
Google Glass

stylus-based
devices, mouse,
touch pad
accurately positioned cursor
accurate pointer
awkward cursor
gesture
finger
your head proxies the awkward cursor
accurately positioned cursor
TV, printer
The pointer media query is used to query the presence
and accuracy of a pointing device.
more...
“ unless i’ve misunderstood...it’s now the browser’s job
to understand the pointing device “opportunity
space” of each and every device on the planet...
If a device has multiple input mechanisms, the pointer media
feature must reflect the characteristics of the “primary” input
mechanism, as determined by the user agent.

“
which won’t change the
media feature’s value

As the UA may enable the user to zoom, OR as secondary
pointing devices may have a different accuracy…
more...
“As the UA may enable the user to zoom, OR as secondary
pointing devices may have a different accuracy, the user
may be able to perform accurate clicks even if the value of
this media feature is “coarse”...
more...
…and vice versa
Unless the API enables the UA to dynamically adapt in real-time to
detect the true primary device we really won’t know how much
accuracy the user has at any given time...

(…and dynamically adapting a UI in real time as a user switches from
mouse, to touch, and back to mouse would drive them mad regardless.)

thoughts...
There’s possibly already too much diversity for this
specification to be useful beyond the context of speciality apps,
or the application of non-critical tweaks to multi-context UIs.
!
e.g. ensure everything works with and without a mouse, touch screen
and keyboard, then apply non-destructive progressive enhancements as
the context becomes clearer
thoughts...
@media (hover)
The hover query the user’s ability to hover over
elements on the page.
what it does
@media (pointer)
value: none | on-demand | hover
the primary pointing
system CAN’T
hover, or there is no
pointing system.

the primary pointing
system CAN hover, but it
requires a significant
action on the user’s part.

the primary pointing
system CAN easily
hover over parts of
the page
more...
“If a device has multiple input mechanisms, the hover media
feature must reflect the characteristics of the “primary” input
mechanism, as determined by the user agent.
!
Authors should be careful not to assume that the ':hover'
pseudo class will never match on device where 'hover:none' is
true, and should design layouts that do not depend on
hovering to be fully usable.

...so once again, best not to rely on the accuracy of this
context and only apply hover-based styles as progressive
enhancements (…as we should already be doing).
thoughts...
@media (update-frequency)
The update-frequency media query is used to query the
ability of a device to modify the appearance of content
once it has been rendered.
what it does
@media (update-frequency)
value: none | slow | normal
once it has been
rendered, the
layout can no
longer be updated.
e.g. documents
printed on paper.

the layout may change
dynamically but the
output device cannot
render or display changes
quick enough for users to
perceive them as smooth
animation e.g. e-ink,
underpowered devices

layout may change
dynamically and the output
device is not unusually
constrained in speed e.g.
computer screens
Could be useful as a means of triggering and/or disabling
aspects of animation within a UI. Could be a bit tricky
however to determine how to progressively enhance.
!
e.g. given the state of modern devices, it seems counterintuitive
that “none” (i.e. paper!) could be the baseline… :-)
thoughts...
@media (overflow-block/inline)
The overflow-block media query describes the
behaviour of a device when content overflows
the viewport in the block axis.
what it does
@media (overflow-block)
value: none | scroll | optional-paged |paged
no affordance for
overflow in the
block axis; any
overflowing
content is simply
not displayed e.g.
billboards

overflowing
content in the block
axis is exposed by
allowing users to
scroll to it e.g.
computer screen

overflowing content in the
block axis is exposed by
allowing users to scroll
to it but page breaks can
be manually triggered
e.g. slide-shows

content is broken up
into discrete pages;
content that
overflows one page in
the block axis is
displayed on the
following page e.g. e-
book readers, printers

the vertical axis in horizontal writing modes
The overflow-inline media query describes the
behaviour of a device when content overflows
the viewport in the inline axis.
what it does
@media (overflow-inline)
value: none | scroll
no affordance for overflow in
the inline axis; any overflowing
content is simply not
displayed e.g. billboards,
Google Glass

overflowing content in the
block axis is exposed by
allowing users to scroll to it
e.g. most computer screens

the horizontal axis in horizontal writing modes
…I don’t know about you, but this is starting to
not feel quite right.
Part of me wants more media queries…

though maybe not these exact ones.
For example: Something you can do pretty
easily on Android is modify layout based on
a user’s default language setting…
values-de
You do this by grouping
assets using the relevant
qualifiers.
!
At runtime, Android
detects current device
capabilities and load the
most appropriate
resources.
color
drawable
res
values
logo.png
icon.png
drawable-zh
logo.png
icon.png
only devices set to German
will use what’s in this folder
only devices set to
Chinese will use
what’s in this folder
This is super useful because 140 characters
can hold up to 5x the amount of content
when in Mandarin!
Why should Chinese users have to suffer through
a UI designed for more verbose languages such as
German or Russian?
Touch screen UI mode API level
notouch
stylus
trackball
finger
car
desk
television
appliance
v1
v2
v3
Layout direction Language & region MCC & MNC
ldrtl
ldltr
en
fr
en-rUS
fr-rFR
mcc310
loosely maps
to platform
version e.g.
Gingerbread,
Jelly Bean
country code
mnc004
docked
with a...
no display!!
network code
e.g. AT&T,

T-Mobile
right to
left
As a matter of fact on Android you can qualify and adapt
layout based on tons of factors…


(these are just some of the more interesting ones...)
For a full list see Providing resources
…and layout is just one thing
that you can adapt. You can
use these qualifier to specify
raster graphics, colour
palettes, UI labels content
and strings and collections of
numeric values…
<abcd/>
<200dp>
layouts
density-independent
values and dimensions
You can also combine
qualifiers to increase
context specificity.
values-en-rUS-land-hdpi
language
region
orientation
pixel density
…but on the other hand, I worry about stuff like this
becoming the norm.
(heir-in lies the road to madness)
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-...
(…no comment)
A few years ago, in a presentation called Reset
the Web I floated the following idea…
possibly crazy
<nav is=”native”>
<ul>
<li>Home</li>
<li>News</li>
<li>Reviews</li>
</ul>
</nav>
what if this….
could map to “native”
versions of all of these…?
Home
News
Reviews
Photos
Video
Magazine
Podcast
Topics
Apple Gives Share-
holders More Input;
Will Facebook Get the
Message?
At its annual shareholders
meeting on Thursday,
Apple’s management bowed
to pressure from key inves-
tors and agreed to allow
shareholders to elect board
directors by a simple major-
ity vote.
Now any new or current
director standing for election
who fails to receive support
from a majority of share-
holders must resign his
By Tim Carmody
February 24, 2012 | 4:26 pm
At its annual shareholders meeting on Thursday,
Apple’s management bowed to pressure from key in-
vestors and agreed to allow shareholders to elect
board directors by a simple majority vote.
Now any new or current director standing for election
who fails to receive support from a majority of share-
holders must resign his his or her position. At next year
By Tim Carmody February 24, 2012 | 4:26 pm
Apple Gives Shareholders More Input;
Will Facebook Get the Message?Home
News
Reviews
Photos
Video
Magazine
Podcast
Topics
Home
News
Reviews
Photos
Video
Magazine
Podcast
Topics
MENU
Home
News
Reviews
Photos
Home
News
Reviews
Photos
<nav is=”native”>
<ul>
<li>Home</li>
<li>News</li>
<li>Reviews</li>
</ul>
</nav>
what if this….
(banish the hamburger icon and just trigger a native “menu” component”
…in many ways no different than writing one select menu,
and relying on the platform to deliver the best combination
of interface, behaviour and interaction….
desktop
Android
iOS
A bunch of intelligent, responsive, platform-
appropriate yet adaptable default components...
Which once again makes me think of some of the
lovelier bits about designing for Android…
Take an agreed upon construct, declare the UI,
and the device renders it in the most
appropriate way…
…in this case using XML…a component
notification behaviour:
LED flash, audio, vibration
on a phone…
action action
contenticon/image
RetweetReply
RT@jhagel: The Internet of the
next billion - great presentation

on the globalization of innovation
spawned by the Web http://t.co/
rNMOBxslQm
Bryan Rieger
Favourite
wearable device
vibrates to notify of
incoming message
user swipes to reveal actions, and taps to trigger them.
a watch…
Google Glass:
notifies user
with an
audible chime
user taps, or... performs a “head
wake” gesture
user taps... ...views card actions
user performs a voice reply
…and so on
I’ll be the first to admit that this implementing
this more widely could make for a VERY different
web. But then again…we now live in a very
different world.
…[Bob] connects his phone to the car, and can now
use the familiar car controls, steering wheel
buttons, console dials, touch screens to control it.
It looks and feels as if it's part of the car,…it also
means that he has a personalised experience, that
he can bring with him into any compatible car.
“
- Google I/O 2014 keynote yep…silos are still a big risk, but
today’s web is at risk as well
To a certain degree, we’re already developing
technologies that align with this thinking…
(…or at least have the potential to do so.)
(throw in element query style encapsulation
behaviours, and we really have something!)
Developing new technologies is the easy part. 



Understanding which ones we truly need, and for
what is far harder, but will be even more important
going forward if we wish to build a stronger and
more future-friendly web.
“Everything is best for something and worst
for something else. The trick is knowing what is what,
for what, when, for whom and most importantly, why”
- Bill Buxton (in a great many contexts)
https://www.flickr.com/photos/dcoetzee/3885789043
http://www.flickr.com/photos/tinou/453593446
thank you
many thanks to the
amazing photographers on
http://creativecommons.org/licenses/by/2.5
@yiibu
hello@yiibu.com
contact us
at
Presentation deck available @

http://www.slideshare.net/yiibu

More Related Content

What's hot

Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009Tom Deryckere
 
Build a Chatbot with IBM Watson - No Coding Required
Build a Chatbot with IBM Watson - No Coding RequiredBuild a Chatbot with IBM Watson - No Coding Required
Build a Chatbot with IBM Watson - No Coding RequiredCharlotte Han
 
HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy Apigee | Google Cloud
 
Developing a Progressive Mobile Strategy (J. Boye edition)
Developing a Progressive Mobile Strategy (J. Boye edition)Developing a Progressive Mobile Strategy (J. Boye edition)
Developing a Progressive Mobile Strategy (J. Boye edition)Dave Olsen
 
Chatbot Artificial Intelligence
Chatbot Artificial IntelligenceChatbot Artificial Intelligence
Chatbot Artificial IntelligenceMd. Mahedi Mahfuj
 
Nihad Abbasov-Intellectual technology presentation
Nihad Abbasov-Intellectual technology presentation Nihad Abbasov-Intellectual technology presentation
Nihad Abbasov-Intellectual technology presentation NihadAbbasov2
 
designing conversations: Conversational interfaces, Bot Interactions, Chatb...
designing conversations: Conversational interfaces, Bot Interactions, Chatb...designing conversations: Conversational interfaces, Bot Interactions, Chatb...
designing conversations: Conversational interfaces, Bot Interactions, Chatb...Billy Choi
 
Mobile HTML5 websites and hybrid Apps with AngularJS - Bonamico
Mobile HTML5 websites and hybrid Apps with AngularJS - BonamicoMobile HTML5 websites and hybrid Apps with AngularJS - Bonamico
Mobile HTML5 websites and hybrid Apps with AngularJS - BonamicoCodemotion
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...yiibu
 
iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case studyJohan Ronsse
 
3-in-1 talk on Serverless Chatbots, Alexa skills & Voice UI best practices (t...
3-in-1 talk on Serverless Chatbots, Alexa skills & Voice UI best practices (t...3-in-1 talk on Serverless Chatbots, Alexa skills & Voice UI best practices (t...
3-in-1 talk on Serverless Chatbots, Alexa skills & Voice UI best practices (t...Daniel Zivkovic
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Theresa Neil
 
Chatbot Revolution: Exploring Opportunities, Use Cases, & Bot Design
Chatbot Revolution: Exploring Opportunities, Use Cases, & Bot DesignChatbot Revolution: Exploring Opportunities, Use Cases, & Bot Design
Chatbot Revolution: Exploring Opportunities, Use Cases, & Bot DesignStefan Kojouharov
 
Conversational Business - Trends
Conversational Business - TrendsConversational Business - Trends
Conversational Business - TrendsGeorgian
 
Designing Content for Multiple Devices
Designing Content for Multiple DevicesDesigning Content for Multiple Devices
Designing Content for Multiple DevicesBrandon Carson
 
Human Computer Interface Guidelines
Human Computer Interface GuidelinesHuman Computer Interface Guidelines
Human Computer Interface GuidelinesMartin Ebner
 
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experienceWhy "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experienceKevin Powell
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-PlatformsiOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-PlatformsMartin Ebner
 
Mobile UI Design Patterns
Mobile UI Design PatternsMobile UI Design Patterns
Mobile UI Design Patternsdanhermes
 

What's hot (20)

Let's Build a Chatbot!
Let's Build a Chatbot!Let's Build a Chatbot!
Let's Build a Chatbot!
 
Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009
 
Build a Chatbot with IBM Watson - No Coding Required
Build a Chatbot with IBM Watson - No Coding RequiredBuild a Chatbot with IBM Watson - No Coding Required
Build a Chatbot with IBM Watson - No Coding Required
 
HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy
 
Developing a Progressive Mobile Strategy (J. Boye edition)
Developing a Progressive Mobile Strategy (J. Boye edition)Developing a Progressive Mobile Strategy (J. Boye edition)
Developing a Progressive Mobile Strategy (J. Boye edition)
 
Chatbot Artificial Intelligence
Chatbot Artificial IntelligenceChatbot Artificial Intelligence
Chatbot Artificial Intelligence
 
Nihad Abbasov-Intellectual technology presentation
Nihad Abbasov-Intellectual technology presentation Nihad Abbasov-Intellectual technology presentation
Nihad Abbasov-Intellectual technology presentation
 
designing conversations: Conversational interfaces, Bot Interactions, Chatb...
designing conversations: Conversational interfaces, Bot Interactions, Chatb...designing conversations: Conversational interfaces, Bot Interactions, Chatb...
designing conversations: Conversational interfaces, Bot Interactions, Chatb...
 
Mobile HTML5 websites and hybrid Apps with AngularJS - Bonamico
Mobile HTML5 websites and hybrid Apps with AngularJS - BonamicoMobile HTML5 websites and hybrid Apps with AngularJS - Bonamico
Mobile HTML5 websites and hybrid Apps with AngularJS - Bonamico
 
Designing for diversity - how to stop worrying and embrace the Android revol...
Designing for diversity -  how to stop worrying and embrace the Android revol...Designing for diversity -  how to stop worrying and embrace the Android revol...
Designing for diversity - how to stop worrying and embrace the Android revol...
 
iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case study
 
3-in-1 talk on Serverless Chatbots, Alexa skills & Voice UI best practices (t...
3-in-1 talk on Serverless Chatbots, Alexa skills & Voice UI best practices (t...3-in-1 talk on Serverless Chatbots, Alexa skills & Voice UI best practices (t...
3-in-1 talk on Serverless Chatbots, Alexa skills & Voice UI best practices (t...
 
Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5Your Mobile Strategy Can't Be HTML5
Your Mobile Strategy Can't Be HTML5
 
Chatbot Revolution: Exploring Opportunities, Use Cases, & Bot Design
Chatbot Revolution: Exploring Opportunities, Use Cases, & Bot DesignChatbot Revolution: Exploring Opportunities, Use Cases, & Bot Design
Chatbot Revolution: Exploring Opportunities, Use Cases, & Bot Design
 
Conversational Business - Trends
Conversational Business - TrendsConversational Business - Trends
Conversational Business - Trends
 
Designing Content for Multiple Devices
Designing Content for Multiple DevicesDesigning Content for Multiple Devices
Designing Content for Multiple Devices
 
Human Computer Interface Guidelines
Human Computer Interface GuidelinesHuman Computer Interface Guidelines
Human Computer Interface Guidelines
 
Why "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experienceWhy "mobile first" isn't enough - Developing a better user experience
Why "mobile first" isn't enough - Developing a better user experience
 
iOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-PlatformsiOS Human Interface Guidlines for iOS-Platforms
iOS Human Interface Guidlines for iOS-Platforms
 
Mobile UI Design Patterns
Mobile UI Design PatternsMobile UI Design Patterns
Mobile UI Design Patterns
 

Viewers also liked

Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical webyiibu
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new againyiibu
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for peopleyiibu
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancementyiibu
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversationyiibu
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Webyiibu
 
Reset the Web
Reset the WebReset the Web
Reset the Webyiibu
 
Thick description
Thick descriptionThick description
Thick descriptionmelekaydin
 
The human condition_–_hannah_arend. Tahboub and Mendez
The human condition_–_hannah_arend. Tahboub and MendezThe human condition_–_hannah_arend. Tahboub and Mendez
The human condition_–_hannah_arend. Tahboub and MendezPaulina Méndez
 
Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...Rob Manson
 
My latest visual CV
My latest visual CVMy latest visual CV
My latest visual CVPaul Say
 
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyRob Manson
 
Wyniki_1Q10_PL_20100512
Wyniki_1Q10_PL_20100512Wyniki_1Q10_PL_20100512
Wyniki_1Q10_PL_20100512WSE InfoEngine
 
Brief History of Educational Technology
Brief History of Educational TechnologyBrief History of Educational Technology
Brief History of Educational Technologyguest49bb62
 
Hannah arendt week 4.slideshare
Hannah arendt week 4.slideshareHannah arendt week 4.slideshare
Hannah arendt week 4.slideshareCraig Hammond
 
e is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentatione is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web PresentationRob Manson
 
Data Communications: History and Standard Organizations
Data Communications: History and Standard OrganizationsData Communications: History and Standard Organizations
Data Communications: History and Standard OrganizationsJhan-Curt Fernandez
 

Viewers also liked (20)

Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new again
 
The internet of things is for people
The internet of things is for peopleThe internet of things is for people
The internet of things is for people
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Web
 
Reset the Web
Reset the WebReset the Web
Reset the Web
 
Thick description
Thick descriptionThick description
Thick description
 
The human condition_–_hannah_arend. Tahboub and Mendez
The human condition_–_hannah_arend. Tahboub and MendezThe human condition_–_hannah_arend. Tahboub and Mendez
The human condition_–_hannah_arend. Tahboub and Mendez
 
Hannah Arendt
Hannah ArendtHannah Arendt
Hannah Arendt
 
Geertz
GeertzGeertz
Geertz
 
Your browser can see and hear and ...
Your browser can see and hear and ...Your browser can see and hear and ...
Your browser can see and hear and ...
 
Budget 2011
Budget 2011Budget 2011
Budget 2011
 
My latest visual CV
My latest visual CVMy latest visual CV
My latest visual CV
 
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business Fly
 
Wyniki_1Q10_PL_20100512
Wyniki_1Q10_PL_20100512Wyniki_1Q10_PL_20100512
Wyniki_1Q10_PL_20100512
 
Brief History of Educational Technology
Brief History of Educational TechnologyBrief History of Educational Technology
Brief History of Educational Technology
 
Hannah arendt week 4.slideshare
Hannah arendt week 4.slideshareHannah arendt week 4.slideshare
Hannah arendt week 4.slideshare
 
e is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentatione is for everywhere - Interactive Mobile Web Presentation
e is for everywhere - Interactive Mobile Web Presentation
 
Data Communications: History and Standard Organizations
Data Communications: History and Standard OrganizationsData Communications: History and Standard Organizations
Data Communications: History and Standard Organizations
 

Similar to The future of media queries?

Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentEamonn Maguire
 
Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Henny Swan
 
How well are you delivering your experience?
How well are you delivering your experience?How well are you delivering your experience?
How well are you delivering your experience?Andrew Fisher
 
Why the page is killing innovation in magazine UX
Why the page is killing innovation in magazine UXWhy the page is killing innovation in magazine UX
Why the page is killing innovation in magazine UXRob Boynes
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityJoseph Dolson
 
Designing for Digital Magazines - Rob Boynes for Guardian Masterclasses
Designing for Digital Magazines - Rob Boynes for Guardian MasterclassesDesigning for Digital Magazines - Rob Boynes for Guardian Masterclasses
Designing for Digital Magazines - Rob Boynes for Guardian MasterclassesRob Boynes
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationSalocin Dot TEN
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsMichelle Michael
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageshwetank
 
Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Joseph Dolson
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestringteaguese
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Shah Muhammad Baig
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profitpenanochizzo
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitFernando Cejas
 
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti Smash Tech
 

Similar to The future of media queries? (20)

Web valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app developmentWeb valley talk - usability, visualization and mobile app development
Web valley talk - usability, visualization and mobile app development
 
Presentation Ux
Presentation UxPresentation Ux
Presentation Ux
 
Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?Is the mobile web enabled or disabled by design?
Is the mobile web enabled or disabled by design?
 
How well are you delivering your experience?
How well are you delivering your experience?How well are you delivering your experience?
How well are you delivering your experience?
 
Ui design
Ui designUi design
Ui design
 
Why the page is killing innovation in magazine UX
Why the page is killing innovation in magazine UXWhy the page is killing innovation in magazine UX
Why the page is killing innovation in magazine UX
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
 
Designing for Digital Magazines - Rob Boynes for Guardian Masterclasses
Designing for Digital Magazines - Rob Boynes for Guardian MasterclassesDesigning for Digital Magazines - Rob Boynes for Guardian Masterclasses
Designing for Digital Magazines - Rob Boynes for Guardian Masterclasses
 
UI and UX for Mobile Developers
UI and UX for Mobile DevelopersUI and UX for Mobile Developers
UI and UX for Mobile Developers
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 Documentation
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data Visualizations
 
Rethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern ageRethinking accessibility related best practices for CSS in the modern age
Rethinking accessibility related best practices for CSS in the modern age
 
Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?Accessible Web Sites: What can you do?
Accessible Web Sites: What can you do?
 
User Research on a Shoestring
User Research on a ShoestringUser Research on a Shoestring
User Research on a Shoestring
 
UI Design
UI DesignUI Design
UI Design
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 

More from yiibu

Adaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serverAdaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serveryiibu
 
Letting Go
Letting GoLetting Go
Letting Goyiibu
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with contextyiibu
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...yiibu
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibuyiibu
 
Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...yiibu
 

More from yiibu (6)

Adaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the serverAdaptation: Why responsive design actually begins on the server
Adaptation: Why responsive design actually begins on the server
 
Letting Go
Letting GoLetting Go
Letting Go
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
 
It's about people, not devices...
It's about people, not devices...It's about people, not devices...
It's about people, not devices...
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
 
Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...Developing an Interface for the Future of Mass Market Software Distribution (...
Developing an Interface for the Future of Mass Market Software Distribution (...
 

Recently uploaded

What is Mendix and the concept of low-code development.docx
What is Mendix and the concept of low-code development.docxWhat is Mendix and the concept of low-code development.docx
What is Mendix and the concept of low-code development.docxTechnogeeks
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...Bert Jan Schrijver
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?Alexandre Beguel
 
What are the core components of Azure Data Engineer courses.docx
What are the core components of Azure Data Engineer courses.docxWhat are the core components of Azure Data Engineer courses.docx
What are the core components of Azure Data Engineer courses.docxkzayra69
 
oracle 23c new features for developer and dba
oracle 23c new features for developer and dbaoracle 23c new features for developer and dba
oracle 23c new features for developer and dbaRemote DBA Services
 
Mastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxMastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxAS Design & AST.
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsJean Silva
 
Key Steps in Agile Software Delivery Roadmap
Key Steps in Agile Software Delivery RoadmapKey Steps in Agile Software Delivery Roadmap
Key Steps in Agile Software Delivery RoadmapIshara Amarasekera
 
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdfSteve Caron
 
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfkalichargn70th171
 
full course of software engineering mid term.pdf
full course of software engineering mid term.pdffull course of software engineering mid term.pdf
full course of software engineering mid term.pdfAbdul salam
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slidesvaideheekore1
 
Effort Estimation Techniques used in Software Projects
Effort Estimation Techniques used in Software ProjectsEffort Estimation Techniques used in Software Projects
Effort Estimation Techniques used in Software ProjectsDEEPRAJ PATHAK
 
Advantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxAdvantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxRTS corp
 
logical backup of Oracle Datapump-detailed.pptx
logical backup of Oracle Datapump-detailed.pptxlogical backup of Oracle Datapump-detailed.pptx
logical backup of Oracle Datapump-detailed.pptxRemote DBA Services
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdfAndrey Devyatkin
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfmaor17
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxSasikiranMarri
 
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...kalichargn70th171
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 

Recently uploaded (20)

What is Mendix and the concept of low-code development.docx
What is Mendix and the concept of low-code development.docxWhat is Mendix and the concept of low-code development.docx
What is Mendix and the concept of low-code development.docx
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
 
SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?SAM Training Session - How to use EXCEL ?
SAM Training Session - How to use EXCEL ?
 
What are the core components of Azure Data Engineer courses.docx
What are the core components of Azure Data Engineer courses.docxWhat are the core components of Azure Data Engineer courses.docx
What are the core components of Azure Data Engineer courses.docx
 
oracle 23c new features for developer and dba
oracle 23c new features for developer and dbaoracle 23c new features for developer and dba
oracle 23c new features for developer and dba
 
Mastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptxMastering Project Planning with Microsoft Project 2016.pptx
Mastering Project Planning with Microsoft Project 2016.pptx
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero results
 
Key Steps in Agile Software Delivery Roadmap
Key Steps in Agile Software Delivery RoadmapKey Steps in Agile Software Delivery Roadmap
Key Steps in Agile Software Delivery Roadmap
 
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
[ CNCF Q1 2024 ] Intro to Continuous Profiling and Grafana Pyroscope.pdf
 
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdfPros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
Pros and Cons of Selenium In Automation Testing_ A Comprehensive Assessment.pdf
 
full course of software engineering mid term.pdf
full course of software engineering mid term.pdffull course of software engineering mid term.pdf
full course of software engineering mid term.pdf
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slides
 
Effort Estimation Techniques used in Software Projects
Effort Estimation Techniques used in Software ProjectsEffort Estimation Techniques used in Software Projects
Effort Estimation Techniques used in Software Projects
 
Advantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptxAdvantages of Cargo Cloud Solutions.pptx
Advantages of Cargo Cloud Solutions.pptx
 
logical backup of Oracle Datapump-detailed.pptx
logical backup of Oracle Datapump-detailed.pptxlogical backup of Oracle Datapump-detailed.pptx
logical backup of Oracle Datapump-detailed.pptx
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdf
 
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptxUnderstanding Plagiarism: Causes, Consequences and Prevention.pptx
Understanding Plagiarism: Causes, Consequences and Prevention.pptx
 
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
The Ultimate Guide to Performance Testing in Low-Code, No-Code Environments (...
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 

The future of media queries?

  • 2. A brief chat (and my personal thoughts) on Level 4 Media Queries (etc…) ! (W3C First Public Working Draft, 3 June 2014)
  • 4. The scripting media query enables us to apply a style based on the presence/absence of JavaScript. what it does @media (scripting) value: none | initial-only | enabled the user agent either doesn’t support a scripting language, or the support isn’t active for the current document
 scripting is enabled during the initial page load, but not supported afterwards e.g. printed pages, proxy browsers user agent supports scripting of the page and that support is active for the current document
  • 5. The ability to apply new styles when scripting is enabled feels like a stop-gap or (even worse) a false promise.
 
 If you haven’t taken the time to build an application that functions without JavaScript, and/or progressively layer functionality based on feature-detection, applying a few last minute styles using a media query won’t save you. thoughts...
  • 6. Besides, on modern browsers, lack of JavaScript “support” is rarely the problem. ! Far more common are factors such as this... • Scripts that don’t load due to poor connectivity. • Scripts that execute much later or slower than expected. • Scripts that fail due to differences in support level. thoughts...
  • 8. The light-level media query enables us to apply styles to suit one of three luminosity levels. what it does @media (light-level) value: dim | normal | washed used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable e.g. night time
 light level is in the ideal range for the screen, and doesn’t require adjustment exceptionally bright environment, causing the screen to be washed out and difficult to read. e.g. bright daylight
  • 9. The specification intentionally refrains from defining the 3 levels in terms of a measurement in lux, for several reasons: ! • Devices equipped with a light sensor usually adjust the brightness of the screen automatically ! • Different screen technologies wash out at different ambient light levels. e.g. e-ink vs. liquid crystal ! • Many light sensors are inaccurately calibrated. more... “
  • 10. • Automatically adapting styles based on luminosity feels as if it could often do more harm than good. ! • Testing the impact of styles may also be difficult given the device diversity, and the fact that each device/browser may have different adaptation thresholds.
 
 e.g. How quickly they adapt to changes in luminosity and what amount of change will trigger an adaptation. thoughts...
  • 11. For the time being, this specification might best be reserved as a trigger to prompt a manual change in theme or reading mode. We notice it’s getting a bit dark in here. Would you like to switch to night mode? No thanks! Yes please! Don’t show this again. thoughts...
  • 13. the primary input mechanism of the device includes an accurate pointing device the primary input mechanism of the device DOES NOT include a pointing device
 the primary input mechanism of the device includes a pointing device of limited accuracy
 what it does @media (pointer) value: none | coarse | fine touchscreen, Nintendo Wii controller, Kinect, Google Glass
 stylus-based devices, mouse, touch pad accurately positioned cursor accurate pointer awkward cursor gesture finger your head proxies the awkward cursor accurately positioned cursor TV, printer The pointer media query is used to query the presence and accuracy of a pointing device.
  • 14. more... “ unless i’ve misunderstood...it’s now the browser’s job to understand the pointing device “opportunity space” of each and every device on the planet... If a device has multiple input mechanisms, the pointer media feature must reflect the characteristics of the “primary” input mechanism, as determined by the user agent.

  • 15. “ which won’t change the media feature’s value
 As the UA may enable the user to zoom, OR as secondary pointing devices may have a different accuracy… more...
  • 16. “As the UA may enable the user to zoom, OR as secondary pointing devices may have a different accuracy, the user may be able to perform accurate clicks even if the value of this media feature is “coarse”... more... …and vice versa
  • 17. Unless the API enables the UA to dynamically adapt in real-time to detect the true primary device we really won’t know how much accuracy the user has at any given time...
 (…and dynamically adapting a UI in real time as a user switches from mouse, to touch, and back to mouse would drive them mad regardless.)
 thoughts...
  • 18. There’s possibly already too much diversity for this specification to be useful beyond the context of speciality apps, or the application of non-critical tweaks to multi-context UIs. ! e.g. ensure everything works with and without a mouse, touch screen and keyboard, then apply non-destructive progressive enhancements as the context becomes clearer thoughts...
  • 20. The hover query the user’s ability to hover over elements on the page. what it does @media (pointer) value: none | on-demand | hover the primary pointing system CAN’T hover, or there is no pointing system.
 the primary pointing system CAN hover, but it requires a significant action on the user’s part.
 the primary pointing system CAN easily hover over parts of the page
  • 21. more... “If a device has multiple input mechanisms, the hover media feature must reflect the characteristics of the “primary” input mechanism, as determined by the user agent. ! Authors should be careful not to assume that the ':hover' pseudo class will never match on device where 'hover:none' is true, and should design layouts that do not depend on hovering to be fully usable.

  • 22. ...so once again, best not to rely on the accuracy of this context and only apply hover-based styles as progressive enhancements (…as we should already be doing). thoughts...
  • 24. The update-frequency media query is used to query the ability of a device to modify the appearance of content once it has been rendered. what it does @media (update-frequency) value: none | slow | normal once it has been rendered, the layout can no longer be updated. e.g. documents printed on paper.
 the layout may change dynamically but the output device cannot render or display changes quick enough for users to perceive them as smooth animation e.g. e-ink, underpowered devices
 layout may change dynamically and the output device is not unusually constrained in speed e.g. computer screens
  • 25. Could be useful as a means of triggering and/or disabling aspects of animation within a UI. Could be a bit tricky however to determine how to progressively enhance. ! e.g. given the state of modern devices, it seems counterintuitive that “none” (i.e. paper!) could be the baseline… :-) thoughts...
  • 27. The overflow-block media query describes the behaviour of a device when content overflows the viewport in the block axis. what it does @media (overflow-block) value: none | scroll | optional-paged |paged no affordance for overflow in the block axis; any overflowing content is simply not displayed e.g. billboards
 overflowing content in the block axis is exposed by allowing users to scroll to it e.g. computer screen
 overflowing content in the block axis is exposed by allowing users to scroll to it but page breaks can be manually triggered e.g. slide-shows
 content is broken up into discrete pages; content that overflows one page in the block axis is displayed on the following page e.g. e- book readers, printers
 the vertical axis in horizontal writing modes
  • 28. The overflow-inline media query describes the behaviour of a device when content overflows the viewport in the inline axis. what it does @media (overflow-inline) value: none | scroll no affordance for overflow in the inline axis; any overflowing content is simply not displayed e.g. billboards, Google Glass
 overflowing content in the block axis is exposed by allowing users to scroll to it e.g. most computer screens
 the horizontal axis in horizontal writing modes
  • 29. …I don’t know about you, but this is starting to not feel quite right.
  • 30. Part of me wants more media queries…
 though maybe not these exact ones.
  • 31. For example: Something you can do pretty easily on Android is modify layout based on a user’s default language setting…
  • 32. values-de You do this by grouping assets using the relevant qualifiers. ! At runtime, Android detects current device capabilities and load the most appropriate resources. color drawable res values logo.png icon.png drawable-zh logo.png icon.png only devices set to German will use what’s in this folder only devices set to Chinese will use what’s in this folder
  • 33. This is super useful because 140 characters can hold up to 5x the amount of content when in Mandarin!
  • 34. Why should Chinese users have to suffer through a UI designed for more verbose languages such as German or Russian?
  • 35. Touch screen UI mode API level notouch stylus trackball finger car desk television appliance v1 v2 v3 Layout direction Language & region MCC & MNC ldrtl ldltr en fr en-rUS fr-rFR mcc310 loosely maps to platform version e.g. Gingerbread, Jelly Bean country code mnc004 docked with a... no display!! network code e.g. AT&T,
 T-Mobile right to left As a matter of fact on Android you can qualify and adapt layout based on tons of factors… 
 (these are just some of the more interesting ones...) For a full list see Providing resources
  • 36. …and layout is just one thing that you can adapt. You can use these qualifier to specify raster graphics, colour palettes, UI labels content and strings and collections of numeric values… <abcd/> <200dp> layouts density-independent values and dimensions
  • 37. You can also combine qualifiers to increase context specificity. values-en-rUS-land-hdpi language region orientation pixel density
  • 38. …but on the other hand, I worry about stuff like this becoming the norm. (heir-in lies the road to madness) layout-en-rUS-land-car-hdpi-night-qwerty-trackball-...
  • 40. A few years ago, in a presentation called Reset the Web I floated the following idea… possibly crazy
  • 42. could map to “native” versions of all of these…? Home News Reviews Photos Video Magazine Podcast Topics Apple Gives Share- holders More Input; Will Facebook Get the Message? At its annual shareholders meeting on Thursday, Apple’s management bowed to pressure from key inves- tors and agreed to allow shareholders to elect board directors by a simple major- ity vote. Now any new or current director standing for election who fails to receive support from a majority of share- holders must resign his By Tim Carmody February 24, 2012 | 4:26 pm At its annual shareholders meeting on Thursday, Apple’s management bowed to pressure from key in- vestors and agreed to allow shareholders to elect board directors by a simple majority vote. Now any new or current director standing for election who fails to receive support from a majority of share- holders must resign his his or her position. At next year By Tim Carmody February 24, 2012 | 4:26 pm Apple Gives Shareholders More Input; Will Facebook Get the Message?Home News Reviews Photos Video Magazine Podcast Topics Home News Reviews Photos Video Magazine Podcast Topics MENU Home News Reviews Photos Home News Reviews Photos <nav is=”native”> <ul> <li>Home</li> <li>News</li> <li>Reviews</li> </ul> </nav> what if this…. (banish the hamburger icon and just trigger a native “menu” component”
  • 43. …in many ways no different than writing one select menu, and relying on the platform to deliver the best combination of interface, behaviour and interaction…. desktop Android iOS
  • 44. A bunch of intelligent, responsive, platform- appropriate yet adaptable default components...
  • 45. Which once again makes me think of some of the lovelier bits about designing for Android…
  • 46. Take an agreed upon construct, declare the UI, and the device renders it in the most appropriate way… …in this case using XML…a component
  • 47. notification behaviour: LED flash, audio, vibration on a phone… action action contenticon/image
  • 48. RetweetReply RT@jhagel: The Internet of the next billion - great presentation
 on the globalization of innovation spawned by the Web http://t.co/ rNMOBxslQm Bryan Rieger Favourite wearable device vibrates to notify of incoming message user swipes to reveal actions, and taps to trigger them. a watch…
  • 49. Google Glass: notifies user with an audible chime user taps, or... performs a “head wake” gesture user taps... ...views card actions user performs a voice reply …and so on
  • 50. I’ll be the first to admit that this implementing this more widely could make for a VERY different web. But then again…we now live in a very different world.
  • 51. …[Bob] connects his phone to the car, and can now use the familiar car controls, steering wheel buttons, console dials, touch screens to control it. It looks and feels as if it's part of the car,…it also means that he has a personalised experience, that he can bring with him into any compatible car. “ - Google I/O 2014 keynote yep…silos are still a big risk, but today’s web is at risk as well
  • 52. To a certain degree, we’re already developing technologies that align with this thinking…
  • 53. (…or at least have the potential to do so.) (throw in element query style encapsulation behaviours, and we really have something!)
  • 54. Developing new technologies is the easy part. 
 
 Understanding which ones we truly need, and for what is far harder, but will be even more important going forward if we wish to build a stronger and more future-friendly web.
  • 55. “Everything is best for something and worst for something else. The trick is knowing what is what, for what, when, for whom and most importantly, why” - Bill Buxton (in a great many contexts) https://www.flickr.com/photos/dcoetzee/3885789043
  • 56. http://www.flickr.com/photos/tinou/453593446 thank you many thanks to the amazing photographers on http://creativecommons.org/licenses/by/2.5 @yiibu hello@yiibu.com contact us at Presentation deck available @
 http://www.slideshare.net/yiibu