A brief exploration of proposed Level 4 Media Queries and some thoughts about the future of the web. Presented at Responsive Day Out in Brighton on June 27 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 diïŹerences 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 diïŹcult to read.
e.g. bright daylight
9. The speciïŹcation intentionally refrains from deïŹning
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
!
âą DiïŹerent screen technologies wash out at diïŹerent
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 diïŹcult given the
device diversity, and the fact that each device/browser may
have diïŹerent 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 speciïŹcation 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 | ïŹne
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 reïŹect 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 diïŹerent accuracyâŠ
more...
16. âAs the UA may enable the user to zoom, OR as secondary
pointing devices may have a diïŹerent 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
speciïŹcation 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 signiïŹcant
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 reïŹect 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 overïŹow-block media query describes the
behaviour of a device when content overïŹows
the viewport in the block axis.
what it does
@media (overïŹow-block)
value: none | scroll | optional-paged |paged
no aïŹordance for
overïŹow in the
block axis; any
overïŹowing
content is simply
not displayed e.g.
billboardsâš
overïŹowing
content in the block
axis is exposed by
allowing users to
scroll to it e.g.
computer screenâš
overïŹowing 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
overïŹows 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 overïŹow-inline media query describes the
behaviour of a device when content overïŹows
the viewport in the inline axis.
what it does
@media (overïŹow-inline)
value: none | scroll
no aïŹordance for overïŹow in
the inline axis; any overïŹowing
content is simply not
displayed e.g. billboards,
Google Glassâš
overïŹowing 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
qualiïŹers.
!
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 suïŹer through
a UI designed for more verbose languages such as
German or Russian?
35. Touch screen UI mode API level
notouch
stylus
trackball
ïŹnger
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 qualiïŹer 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
qualiïŹers to increase
context speciïŹcity.
values-en-rUS-land-hdpi
language
region
orientation
pixel density
38. âŠbut on the other hand, I worry about stuïŹ like this
becoming the norm.
(heir-in lies the road to madness)
layout-en-rUS-land-car-hdpi-night-qwerty-trackball-...
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 diïŹerent 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
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:
notiïŹes 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 ïŹrst to admit that this implementing
this more widely could make for a VERY diïŹerent
web. But then againâŠwe now live in a very
diïŹerent 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.ïŹickr.com/photos/dcoetzee/3885789043