Bene, ma torniamo un po' a parlare di editoria e le basi per iniziare a progettare prodotti che siano responsive, che siano flessibili sui vari device su cui andremo a progettare è bene sapere quando si inizia a progettare qualcosa che dovrà, come dire, eh? Essere trasversale dal nostro cellulare a computer desktop tablet è bene sapere quali sono gli approcci possibili nella progettazione responsible.

Diciamo che ad oggi due sono i macro temi e due sono gli approcci possibili in ambito responsible.

Il primo di cui andremo a parlare è il la tipologia ad Active che cos'è questa metodologia nel mondo dei responsi è un approccio come possiamo leggere, in cui vengono realizzate versioni differenti, ad esempio una mobile, una tablet, una desktop della stessa interfaccia, ciascuna di esse ottimizzate per il dispositivo specifico.

Che cosa vuol dire questo vuol dire che intanto in termini di design, più lavoro per noi perché chiaramente dovremmo proprio anche progettare tre elementi nuovi all'interno dell'interfaccia in termini di sviluppo anche è un un peso e un carico in più, perché questo vuol dire che il lato tecnico cosa succede? Succede che il nostro browser riconosce su quale deve se ci stiamo connettendo e quello che fa è mandare è, come dire elementi e attributi specifici solo per quel device.

Ok, contenuti che sono stati pensati e progettati solo per quel deve.

Quindi immagini specifiche, pattern specifici insomma, tutta una roba fatta ad hoc.

Questo è un po' diverso dal concetto classico di fluido a cui siamo abituati, mentre quando le viene in mente il concetto di responsive, quello la prima cosa a cui pensiamo è qualcosa che scala e si riduce la metodologia adatti invece un pochino diversa.

Cerca di costruire, proprio come possiamo vedere da questa slide, qualcosa di ad hoc per ogni spa specifico supporto.

Ok, ma abbiamo detto se è più lavoro per i designer, più il lavoro per gli sviluppatori, Perché? Perché preferire questa modalità qua? Beh, perché al centro noi abbiamo sempre gli utenti e questa modalità qua in moltissimi casi, ovviamente può essere più performante per gli utenti.

Questo perché perché abbiamo costruito magari immagini più leggere.

Se siamo sui dispositivi mobile, abbiamo costruito dei pattern specifici di navigazione quando ci troviamo sul mobile o ovviamente anche sul desktop.

Quindi quello che possiamo dire è che questa modalità, sebbene è più onerosa per tutti gli stakeholder diciamo che devono costruire il prodotto è senz' ltro, migliore dal punto di vista degli utenti.

Un esempio classico di sito adaptive quello per esempio di Amazon.

Noi non ce ne rendiamo conto, ma in realtà quello che fa Amazon è proprio costruire due piattaforme diverse per il backstop e per il mobile.

Spesse volte i siti adatti ve li riconoscete, anche perché cambiano proprio nella nomenclatura del dominio che trovate in alto, per esempio su youtube.

Se andate da mobile l'indirizzo l'urlo specifico non sarà piu' youtube punto com ma sarah m punto youtube punto com perché quella m sta per mobile la versione mobile viene proprio richiamato, addirittura un dominio di secondo livello.

Adesso, per esempio, andiamo a vedere Amazon ve lo faccio vedere, così capiamo come come cambia un sito responsivo Guardate qui questo è Amazon.

Quando vado a ridurre l'interfaccia vedete che ovviamente finché Puo' sta scalando quindi qualcosa, le le cose si riducono, ma non sta cambiando fondamentalmente l'asset della navigazione in alto.

Altri elementi insomma, di navigazione che sono presenti.

Come facciamo a vedere realmente come un sito cambia e diventa adaptive da ex papamobile? Possiamo farlo in maniera molto semplice, andando sui tre puntini in alto a destra oppure facendo tasto destro con ispezione dentro al al nostro browser Chrome.

Per esempio, se andate qui in alto, a destra, a sinistra, vedete che cioè questi Concina qua che mi Eh sì, mura il caricamento della pagina da dispositivo.

Posso scegliere il tipo di dispositivo che voglio simulare.

Ora vi sembrerà tutto identico, ma basterà fare refresh con la stessa modalità e vedete che cosa è successo.

