Where Do We Go From Here? Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson Responsive Day Out 19 June 2015 Brighton, UK
Slide 1
Slide 2
Slide 3
And that doesn’t even consider our users.
Slide 4
It’s about access.
Slide 5
Media Query Forest HTML5 Form Caverns Lake CSS Mount Ajax X
Slide 6
POSTEL’S LAW Be conservative in what you do, be liberal in what you accept from others.
Slide 7
EPICTETUS When something happens, the only thing in your power is your attitude toward it; you can either accept it or resent it.
Slide 8
Slide 9
It’s about accessibility.
Slide 10
Slide 11
Slide 12
@media (pointer:fine) { /* Smaller links and buttons are ok / } @media (pointer:coarse) { / Larger links and buttons are probably a good idea */ }
Slide 13
@media (hover:hover) { /* hover-related interactions are A-OK / } @media (hover:on-demand) { / hover-related interactions are potentially difficult, maybe do something else instead / } @media (hover:none) { / No hover possible :-( */ }
Slide 14
MEDIA QUERIES LEVEL 4 Designing a page that relies on hovering or accurate pointing only because any-hover or any-pointer indicate that an input mechanism with these capabilities is available, is likely to result in a poor experience.
Slide 15
if ( window.PointerEvent ) { window.addEventListener( “pointerdown”, detectType, false ); }
Slide 16
function detectType( event ) { switch( event.pointerType ) { case “mouse”: /* mouse input detected / break; case “pen”: / pen/stylus input detected / break; case “touch”: / touch input detected / break; default: / pointerType is empty (could not be detected) or UA-specific custom type */ } }
Slide 17
body { max-width: 64em; } @media screen and (min-width: 64em) { body { font-size: 1.5625vw; /* ( 1em / 64em ) * 100 */ } }
Slide 18
Slide 19
Slide 20
Slide 21
Slide 22
STEPH HAY Interface is an opportunity to have a conversation with our users.
Slide 23
<meta name=“msapplication-cortanavcd” content=”http://myapp.io/vcd.xml”>
Slide 24
<?xml version=”1.0” encoding=”utf-8”?> <VoiceCommands xmlns=”http://schemas.microsoft.com/voicecommands/1.2”> <CommandSet xml:lang=”en-us” Name=”groupPost”> <CommandPrefix>Group Post</CommandPrefix> <Example>Group Post add note</Example> <Command Name=”addNote”> <Example>add a note {message} using group post</Example> <ListenFor RequireAppName=”BeforeOrAfterPhrase”>[please] add a note [that] {noteSubject}</ListenFor> <Feedback>adding {noteSubject} to Group Post</Feedback> <Navigate Target=”/addNote.htm”/> </Command> <PhraseTopic Label=”noteSubject” Scenario=”Dictation”></PhraseTopic> </CommandSet> </VoiceCommands>
Slide 25
Slide 26
Accessibility is not about disabilities, it’s about people
Slide 27
Slide 28
Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson
