SlideShare a Scribd company logo
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

Recommended for you

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

This document discusses HTML5, mobile web, native, and hybrid mobile app development platforms. It provides an overview of each approach and compares them. Key frameworks for HTML5 development are also reviewed, including jQuery Mobile, Sencha Touch, and Trigger.io. Considerations for choosing a platform like supporting multiple devices and iteration speed are examined. The document aims to help make sense of the different mobile development options.

appscomponent frameworkshtml5
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)

This document discusses developing a progressive mobile strategy. It begins by defining key terms like native apps, mobile web, and WebKit. It then discusses why mobile is important, noting statistics about smartphone usage and student/school expectations. The document outlines developing a strategy with three parts: audience strategy to understand user needs, platform strategy to determine the best technical solutions, and a progressive approach of iterating solutions over time. It provides examples of WVU's mobile projects.

mobilemobile webmobile strategy
Chatbot Artificial Intelligence
Chatbot Artificial IntelligenceChatbot Artificial Intelligence
Chatbot Artificial Intelligence

The document discusses artificial text chatting machines (chatbots). It provides an overview of chatbots, including their history starting with ELIZA from 1966. Common approaches to developing chatbots include pattern matching and using the Artificial Intelligence Markup Language (AIML). The document outlines some challenges in developing human-like intelligence for chatbots and possibilities for future work, before concluding with a demonstration.

chatroboticsartificial intelligence
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

Recommended for you

Nihad Abbasov-Intellectual technology presentation
Nihad Abbasov-Intellectual technology presentation Nihad Abbasov-Intellectual technology presentation
Nihad Abbasov-Intellectual technology presentation

This document provides an overview of chatbot technology. It discusses that a chatbot is a software application that conducts online conversations through text to simulate human interactions. The document then covers what a chatbot is, how it responds using pattern matching and predefined responses, examples of popular chatbots like Google Home and Amazon Echo, common usage areas of chatbots, and limitations such as inability to handle complex conversations. In summary, the document defines chatbots, describes how they operate through examples, and discusses their applications and limitations.

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...

Basecamp Innovation and Insights 1. Chatbot and Brand experiences 2. Definition and Strategy Delusions and Insights 1. The more the better for conversation?! The wisdom from the social science!! 2. Computers? Social Actors?! Welcome to Similarity-attraction world. Deliberation and Insights

conversational interfacesbot interactionschatbot as personalities
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

This document discusses using AngularJS to build mobile HTML5 websites and hybrid mobile apps. It provides an overview of how AngularJS allows developers to use modern web standards today and build modular, robust and testable apps. It then demonstrates a sample AngularJS mobile app for presenting slides and discusses various techniques for optimizing performance, handling touch/gesture interactions, storing data and packaging apps for distribution.

codemotion roma 2014carlo bonamicomobile html5
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)

Recommended for you

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...

It took 16 years for smartphone penetration to reach 1 billion people. Analysts believe it will take only 3 years to reach the next billion. The devices these consumers buy will be incredibly diverse, yet many will run on Android; a platform that now sees more than 1.5 million activations per day. In this presentation, we explore the fascinating rise of Android around the globe. From dual SIM phones in Indonesia, to dual screen e-ink devices in Russia and crowd-sourced platform modifications in China, we will discover the role open source has played in Android's popularity and how to design for such a diverse environment.

appsresponsive designmediatek
iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case study

Case study of the ConcertWall iPhone app by http://www.wolfslittlestore.be (design) & http://www.coin-c.com/ (development)

iosuser interfacedesign
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...

Slides for Serverless Toronto User Group meetup cover: 1. Creating Serverless Chatbots for Twilio SMS, Slack & Facebook in minutes! 2. Alexa Bot/Skill from the same Node.js codebase! Rework of the Alexa code for the "AWS Lambda purists”. 3. Important (non-Serverless) Voice UI specific topics: • An in-depth look at creating Alexa Skills • Understanding Voice-First design & how it differs from designing mobile and web apps, even Interactive Voice Response (IVR) systems • Best practices for designing Voice User Interfaces (VUI). The session was not recorded, but "The Good, the Bad and the Ugly of the voice-first experience" demos & sample Alexa Skill Interaction Model were uploaded to http://goo.gl/H5CEpW for you to enjoy.

voicefirstbotschatbots
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

Recommended for you

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

