Quando progetti qualsiasi elemento all'interno del tuo sito web, fai attenzione e cura in modo maniacale la versione mobile di tutti questi elementi.

In questa lezione vedremo insieme come gestire la parte mobile della tipografia e dei pulsanti.

Abbiamo precedentemente creato la pagina del global Style dove abbiamo inserito degli elementi grezzi e abbiamo configurato il fonte da utilizzare nel nostro progetto di design e i colori.

Um ora vediamo come si gestiscono queste sezioni e queste parti nelle varie versioni mobile e tablet.

Facciamo un po' di esempi ad esempio all'interno della versi all'interno di una determinata pagina web, il titolo di un determinato articolo o di una determinata sezione viene ovviamente richiamato con il tag H T M l h uno in una dimensione che ho impostato inizialmente.

Se non sbaglio era cinquantaquattro pixel e va benissimo per una versione desktop, ma non va bene per una versione mobile perché in alcuni casi il testo potrebbe uscire dallo schermo.

Quindi sicuramente i navigatori non avranno un'esperienza di navigazione e una user experience ottimale.

Ma per di più Google probabilmente non posizionerà il nostro sito come eh speriamo perché ci sono degli elementi da sistemare.

Quindi in queste azioni adesso vedremo come sistemare in modo accurato e dettagliato tutte queste parti.

Abbiamo visto che, um, attraverso questo controllo in basso a sinistra possiamo accedere alla modalità e in alto abbiamo un controllo per i vari dispositivi switch per la parte mobile possiamo avere un controllo completo di tutto quello che c'è pagina per pagina.

Ora tornerò nella nell'impostazione del sito dove abbiamo precedentemente inserito i global style, quindi su tipografia e vado ad aprire uno cliccando su uno che è precisamente questo elemento e cliccando sull'e della matita posso ovviamente modificare la dimensione del font attraverso questo tre posso modificarlo e fare lo switch da desktop, tablet e mobile, ma quello che voglio mostrarvi è la possibilità di modificare la dimensione del fondo, ma anche il peso, quindi grassetto o regola per ogni tipo di dimensione di device, quindi in questo caso rispettivamente per il mobile e per il tablet.

Ad esempio, precedentemente abbiamo inserito la versione la dimensione per gli h uno nella versione desktop a cinquantaquattro pixel, ovviamente nel mobile, specialmente quando avrò delle dei titoli o dei testi.

Un po' più lunghi potrebbe essere un po' um non ottimale, però lettura del dell'utente e in più potrebbe anche uscire dallo schermo quella porzione di testo, essendo troppo lunga o troppo grande.

Quindi che cosa succede che attivando lo switch nella versione mobile e cliccando sempre sull'e della matita posso definire quanto sarà grande e quanto dovrà essere grande la dimensione del font.

In questo caso, magari supponendo che nella versione desktop va benissimo cinquanta quattro pixel e come vedete nell'esempio il testo a cinquanta quattro pixel uscirebbe dallo schermo e quindi chiaramente sarebbe penalizzante sia per google ma anche per l'esperienza di navigazione dell'utente lo andrò a ridurre prima lo avevo impostato a trenta, magari potrebbe essere un buon compromesso a trenta trentadue pixel e così via.

Lo possiamo fare anche per altri elementi, come ad esempio h uno, due, tre e così via.

La cosa interessante è che oltre a cambiare il font, ma non è una cosa che probabilmente farete, perché non ha molto senso avere un font per la versione desktop e un p diverso per la versione mobile.

Però la cosa interessante è che magari potrebbe tornarvi utili è in alcune versioni mobile non inserire la stessa formazione a livello di peso, quindi magari potreste scegliere un peso più leggero, magari passando da settecento a cinquecento, così via però è una cosa che potete fare.

Io in linea generale cerco di essere sempre uniforme.

Quello che vado a cambiare in questa parte è la dimensione e per far sì che si veda correttamente in tutti i dispositivi mobile e questo lo potete fare per tutto.

