SlideShare utilise les cookies pour améliorer les fonctionnalités et les performances, et également pour vous montrer des publicités pertinentes. Si vous continuez à naviguer sur ce site, vous acceptez l’utilisation de cookies. Consultez nos Conditions d’utilisation et notre Politique de confidentialité.
SlideShare utilise les cookies pour améliorer les fonctionnalités et les performances, et également pour vous montrer des publicités pertinentes. Si vous continuez à naviguer sur ce site, vous acceptez l’utilisation de cookies. Consultez notre Politique de confidentialité et nos Conditions d’utilisation pour en savoir plus.
The scripting media query enables
The ability to apply new
Besides, on modern browsers, lack
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
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... “
• 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...
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...
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.
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.
“ 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...
“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
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 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...
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
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.
...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...
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...
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
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
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
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
…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
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 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
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: 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
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.
…[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
(…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.ﬂickr.com/photos/dcoetzee/3885789043