Il nostro flusso di lavoro per la creazione di siti Web reattivi in ​​Elementor

In questo articolo, abbiamo voluto discutere di come creiamo siti Web altamente reattivi per tutti i tipi di dispositivi e dimensioni dello schermo durante la creazione con Elementor. Questo è il flusso di lavoro della nostra agenzia individuale e l'abbiamo sviluppato negli ultimi due anni di attività.

Se ritieni che questo possa essere utile per la tua attività e il tuo design, sentiti libero di adottarlo. Tieni presente che la maggior parte dei siti Web che creiamo sono piuttosto complessi e non semplici atterraggi aziendali di cinque pagine. Alcuni di questi passaggi sono incredibilmente utili quando si creano negozi di e-commerce complessi o siti Web di contenuti, ma potrebbero essere ignorati per risparmiare tempo e denaro durante la creazione di un sito più semplice.

Mockup

Il primo passo per il nostro responsive web design è prenderlo in giro. Utilizziamo Adobe XD per creare modelli di siti Web, progettando con un'ideologia mobile first. Ciò significa che andremo avanti e creeremo un mockup mobile prima ancora di pensare alla versione desktop del sito. Il 60% di tutto il traffico del sito web proviene da browser mobili, il che significa che questo è più importante che ottenere un desktop corretto.

Un po' datato, ma questo mostra le tendenze in evoluzione

Prenderemo quindi quel modello, lo espanderemo alle dimensioni di un tablet e quindi lo espanderemo a una dimensione desktop. La versione desktop del sito può sembrare abbastanza diversa dalla versione mobile del sito, ma ha tutte le stesse sezioni e struttura per ridurre il numero di elementi DOM e mantenere tutto reattivo.

Progettando una mentalità mobile first, possiamo garantire che quell'aspetto del sito Web sia perfetto sin dal primo giorno. Utilizzando Adobe XD, la nostra agenzia può collaborare facilmente tra loro, condividere modelli per il feedback e persino visualizzarli sui telefoni personali durante la progettazione.

In particolare, quando si tratta di progettare siti Web reattivi per progetti complessi, simulare staticamente il sito Web è incredibilmente importante. Puoi leggere il nostro articolo sulla simulazione dei siti qui: https://isotropic.co/is-making-a-website-mockup-worth-it/

Una volta che i modelli sono stati eseguiti, testati dai gruppi di input degli utenti, dai clienti e dal nostro team di agenzie, è il momento di crearli effettivamente su Elementor.

Questo è l'aspetto più importante della creazione di un sito web responsive: costruirlo effettivamente.

Creazione di siti Web reattivi con Elementor

Durante la creazione del sito Web, definiremo prima la struttura di base nella sua forma desktop. Tuttavia, finiremo per popolare il contenuto dal cellulare al tablet al desktop.