Sta cambiando proprio l'interfaccia.

Il menù è diventato questo hamburger menu La parte di ricerca è predominante in maniera diversa e come vedete proprio tutta l'interfaccia sta cambiando e si sta adattando per pattern piu' specifici mobile.

Questa stessa identica cosa la vediamo anche su YouTube.

Proviamo ad aprire YouTube così lo vediamo al volo.

Ecco qua.

Questo è youtube da backstop.

Provo a ridurre la mia schermata.

Si, è vero.

Vedete cia qualcosa di responsi perché chiaramente questa parte diventa un hamburger menu.

Queste icon cine si comprimono e lo spazio di ricerca viene compresso.

Questa è comunque una persone responsive.

Ma se la stessa identica pagina io la chiamassi sempre con Ispeziona vado ad aprire la mia modalità di sviluppo e a dirgli che questa pagina.

Vogliamo vederla tramite il simula, la simulazione di un dispositivo facendo refresh guardate cosa succede.

Provo a farla un po' piu' piccola, così si vede meglio quello che succede e adesso ve lo faccio vedere meglio scrollando guardate addirittura quello che non succedeva prima la è diventata quasi una web app youtube perché in basso e abbiamo una tabaré, quindi che cosa succede? Youtube ha detto ok, sto intercettando il fatto che tu sei da mobile ti ricostruisco proprio una pagina web da capo, quindi non responsivo izzo gli elementi quindi non li mando semplicemente a capo li faccio più piccoli, ma credo proprio dei nuovi pattern di navigazione.

Come vedete per esempio qui in basso abbiamo una bara che è tipica della navigazione mobile e tutto in alto è compresso e finalizzato a quel tipo di navigazione.

Se adesso io rito lessi la modalità di simulazione del dispositivo e ricaricarsi.

Ecco qua che mi tornerebbe la versione dell'ex top di YouTube.

Questo solo per farvi capire che questa tipologia di siti, soprattutto su piattaforme così complicate, viene molto utilizzata.

È chiaro che se facciamo una landing page non ci sogniamo di fare adattive, cioè di creare proprio due prodotti diversi per backstop per mobile.

Ma se stiamo creando piattaforme complesse potrebbe essere anche il caso di e-commerce.

Passare alla tipologia adattivi invece che responsive può essere diciamo vincente.

È chiaro l'onere di chi sviluppa e di chi disegna è maggiore, ma sia in termini di performance che di usabilità per gli utenti, per i nostri utenti che lo stanno utilizzando è sicuramente un approccio vincente.

Quindi, come vi dicevo, Amazon lo è.

YouTube usa un approccio adaptive, lo usa anche e booking punto com vivi, vivi.

Come dire vi invito a navigare City a scoprire quali di questi, senza che voi lo sapevate, usa un approccio adaptive piuttosto che responsi.

Ma quindi quali sono questi benefici? Ovviamente, come abbiamo già detto, performance e il contesto d'uso.

Questa tabella che stiamo vedendo adesso qui sulle nostre slide ci fa capire molto bene che anche semplicemente solo per l'approccio della performance scegliere la modalità ad active può essere assolutamente vincente.

Guardate quanto ci mette per esempio, nella modalità ad active a rispondere la pagina al caricamento cinquecento sessantotto millisecondi rispetto, per esempio, mille e duecento millisecondi nella versione responsive.

In altri casi, per esempio, il caricamento di tutta una pagina responsi, adesso ne prendiamo una standard.

In questo caso potremmo è quella di di Amazon, mentre il caso della è un prodotto responsible potrebbe metterci quattromila millisecondi, quindi quattro secondi a caricare tutta la pagina.

Nel caso di una versione adaptive potrebbe metterci una virgola cinque secondi e vedete che qui, insomma, siamo quasi tre volte inferiore il tempo di caricamento quindi questa modalità ha sicuramente tantissimi benefici per l'utente.

La seconda modalità, invece, è quella più classica, nell'approccio responsive, quella appunto fluida, responsive e viene realizzato un unico legale i cui contenuti rimangono invariati tra i vari device.

Se si adattano per grandezza e spesso riposizionamento per cercare di offrire, ovviamente la migliore esperienza di utilizzo.