Earlier this month, I presented an updated talk on Mobile Strategy for Servoy. This one hour talk looks at the 3 options for a mobile strategy: Responsive Web, Mobile Optimized, and/or Native. I also explained why HTML5 is not a strategy; it is merely a technology you can use to implement any and all of these options. And we briefly discussed the three faces of Mobile First and how this methodology helps companies break out of old habits to create better customer experiences.

mobile designmobile uxmobile sites
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

How will chatbots revolutionize our day to day lives and what does it mean? Over the past year, chatbot have become very popular. Companies of all sizes are building bot, developers have made over 80K Bots for Messenger alone and this is just the beginning. By 2020, it is estimated that 80% of businesses will have a bot. The past year has also been full of challenges. For one, Bots are a new Paradigm which means building a great bot is very difficult. That being said, focusing on Chatbot First use cases and see where the opportunities are can give developers and companies a huge advantage. Once we have the right market opportunity, the right use case, then we must design it right! Unfortunately most developers are making bots the same way they made apps and websites... Chatbot and conversational Ui is a completely different animal and designing a great bot can be very hard. Things we will explore: 1) Why are Bots a Revolution? 2) Why Bots and Why Now? 3) What does the Future Look like? 4) What are the Biggest Opportunities for Ai and Automation? 5) What are Bot Builders Building right now? 6) How to think about 'Chatbo First Use Cases' the right way. 7) Bot Design Basics You can see this presentation live at: https://youtu.be/6zzj-v0yjBI Learn more about chatbots at: ChatbotsLife.com

aichat bot tutorialchatbots
Conversational Business - Trends
Conversational Business - TrendsConversational Business - Trends
Conversational Business - Trends

This document discusses key conversational business trends: - Messaging apps are becoming the dominant form of communication over other platforms like email and social media. Most users spend their time in messaging apps. - Chatbots are being developed to automate tasks and engage users at scale through conversational interfaces in messaging platforms. There has been significant funding and growth in the chatbot market. - Trends indicate that users desire more natural, personalized, and engaging interactions through conversational technologies like chatbots rather than traditional menu-driven apps. However, challenges remain around user expectations, conversational intelligence, discoverability, and privacy/trust.

artificial intelligencedesignusability
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

Recommended for you

Designing Content for Multiple Devices
Designing Content for Multiple DevicesDesigning Content for Multiple Devices
Designing Content for Multiple Devices

This document discusses mobile learning and app development trends. It provides statistics on mobile usage patterns and expectations. Key points discussed include the rise of mobile usage, typical mobile user behaviors like multitasking and short bursts of activity, and considerations for developing native apps vs. web apps vs. hybrid apps. It also provides best practices for mobile design such as optimizing for small screens, unreliable networks, and different contexts of use.

mobile computingmobilestoryline
Human Computer Interface Guidelines
Human Computer Interface GuidelinesHuman Computer Interface Guidelines
Human Computer Interface Guidelines

The document discusses guidelines for designing user interfaces for iOS platforms, including iPhone and iPad applications. It covers topics such as choosing an application style, designing for different iOS devices, interaction principles, and adapting iPhone apps for the iPad. The guidelines emphasize tailoring the design to the mobile platform through simplicity, focus on the main task, and use of standard iOS interface paradigms.

iphonetugrazios
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

"Mobile first," is a concept that serves us well as a design tool, putting constraints on our messaging, layout, etc. But to use "mobile first" as a complete mobile strategy can lead to some dangerous lines of thought. There's a bigger picture that needs to be seen, and it's what we've always done when developing experiences for the web. We need to put the "Experience First." Then we can think about "mobile", "desktop", "lean-back", and whatever other technologies are released in the next several years. It's not about devices, it's about users and experiences. Presentation first given at BarCamp Nashville in October of 2011.

user experienceuxmobile web
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

Recommended for you

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

The document provides guidelines for designing iOS apps according to Apple's Human Interface Guidelines. It discusses key iOS design principles like deference to content, clarity, and using depth and layers to communicate hierarchy. It also summarizes guidelines for many specific iOS features and technologies like navigation bars, tab bars, notifications, widgets, extensions, HomeKit, Apple Pay, and accessibility. Developers are advised to follow platform conventions, prioritize usability, and test designs extensively.

iostugrazmobile applications
Mobile UI Design Patterns
Mobile UI Design PatternsMobile UI Design Patterns
Mobile UI Design Patterns