In questo modo, siamo in grado di garantire che questa struttura funzioni su tutte le dimensioni dello schermo e, popolando i contenuti con una mentalità mobile first, sappiamo che sembrerà buono (dall'inizio) su un telefono cellulare.

Per assicurarci che tutto appaia bene sulle varie dimensioni dello schermo, utilizzeremo la funzione integrata di "nascondimento reattivo" fornita con Elementor. Si trova nella scheda delle impostazioni avanzate del builder. Tuttavia, devi essere attento quando nascondi gli elementi (questo sta solo usando CSS display:none in un'interfaccia utente grafica), poiché tutti quegli elementi verranno comunque caricati. Se nascondi metà della tua pagina web sui dispositivi mobili, ciò può influire seriamente sulla velocità del tuo sito web, quindi devi essere consapevole e creare il sito in modo che sia il più snello possibile.

L'attuale versione di Elementor viene fornita con tre punti di interruzione reattivi. In alcune situazioni, questi tre punti di interruzione sono più che sufficienti per ottenere un design reattivo di alta qualità. Tuttavia, quando progettiamo con altri strumenti utilizziamo fino a sei singoli punti di interruzione. Elementor non ci consente di farlo immediatamente, quindi siamo bloccati nell'utilizzo di query multimediali CSS.

In questa nota, vota per fare in modo che gli sviluppatori di Elementor aggiungano punti di interruzione aggiuntivi come funzionalità nativa:

Fortunatamente, utilizziamo un sacco di CSS personalizzati perché è solo più veloce per noi sviluppare in questo modo. Tuttavia, se non hai familiarità con CSS o non ti piace usarlo, ci sono una raccolta di plug-in là fuori che ti consentono di aggiungere punti di interruzione personalizzati al tuo progetto. In passato, abbiamo utilizzato specificamente i componenti aggiuntivi Piotnet (di cui si è parlato nell'articolo precedentemente collegato), poiché hanno un sacco di fantastici elementi di terze parti e lo strumento viene fornito con un'utilità di punto di interruzione personalizzata.

Tuttavia, non acquisteremmo un'altra licenza Piotnet solo per aggiungere punti di interruzione mobili, le query multimediali CSS sono un modo più rapido ed economico per farlo.

Un altro strumento che puoi utilizzare quando si tratta di design reattivo è qualcosa chiamato CSSHero. CSSHero ti consente essenzialmente di generare un sacco di CSS personalizzati utilizzando una bella interfaccia utente grafica. L'abbiamo usato in passato ed è stato abbastanza vantaggioso per il nostro flusso di lavoro: puoi leggere i nostri pensieri qui.

Quando aggiungiamo elementi di contenuto specifici, cerchiamo di seguire tutte le migliori pratiche di responsive design.

Ad esempio, misureremo elementi specifici utilizzando VH, VW o percentuali. Cerchiamo di evitare le dimensioni dei pixel quando possibile, poiché ciò può influire negativamente sull'aspetto reattivo di un sito Web su dimensioni dello schermo uniche.

Se possibile, cerchiamo di utilizzare gli SVG per le nostre icone e la grafica di base sul sito, poiché sono i più reattivi. Le immagini si deterioreranno quando esplodono e gli SVG no (per non parlare del fatto che sono molto più piccoli della maggior parte delle immagini, portando a un tempo di caricamento molto più rapido).

Ci piace molto usare REM per tutti i nostri elementi tipologici. REM prende solo il valore del testo HTML di base e espande o diminuisce il sito. Ad esempio, la dimensione tipica del carattere di base per la maggior parte dei browser è 16px, quindi un REM equivarrebbe a 16 pixel.

Naturalmente, queste dimensioni dei caratteri differiscono tra i browser, soprattutto quando si confrontano desktop e dispositivi mobili. Per noi, questo è fantastico perché ci consente di ottenere dimensioni del testo reattive visibili e leggibili su più dimensioni dello schermo.

Ci sono un sacco di articoli sulle migliori pratiche di responsive design su Google, quindi se sei interessato cercali. Ciò a cui si riduce davvero è essere consapevoli dei visitatori, mantenere le cose semplici sui dispositivi mobili e garantire che gli elementi siano continui tra desktop e dispositivi mobili.

Assicurati di provare a utilizzare misurazioni relative come percentuali e REM per garantire che gli elementi vengano ridimensionati correttamente per soddisfare i requisiti di dimensione dello schermo.

Ottimizzazione della velocità mobile

Dopo aver ottenuto una versione generale del nostro sito Web, è il momento di ottimizzarlo per la velocità. Abbiamo un sacco di articoli e risorse su come far caricare più velocemente un sito Web Elementor, ma ci sono diverse cose su cui devi assolutamente concentrarti quando si tratta di navigazione mobile.

I dispositivi mobili hanno meno potenza e Internet più lento, il che significa che questo tipo di siti in genere si carica molto più lentamente dei siti Web desktop. Questo è solo un fatto noto, ma è qualcosa che deve essere mitigato il più possibile, altrimenti i tuoi visitatori non arriveranno al tuo sito web. Gli esseri umani hanno solo un intervallo di attenzione di 6 secondi e il tuo sito dovrebbe caricarsi in 2.

Quando si tratta di ottimizzare Elementor per la velocità sui dispositivi mobili, le due cose più importanti sono i caratteri e le immagini.

Quando si utilizzano i caratteri, devono sempre essere precaricati e utilizzare il formato di file .woff .woff2. Ciò garantisce la compatibilità con la maggior parte dei browser mobili e questi formati di file sono piccoli e veloci da caricare. per ottimizzare correttamente tutti i nostri caratteri sui siti Web di Elementor, li ospitiamo localmente o utilizziamo WP Rocket per precaricarli rapidamente.

Le immagini in genere hanno il maggiore impatto negativo sulla velocità di caricamento del tuo sito web per dispositivi mobili. Devi assicurarti che siano adeguatamente ottimizzati e che vengano serviti nei formati di prossima generazione come WebP. Questo non è davvero qualcosa che puoi fare manualmente, ma fortunatamente ci sono tonnellate di servizi là fuori dedicati all'ottimizzazione e alla conversione automatica delle immagini.

Il nostro strumento Vai a per garantire che le immagini si carichino rapidamente sui siti Web mobili si chiama ShortPixel. Devi semplicemente installarlo, fare clic sul grande pulsante rosso di ottimizzazione e comprimerà e convertirà tutte le tue immagini e le servirà su una CDN per garantire il tempo di caricamento più rapido possibile per il tuo sito Web Elementor mobile.

Testare il sito

A questo punto, abbiamo creato il nostro sito Web, assicurato che appaia bene sui dispositivi mobili e ottimizzato per la velocità. Il passaggio finale del nostro flusso di lavoro di sviluppo mobile per Elementor è il test. Questa è di gran lunga la parte più importante di qualsiasi progetto di sito Web reattivo, poiché ora è necessario testare il design reattivo che sta bene su tutti i tipi di dimensioni dello schermo.

In passato, c'erano dimensioni dello schermo a malapena standardizzate. Avresti i tuoi laptop di grandi dimensioni, laptop piccoli, tablet e dispositivi mobili. Questo sarebbe tutto ora, ogni laptop ha le proprie dimensioni dello schermo e proporzioni, i dispositivi mobili vanno da dimensioni dello schermo incredibilmente lunghe e alte a dimensioni dello schermo corte e grasse. ce ne sono molti là fuori ed è tuo compito assicurarti che il tuo design mobile funzioni bene su tutti i tipi di dimensioni dello schermo.

Per testare il nostro design mobile responsive sul nostro sito Web Elementor, utilizziamo diversi strumenti.

Edizione per sviluppatori Firefox

Gli strumenti per sviluppatori forniti con l'edizione per sviluppatori di Firefox sono incredibilmente potenti e facili da usare. Quando si tratta di design reattivo, utilizziamo gli strumenti di sviluppo di Firefox per emulare dimensioni specifiche del viewport.

Se identifichiamo problemi importanti con questo metodo, possiamo facilmente modificare il CSS applicandolo all'elemento specifico e vedere se riusciamo a risolvere rapidamente.

Pila del browser

Browserstack è più orientato alle agenzie e all'uso aziendale e ci consente di testare il nostro sito di sviluppo tra un massimo di 2000 dispositivi e browser reali. eseguendo i dispositivi reali e dozzine di browser, siamo in grado di identificare eventuali problemi che potrebbero verificarsi su dispositivi o browser legacy. Costa $ 29,00 al mese e hanno anche una prova gratuita. Se stai lavorando a un progetto specifico che ritieni possa utilizzare uno strumento come questo, ti consiglio vivamente di dare un'occhiata a quella prova.

Se sei anche un'agenzia più piccola o un libero professionista, puoi accedere a prezzi ridotti a $ 12,00 al mese per 100 minuti di test. Infine, se hai un progetto open source, che probabilmente non è il caso se stai utilizzando Elementor, puoi accedere ai test gratuiti.

In modo reattivo

Questo strumento di test finale è una recente aggiunta alla nostra cassetta degli attrezzi, ma è uno degli aspetti più importanti del nostro flusso di lavoro di progettazione web reattiva di Elementor. Responsively È un progetto open source che ti consente di visualizzare facilmente in anteprima fino a 30 dimensioni dello schermo del dispositivo preimpostate e di utilizzare gli strumenti di sviluppo direttamente nel browser. Ci sono un sacco di funzionalità uniche e avanzate come interazioni speculari tra tutte le dimensioni dello schermo, un layout personalizzabile e un sacco di dispositivi. Ottieni anche una console degli strumenti per sviluppatori chromium, quindi puoi facilmente modificare CSS in questo modo.

Questo è lo strumento finale che utilizziamo per identificare eventuali problemi con la versione reattiva dei nostri siti Web Elementor, ed è sicuramente qualcosa a cui dovresti dare un'occhiata. Lo strumento viene scaricato come estensione del browser e applicazione autonoma. Fai clic sull'estensione del browser e si apre il sito Web nell'applicazione.

Conclusione

Infine, dopo aver testato il nostro design reattivo realizzato con Elementor su dozzine di dispositivi, viewport e browser, siamo finalmente abbastanza sicuri da poter applicare le modifiche in tempo reale.

Questo completa il nostro flusso di lavoro per il design reattivo quando si tratta di Elementor. Se l'hai trovato interessante, sentiti libero di adottarlo nella tua routine. Se hai il tuo flusso di lavoro, sentiti libero di pubblicarlo nella sezione commenti qui sotto in quanto potrebbe aiutare altri creatori a utilizzare Element Door.