Quindi per gli h due, per gli h tre, gli h quattro e così via.

Ad esempio anche per il paragrafo in questo caso io avevo inserito precedentemente sedici pixel, se non sbaglio tornò nella versione desktop pixel um sedici pixel nella tipografia che potrebbe anche andare bene in alcuni casi diciotto pixel nella versione dex, quindi magari dare una maggiore um leggibilità e aumentando la dimensione del font.

Però se poi lo andiamo a vedere nella versione mobile forse diciotto pixel potrebbe essere un po' troppo grande, quindi stessa cosa switch nel mobile per tre clicco sull' editing della modifica e vado ad assegnare la dimensione del mio font.

Se precedentemente era diciotto nella versione mobile potrebbe andare già bene sedici o magari anche quindici pixel.

In questo caso io lo lascerò a sedici perché mi sembra um ottimale come visualizzazione nella versione mobile e la stessa cosa la potete fare anche per la versione tablet.

Chiaramente io ora per in questo esempio non ve lo mostrerò, ma funziona allo stesso identico modo e la stessa cosa lo potete fare, quindi sia per le immagini sia per i titoli, sia per i paragrafi e anche per i pulsanti.

Infatti tornando indietro e andando la voce dei pulsanti avete lo stesso controllo.

Quindi click sulla classica matita porterei su un mobile e posso andare a definire la dimensione.

Ad esempio potrei definire che tutti i pulsanti nella versione mobile vengono mostrati a dodici pix in questo caso forse un po' troppo piccolo, però magari potrei impostare a quattordici o a quindici.

Magari vorrei utilizzare un semi grassetto al posto di un semi di un grassetto e posso chiaramente farlo.

E una cosa interessante che potrebbe tornarvi utile è la trasformazione.

Magari se volete inserire un maiuscolo in tutti i pulsanti in automatico elemento tramite questa funzione lo fa a livello globale su tutti i pulsanti.

Ma altrimenti se non vi interessa potete lasciarlo come predefinito l'altra cosa interessante che potrebbe tornarvi utile quando gestite gli stili dei pulsanti è la spazzatura e il rientro perché magari, um potreste voler un pulsante con degli spazi minori sia sopra a destra sotto che a sinistra.

In questo caso io posterò cinque.

Come vedete chiaramente si va un po' a rimpicciolire nella versione adesso li riporto da per farvi un confronto.

Nella versione desktop avevo impostato il rientro a quindici sopra e sotto e a venti a destra e a sinistra nel mobile.

Chiaramente lo andrò un po' a ridurre e quindi possiamo accedere al controllo anche di questa sezione.

Torno sul mobile tre, vado a bloccare gli elementi e magari possiamo fare dieci sopra dieci sotto e magari dodici a destra e dodici a sinistra.

Forse è un po' troppo piccolo, magari possiamo anche aumentarlo così e a sedici direi direi che ci può ci può stare e a questo punto magari potremmo anche ridurre leggermente la dimensione della della tipografia, quindi del fonte.

Vado ad aggiornare questo per farvi vedere quindi che la versione mobile può essere aggiornata attraverso un suo cruscotto.

Um all'interno di elemento quindi è molto importante in questa lezione.

Quindi facendo un breve recap quello che ho voluto mostrarvi è la potenzialità di questo team builder che effettivamente ti accede a ti dà la possibilità di accedere al controllo completo di tutte le sezioni e soprattutto per tutte le versioni di vari device mobile e tablet che ormai oggi fanno un sacco la differenza e ci invitano chiaramente a pensare prima allo sviluppo della versione mobile piuttosto che della versione desktop.

Quindi in linea generale, in questa fase cercate di definire lo stile per ogni device, quindi impostate tutto il set in grafico di colori e di dimensioni dei vari font h uno h, due h tre, eccetera, eccetera dei paragrafi dei link interni sia per per la versione mobile, desktop e tablet.

A quel punto potete salvare e siete pronti poi per passare alla progettazione delle restanti sezioni?