Quello che cambia, ma appunto rispetto all'approccio di prima, è che sia il designer che lo sviluppatore fondamentalmente si approcciano con un unico layout, pensando in maniera più fluida.

Normalmente quello è l'approccio più classico è quello dello dello shifting.

Che cosa succede? Che quando abbiamo più contenuti, magari anche più colonne, la colonna di destra contenuti che sono a margine vanno a slittare sotto nell'interfaccia più piccole.

Quindi sul tablet, sul backstop.

Ma ovviamente anche qui, parlando sempre di performance qual è il problema.

Il problema è che se noi abbiamo immagino ne grande così apertura nella nostra homepage della nostra lending del nostro sito internet Quell'immagine.

Sebbene noi la rimettiamo più piccola sul nostro device, All'origine sta mantenendo e si sta portando dietro tutto il carico di peso dell'immagine che abbiamo dovuto vedere ad alta risoluzione sul backstop.

Ok, questo è quello che avviene chiaramente, per esempio per i siti di notizie.

Qui vediamo un esempio Call The Guardian, ed è quello che succede appunto con altri siti di notizie.

In questo caso, per esempio, io faccio sempre vedere questo per far capire come la responsabilità responsabilità si sta comportando.

Adesso ve lo faccio vedere.

Ok.

The next Web è un altro sito di notizie e qui si capisce molto bene come ci sia un approccio responsivo alle immagini, dove innanzitutto, vedrete anche che qui dobbiamo imparare come designer a non avere un controllo così dettagliato.

Dell'immagine perché sopra tutto, quando ci muoviamo in ambito responsive, è molto raro che L'immagine rimanga nella ratio originale, quindi dobbiamo essere in grado di scegliere sempre immagini che abbiano un focus abbastanza centrato.

Questo perché? Perché, come state vedendo qui su The Next Web quando vado a ridurre a un certo punto la mia interfaccia, quello che succede è che il suo contenitore progressivamente si troppa, ma l'immagine rimane, diciamo centrata è sia verticalmente e orizzontalmente.

Questo vuol dire appunto che dobbiamo scegliere immagini che siano in grado di resistere a questa questa flessibilità sia ora orizzontale che verticale.

Questo però è proprio il classico approccio responsive dove semplicemente gli oggetti sono gli stessi, ma si vanno di volta in volta a predisporre in modo diverso.

Ovviamente dobbiamo cercare di capire quali sono gli approcci diversi alla progettazione è responsive.

Abbiamo due modi abbiamo visto già nelle precedenti elezioni, abbiamo parlato di mobile, forse ci abbiamo detto che in moltissimi casi quando si progetta e si ha come focus quello della del mobile, quindi magari sappiamo che la maggior parte dei nostri utenti approcciano da mobile.

Noi iniziamo a progettare proprio da quel touch point lì, ma invece è tutto un altro flusso che potrebbe essere appunto detto definito il contrario che responsive rétro fitting.

In lui invece si parte da un layout backstop per andare a progressivamente togliere fino ad arrivare al mobile.

Nessuno dei due approcci è più corretto rispetto all'altro, ovviamente dipende sempre, come abbiamo già detto, dalle necessità e dal nostro target.

Quindi, come sempre, se noi stiamo facendo un commercio di prodotti professionali che sicuramente chi li compra gli farà un ufficio dall'acqua dal fare un acquisto dal proprio ufficio comodamente seduto davanti alla sua scrivania, possiamo tra tranquillamente ipotizzare di partire dal destro.

Se stiamo facendo invece, magari per dire un sito di notizie dove possiamo ipotizzare anche che per esempio la fruizione molto da mobile immaginate in tutti quei passaggi in cui le persone leggono nel commuting time o il tempo per esempio per andare al lavoro il tempo mentre aspettano il tempo mentre fanno qualcos'altro e spesso hanno un device in mano.

In quel caso, per esempio, sarebbe più utile partire da una progettazione mobile.

Però ripeto, non esiste una versione migliore.

Dell'altra l'importante è sapere per qual è l'approccio da cui partire.

Irresponsible retrofit, come vi dicevo, è quello di partire dalla persone dex top andare progressivamente a scalare verso il mobile.

