Dispositivi

In Sitely, quando parliamo di dispositivi, ci riferiamo all'adattamento dei layout delle pagine, per meglio adeguarsi a diversi dispositivi. In molte applicazioni di sviluppo web, i layout delle pagine vengono spesso modificati automaticamente dal software in base ad una infrastruttura sottostante. Anche se questo può essere comodo per alcuni, può risultare restrittivo per chi desidera essere un po' più creativo riguardo all'aspetto delle pagine su dispositivi con diverse dimensioni dello schermo. Questo porta spesso gli sviluppatori di siti web a dover scavare sotto la superficie per apportare piccole modifiche ai layout o al codice prodotto da tali app. In Sitely, adottiamo un approccio diverso basato sulla sua natura di design libero. L'uso di layout per più dispositivi produce pagine comunemente definite responsive.

Quando apri il selettore di dispositivi di Sitely, ti verranno presentate informazioni sul dispositivo attualmente selezionato. Il valore predefinito è Desktop PC con una larghezza di 1200 pixel. Si presenta così.

Questo dovrebbe essere il tuo punto di partenza per tutti i nuovi progetti. Inizia semplicemente ad aggiungere e disporre i contenuti sulla tua pagina per creare la versione desktop standard della tua pagina web. Quando inizi un nuovo progetto, cerca, se possibile, di utilizzare gli stili di testo integrati di Sitely. Ad esempio, usa lo stile Titolo per i tuoi titoli principali, lo stile Corpo per il testo del corpo, ecc. Puoi cambiare il font, le dimensioni e i colori di ciascuno stile mentre inizi a creare i tuoi contenuti, e poi aggiornare gli stili pertinenti cliccando sul pulsante Applica le modifiche sotto il nome dello stile, nel pannello degli stili.

Creare e utilizzare gli stili in questo modo sarà molto utile quando, in seguito, si tratterà di adattare il layout della tua pagina per diversi dispositivi. Continua a costruire la tua pagina desktop fino a quando non sarà esattamente come la desideri. A questo punto, potresti voler considerare di suddividere la tua pagina in Blocchi di Layout, magari un blocco per la tua navigazione, un altro per la tua sezione di testa e diversi altri per ciascuna sezione visivamente definibile della pagina. Per creare un blocco di layout, seleziona tutti gli elementi individuali della pagina che desideri includere nel blocco, fai clic con il tasto destro e scegli l'opzione Sposta in blocco di layout, dal menu contestuale.

Questo incapsulerà comodamente tutti gli elementi selezionati in un blocco che può essere spostato su o giù nella tua pagina senza disturbare la posizione degli elementi individuali all'interno del blocco. Inoltre, il blocco di layout può spostare tutti i blocchi di layout sottostanti mentre sposti gli elementi sulla pagina. Questa è un'altra funzione che si rivelerà utile quando si dispone delle pagine per altre dimensioni di dispositivo. Nota: Quando un blocco di layout viene creato per la prima volta, userà uno dei colori wireframe di Sitely. Questo serve solo a farti sapere che hai creato un blocco di layout e lo rende immediatamente visibile nell'area di lavoro. Puoi rimuovere o cambiare il colore in qualsiasi momento modificando il riempimento nel pannello degli stili.

Aggiungere Nuovi Dispositivi

Una volta completata la tua pagina desktop, sei pronto per aggiungere un nuovo layout di dispositivo. Ti consigliamo di non iniziare ad aggiungere nuovi layout di dispositivo fino a quando non hai completato la tua pagina desktop. Una volta che sei pronto, fai clic sull'icona di selezione del dispositivo nella parte superiore dello schermo e clicca sul pulsante etichettato Personalizza Layout Dispositivo. Questo ti presenterà un elenco di altri dispositivi per cui puoi progettare. La nostra raccomandazione è di iniziare aggiungendo l'opzione Smartphone in modalità Portrait con una larghezza di 320 pixel.

Fai clic sull'elenco a discesa etichettato Non presente e scegli l'opzione Layout personalizzato. Questa azione creerà una nuova area di lavoro con tutti i tuoi contenuti scalati per adattarsi al nuovo schermo del dispositivo.

La prima cosa che noterai è che il testo è piccolo e quasi illeggibile. Inoltre, tutte le immagini sono state scalate proporzionalmente. Chiaramente, questa pagina necessita ora di alcune riorganizzazioni per essere adatta alla visualizzazione su uno schermo di smartphone. Tuttavia, se hai seguito il nostro consiglio precedente riguardo all'uso degli stili di testo, tutto può essere scalato a una dimensione più accettabile apportando modifiche ai tuoi stili di testo nel pannello degli stili.