This document discusses various mobile design patterns and concepts. It covers common UI patterns like lists, navigation, and forms. It also discusses design principles for mobile like direct manipulation and feedback. It provides examples of implementing lists in Android and iOS. It compares MVC and MVVM patterns and discusses using MVVM frameworks. It emphasizes adapting patterns from desktop to be optimized for mobile interaction paradigms.

Imagining the physical web
Imagining the physical webImagining the physical web
Imagining the physical web

Some people say the web is dying, but I believe it’s just getting started. And what will kick it into overdrive is the Physical Web: the ability to discover, engage, and interact with smart devices (or that “dumb” tree over there) using nothing more than a browser. In this presentation, we explore the impact these new capabilities may have on the way we design and think about this (increasingly near) future web.

proximitybluetoothopera browser
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

Recommended for you

Everything old is new again
Everything old is new againEverything old is new again
Everything old is new again

Presentation by Stephanie Rieger of Yiibu at the MobX Conference in Berlin, Germany November 17, 2012.

historymobxberlin
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

If your job is to make things for the web, and the company you work for doesn’t build fitness trackers, or robots, or smart light bulbs, or a cloud service that aims to connect all these things, you could be forgiven for not caring all that much about today's Internet of Things. My aim with this talk is to shift the conversation away from things and back to people. In doing so, I hope to also arm you with tools to better understand, and find your place, within this complex but fascinating landscape. First presented at Generate Conference in San Francisco on July 15, 2016.

web standardsiotcalm technology
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement

This document discusses emerging technologies and how they are blurring the lines between the digital and physical worlds. It explores concepts like smart connected objects, Internet of Things, and how the web can better integrate with native apps and experiences. The document advocates for a more seamless experience where the web enhances and complements other technologies instead of trying to replace them.

nfcweb designomnichannel
…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

Recommended for you

Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation

The document discusses the current state of conversational interfaces such as chatbots and voice assistants, noting that while early versions were limited, recent advances in artificial intelligence, data availability, and user expectations have created new opportunities for conversational interfaces to become more useful. However, conversational interfaces still have limitations and work best when focused on simple, well-defined tasks rather than attempting to replace more complex interactions or functions better suited to humans. Designing effective conversational interfaces requires keeping interactions simple, clearly setting user expectations, and in some cases, involving human assistance.

interaction designartificial intelligencebots
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Web

The web was first conceived 25 years ago, by an Englishman. Fifteen years later, as the first crop of dot.coms were going bust, close to 60% of its users (and all Alexa "top 20" sites) came from developed nations. Fast forward to today, and the picture is strikingly different. Almost half the Alexa "top 20" now comes from emerging economies. Economies where close to 3 billion people have yet to use the web, but thanks to mobile--won't have to wait much longer to discover it. This presentation will introduce you to fascinating and innovative services that are re-shaping the web to serve the consumers of tomorrow. Driven by mobile, the power of personal relationships, and the breakneck pace of globalisation, these services provide a glimpse into the business models, opportunities and challenges we will face, when growing a truly global web.

appsomnichannelqr code
Reset the Web
Reset the WebReset the Web
Reset the Web

Midway through a project, a client of ours recently said "One thing I'm learning is that it's ok to give up on the desktop experience once it stops making sense". This wasn't an isolated incident. In fact, i'm beginning to think desktop web sites stopped making sense quite a while ago. We've just had nothing viable to replace them with. Mobile apps have given us a glimpse, but I think they're merely a glimpse into something bigger. Mobile isn't merely a new stage in the evolution of the web, it's not even merely a new context, it's the very early stages of an entirely new system. A system that has already started to shape our environment, affect the way we live, how we choose to connect with others, and how we're able to spend our time. A system that is also slowly unravelling our assumptions and causing us to question the very reason we build web sites, why people visit them, and where the true value of the web actually lies. Presented by Stephanie Rieger at Breaking Development in Orlando, Florida on April 17, 2012.

historymobiledevelopment
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

Recommended for you

Thick description
Thick descriptionThick description
Thick description

This document discusses the anthropological concept of "thick description" developed by American anthropologist Clifford Geertz. Thick description involves interpreting observed behaviors, objects, and events by examining the cultural meanings, symbols, and context behind them. This is contrasted with "thin description" which only describes observable behaviors without considering cultural meaning. The document provides examples to illustrate thick versus thin description and outlines Geertz's four parameters of interpretive anthropology which focuses on the flow of social discourse, extroverted cultural expressions, and microscopic ethnographic descriptions.

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

