Scrivere un codice Web migliore

Ecco qualcosa che trovo abbastanza ironico. Molti web designer amano la semplicità dei costruttori di siti web. Tuttavia, è interessante notare che la maggior parte dei web builder è stata creata per eliminare il ruolo dei web designer e degli sviluppatori automatizzando il codice sottostante.

Divertente, giusto?

Ma poi di nuovo, ci sono costruttori di siti web che apparentemente stanno facendo il contrario. Invece di ridurre il ruolo di designer e sviluppatori, vengono forniti strumenti appositamente ottimizzati per tali team. Il loro obiettivo principale è quello di facilitare le agenzie di progettazione con strumenti avanzati.

Come, chiedi?

Bene, WebFlow è uno degli esempi di spicco. E il suo ruolo nell'intero ambiente del web design è qualcosa che esamineremo a breve. Questa recensione di Webflow discute tutte le funzionalità critiche che è necessario conoscere, i punti deboli corrispondenti, oltre al costo di sfruttare la piattaforma per la progettazione.

Ma prima, cos'è esattamente Webflow?

Revisione del flusso di lavoro: panoramica

Come probabilmente avrai capito, Webflow non è il tuo tipico costruttore di siti web.

Lanciato in 2013, questo strumento si vende come una soluzione di web design che combina strumenti di progettazione senza codice professionali con un potente CMS visivo, oltre alla facilità d'uso dei costruttori standard. Quindi, pensalo come una fusione tra una soluzione di web building come Wix e un motore CMS come WordPress.

WebFlow

Ma non commettere errori. Il flusso web non è in concorrenza con simili Wix e Weebly. Offre un diverso set di funzionalità rivolte a un utente demografico diverso.

Tutto sommato, la cosa più affascinante qui è l'approccio intelligente di Webflow all'intero processo di codifica. È una piattaforma priva di codice che supporta il code-editing per una maggiore flessibilità.

Confondere? Si, lo so. Ecco perché mi sono preso il tempo per valutare attentamente tutto ciò che il webflow ha da offrire, dal design del sito web fino al sistema di gestione dei contenuti.

E qui ci sono i dettagli ...

Revisione del flusso di pagine: caratteristiche

Website Design

Webflow è un paio di cose, senza dubbio. Ma il suo strumento di progettazione web senza codice è sempre stato l'offerta principale qui.

Bene, sarebbe comprensibile se lo confondessi con la finestra di modifica di Adobe Photoshop prima di iniziare. Questi due potrebbero sembrare gemelli da lontano, ma si rivelano piuttosto diversi man mano che ti avvicini. Per essere più precisi, noterai che Webflow è un motore di automazione che opera in gran parte su CSS e HTML.

Progettista del flusso di lavoro

Su di esso, puoi facilmente inserire gli elementi del sito e spostarli di conseguenza senza utilizzare il codice. Il bit di programmazione è gestito dal framework sottostante di Webflow, che crea e modifica sistematicamente il codice del tuo sito mentre procedi con il processo di progettazione.

Se hai provato altri web designer senza codice, sai che eliminare il bit di programmazione ha un costo di flessibilità limitata. È interessante notare che lo strumento di progettazione di Webflow non segue questa tendenza. Quindi, sarò onesto qui e ammetto che è sicuramente uno dei costruttori di siti web versatili più avanzati sul mercato.

Ora, ammettiamolo. Avanzate e semplici sono due cose che sono conosciute come il fuoco e il ghiaccio quando si tratta di strumenti di gestione dei siti web.

E fedele alla forma, Webflow non è uno dei più semplici costruttori che troverai là fuori. Sebbene la sua interfaccia sia estremamente potente, è apparentemente complicata e potrebbe richiedere un certo sforzo per imparare di conseguenza le corde.

Per i principianti, Webflow non crea l'illusione di un processo di progettazione completamente senza codice. Quindi, non aspettarti di saltare direttamente dentro e iniziare a disegnare forme sulla tela. Un simile approccio limiterebbe sostanzialmente la tua capacità di personalizzazione.