Ricorda, gli stili di testo vengono applicati a livello di dispositivo. Questo significa che eventuali modifiche apportate a uno stile di testo si applicheranno solo al dispositivo su cui stai lavorando. Nel nostro esempio, lo stile di testo del corpo nella variante desktop era impostato su 15pt. Quando passiamo al layout per smartphone, è stato ridotto a 4pt. Possiamo ora cambiare questo stile di testo a 12pt e, di nuovo, aggiornare lo stile cliccando sul pulsante applica modifiche nel pannello degli stili. Questo avrà l'effetto di cambiare la dimensione del font di TUTTI i testi del corpo nel layout per smartphone a 12pt. Facciamo lo stesso con eventuali altri stili di testo in uso. Ad esempio, i nostri titoli desktop possono essere impostati a 28pt, mentre nel nostro layout per smartphone sono impostati a 18pt. Questi cambiamenti avranno un effetto immediato sul nostro layout per smartphone. Ora apparirà in questo modo.

Tutto il testo è stato ora ridimensionato a livelli leggibili, ma i riquadri di testo devono essere ridimensionati per contenere il testo appena ingrandito. Questo è indicato dai contorni rossi sui riquadri di testo. Questi indicano che c'è più testo nei riquadri di quanto possa essere visualizzato sullo schermo. Questo è facilmente risolvibile con alcune semplici manovre.

La prima cosa da fare è estendere la lunghezza della pagina per smartphone per darci molto spazio per lavorare. Il passo successivo è trascinare il punto di controllo del ridimensionamento inferiore del blocco di layout più alto per ingrandirlo in modo da poter regolare la dimensione del suo contenuto. Trascinare il punto di controllo inferiore spingerà tutti gli altri blocchi di layout verso il basso nella pagina, creando un ampio spazio in modo da poter lavorare sul contenuto del primo blocco di layout.

Tutto ciò che ora deve essere fatto è afferrare i punti di controllo di ridimensionamento di ciascun riquadro di testo e trascinare fino a quando il contorno rosso scompare. Puoi spostare gli elementi all'interno del blocco in modo che si adattino meglio allo spazio disponibile. Se hai bisogno di più spazio, ingrandisci ulteriormente il blocco di layout. Ecco come la nostra pagina mobile inizia a prendere forma.

Dimensioni Intermedie dei Dispositivi

Nella maggior parte dei casi, progettare una versione desktop della tua pagina web e una versione per smartphone sarà sufficiente per consentire a Sitely di gestire per te le dimensioni intermedie. Aggiungendo altri dispositivi tra desktop e smartphone, puoi semplicemente far sì che Sitely ridimensioni automaticamente i diversi dispositivi. Per farlo, devi semplicemente impostare l'opzione per il Ridimensionamento automatico per ciascuna variante di dispositivo.

Naturalmente, c'è sempre l'opzione di impostare ciascun dispositivo per avere un Layout personalizzato se il design della tua pagina lo richiede. Ad esempio, potresti voler creare una pagina web simile a quella illustrata qui sotto.

Nell'esempio sopra, il sito desktop è progettato su una struttura a 2 colonne predominante, con alcuni blocchi di layout costruiti su una struttura a 4 colonne. Nella versione tablet, ci sono layout a griglia prevalentemente a 2 e 3 colonne, mentre nella versione mobile è una struttura a colonna singola predominante con alcuni blocchi costruiti su una struttura a 2 colonne. La scelta della struttura di griglia sottostante dipende davvero dalla quantità di testo da visualizzare e dalla densità delle immagini della pagina. Fortunatamente, Sitely ti supporta quando progetti per diversi dispositivi in questo modo.

La struttura di griglia sottostante standard per una versione desktop di un sito web è tipicamente a 12 colonne. Questo rende la pagina divisibile in 2, 3 e 4 colonne, oltre a una larghezza completa di 12 colonne. Tuttavia, quando si considerano dimensioni intermedie dei dispositivi, potrebbe essere preferibile cambiare la struttura della griglia per meglio adattarsi al layout della pagina che hai in mente. Nell'esempio sopra, potrebbe essere preferibile organizzare la pagina tablet su una struttura a griglia di 4 o 8 colonne, mentre la versione mobile potrebbe essere meglio adattata a una struttura a griglia di 2 colonne.

Per soddisfare questa esigenza, Sitely offre una struttura di griglia dispositivo per dispositivo, così puoi impostare la tua pagina desktop per utilizzare le standard 12 colonne, mentre le pagine tablet e mobile possono essere impostate per utilizzare 2, 4 o 8 colonne, a seconda delle esigenze individuali. Imposti la griglia del dispositivo dal Selettore Griglia di Layout nella parte superiore dello schermo di Sitely.

Gestione delle pagine

Mappe