The document discusses Hannah Arendt's concept of the public and private realms as outlined in her book The Human Condition. It provides context for when the book was written during the Cold War era. Arendt saw the polis as the public realm where citizens could participate in politics through action and speech, while the household was the private realm concerned with basic necessities. However, the rise of the social realm has blurred the lines between public and private. Society demands uniform behavior and the intimate sphere has been invaded. The document raises questions about how modern technology has further impacted the public and private realms.

Hannah Arendt
Hannah ArendtHannah Arendt
Hannah Arendt

Hannah Arendt was a 20th century German-Jewish political philosopher who wrote extensively on totalitarianism and human rights. She fled Nazi Germany and spent 18 years in Paris before immigrating to the United States in 1941. Arendt published several influential works including The Origins of Totalitarianism and Eichmann in Jerusalem. She became the first woman to be a full professor of politics at Princeton University and made important contributions to political theory and education.

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

Recommended for you

Geertz
GeertzGeertz
Geertz

1. The document discusses Clifford Geertz's concept of "thick description" in anthropological analysis of culture. Geertz borrowed the term from philosopher Gilbert Ryle to describe developing an interpretation of a culture by examining both its symbols and patterns of behavior. 2. Thick description aims to develop an understanding of "what the natives think they are up to" in their cultural practices. It involves interpreting cultural phenomena like a wink, which has a different meaning depending on the context. 3. Geertz argues that culture cannot be studied separately from behaviors, and that anthropologists must analyze both the whole cultural context and specific parts, like laws, to develop a thick description that can interpret cultural symbols and meanings.

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 ...

New sensor based Web Standards developments have punched a hole in the web that is letting the real world leak into the browser. The getUserMedia API now lets us access cameras and microphones and JSARToolkit and javascript based Natural Feature Tracking like the examples from ICG Graz University have shown that browsers can now be taught to perceive the world around them. Combine this with the &lt;canvas> and WebGL and you have a real working model for a Web Standards based Augmented Reality. On top of this we also have OGCs Sensor Web Enablement and new developments like the Sensor API and the rapid spread of networked sensors and wireless Arduino-ised devices. Massively distributed dynamic immersive visualisation is now the new structural form for the modern web.

augmented realityweb3ar
Budget 2011
Budget 2011Budget 2011
Budget 2011

The 2011 budget report allocates $20,794,000 to mission and ministry expenses. World Mission receives the largest portion of funds at 43.5%, while Compassion, Mercy, and Justice receives 19.7% and Church Growth and Evangelism receives 17.4%. The budget supports domestic and international efforts, with 63% of funds going towards international work. Revenue comes from multiple sources including church giving, individual donors, and partnerships.

<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...

Recommended for you

My latest visual CV
My latest visual CVMy latest visual CV
My latest visual CV

This document is a resume for Paul Say which summarizes his work experience. It states that he is currently leading marketing for Sage in the UK & Ireland, helped Lloyds Banking Group reboot local banking in the UK, and has also completed interim marketing assignments focusing on digital customer experiences. It further provides links to connect with him on professional networking platforms.

transformationdigitalsocial media
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business Fly

The document discusses mobile trends and how businesses can develop mobile strategies. It notes that over 1.7 billion people use internet on PCs while over 4.1 billion use mobile phones. Further, over 1 million iPhones have been sold in Australia in less than 2 years and iPhone users frequently upgrade the operating system. The document suggests that the key difference mobile brings is context, contact and community and asks how these mobile trends impact a business' model and value chain. It recommends that a mobile strategy focus on context, contact and community.

integratedbusinessinternet
Wyniki_1Q10_PL_20100512
Wyniki_1Q10_PL_20100512Wyniki_1Q10_PL_20100512
Wyniki_1Q10_PL_20100512
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…

Recommended for you

Brief History of Educational Technology
Brief History of Educational TechnologyBrief History of Educational Technology
Brief History of Educational Technology

A presentation by Dr. Richard Schwier for EC & I 831 at the Faculty of Education, University of Regina.

Hannah arendt week 4.slideshare
Hannah arendt week 4.slideshareHannah arendt week 4.slideshare
Hannah arendt week 4.slideshare

This document provides an overview of Hannah Arendt's major works and key concepts including her rejection of subject-object dichotomies in favor of intersubjectivity, her emphasis on expressive and communicative action, and concepts of natality and the importance of space for new political beginnings. It also summarizes her views on anti-foundationalism in philosophy and politics, and how totalitarianism can be countered through collective political action and the human capacity for new beginnings.