Di conseguenza, il sistema qui incorpora abilmente alcuni aspetti della codifica mentre costruisci un sito web. Ad esempio, se intendi introdurre una pagina centrale quadrata, dovrai aggiungere un nuovo <div> elemento, quindi modifica i punti in basso a sinistra e in alto a destra come zero insieme al posizionamento fisso.

Cosa significa?

Mentre si può andare avanti e sfruttare il flusso di lavoro senza conoscenze di programmazione, occorre una conoscenza di base delle proprietà HTML e CSS per capitalizzare pienamente la sua potenza.

Tuttavia, se preferisci diversamente, punta semplicemente contro "Non scrivo il codice " scelta al momento della registrazione. Il sistema espanderà successivamente la sua capacità di automazione per gestire al meglio gran parte del progetto.

Detto questo, puoi iniziare con una tela completamente vuota. Questo è l'approccio che preferisco perché posso personalizzare tutto dalla base.

Una parola di cautela però. Lascia questa opzione ai designer esperti di CSS e HTML. Altrimenti, rischi di mescolare le cose o rimanere bloccato da qualche parte lungo il processo.

L'approccio migliore per la codifica dei principianti sta traendo vantaggio dai modelli pre-progettati di Webflow. Risulta che il sistema offre più di 200 modelli attraenti, di cui 30 sono completamente gratuiti. Quelli a pagamento, d'altro canto, ti costeranno tra $ 24 e $ 79.

Dopo un'analisi approfondita di vari temi, ho notato che sono notevolmente diversi, con strutture e caratteristiche variabili. Quindi il successivo processo di modifica ti consente di cambiare gli sfondi, i colori, i livelli, l'opacità, la rotazione, gli effetti, la posizione, le dimensioni, ecc. Degli elementi.

Hosting

Questo è ovvio. Quel flusso web, come la maggior parte dei web builder di oggi, offre hosting del sito più domini personalizzati insieme ai suoi pacchetti di progettazione.

Hosting di flussi web

Ma non aspettarti il ​​tipico approccio al piano condiviso qui. Webflow sceglie invece di mantenere i siti in-house, all'interno di ciò che descrive come una "flotta di server infinitamente scalabile".

Cosa comporta questo?

Bene, Webflow è proprietario e controlla più dei data center 100 in tutto il mondo. Combina quello con i CDN gestiti da Amazon CloudFront più Fastly- e il risultato è un sistema solido per l'hosting di tutti i tipi di siti Web.

Oltre a gestire le dimensioni del traffico, Webflow garantisce prestazioni ottimali con millisecondi: tempi di caricamento lunghi della pagina oltre al tempo di attività del sito Web 99.99%. Il suo framework basato su AWS è particolarmente critico nel fornire una solida base per supportare carichi di traffico comparativamente elevati dai siti aziendali.

E dal momento che la sicurezza Web è fondamentale, l'infrastruttura di hosting di Webflow è conforme a HTTP / 2 e gli utenti ottengono certificati SSL rilevanti per i loro siti.

Sistema di gestione dei contenuti

È qui che il contenuto incontra il design visivo. Il CMS di Webflow ti consente essenzialmente di inserire e gestire il contenuto del tuo sito. In altre parole, puoi aggiungere e modificare qualsiasi testo o supporto sulla pagina precisa che stai creando.

E se gestisci un vasto progetto web con strutture complicate, apprezzerai in particolare la capacità del sistema di supportare gli aggiustamenti manuali degli aspetti dei contenuti, inclusi tipi di contenuto, membri del team, progetti, ecc., Completi di campi personalizzabili.

Bene, tutto questo è facilitato da Collezioni CMS- una funzionalità a cui è possibile accedere direttamente dalla finestra dell'editor principale. Non appena si genera una nuova raccolta, è possibile passare oltre il tipo di contenuto per definire campi e introdurre elementi. Successivamente vengono adottati come pagine Web o elenchi distinti integrati nelle pagine che hai creato.

CMS Webflow

Confondere? Ok, considera questo esempio: per stabilire una pagina che mostri la forza lavoro della tua organizzazione, puoi presentare una raccolta di "membri del team", completa di elementi come link sociali, descrizioni, nomi, foto e nomi dei dipendenti.