Ovviamente bisogna stare molto attenti ed essere molto bravi a maneggiare questa tipologia di approccio.

Perché che succede quando noi iniziamo a progettare sud? Stop, abbiamo tantissimo spazio a disposizione e quindi siamo lì a mettere veramente tanta, tanta roba.

Cosa succede che pian piano che scendiamo nei vari black point tutta la roba che abbiamo messo è difficile farla entrare all'interno dell'approccio mobile.

Quindi si rischia spesso e di non riuscire ad organizzare, a far fluire bene i contenuti perché siamo partiti da un trust point dove tutto era possibile e siamo andati diciamo, a vincolarsi solo in fase finale, ovviamente, mentre quando facciamo al contrario, partendo da un touch point che è già molto vincolante, quindi mettiamo solo l'essenziale pian piano che ci andiamo ad allargare verso la versione desktop, invece andiamo ad arricchire con altre cose accessorie, ma che comunque non hanno inibito, non hanno precluso la fruizione da mobile.

Quindi questo approccio invece di cui stiamo parlando adesso è l'approccio mobile first quindi significa ottimizzare l'esperienza partendo dal device, come possiamo vedere da questa immagine che succede se noi diciamo partiamo da qua e poi andiamo pian piano ad aggiungere elementi? Sicuramente anche a livello di gerarchia dei contenuti saremo in grado di fare un'ottimizzazione perch e partiamo proprio dall'essere razziale e l'essenziale è quello che va a visto a partire dal mobile.

Tutto quello che va aggiunto poi nei passi successivi.

Dax tablet sono elementi ovviamente importanti, ma che sono comunque diciamo accessori rispetto alla navigazione è mobile, quindi, come abbiamo già detto, ottimizzare mobile forse aiuta molto il designer anche in termini di concept.

Quindi progettare partendo da quel touch point lì ci rende dei designer.

Miglio, perché ci relazioniamo subito con quelli che vengono chiamati vincoli con i constraint che ovviamente ci sono anche nella progettazione dei device.

Qui, per esempio, possiamo vedere un esempio di una dashboard dove guardate a sinistra come carica è piena, abbiamo una sai bar con tanti elementi, abbiamo una barra, una navigation bar a destra con tanti elementi che ci stanno raccontando altre visualizzazioni della dashboard.

Ma se noi landry ridurre all'essenziale in quello che serve della dashboard da mobile vedete che tutte queste cose sono state raggruppate e fruite in maniera diversa a seconda appunto della navigazione.

Per esempio la cyber è diventata un hamburger menu in alto a destra, quindi lo vediamo, ma scorrendo sotto all'interno dell'interfaccia mobile sicuramente troveremo la barra dei topi user del calendar.

In gergo si dice shift, quindi mandati a capo all'interno di questo layout, sicuramente fruibili ma fruibili in un secondo momento perché in questo ad Auschwitz, ovviamente la parte piu' importante era la parte di over view ed i grafici che vediamo appunto in apertura pagina qui lo stesso esempio, ma un esempio ancora più particolare nell'approccio responsible mobile forse è quello delle tabelle.

Le tabelle sono ovviamente un grande casino da far fluire da mobile.

E immaginate queste tabelle con otto dieci colonne diventa veramente impossibile farle fruire su un devi verticale così piccolo per anni si si è diciamo, utilizzata questa questa formula per cui si metteva la tabella si crollava in orizzontale in verticale, ma capite bene che si perdeva la versione, la visione sinottica dei dati.

E allora è nato un nuovo approccio, per esempio per la gestione della lettura dei dati delle tabelle su mobile, che io trovo veramente molto interessante è quello di vedete qui a sinistra di fare in modo che ogni riga che si trova sulla tabella deke stop diventa un blocco, un unico widget da leggere all'interno del mobile.

Come vedete che cosa succede? Le bambole vengono replicate tutte le volte in ogni blocco verticale sul mobile e ogni blocchetto verticale rappresenta la lettura di una riga in orizzontale su backstop è veramente come una trovata ingegnosa.

E se capite come diciamo questo approccio, di traslare un contenuto così fortemente orizzontale su un mezzo verticale, li capite? Diciamo veramente qual è la forza di saper pensare in maniera laterale l'approccio responsive e questo vale anche, per esempio, per siti piu' diciamo d'impatto.