hannah arendttotalitarianismmodernity
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

This presentation at Web Directions South 2007 captures the screens from an interactive poll held during the presentation. 67 people in the audience joined in and a dynamic profile of their phones, browsers, operating system and network providers is also include. A more involved analysis of the results will be available soon...

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…

Recommended for you

Data Communications: History and Standard Organizations
Data Communications: History and Standard OrganizationsData Communications: History and Standard Organizations
Data Communications: History and Standard Organizations

This presentation briefly discusses the history of data communications (late 19th century to mid-20th century) and the different standard organizations that governs the world of data comm.

standard organizationsdata communicationshistory
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

This document provides an overview of user interfaces for science, including user experience, visualization, and mobile app development using PhoneGap. It discusses principles of good user interface design like simplicity, consistency, and visual hierarchy. It also covers processes for creating interfaces like storyboarding and wireframing. Visualization is discussed as a way to help users analyze and understand large datasets. The document cautions against potential pitfalls in visualization like unclear representations of uncertainty. It concludes by mentioning libraries for creating visualizations and frameworks like PhoneGap for developing mobile apps.

usabilitydata visualizationmobile application development
Presentation Ux
Presentation UxPresentation Ux
Presentation Ux

This document discusses key concepts in user experience design including accessibility, usability, screen patterns, progressive enhancement, and user testing. It provides definitions and examples for various UX principles like ensuring applications can be accessed by people with disabilities, that users want relevant content easily and quickly, and testing applications with real users to identify areas for improvement. Screen patterns like master-detail, search results, and dashboards are explained as templates for organizing content. The document advocates for progressive enhancement in building applications to work across devices through separate concerns of architecture, structure, presentation and behavior.