Ora, questo copre fondamentalmente il back-end CMS. Ma sai una cosa? Non è tutto. Il flusso di lavoro continua a dare a WordPress una buona possibilità di guadagno grazie all'editor del flusso di lavoro. Qui è dove si ravviva una pagina pubblicata con nuovi contenuti basati sul tipo preselezionato.

In breve, ottieni un sito Web completo che supporta contenuti dinamici come portfolio, articoli e post di blog, senza installare plug-in aggiuntivi.

Collaborazione

Ammettilo. I grandi progetti di web design sono eccitanti. Ma possono essere sempre più ingombranti, specialmente se non riesci a semplificare di conseguenza tutte le parti coinvolte.

Sembra che il webflow abbia riflettuto su questo aspetto e faccia un buon tentativo di facilitare la collaborazione per le agenzie di web design con più membri del team. E c'è di più: puoi anche invitare altre parti come clienti, progettisti di terze parti, appaltatori, ecc. I loro ruoli e le funzionalità utente dipendono dai privilegi corrispondenti impostati.

Collaborazione Webflow

Se hai a che fare con i clienti, ad esempio, puoi invitarli a rivedere i loro progetti in tempo reale con privilegi di utilizzo severamente limitati.

Detto questo, ho notato che tutte le regolazioni del sito sono riflesse su tutta la linea in tempo reale. Questo aiuta i membri della squadra che collaborano a evitare di ripetere attività che sono già state gestite.

Caratteristiche generali

  • XML Mappa del sito
  • Meta titoli SEO, descrizioni
  • Tag alt immagine
  • Centro Assistenza
  • Forum della Comunità
  • Supporto prioritario
  • Supporto e-mail
  • Nome di dominio personalizzato
  • Siti di sosta
  • Aggiornamenti istantanei
  • Reindirizzamenti URL personalizzati
  • Monitoraggio sito Web 24 / 7
  • Tempi di caricamento rapidi
  • Acquisto di domini Google
  • Integrazione con Zapier
  • integrazione MailChimp
  • Integrazione di Google Analytics
  • ottimizzazione SEO
  • Forme di etichette bianche
  • Etichettatura bianca CMS
  • Protezione della password del sito
  • Organizzazione del progetto
  • Backup del sito Web
  • Pagine di errore personalizzate
  • Favicon personalizzato
  • Fatturazione diretta del cliente
  • Componenti SNS
  • Rich text
  • Lightbox
  • Video di sfondo
  • Codici HTML incorporati
  • Menu a discesa
  • Google Maps
  • Cursori e caroselli
  • Navigazione a schede
  • Moduli web personalizzabili
  • Editor di siti web
  • Revisione delle presentazioni di moduli
  • Apri il contenuto del grafico
  • Modello di tag SEO
  • Importazione CMS tramite Zapier
  • RSS Feeds
  • API CMS
  • Animazioni 3D
  • Proprietà dello stile CSS
  • Modelli di siti Web
  • Immagini ottimizzate
  • Famiglie di caratteri Web
  • Campioni di colore globale
  • Scatole flessibili CSS3
  • Aggiunta codice personalizzato
  • Codice esportabile
  • Filtri CSS

Revisione del flusso di pagine: prezzi

La struttura dei prezzi di Webflow è apparentemente complessa per alcuni utenti, mentre altri lodano il suo approccio omnicomprensivo.

Se sei il tipo che odia numerosi pacchetti su una singola piattaforma a causa del complesso processo di confronto che ne deriva, allora potresti trovare un po 'macchinoso i piani tariffari di Webflow. D'altra parte, se preferisci più opzioni di prezzo che si adattano a diversi livelli utente, allora ti piacerà come sono state organizzate le cose qui.

Ora, per cominciare, Webflow tenta di supportare tre tipi di utenti: freelance, designer solisti e team di progettazione. Ogni categoria ha il proprio set di pacchetti con caratteristiche diverse.

Pacchetti Webflow

Ecco le brevi descrizioni di ciascun piano:

Per i liberi professionisti:

Staging gratuito Completamente gratis.

  • Invio di moduli 10 al mese
  • 50 CMS articoli
  • 500 visite mensili
  • 2 pagine statiche
  • Sottodominio webflow.io gratuito

