La tecnologia di sviluppo di siti Web è un processo molto sfaccettato. Tuttavia, tutte le sue fasi possono essere divise in due componenti principali: il funzionale e il guscio esterno. Oppure, come è consuetudine tra i webmaster, rispettivamente back-end e front-end. Le persone che ordinano i loro siti Web da studi di sviluppo Web spesso credono ingenuamente che valga la pena concentrarsi solo sulla funzionalità e questa sarà la decisione giusta. Ma questo è vero in casi molto, molto rari, di solito per progetti di avvio in fase di beta testing. In caso contrario, la progettazione grafica e l'interfaccia utente devono semplicemente essere conformi agli standard di sviluppo web ed essere convenienti.
La prima pietra angolare che il designer dell'interfaccia, o designer, deve affrontare è la larghezza del layout del sito. Dopotutto, per questo è necessario disegnare interfacce. In modo puramente intuitivo, sorgono due approcci: creare layout separati per ciascuna risoluzione dello schermo popolare o creare una versione del sito per tutti i display. Ed entrambe le opzioni saranno sbagliate, ma prima di tutto.
Larghezza del sito web standard in pixelper Runet
Prima dello sviluppo del layout adattivo, lo sviluppo di un sito con una larghezza di mille pixel era un fenomeno di massa. Questa cifra è stata scelta per un semplice motivo: in modo che il sito si adatti a qualsiasi schermo. E questo ha una sua logica, ma supponiamo che una persona abbia ancora almeno un monitor HD su un desktop. In questo caso, il tuo layout sembrerà una piccola striscia al centro dello schermo, dove tutto è bloccato insieme in un mucchio e ai lati c'è un enorme spazio inutilizzato. Supponiamo ora che una persona acceda al tuo sito Web su un tablet con uno schermo largo 800 pixel e che "Mostra sito Web completo" sia selezionato nelle impostazioni. In questo caso, anche il tuo sito verrà visualizzato in modo errato, poiché semplicemente non si adatta allo schermo.
Da queste considerazioni, possiamo concludere che una larghezza fissa per il layout non è sicuramente adatta a noi e dobbiamo cercare un altro modo. Analizziamo l'idea di un layout separato per ogni larghezza dello schermo.
Layout per tutte le occasioni
Se hai scelto come strategia di creare layout per schermi di tutte le dimensioni sul mercato, il tuo sito sarà il più unico di tutta Internet. Dopotutto, oggi è semplicemente impossibile coprire l'intera gamma di dispositivi, cercando di mettere a punto ogni opzione. Ma se ti concentri sulle risoluzioni più popolari di monitor e schermi dei dispositivi, l'idea non è male. Il suo unico svantaggio sono i costi finanziari. Dopotutto, quando un designer di interfacce, un designer e un programmatore sono costretti a fare lo stesso lavoro 5 o 6 volte, il progetto costeràsproporzionatamente superiore al prezzo originariamente preventivato.
Pertanto, solo i siti di una pagina possono vantare un'abbondanza di versioni per schermi diversi, il cui scopo è vendere un prodotto ed essere sicuri di farlo bene. Bene, se non hai uno di questi landing, ma un sito multi-pagina, allora dovresti pensare ulteriormente.
Dimensioni del sito più popolari
Un compromesso tra i due estremi è il rendering del layout per tre o quattro dimensioni dello schermo. Tra questi, uno deve essere un layout per dispositivi mobili. Il resto dovrebbe essere adattato per schermi desktop piccoli, medi e grandi. Come scegliere la larghezza del sito? Di seguito presentiamo le statistiche del servizio HotLog per maggio 2017, che ci mostrano la distribuzione della popolarità delle varie risoluzioni dello schermo del dispositivo, nonché la dinamica di questo indicatore.
Dalla tabella puoi scoprire come determinare la dimensione del sito che vuoi utilizzare. Inoltre, possiamo concludere che il formato più comune oggi è uno schermo di 1366 per 768 pixel. Tali schermi sono installati su laptop economici, quindi la loro popolarità è naturale. Il successivo più popolare è il monitor Full HD, che è il gold standard per video, giochi e quindi per la creazione di layout di siti Web. Più avanti nella tabella vediamo la risoluzione dei dispositivi mobili 360 per 640 pixel, oltre a varie opzioni per desktop e schermi mobili dopo di essa.
Progettazione del layout
CosìDopo aver analizzato le statistiche, possiamo concludere che la larghezza ottimale del sito ha 4 variazioni:
- Versione per laptop con larghezza di 1366px.
- Versione Full HD.
- Un layout ampio 800px per la visualizzazione su piccoli monitor desktop.
- Versione mobile del sito - 360 pixel di larghezza.
Diciamo che abbiamo deciso quale dimensione utilizzare per la sorgente generata per il sito. Ma un progetto del genere sarebbe comunque costoso. Quindi diamo un'occhiata a più opzioni, questa volta senza utilizzare una larghezza fissa.
Rendere flessibile il layout
Esiste un approccio alternativo, quando vale la pena adattarsi solo alle dimensioni minime dello schermo e le dimensioni del sito stesse saranno impostate in percentuale. Allo stesso tempo, gli elementi dell'interfaccia come menu, pulsanti e logo possono essere impostati in valori assoluti, concentrandosi sulla dimensione minima della larghezza dello schermo in pixel. I blocchi con contenuto, al contrario, verranno allungati in base alla percentuale specificata della larghezza dell'area dello schermo. Questo approccio ti consente di smettere di percepire le dimensioni dei siti come un limite per il progettista e di superare abilmente questa sfumatura.
Qual è il rapporto aureo e come può essere applicato al layout di una pagina web?
Anche nel Rinascimento, molti architetti e artisti hanno cercato di dare alle loro creazioni la forma e le proporzioni perfette. Per le risposte alle domande sui valori di una tale proporzione, si sono rivolti alla regina di tutte le scienze: la matematica.
Fin dall'antichità è stata inventata una proporzione che il nostro occhio percepisce come la più naturale ed elegante,perché è onnipresente in natura. Lo scopritore della formula per tale rapporto fu un talentuoso architetto greco antico di nome Fidia. Ha calcolato che se la parte più grande della proporzione è in relazione con quella più piccola come il tutto è in relazione con quella più grande, allora tale proporzione sembrerà la migliore. Ma questo è il caso se vuoi dividere l'oggetto in modo asimmetrico. Questa proporzione fu in seguito chiamata la sezione aurea, che ancora non sopravvaluta la sua importanza per la storia mondiale della cultura.
Torna al web design
È molto semplice: utilizzando il rapporto aureo, puoi progettare pagine che saranno il più piacevoli possibile all'occhio umano. Calcolando secondo la definizione della formula del rapporto aureo, otteniamo il numero irrazionale 1, 6180339887 …, ma per comodità possiamo utilizzare un valore arrotondato di 1, 62. Ciò significa che i blocchi della nostra pagina dovrebbero essere 62 % e 38% del totale, indipendentemente dalle dimensioni della sorgente generata per il sito che stai utilizzando. Puoi vedere un esempio in questo diagramma:
Utilizza nuove tecnologie
Le moderne tecnologie di layout del sito Web consentono di trasmettere con precisione l'idea di un pianificatore e designer, quindi ora puoi permetterti di implementare idee più audaci rispetto agli albori delle tecnologie Internet. Non è più necessario pensare a quali dovrebbero essere le dimensioni del sito. Con l'avvento di cose come il layout adattivo dei blocchi, il caricamento dinamico di contenuti e caratteri, lo sviluppo di siti Web è diventato molto più piacevole. Dopotutto, queste tecnologie lo sonomeno restrizioni, anche se sono ancora lì. Ma come sapete, senza limiti non ci sarebbe l'art. Ti suggeriamo di utilizzare un approccio progettuale veramente creativo: il rapporto aureo. Con esso, puoi riempire efficacemente e magnificamente lo spazio di lavoro, indipendentemente dalle dimensioni del sito che hai impostato nei tuoi modelli.
Come aumentare lo spazio di lavoro del sito
Ci sono buone probabilità che tu non abbia abbastanza spazio per inserire tutti gli elementi dell'interfaccia utente in un piccolo layout. In questo caso, dovrai iniziare a pensare in modo creativo o anche più creativo di prima.
Massimo spazio libero sul sito nascondendo la navigazione nel menu a comparsa. È logico utilizzare questo approccio non solo sui dispositivi mobili, ma anche sui desktop. Dopotutto, l'utente non ha bisogno di guardare continuamente quali intestazioni ci sono sul tuo sito: è venuto per il contenuto. E i desideri dell'utente devono essere rispettati.
Un esempio di un buon modo per nascondere il menu è il seguente layout (foto sotto).
Nell'angolo superiore dell'area rossa, puoi vedere una croce, cliccando sulla quale si nasconderà il menu in una piccola icona, lasciando l'utente solo con il contenuto del sito web.
Tuttavia, questo è facoltativo, puoi lasciare la navigazione, che sarà sempre in vista. Ma puoi renderlo un bellissimo elemento di design e non solo un elenco di link popolari sul sito. Utilizza icone intuitive in aggiunta o anche al posto dei collegamenti di testo. è lo stessoconsentirà al tuo sito di utilizzare in modo più efficiente lo spazio dello schermo sul dispositivo dell'utente.
Il miglior sito web è responsive
Se non sai quale layout scegliere per il sito, allora tutto è semplice per te. Per risparmiare sui costi di sviluppo e allo stesso tempo non perdere il tuo pubblico a causa del layout scadente di alcuni dispositivi, utilizza il design reattivo.
Il design reattivo è un design che sembra ugualmente buono su diversi dispositivi. Questo approccio consentirà al tuo sito di essere comprensibile e conveniente anche su un laptop, anche su un tablet, anche su uno smartphone. Questo effetto si ottiene modificando automaticamente la larghezza dell'area di lavoro dello schermo. Utilizzando fogli di stile reattivi per il tuo sito, stai prendendo la migliore decisione possibile.
Qual è la differenza tra il design reattivo e le versioni del sito web
Il design responsive si differenzia dalla versione mobile del sito in quanto in quest'ultimo caso l'utente riceve un codice html diverso da quello desktop. Questo è uno svantaggio in termini di ottimizzazione delle prestazioni del server e ottimizzazione dei motori di ricerca. Inoltre, diventa più difficile calcolare le statistiche per le diverse versioni del sito. L'approccio adattivo non presenta questi svantaggi.
La reattività per vari dispositivi si ottiene attraverso un layout con una percentuale della larghezza specificata o trasferendo i blocchi nello spazio disponibile (sul piano verticale su uno smartphone invece diorizzontale sul desktop) o creando layout individuali per schermi diversi.
Ulteriori informazioni sul design reattivo e lo sviluppo nei nostri tutorial.