(…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

Recommended for you

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?

The document discusses whether a "one web" approach can accommodate diverse mobile users, including those with disabilities. It argues that while the same information may not be available across all devices, the web should provide reasonable access. Key points include: - Web standards like HTML, CSS and JavaScript can help create an accessible experience across devices when combined with guidelines like WCAG and MWBP. - Emerging technologies like CSS media queries, HTML5 and WAI-ARIA have the potential to further improve accessibility on mobile. - Developers should use progressive enhancement and set an accessible baseline first before advanced features to ensure an inclusive web.

html5cssmedia queries
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?

The web has always had fragmentation, though not on the scale we're seeing now with new devices - and that's before we consider hybrid-touch laptops, microscreen smart watches, gesture interfaces or displays the size of a wall. Testing all the user permutations of your application is becoming almost impossible, so how do you go about working out whether you're delivering a good experience or not? In this session, we'll look at the use of responsive design oriented analytics coupled with a few statistical methods that will help determine how well you're delivering your experiences and highlighting the areas you need to focus on next in order to maintain a decent level of coverage.

user experience designdataresponsive design
Ui design
Ui designUi design
Ui design

This document provides an overview of concepts related to natural user experience (NUX). It discusses topics like UX vs UI, common patterns and principles for interface design, visual language considerations, and popular design systems like flat design and material design. The document also lists various tools used for tasks like wireframing, prototyping, and visual design. Key sections include definitions of UX and UI, guidelines for consistency, and discussions of design patterns and affordances.

ux designui designmobile design

More Related Content

What's hot

Let's Build a Chatbot!
Let's Build a Chatbot!Let's Build a Chatbot!
Let's Build a Chatbot!
Christopher Mohritz
 
Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009Drupalcamp LA Aug 2009
Drupalcamp LA Aug 2009
Tom 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 Required
Charlotte 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 Intelligence
Md. 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 - Bonamico
Codemotion
 
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 study
Johan 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 HTML5
Theresa 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 Design
Stefan Kojouharov
 
Conversational Business - Trends
Conversational Business - TrendsConversational Business - Trends
Conversational Business - Trends
Georgian
 
Designing Content for Multiple Devices
Designing Content for Multiple DevicesDesigning Content for Multiple Devices
Designing Content for Multiple Devices
Brandon Carson
 
Human Computer Interface Guidelines
Human Computer Interface GuidelinesHuman Computer Interface Guidelines
Human Computer Interface Guidelines
Martin 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 experience
Kevin 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-Platforms
Martin Ebner
 
Mobile UI Design Patterns
Mobile UI Design PatternsMobile UI Design Patterns
Mobile UI Design Patterns
danhermes
 

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 web
yiibu
 
Everything old is new again
Everything old is new againEverything old is new again
Everything old is new again
yiibu
 
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
yiibu
 
Beyond progressive-enhancement
Beyond progressive-enhancementBeyond progressive-enhancement
Beyond progressive-enhancement
yiibu
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
yiibu
 
The Emerging Global Web
The Emerging Global WebThe Emerging Global Web
The Emerging Global Web
yiibu
 
Reset the Web
Reset the WebReset the Web
Reset the Web
yiibu
 
Thick description
Thick descriptionThick description
Thick description
melekaydin
 
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
Paulina Méndez
 
Hannah Arendt
Hannah ArendtHannah Arendt
Hannah Arendt
guestc78f1411
 
Geertz
GeertzGeertz
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
 
Budget 2011
Budget 2011Budget 2011
My latest visual CV
My latest visual CVMy latest visual CV
My latest visual CV
Paul Say
 
Mobiles Can Make Your Business Fly
Mobiles Can Make Your Business FlyMobiles Can Make Your Business Fly
Mobiles Can Make Your Business Fly
Rob Manson
 
Wyniki_1Q10_PL_20100512
Wyniki_1Q10_PL_20100512Wyniki_1Q10_PL_20100512
Wyniki_1Q10_PL_20100512
WSE InfoEngine
 
Brief History of Educational Technology
Brief History of Educational TechnologyBrief History of Educational Technology
Brief History of Educational Technology
guest49bb62
 
Hannah arendt week 4.slideshare
Hannah arendt week 4.slideshareHannah arendt week 4.slideshare
Hannah arendt week 4.slideshare
Craig 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 Presentation
Rob Manson
 
Data Communications: History and Standard Organizations
Data Communications: History and Standard OrganizationsData Communications: History and Standard Organizations
Data Communications: History and Standard Organizations
Jhan-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 development
Eamonn Maguire
 
Presentation Ux
Presentation UxPresentation Ux
Presentation Ux
Jochen Vandendriessche
 
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
 
Ui design
Ui designUi design
Ui design
Bart Van Hecke
 
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
Rob Boynes
 
Web Accessibility: A Shared Responsibility
Web Accessibility: A Shared ResponsibilityWeb Accessibility: A Shared Responsibility
Web Accessibility: A Shared Responsibility
Joseph 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 Masterclasses
Rob Boynes
 
UI and UX for Mobile Developers
UI and UX for Mobile DevelopersUI and UX for Mobile Developers
UI and UX for Mobile Developers
Mohamed Nabil, MSc.
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
MoodLabs
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 Documentation
Salocin Dot TEN
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data Visualizations
Michelle 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 age
shwetank
 
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 Shoestring
teaguese
 
UI Design
UI DesignUI Design
UI Design
Ivano Malavolta
 
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
Shah 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 Profit
penanochizzo
 
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
 
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
Fernando Cejas
 

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 | 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
 
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
 

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 server
yiibu
 
Letting Go
Letting GoLetting Go
Letting Go
yiibu
 
The trouble with context
The trouble with contextThe trouble with context
The trouble with context
yiibu
 
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 yiibu
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 (...
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

How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
Ortus Solutions, Corp
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
karim wahed
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Sparity1
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
Task Tracker
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
sachin chaurasia
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
e-Definers Technology
 
A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
kalichargn70th171
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Livetecs LLC
 
Break data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud ConnectorsBreak data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud Connectors
confluent
 
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Softwares
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
sudsdeep
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
shivamt017
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
Roshan Dwivedi
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
taskroupseo
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
akshesh doshi
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
Ortus Solutions, Corp
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
onemonitarsoftware
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
sofiafernandezon
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
Semiosis Software Private Limited
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
karim wahed
 

Recently uploaded (20)

How we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hoursHow we built TryBoxLang in under 48 hours
How we built TryBoxLang in under 48 hours
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
 
Attendance Tracking From Paper To Digital
Attendance Tracking From Paper To DigitalAttendance Tracking From Paper To Digital
Attendance Tracking From Paper To Digital
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
 
A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
 
Break data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud ConnectorsBreak data silos with real-time connectivity using Confluent Cloud Connectors
Break data silos with real-time connectivity using Confluent Cloud Connectors
 
NBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial CompanyNBFC Software: Optimize Your Non-Banking Financial Company
NBFC Software: Optimize Your Non-Banking Financial Company
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) AWS Security .pdf
 

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