Qual è il futuro del responsive Web Design?

Ho avuto il grande piacere di consegnare il keynote di chiusura a Responsive Day Out 3: The Final Breakpoint. Tenutasi a Brighton, nel Regno Unito, il 19 giugno 2015, la conferenza è stata una riunione di designer e sviluppatori che hanno condiviso le strategie, le tecniche e le esperienze del flusso di lavoro con il responsive web design.

Ecco cosa dovevo dire.

Keynote di chiusura

Oggi ha fornito un fantastico tour nel mondo del design reattivo. Abbiamo visto come migliorare i nostri flussi di lavoro e processi. Abbiamo appreso nuovi modi per migliorare l'accessibilità dei nostri prodotti. Ci siamo confrontati con le moderne funzionalità CSS e HTML che ci aiutano ad abbracciare le dimensioni di visualizzazione estremamente variabili che girano e girano intorno a noi.

Abbiamo esplorato il futuro del codice modulare e la capacità dei browser di funzionare senza connettività di rete. E abbiamo persino fatto un viaggio nel possibile futuro di dove potrebbe andare il web.

Abbiamo fatto molta strada dall'articolo di Ethan, dalle griglie fluide, dai supporti flessibili e dalle domande sui media. Questi tre principi hanno seminato un seme che è cresciuto e prosperato come siamo arrivati ​​a capire meglio le implicazioni della proliferazione dei dispositivi. Abbiamo visto che il web è in grado di andare ovunque e fare praticamente qualsiasi cosa.

Direi che "Responsive Web Design" è stato il primo articolo che è riuscito davvero a catturare i concetti che John Allsopp aveva discusso tanti anni prima in "A Dao of Web Design" e li ha distillati in qualcosa che la comunità di design e sviluppo poteva davvero affondare i loro denti dentro Forniva un esempio concreto della capacità del web di flettersi e modellarsi in qualsiasi forma avesse bisogno di assumere.

Era la prima volta che molti designer erano venuti a patti con l'idea che "l'esperienza" non fosse una cosa monolitica.

Certo, molti di noi nella comunità degli standard web hanno parlato del discorso e camminando per il miglioramento progressivo. E stavamo ottenendo dei convertiti, ma i progressi erano lenti. Ethan ha dimostrato - direttamente e in modo sintetico - come potrebbe apparire il progressivo miglioramento del visual design.

Fornire un'esperienza identica per tutti gli esseri umani che cercano di accedere ai nostri siti sarebbe impossibile. Ci sono semplicemente troppi fattori da considerare. Abbiamo dimensioni dello schermo, densità del display, velocità della CPU, quantità di RAM, disponibilità dei sensori, disponibilità delle funzioni, metodi di interfaccia ...  respirare ... tipo di sistema operativo, versione del sistema operativo, tipo di browser, versione del browser, plug-in installati, velocità di rete, latenza di rete, congestione della rete, firewall, proxy, router e probabilmente una dozzina di altri fattori che la mia mente non è in grado di cogliere in mezzo al vortice di considerazioni tecniche.

E questo non considera nemmeno i nostri utenti.

Quando si tratta delle persone che dobbiamo raggiungere perché il nostro lavoro sia realmente importante, dobbiamo considerare il livello di alfabetizzazione, l'acume di lettura, il livello di conoscenza del dominio, i disabilità cognitivi come difficoltà di apprendimento e dislessia, problemi di deficit di attenzione, distrazioni ambientali, problemi di vista, problemi di udito, problemi motori, quanto capiscono come usare il loro dispositivo, quanto capiscono come usare il loro browser, quanto sono esperti nelle comuni convenzioni web e tantissimi altri "fattori umani".

Ogni persona è diversa e ognuno viene sul web con il proprio insieme di bisogni speciali. Alcuni sono sempre con loro, ad esempio la cecità. Altri sono transitori, come rompere il braccio del tuo mouse. Altre ancora sono puramente situazionali e dipendono dal dispositivo che si sta utilizzando in quel momento e dalle sue capacità tecniche o limitazioni.

Cercando di escogitare un'esperienza monolitica per ogni persona da avere in ogni contesto che considera ogni fattore sarebbe impossibile. Eppure, Sir Tim Berners-Lee aveva una visione per una rete che era in grado di andare ovunque. Era pazzo?