A me spiace sempre citare il sito di oval money, la landing page molto molto interessante perché per esempio, qui si capisce come gli elementi vengono ripensati proprio per il touch point specifico.

Per esempio, in questa fascia centrale di oval money della sua landing page si predispongono vari widget che fanno vedere alcuni elementi cardine dell'applicazione che sono appunto gli obiettivi che la realizzazione degli obiettivi all'interno della palma oval money.

Questi obiettivi sono totalmente sparsi come delle carne frutta flottanti all'interno degli outback stop quindi si disperdono nella larghezza generale degli out, ma quando ci troviamo negli out verticale del mobile queste carte vengono messe in una profondità verde verticale, come uno stack appunto di di carte che stanno in profondità verso l'asse delle z e cambiano totalmente l'approccio.

Ovviamente non cambia il significato per l'utente riesce a capire a percepire lo stesso la comunicazione, ma è stata perfettamente ottimizzata per quel tipo di touch point.

Ovviamente attenzione, questo è un disclaimer, un disclaimer super importante.

Quando progettiamo responsible dobbiamo sempre valutare, ovviamente l'approccio più opportuno da progetto a progetto, come abbiamo detto prima, ad esempio lese nel caso, nel caso in cui mobile sia trascurabile rispetto alla controparte desktop, non c' è niente di male a iniziare a progettare da lì non diciamo non date retta ai puristi che dicono sempre un forse, ovviamente non dobbiamo essere è come dire così perentori nella nostra scelta.

Dobbiamo valutare di volta in volta l'approccio.

Da adesso daremo qualche piccola pillola per qualche becks practice per la progettazione responsible.

Ovviamente abbiamo detto si tratta tutto di gestire al meglio i contenuti.

E qual è il cardine di tutta questa? Tutta questa modalità è quello di cercare di definire le priorità maggiori, cioè quello che dobbiamo fare come designer e progettisti.

E dobbiamo farlo anche a quattro mani con chi si occupa di content.

È di rendere subito funzionalità importanti in primo piano per fare in modo di nascondere quelle secondarie, in modo che i i contenuti più rilevanti comunque possano essere scansionati in primo piano.

Questo non vuol dire necessariamente e leader e cancellare altri contenuti, ma semplicemente farli venire in un secondo momento.

Un esempio molto chiaro che mi piace citare è la pagina di TripAdvisor Guardate come è gestita bene la gerarchia delle funzionalità.

Se la apre su Dex troppo, tutta la parte in alto con questi grandi pulsantone che mi fanno navigare per macro attività in secondo piano proprio al centro della pagina o il focus sul campo di ricerca e giù a scendere tutti diciamo, um attività suggerite da tripadvisor.

Come si trasforma questo su su mobile? Ovviamente abbiamo il menu' ad hamburger che sta nascondendo tutte le voci che non vediamo più, tipo gli avvisi, i viaggi, anche l'accesso in origine entra che prima è così preponderante nel dec stop all'interno del mobile invece viene nascosto è dentro l'hamburger menu' perché per TripAdvisor, comunque primario è sud su mobile la funzionalità della ricerca.

Quindi tutto il resto viene nascosto e messo dentro.

All'hamburger Luke, come vedete quando si apre, replica integralmente tutte le i pulsantone, le chips che troviamo nel Dexter Puo' piu' tutte le funzioni secondarie che erano nel menu è in alto a destra della versione extra.

Per questo è proprio un approccio diciamo fatto bene, perché sta cercando di stabilire delle gerarchie nelle funzioni.

Quindi non si tratta solo di approccio estetico, ma si tratta di capire dove voglio mettere l'accento sulle priorità all'interno della mia progettazione.

Altra cosa fondamentale è quella di imparare ad utilizzare pattern specifici.

Come abbiamo detto, che cosa sono i pattern e i pattern? Sono quegli elementi di navigazione ricorrenti che ormai sono condivisi, compresi, e sono in grado di capirli tutti quanti.

Quindi appunto una bar, un carosello, quindi la classica galleria dove abbiamo i tre puntini che ci fanno scorrere tra gli oggetti.