Hosting di base- $ 15 al mese fatturati mensilmente o $ 12 al mese fatturati annualmente.

  • Invio di moduli 500 al mese
  • 25,000 visite mensili
  • 100 pagine statiche
  • CDN
  • Opzione SSL gratuita
  • Creazione del dominio

Hosting CMS- $ 20 al mese fatturati mensilmente o $ 16 al mese fatturati annualmente.

  • Editor di contenuti 3
  • Accesso API CMS
  • Articoli 2,000 CMS disponibili
  • Invio di moduli 1,000 al mese
  • 100,000 visite mensili
  • 100 pagine statiche
  • CDN
  • Opzione SSL gratuita
  • Creazione del dominio

Hosting aziendale- $ 45 al mese fatturati mensilmente o $ 36 al mese fatturati annualmente.

  • Editor di contenuti 10
  • Accesso API CMS
  • Articoli 10,000 CMS disponibili
  • Invio di moduli illimitati
  • 1,000,000 visite mensili
  • 100 pagine statiche
  • CDN
  • Opzione SSL gratuita
  • Creazione del dominio

Flusso web per freelance

Per i progettisti:

Antipasto- Gratuito.

  • Messa in scena libera
  • Fatturazione del cliente
  • Fino a progetti concorrenti 2
  • Costruzione del sito gratuita

Light- $ 24 al mese fatturati mensilmente o $ 16 al mese fatturati annualmente.

  • Esportazione del codice
  • Staging potenziato
  • Fatturazione del cliente
  • Fino a progetti concorrenti 10

pro- $ 42 al mese fatturati mensilmente o $ 35 al mese fatturati annualmente.

  • Protezione della password del sito
  • Etichettatura bianca
  • Trasferimento della proprietà del progetto
  • Esportazione del codice
  • Staging potenziato
  • Fatturazione del cliente
  • Progetti concorrenti illimitati

Flusso Web per i progettisti

Per i team creativi

Squadra- $ 42 al mese fatturati mensilmente o $ 35 al mese fatturati annualmente.

  • Dashboard del team
  • Protezione della password del sito
  • Etichettatura bianca
  • Esportazione del codice
  • Staging potenziato
  • Fatturazione del cliente
  • Progetti concorrenti illimitati

Grande squadra- Preventivo personalizzato

  • Prezzi dei membri della squadra in blocco
  • Dashboard del team
  • Protezione della password del sito
  • Etichettatura bianca
  • Esportazione del codice
  • Staging potenziato
  • Fatturazione del cliente
  • Progetti concorrenti illimitati

Flusso Web per i team

Chi dovrebbe prendere in considerazione l'utilizzo di Webflow?

Tutto sommato, applaudiamo WebFlow per fornire:

  • Certificato SSL gratuito per la conformità della sicurezza.
  • Reti di distribuzione dei contenuti integrate gratuite per tempi di caricamento delle pagine ridotti.
  • Hosting di siti Web globali avanzati in collaborazione con sistemi efficaci come Amazon CloudFront e Fastly- per velocizzare le velocità di caricamento delle pagine.
  • Un CMS integrato versatile per la creazione di contenuti dinamici.
  • Un ambiente di staging per testare e recensire vari elementi del sito web.
  • Gestori CSS e JS ottimizzati per la gestione avanzata dei siti più il controllo olistico di animazioni e stili.
  • Un processo flessibile di creazione di siti web che inizia con una tela bianca o con modelli predefiniti.
  • Uno strumento di progettazione web ottimizzato per dispositivi mobili che produce codice esportabile in tempo reale durante la creazione di un sito.

A parte questo, gli svantaggi che ho incontrato lungo la strada includono:

  • Funzionalità limitate per il supporto di siti di e-commerce
  • Un processo di progettazione che favorisce pesantemente i programmatori
  • Un numero limitato di modelli di siti Web
  • Una curva di apprendimento ripida per i principianti

Ora, raggruppiamo tutto insieme. Scommetto che accetti che Webflow sia un sistema di creazione di siti Web avanzato creato per sviluppatori, progettisti e agenzie che cercano maggiore versatilità e controllo.

Quali sono i tuoi pensieri?

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.