La visione di Sir Tim per il web era che i contenuti potevano essere creati una sola volta e accessibili da qualsiasi luogo. Disparati ma correlati pezzi di "ipermedia" sparsi in tutto il mondo potrebbero essere collegati l'uno all'altro tramite link. Inoltre, potrebbero essere recuperabili da chiunque su qualsiasi dispositivo in grado di leggere HTML. Gratuito.

Alla fine, Sir Tim immaginò l'accessibilità universale.

Per molti di noi, assicurare che i nostri siti web siano accessibili è un ripensamento. Parliamo di un buon gioco quando si tratta di "utente centrato" questo o quello, ma spesso trattiamo la parola "accessibilità" come sinonimo di "screen reader". È molto più di questo. "Accessibilità" riguarda le persone. Le persone consumano contenuti e utilizzano le interfacce in molti modi diversi, alcuni simili e alcuni abbastanza diversi da come lo facciamo.

Certo, le persone con disabilità visive spesso usano uno screen reader per consumare contenuti. Ma potrebbero anche usare un dispositivo di feedback tattile braille o una stampante braille. Probabilmente usano anche una tastiera. Oppure possono usare un touchscreen in concerto con segnali audio. Oppure possono persino utilizzare una telecamera per consentire loro di "leggere" i contenuti tramite OCR e sintesi vocale. E sì, la disabilità visiva colpisce una percentuale decente della popolazione (specialmente con l'età), ma è solo una parte del puzzle di "accessibilità".

Il contrasto tra testo e sfondo è un fattore importante per garantire che i contenuti rimangano leggibili in diverse situazioni di illuminazione. La scelta del colore è un problema di accessibilità.

Il linguaggio che utilizziamo sui nostri siti e nelle nostre interfacce influenza direttamente la facilità con cui i nostri utenti comprendono ciò che facciamo, i prodotti che offriamo e il motivo per cui è importante. Influisce anche sul modo in cui sensibilizziamo i nostri utenti su se stessi, sulla loro esperienza e sulle nostre aziende. La lingua è un problema di accessibilità.

La dimensione delle nostre pagine web ha un effetto diretto sul tempo di download delle nostre pagine, sul costo per i nostri clienti di accedervi e (a volte) anche sulla possibilità di raggiungere il contenuto. Le prestazioni sono un problema di accessibilità.

Potrei andare avanti, ma sono sicuro che hai capito il punto.

L'accessibilità consiste nel fornire buone esperienze per tutti, indipendentemente dalle abilità fisiche o mentali, dal genere, dalla razza o dalla lingua. Riconosce che tutti noi abbiamo esigenze speciali: limitazioni fisiche, limitazioni della larghezza di banda, limitazioni del dispositivo, che potrebbero richiedere di sperimentare la stessa interfaccia in modi diversi.

Quando visito un sito Web sul mio telefono, ad esempio, sono visivamente limitato dalla risoluzione dello schermo (soprattutto se utilizzo un browser che incoraggia lo zoom) e sono limitato nella mia capacità di interagire con pulsanti e collegamenti perché sto navigando con I miei polpastrelli, che sono più grandi e molto meno precisi di un cursore del mouse.

Su un touchscreen, potrei aver bisogno che l'esperienza sia leggermente diversa, ma devo comunque essere in grado di fare qualunque cosa sia venuta sul sito. ho bisogno un esperienza, ma inoltre ho bisogno del adeguata Esperienza.

Abbracciare la realtà che l'esperienza non ha bisogno di essere solo una cosa ci aiuterà a raggiungere più persone con meno mal di testa. L'esperienza può e deve essere realizzata come un continuum. Questo è un miglioramento progressivo: iniziamo con un'esperienza di base che funziona per tutti: contenuti, collegamenti reali, controlli di moduli di prima generazione e moduli che effettivamente vengono inviati al server. Quindi sviluppiamo l'esperienza da lì.

Il tuo browser supporta i controlli dei moduli HTML5? Grande! Otterrai una tastiera virtuale migliore quando digiti il ​​tuo indirizzo email. Puoi usare i CSS? Fantastico, permettimi di rendere l'esperienza di lettura migliore per te. Oh, puoi gestire le richieste dei media! Permettetemi di adattare il layout in modo tale che le lunghezze delle linee siano un po 'più confortevoli. Wow, il tuo browser supporta Ajax ?! Qui, lascia che carichi alcuni teaser per contenuti correlati che potresti trovare interessanti.

Immagina di sederti in un ristorante, solo per avere il cameriere che ti porta subito una bistecca. Ma tu sei vegetariano. Chiedete se offrono qualcosa da mangiare e rispondono cortesemente: "Oh, mi dispiace, la carne è un requisito. Perché non mangi solo carne? È facile! Ti stai davvero perdendo un po 'di cibo gustoso." Nessun cameriere a cui importa davvero della tua esperienza lo farebbe.

Eppure noi - come industria - non sembrano avere alcun problema nel dire a qualcuno di cui hanno bisogno di cambiare il loro browser per adattarci. È semplicemente sbagliato. Il nostro lavoro non ha senso senza utenti. Dovremmo essere piegati all'indietro per attrarli e trattenerli. Questo è il servizio clienti 101.

Questo torna alla legge di Postel, che Jeremy spesso racconta:

Sii prudente in ciò che fai, sii liberale in ciò che accetti agli altri.

Abbiamo bisogno di essere negligenti quando si tratta di supporto del browser e non fare troppe ipotesi (o meglio nessuna) su ciò che possiamo inviare.

Naturalmente questo non è un approccio che tutti nel nostro settore sono pronti ad accogliere, quindi offrirò un'altra citazione su cui tornerò più e più volte ...

Quando succede qualcosa, l'unica cosa in tuo potere è il tuo atteggiamento nei suoi confronti; puoi accettarlo o risentirlo.

Non possiamo controllare il mondo, possiamo solo controllare la nostra reazione ad esso.

Ora quelli di voi che si sono riuniti per questo finale Responsive Day Out (o che stanno seguendo a casa) probabilmente lo capiscono più di altri. Sentiamo il costante bombardamento di nuovi dispositivi, dimensioni dello schermo e funzionalità. L'unico modo che ho trovato per affrontare tutto questo è accettarlo, abbracciare la diversità e visualizzare la proliferazione di dispositivi e browser come una caratteristica, non un bug.

Sta a noi educare coloro che ci circondano che, per caso o per intenti, non hanno accettato che la diversità è la realtà in cui viviamo e le cose diverranno sempre più folli. Seppellire le nostre teste nella sabbia non è un'opzione.

Quando cerco di aiutare le persone a comprendere e ad abbracciare la diversità, spesso mi rivolgo a uno dei miei esercizi di pensiero preferiti di John Rawls.

Rawls era un filosofo che eseguiva un esperimento sociale con studenti, gruppi ecclesiastici e simili.

Nell'esperimento, ai partecipanti è stato permesso di creare la loro società ideale. Potrebbe seguire qualsiasi filosofia: potrebbe essere una monarchia o democrazia o anarchia. Potrebbe essere capitalista o socialista. Le persone in questo esperimento avevano libero corso per controllare assolutamente ogni aspetto della società ... ma poi avrebbe aggiunto il colpo di scena: non potevano controllare quale posizione occupavano in quella società.

Questa svolta è ciò che John Harsanyi, un teorico del primo gioco, definisce "il velo dell'ignoranza". Quello che Rawls ha trovato, più e più volte, è che gli individui che partecipano all'esperimento gravitano verso la creazione delle società più egualitarie.

Ha senso: quale essere umano razionale e interessato a se stesso tratterà gli anziani, gli ammalati, le persone di un particolare sesso, razza, credo o colore in modo scadente se riuscissero a trovarsi nella stessa identica posizione quando il velo viene portato via?

Le cose che facciamo per soddisfare esigenze speciali ora pagano dividendi in futuro. Guarda le rampe.

Sono un classico esempio di una caratteristica di accessibilità per le persone su sedia a rotelle che avvantaggia anche le persone che non sono in loro: la gente che bagna i bagagli, i servizi di consegna che trasportano cose pesanti sui dolly, i genitori che spingono i bambini (oi loro cani vestiti) nei passeggini, un pendolare che cammina con la sua bicicletta, e quel ragazzo che preferisce semplicemente camminare su per una leggera pendenza per spendere lo sforzo richiesto per salire un gradino.

Quando creiamo percorsi alternativi per andare dal Punto A al Punto B, le persone possono prendere quello più appropriato per loro, sia per scelta che per necessità. E tutti possono raggiungere i loro obiettivi.

Abbiamo tutti bisogni speciali. Alcuni con cui siamo nati. Alcuni che sviluppiamo. Alcuni sono temporanei. Alcuni non hanno nulla a che fare con noi personalmente, ma sono situazionali o puramente dipendenti dall'hardware che stiamo utilizzando, dai metodi di interazione che abbiamo a nostra disposizione, o persino dalla velocità con cui possiamo accedere a Internet o elaborare i dati.

Che cos'è il web design reattivo sull'accessibilità se non? Sì, i suoi principi fondamentali riguardano il visual design, ma in termini di quadro generale, sono tutti volti a fornire la migliore esperienza di lettura possibile.

Come professionisti del design reattivo, comprendiamo i vantaggi di adattare le nostre interfacce. Comprendiamo i fallback. Comprendiamo come progettare esperienze robuste che funzionano in un'ampia varietà di condizioni. Ogni giorno estendiamo l'accessibilità dei nostri prodotti.

Queste competenze ci renderanno inestimabili in quanto la tecnologia continua a offrire nuovi modi di consumare e interagire con i nostri siti web.

Stiamo appena iniziando a immergere o dita dei piedi, mani nel mondo dei controlli gestuali basati sul movimento. Certo, li abbiamo tenuti in due dimensioni sul touch screen per un po 'di tempo ma i controlli tridimensionali basati sul movimento stanno cominciando ad apparire. Puoi vedere una demo di controlli gestuali intorno al contrassegno di 41 secondi nel seguente video:

Il primo grande passo in questa direzione è stato Kinect su Xbox 360 (e versioni successive, Windows). Con Kinect interagiamo con il computer usando i movimenti del corpo come alzare una mano (che fa sì che Kinect presti attenzione), spingendo la nostra mano in avanti per fare clic / toccare e afferrare per trascinare la tela in una direzione particolare.

Kinect ha inaugurato una grande rivoluzione in termini di interfaccia con i computer, ma dal punto di vista dell'interazione presenta sfide simili a quelle del controller Wii e del PlayStation Move di Sony. Grandi gesti del corpo come alzare la mano (o un controller di bacchetta) possono essere stancanti.

Inoltre, non sono eccessivamente accurati. Se pensavi che l'accuratezza del touchscreen fosse un problema, i gesti delle mani come quelli per Kinect o LEAP Motion pongono ancora più di una sfida.

Per ospitare interazioni come questa (che al momento non abbiamo modo di rilevare) dobbiamo essere consapevoli di quanto sia facile fare clic sui controlli interattivi. Abbiamo bisogno di determinare se i nostri pulsanti e link sono abbastanza grandi e se c'è abbastanza spazio tra loro per garantire che l'intento del nostro utente sia trasmesso con precisione al browser. Due specifiche che possono aiutare a risolvere questo problema sono Media Queries Level 4 e Pointer Events.

In Media Queries Level 4, siamo diventati in grado di applicare le regole di stile a particolari contesti di interazione. Ad esempio, quando abbiamo un controllo molto preciso sul nostro cursore (come nel caso di uno stilo o un mouse) o un controllo meno preciso (come nel caso di un touch screen o di un gesto fisico):

@media (pointer: fine) / * Link e pulsanti più piccoli sono ok * / @media (pointer: grossolana) / * Link e pulsanti più grandi sono probabilmente una buona idea * /

Naturalmente, vogliamo offrire un valore accettabile in termini di dimensioni e spaziatura come ripiego per i vecchi browser e dispositivi.

Abbiamo anche la possibilità di determinare se il dispositivo è in grado di passare con il mouse su un elemento e di regolare l'interfaccia di conseguenza.

@media (hover: hover) / * le interazioni hover-correlate sono A-OK * / @media (hover: on-demand) / * le interazioni hover-correlate sono potenzialmente difficili, forse invece fare qualcos'altro * / @ media (hover: nessuno) / * Nessun hover possibile :-( * /

Dobbiamo ancora capire come tutto questo finisca per funzionare su dispositivi multimodali come il tablet Surface, comunque. Il disegno cambierà quando l'utente passa da una modalità di inserimento all'altra? Dovrebbe? A tal fine, fornisce anche le specifiche qualsiasi-pointer e any-hoverto, permettendoti di chiedere se qualunque il metodo di interazione supportato soddisfa i tuoi requisiti, ma ecco una parola di avvertenza dalle specifiche:

Progettare una pagina che si basa su hovering o puntamento accurato solo perché qualsiasi-hover o qualsiasi-pointerindicare che un meccanismo di input con queste funzionalità è disponibile, è probabile che porti a una scarsa esperienza.

Queste opzioni di query multimediale stanno iniziando a essere implementate in Chrome, Mobile Safari e Microsoft Edge, quindi vale la pena dare un'occhiata a queste.

Pointer Events è un'altra spec che sta iniziando a guadagnare un po 'di trazione. Generalizza l'interazione con un singolo evento piuttosto che costringerci all'esperienza del silos in mouse-driven, con comando a tocco, a penna, con (sospiro) a forza di forza, e così via.

È possibile rilevare in modo discreto il supporto per Eventi puntatore ...

if (window.PointerEvent) window.addEventListener ("pointerdown", detectType, false); 

... e poi gestirli tutti allo stesso modo o creare rami basati su pointerType:

function detectType (event) switch (event.pointerType) case "mouse": / * input del mouse rilevato * / break; caso "penna": / * input penna / stilo rilevato * / pausa; case "touch": / * input tocco rilevato * / break; default: / * pointerType è vuoto (non può essere rilevato) o tipo personalizzato specifico UA * /

Ovviamente, oltre a considerare il livello di accuratezza dei nostri utenti durante l'interazione con i nostri schermi, dobbiamo considerare anche la distanza potenzialmente maggiore a cui i nostri utenti stanno leggendo i nostri contenuti.

A tal fine, ho sperimentato l'unità viewport width (vw).

Per molto tempo, ho usato em per la larghezza massima del layout (quindi la lunghezza della linea è proporzionale alla dimensione del carattere). Io uso anche le dimensioni dei caratteri relativi. Con quello come base, posso usare una query multimediale che corrisponde alla larghezza massima e impostare la dimensione del carattere di base all'equivalente vw alla larghezza massima.

body larghezza massima: 64em;  @media screen e (min-width: 64em) body font-size: 1.5625vw; / * (1em / 64em) * 100 * /

Quindi l'intero disegno semplicemente ingrandirà il layout quando viene visualizzato oltre tale dimensione.

Se non si desidera attivare automaticamente qualcosa del genere, è possibile abilitarlo per attivare e disattivare JavaScript.

Le cose diventano ancora più folli quando si inizia a considerare dispositivi come gli HoloLens. E no, non ho ancora suonato con uno, ma puoi vedere una grande demo sul marchio 1:27 in questo video:

Ma l'idea di poter lasciare uno schermo virtuale ridimensionabile su qualsiasi superficie presenta alcune possibilità interessanti come utente e alcune sfide uniche come designer. HoloLens, ovviamente, porta con sé anche i controlli gestuali, quindi tenere conto di una varietà di tipi di input dovrebbe portarci molto lontano.

Allo stesso modo, dovremmo iniziare a pensare a quali esperienze possono e dovrebbero avere l'aspetto di quando stiamo navigando esclusivamente con il nostro sguardo. Il tracciamento dello sguardo ha le sue origini nello spazio di accessibilità come mezzo per fornire il controllo dell'interfaccia alle persone con un uso limitato o assente delle loro mani. Tradizionalmente, l'hardware di monitoraggio dello sguardo è stato di diverse migliaia di dollari, mettendolo fuori dalla portata di molte persone, ma questo sta iniziando a cambiare.

Negli ultimi anni, la potenza computazionale dei nostri dispositivi è aumentata poiché i costi hardware associati al supporto del rilevamento degli sguardi sono diminuiti drasticamente. Guardandosi attorno, è possibile vedere il tracciamento dello sguardo che inizia a muoversi nella sfera pubblica: molti smartphone e smartwatch possono riconoscere quando li guardi (o almeno lo fanno a volte). Questo è solo un breve passo dal sapere dove sullo schermo stai guardando. E quasi tutti gli smartphone di fascia alta sono ora dotati di una fotocamera frontale, che li rende candidati perfetti per fornire questo metodo di interazione.

In questo video puoi vedere una grande demo della tecnologia di tracciamento facciale del Sesame Phone dal marchio dei 18 secondi:

Il telefono Sesame è stato progettato per consentire alle persone di utilizzare uno smartphone senza usare le mani. Utilizza il tracciamento facciale per spostare un cursore virtuale sullo schermo, consentendo agli utenti di interagire con il sistema operativo sottostante e con le singole applicazioni. Supporta tap, swipe e altri gesti (tramite un menu di scelta rapida) ed è piuttosto impressionante nella mia esperienza. Tecnologia come questa consente alle persone affette da SM, artrite, Distrofia muscolare e altro di utilizzare uno smartphone e, cosa più importante per noi, navigare nel web.

The Eye Tribe e Fixational stanno lavorando allo stesso modo per portare l'eye tracking su smartphone e tablet. Il tracciamento dell'occhio è simile al rilevamento del volto, ma il cursore segue la messa a fuoco. Micro gesti: occhiolino, occhiolino, ecc. Consentono di interagire con il dispositivo.

Anche se la maggior parte del software di tracciamento dello sguardo imita un mouse e ha una sensibilità regolabile, l'accuratezza di esso come dispositivo puntatore non è fantastica. Quando ho usato il telefono sesamo, ad esempio, ho avuto difficoltà a controllare la posizione della mia testa per mantenere il cursore ancora al passaggio del mouse e fare clic su un pulsante. Sono sicuro che ciò migliorerebbe con la pratica, ma è sicuro dire che nell'interazione con lo sguardo, link e pulsanti più grandi, ben distanziati e più facilmente mirati sarebbero una manna dal cielo.

Finora, mi sono concentrato sui metodi di interazione che facilitano la navigazione e il consumo di contenuti. Ma per quanto riguarda la compilazione di un modulo? Posso dirti che scrivendo una mail lettera per lettera su una tastiera virtuale, usando il tuo viso, fa schifo ...

Per fortuna, la maggior parte di queste implementazioni gestuali sono accoppiate a qualche forma di riconoscimento vocale. Il Kinect, ad esempio, accetta i comandi verbali per navigare e svolgere compiti come compilare moduli. Il telefono Sesame supporta anche i comandi vocali per determinate azioni di base, dettare la posta elettronica e simili.

Insieme alla voce, i metodi di interazione alternativi di Kinect e Sesame Phone funzionano molto bene. Ma l'interazione vocale può reggersi da sola.

Molti di noi hanno familiarità con Siri di Apple, Google Now e Cortana di Microsoft. Questi assistenti digitali sono ottimi per recuperare informazioni da fonti selezionate e fare altre cose da assistente come calcolare un suggerimento e impostare un promemoria. Per quanto riguarda l'interazione con il web, tuttavia, non lo fanno ... ancora. Possiamo interagire con loro, ma non possono (necessariamente) interagire con una pagina web.

Esporre le informazioni memorizzate nelle nostre pagine web tramite HTML semantico e sintassi strutturate come microformati, microdati e RDFa dovrebbero alla fine renderemo i nostri contenuti disponibili a questi assistenti, ma non lo sappiamo davvero. I loro vari produttori non ci hanno dato alcun indizio su come farlo e, così com'è ora, nessuno di loro può cercare una pagina web e leggerla a voi. Per questo è necessario richiamare uno screen reader.

Ogni azienda offre uno screen reader di prima qualità. E tutti sono in grado di aiutarti a interagire con una pagina, aiutandoti anche a compilare moduli, senza dover vedere la pagina. Eppure, queste tecnologie non sono state abbinate ai corrispondenti assistenti. Probabilmente non ci vorrà molto prima che vediamo accadere.

Quando iniziamo a considerare come i nostri siti web saranno vissuti in un contesto vocale, la leggibilità delle nostre pagine web diventa cruciale. Una chiara prosa ben scritta e un ordine logico di origine saranno un'assoluta necessità. Se le nostre pagine non hanno senso quando vengono lette, qual è il punto?

Lo stratega dei contenuti Steph Hay vede l'interfaccia come un'opportunità per avere una conversazione con i nostri utenti. Presto lo sarà letteralmente.

È interessante notare che Microsoft ci ha dato una sbirciatina su come potrebbe essere la progettazione di comandi vocali personalizzati per i nostri siti Web oltre a ciò che il sistema operativo supporta in modo nativo con Cortana. In altre parole, ci permettono di insegnare al loro assistente.

In Windows 10, le app Web installabili possono includere un file VCD (Voice Command Definition) nella parte superiore della pagina per abilitare i comandi personalizzati:

Il file VCD di riferimento è semplicemente un file XML che definisce la parola chiave per l'app Web e i comandi che possono essere emessi.

Usando una sintassi molto semplice, il VCD identifica i pezzi opzionali di una determinata frase e le variabili che Cortana dovrebbe estrarre:

   Post di gruppo Post di gruppo aggiungi nota  aggiungi una nota messaggio utilizzando il post di gruppo [per favore] aggiungi una nota [that] noteSubject aggiungendo noteSubject a Group Post     

Questa particolare applicazione trasmette le informazioni acquisite a JavaScript per l'elaborazione. Esatto, Cortana ha anche un'API JavaScript. Piuttosto pulito.

Ma i computer tradizionali e i dispositivi mobili intelligenti non sono l'unico posto in cui stiamo iniziando a vedere esperienze basate sulla voce. Abbiamo anche voci disincarnate come Amazon's Echo e Ubi che sono completamente senza testa.

In questo momento, sembrano entrambi concentrati sull'aiutare la tua casa a diventare musica "più intelligente", la regolazione del termostato, ecc., Ma non è difficile immaginare che questi dispositivi si uniscano alla capacità di navigare e interagire con il web.

Nel prossimo futuro, le interazioni vocali con il web saranno interamente possibili. All'inizio probabilmente succhiano un po ', ma miglioreranno.

Farò una previsione un po 'audace: mentre il tocco è stato rivoluzionario in molti modi per migliorare l'accesso digitale, la voce sarà ancora più significativa. Le interfacce basate sulla voce creeranno nuove opportunità per le persone di interagire e partecipare al mondo digitale.

Poiché abbiamo pensato a come le esperienze che creiamo sono consumabili su una varietà di dispositivi, abbiamo il vantaggio di altre persone che lavorano sul web quando si parla di voce. Vediamo l'esperienza come un continuum, a partire dal testo.

Con l'avanzare della tecnologia vocale, saremo quelli che le persone considerano gli esperti. Daremo la possibilità alla prossima generazione di siti Web e applicazioni di diventare voice-enabled e così facendo miglioreremo la vita di miliardi. Perché "l'accessibilità" non riguarda le disabilità, riguarda l'accesso e riguarda le persone.

Certo, renderemo più facile cercare gli orari dei film e acquistare i biglietti per vedere gli ultimi trasformatori debacle, ma daremo anche più potere a circa 900 milioni di persone a livello globale - oltre il 60% delle quali sono donne - che sono analfabete. E questa è una popolazione che è stata ampiamente ignorata nella nostra rete testuale dominante.

Creeremo nuove opportunità per i poveri e gli svantaggiati di partecipare a un mondo che li ha esclusi. Potresti non essere consapevole, ma l'80% delle aziende di Fortune 500 pensa che Target, Walmart accetti solo le domande di lavoro online o tramite computer. Consentiremo a persone con competenze informatiche limitate o che lottano con la lettura di candidarsi per queste attività.

Possiamo contribuire a colmare il divario digitale e il divario di alfabetizzazione. Possiamo creare opportunità per le persone per migliorare le loro vite e la vita delle loro famiglie. Abbiamo il potere di creare più equità in questo mondo di quanto la maggior parte di noi abbia mai sognato.

Questo è un tempo incredibilmente eccitante, non solo per la comunità del design reattivo, non solo per il web, ma per il mondo! Il futuro sta arrivando e non vedo l'ora di vedere quanto tu sia fantastico!

Responsive Day Out 3: The Final Breakpoint si è tenuto a Brighton, nel Regno Unito, il 19 giugno 2015.

  • Ascolta questa presentazione su Huffduffer.
  • Leggi gli appunti di Orde Saunders dal mio discorso.
  • Leggi il riassunto di Hidde de Vries del giorno.

Più hands-on con lo sviluppo Web

Questo articolo fa parte della serie di sviluppo web degli evangelizzatori tecnologici Microsoft sull'apprendimento pratico di JavaScript, i progetti open source e le migliori pratiche di interoperabilità tra cui il browser Microsoft Edge e il nuovo motore di rendering EdgeHTML. 

Ti invitiamo a testare su browser e dispositivi tra cui Microsoft Edge, il browser predefinito per Windows 10, con strumenti gratuiti su dev.modern.IE:

  • Scansiona il tuo sito per librerie non aggiornate, problemi di layout e accessibilità
  • Usa