Un accordo al menu', quel classico menu con la frecciatina che tappa quando mi apre e mi fa scoprire nuove informazioni.

Questi sono i pattern e quello che dobbiamo imparare è che nel mobile esistono dei partner più indicati, più specifici rispetto a quelli di ex top.

E soprattutto dobbiamo capire e iniziare a ricordarci che C' è una grande.

Diciamo un cambio di paradigma quando andiamo dal Dexter Palmo Buy, mentre sul destro poi noi ci muoviamo con il mouse con acqua.

Da comunque ci muoviamo con un indicatore di posizione molto sa specifico.

Noi possiamo quasi cliccare al pixel quando iniziamo a muoverci su dispositivi mobili.

Noi non abbiamo più un cursore così specifico e abbiamo un diciamo un nuovo componente in più che entra in gioco il nostro dito, che copre anche parte dell'interfaccia e che è grande, non è piccolo come un cursore all'interno di una pagina back stop.

Quindi dobbiamo anche iniziare a pensare che per esempio, banalmente quando noi ci spostiamo sul sulla versione mobile non avremo il rollover, come per esempio molti designer fanno e nascondono delle informazioni al rollover.

Vado sopra ad un oggetto, mi arriva fuori l'informazione immaginate che avete progettato così qualcosa andrete sul mobile quell'informazione sarà totalmente nascosta perché non esiste il roll over sul mobile che cosa si fa? Andrebbe pensata una visione alternativa per cui magari nel mobile si mette una piccola heidi info accanto a questo pulsante che tappando la mi fa uscire fuori la stessa informazione.

Questo è solo un piccolo diciamo su un trucco, ma per farvi capire che dovete proprio ripensare la progettazione, eh? E guardate per esempio, come fa Airbnb Airbnb per esempio, quando trasforma ed è quello che abbiamo già visto su youtube quando trasforma la pagina immobile invece di lasciare il menu in alto a destra, che sarebbe anche molto scomodo per il mobile da navigare utilizza una tab bar in basso, come se fosse un'applicazione.

Questo ci aiuta molto più rapidamente ad arrivare a, diciamo, a navigare in maniera friendly.

Quello che in gergo viene detta la zona diciamo aurea migliore, perché quando navighiamo con un cellulare noi navighiamo sempre con i pollici verso il basso.

Quindi arrivare a navigare un menu in alto diventa estremamente scomodo.

Ultime considerazioni sulle interazioni Dobbiamo ricordarci che qualsiasi cosa noi andiamo a tappare sullo schermo deve essere almeno grande.

Quarantaquattro quarantotto punti.

Questo perché? Perché il nostro dito di media, ovviamente chi più più, più o meno occupa quella porzione di spazio all'interno del nostro del nostro schermo.

Quindi non possiamo fare pulsanti nei piccoli e molto vicini, perché altrimenti ci sarebbe una ambiguità nel tapping.

Potrei tappare contemporaneamente due pulsanti piuttosto che un altro.

Oppure potrei non tappare per nulla bene il nostro.

Il nostro diciamo pulsante è sullo schermo.

Ultimo suggerimento Ibex practice per progettare responsi è quello di ricordarvi che sempre siamo partiti dalle griglie sempre ritorniamo alle griglie.

Questo vuol dire che quando progettiamo su black point diversi andiamo a ridurre le colonne, ma la nostra progettazione sarà sempre responsive.

Sarà sempre appoggiata su quelle colonne, quello che cambia semplicemente il numero di colonne su cui andiamo progettare dodici sul backstop, otto sul tablet e quattro ma anche due sul mobile.

Queste sono alcune becks practice.

Diciamo che bisogna tenere in considerazione quando si passa un progetto dalla versione Deke stop alla versione tablet alla versione mobile.

Bisogna ovviamente prendere confidenza con diciamo con tutte queste regole.

Ma quello che vi invito a fare, soprattutto guardare, spiare, copiare, come stanno facendo gli altri.

Quindi ogni volta che cercate di emulare di simulare qualcosa di un sito che avete visto, mi raccomando, fermatevi a fare uno screenshot di come lo vedete sul desktop, di come lo vedete sul tablet di come lo volete sul mobile, perché da lì potrete imparare veramente è tantissimo di come si sta simulando la progettazione responsive