Come creare una versione mobile del tuo sito Web

Avere una versione mobile del tuo sito web è un must al giorno d’oggi e l’unico modo sicuro per rendere il vostro progetto web accessibile da dispositivi mobili. Quindi, se hai ragione sul lancio di un sito web, sei tenuto a prendere in considerazione questo problema per renderlo un successo. Hai già un sito web e desideri aggiornarlo per renderlo mobile-friendly? Le informazioni fornite di seguito saranno utili anche a te.

Ci sono diversi modi per avviare un sito web mobile oggi. La scelta della soluzione più adatta dipende da diversi fattori come tipo di sito web, età e caratteristiche, i propri obiettivi di web design, competenze e requisiti. Le soluzioni più diffuse sono le seguenti:

• Creazione di responsive design, quando un utente visita lo stesso sito web (che visualizza in modo diverso rispetto a regole speciali relative ai CSS) da dispositivi desktop e mobili;
• sito web mobile Distinto versione basata su mobile-solo approccio, quando si hanno due interfacce che funzionano in modo coerente e può anche essere ospitato su diversi domini/sottodomini;
• Completo di mobile app, che può essere un prodotto stand-alone con un pre-progettato l’architettura sviluppata per una certa piattaforma o separato strumento anteprima (come un browser web) che è applicabile a un sito web solo.

Una di queste opzioni funziona alla grande per la creazione di siti web mobili. Spetta al proprietario solo scegliere la soluzione più adatta. Diamo un’occhiata ai modi più diffusi (e più convenienti) di sviluppo di progetti mobili ora.

Come creare una versione mobile di un sito Web (Website Builder)

Se non si dispone ancora di un sito Web, è opportuno scegliere un servizio fornito con supporto per il design reattivo e/o con un editor mobile integrato separato. Un costruttore di siti Web funzionerà meglio per questo scopo in quanto queste piattaforme sono per lo più create per lo sviluppo di siti Web compatibili con i dispositivi mobili e, quindi, inizialmente rendono tutti i loro blocchi, widget ed elementi di interfaccia reattivi per impostazione predefinita. Di conseguenza, i progetti costruiti con loro, visualizzare grande su schermi desktop e mobili senza la necessità di creare una versione mobile separata. Esaminiamo questa opzione tramite l’uso di Wix website builder.

Wix è il costruttore di siti web SaaS all-in-one che consente di avviare/gestire qualsiasi tipo di progetto web, sia esso un blog, un portfolio, una pagina di destinazione, un sito web aziendale o anche un negozio web. Tutti i modelli disponibili nella sua vasta galleria (ci sono oltre 550 di loro qui ormai) così come le pagine web che gli utenti creano da zero sono adattati automaticamente per la navigazione mobile.

È possibile impostare separatamente una versione del sito Web desktop e mobile qui, ma non esiste ancora un’opzione di anteprima del tablet. Quello che puoi fare qui è nascondere i blocchi selezionati e gli elementi dell’interfaccia e modificare/configurare sfondi unici qui. Inoltre, Wix ha specifiche funzionalità relative ai dispositivi mobili, come ad esempio:

• Visualizzazione del pannello di avvio rapido (è possibile aggiungere un pulsante di chiamata telefonica, collegamenti a social network / messaggeri ecc. qui);
• Il pulsante “Su” ;
• schermata di Benvenuto (una sorta di animato la schermata di caricamento che permette di visualizzare emotivo saluti o l’introduzione di un marchio/marchio prima ancora di accedere a un sito web);
• combinazione di colori Personalizzata per il browser Chrome pannello;
• Il servizio di automatizzata dei contenuti e del layout delle pagine web, ottimizzazione per i dispositivi mobili (questo è piuttosto una scelta conveniente per le pagine web create da inesperti designer).

Wix ha anche un’app mobile che ti consente di gestire un sito Web, se ottieni un abbonamento che include l’accesso a strumenti aziendali professionali.

Come creare una versione mobile del sito Web CMS (WordPress)

Come qualsiasi altro CMS, WordPress non presta attenzione a un dispositivo utilizzato per raggiungere un sito web. La piattaforma fornisce solo la variante di progettazione specificata nelle impostazioni predefinite.

ha ancora senso per evidenziare i servizi di web per gli sviluppatori di come WordPress è uno di quei CMS, il design del pannello di amministrazione di cui può adattarsi a dispositivi mobili (questo significa che un sito web sarà conveniente non solo per i visitatori, ma anche per il suo proprietario, che sarà in grado di modificare, impostare e riempirlo con contenuti da un dispositivo mobile). Inoltre, ci sono applicazioni per smartphone che sono applicabili non solo per un CMS classico, ma per un cloud WordPress.com piattaforma pure.

Di conseguenza, una versione del sito web mobile si rivela un merito di un modello stesso nel 99% dei casi. L’unica eccezione è costituita da plugin o script speciali che possono reindirizzare gli utenti a un tema mobile separato (in base alla risoluzione dello schermo o al modello del dispositivo, ad esempio).

Come creare una versione del sito Web mobile con WordPress da zero

Se hai solo intenzione di lanciare un sito Web, il problema non è così acuto: devi solo scegliere il modello giusto. L’assortimento di temi responsive è più che sufficiente anche nel catalogo ufficiale CMS. È necessario assicurarsi che il design selezionato aderisca assolutamente alle funzioni dichiarate. Lo stesso vale per piattaforme alternative come ThemeForest o TemplateMonster.

Se la velocità di caricamento e i parametri high PageSpeed Insights sono davvero importanti per te, allora ci sono modelli speciali che garantiscono fino a 100 punti nei test di profilo come il tema Neve, ad esempio. Tuttavia, i disegni che non possono adattarsi agli schermi degli smartphone, non sono abbastanza diffusi in questi giorni.

Come sostituire un modello WordPress con uno reattivo

Se possiedi già un sito Web per un periodo di tempo piuttosto lungo e il suo modello è obsoleto inizialmente creato per abbinare formati di schermo su larga scala, dovresti considerare la possibilità di sostituire un vecchio sito Web con uno nuovo. Tale approccio ha diversi vantaggi, vale a dire:

• La versione desktop e mobile del sito web avrà lo stesso stile;
• La necessità di gestire due tipi di interfaccia saranno eliminati;
• non devi scrivere complesso di funzioni e algoritmi per definire la risoluzione dello schermo e il tipo di dispositivo di un utente a reindirizzare lui/lei per la progettazione separato;
• temi Commerciali si presentano spesso con il supporto tecnico e, quindi, si sarà in grado di ottenere tutte le risposte alle tue domande e per impostare un nuovo tema non peggiore di quella precedente.

Gli svantaggi sono disponibili anche qui. I modelli sono spesso dotati di codici scritti di analisi, contatori,blocchi di annunci, ecc. Alcuni di essi introducono persino tipi di materiale separati, il che innesca la necessità di trasferire tutti questi elementi in un nuovo modello. Tutti i potenziali errori possono avere un impatto negativo sui risultati dei motori di ricerca. Se hai utenti regolari, potrebbero non gradire l’idea e potrebbero persino rifiutarsi di visitare il tuo sito web. Pertanto, è necessario analizzare a fondo l’interruttore di progettazione imminente per considerare tutte le possibili sfumature.

Come rendere reattivo un modello obsoleto

L’idea di rendere reattivo un modello obsoleto non è così complicata come potrebbe sembrare inizialmente. Tuttavia, non ha davvero senso provarlo, se ti mancano le abilità di nicchia o almeno le basi del web design. Ad ogni modo, c’è sempre la possibilità di assumere un web designer per aiutarti in questo.

L’idea principale è quella di aggiungere query multimediali CSS, in base alle quali verranno aggiunti stili a cascata appositamente per le risoluzioni dello schermo richieste. Dai un’occhiata all’esempio ora:

@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}

Ad esempio, se la tua griglia principale assomigliava a questa:

Avrà il seguente aspetto in HTML:

<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>

Stili per queste scatole vengono inseriti nel template CSS file con il dot in piedi inizio a significare che questa è la classe CSS:

.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}

Se vogliamo sostituire il fisso o un parente con larghezza 100% per il ha suggerito risoluzione dello schermo, quindi la griglia di partenza sarà il seguente aspetto:

Per raggiungere tale risultato, è sufficiente aggiungere i media query per i fogli di stile (l’esempio fornito di seguito è applicabile per tutti i dispositivi con larghezza dello schermo di 1024 pixel e sotto):

@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}

Tenere presente che i commenti forniti tra parentesi sono menzionati esclusivamente come esempio, non possono essere trasferiti al codice CSS effettivo.

Quali insidie possono emergere con tale realizzazione responsive design? Sfortunatamente, ce ne sono molti:

• L’intero layout della pagina Web può essere violato in quanto non solo i blocchi chiave disponibili su una pagina possono avere una larghezza fissa. Questi possono anche essere immagini, blocchi di notizie su una home page/in una categoria, blocchi di descrizione dell’autore e altri elementi. È impossibile identificarli tutti contemporaneamente. Ognuno di essi dovrà essere modificato non appena viene identificato.
• Il volume della pagina web non cambierà, il che avrà un impatto negativo sulla velocità di download con connessione Internet lenta (nessuna ottimizzazione sarà possibile in tali condizioni).
• Secondo le raccomandazioni del motore di ricerca, i font sui dispositivi mobili dovrebbero essere facilmente leggibili senza zoom indietro. Ciò innescherà la necessità di ridefinire tutte le dimensioni dei caratteri per intestazioni, testi del corpo, virgolette, elenchi (numerati e non numerati) ecc.
• Un’intestazione e un menu complesso dovrebbero essere completamente rifatti. Ha senso lasciare solo un piccolo logo del sito web, un’icona di ricerca (se si dispone di questa opzione) e un’icona del profilo (se viene utilizzato un sistema di autorizzazione). Un menu del desktop dovrebbe essere meglio nascosto e sostituito con un’icona “sandwich” (icona del menu). Nella maggior parte dei modelli reattivi popolari, questo è implementato da due menu paralleli: il primo è pensato per schermi desktop e viene visualizzato solo su PC, mentre il secondo è pensato solo per dispositivi mobili (viene visualizzato sulla base delle stesse query multimediali solo su dispositivi mobili).
• Se la struttura delle caselle principali differisce, ad esempio, la barra laterale viene visualizzata a sinistra ma non a destra, mentre tutti i widget verranno visualizzati davanti al contenuto principale, anche se è più logico posizionarli più in basso.
• Oltre ai file CSS, gli stili dei siti Web possono essere sostituiti con script JS, sarà più difficile trovarli e modificarli.

Queste sono solo alcune delle potenziali insidie. Pertanto, ha senso assumere un esperto di web design per completare l’attività.

I vantaggi delle query multimediali consentono di eliminare il codice errato in qualsiasi momento. Questi stili non vengono visualizzati sul sito web principale.

Come aggiungere una versione del sito Web Responsive con plugin

Alcuni CMS utilizzano i propri set di estensioni, mentre altri non li hanno affatto. WordPress coed con i plugin più notevoli per la creazione di siti web responsive, vale a dire:

• Jetpack – la funzione di creazione della versione mobile automatizzata è stata interrotta da marzo 2020;
• WPtouch-è disponibile in versioni gratuite ea pagamento, l’estensione ha i suoi plugin e temi come plugin di organizzazione cache separata, plugin di creazione di app web, plugin di ottimizzazione delle immagini, plugin di creazione AMP ecc. Il processo di passaggio da desktop a tema mobile con WPtouch è completato senza modificare gli URL delle pagine web, che conta molto per SEO;
• WP Mobile Menu – menu reattivo per dispositivi mobili (ti sarà utile se hai bisogno di sostituire un menu ingombrante e complesso della versione del sito Web desktop con un menu reattivo e compatto per dispositivi mobili);
• WP Mobile Detect – il plugin inizialmente definisce che una persona utilizza un dispositivo mobile e fornisce il risultato come un valore vero/falso. Ciò lo rende applicabile per l’implementazione dell’opzione switch modello o per la visualizzazione di determinati blocchi di interfaccia;
• WP Mobile Edition – il plugin in grado di convertire i siti web WordPress in applicazioni web full-optional. Gli utenti possono aggiungere un’icona del sito web ai loro desktop smartphone / tablet per utilizzarla nel formato a schermo intero (senza cornici e schede del browser);
• Mobile Smart – un plugin identifica che il dispositivo si riferisce alla classe mobile e quindi passa i temi a quello alternativo, che è compatibile con i dispositivi mobili. Una versione Pro è dotata di supporto integrato di menu mobili, widget speciali, opzione di gestione dei plugin (un set separato può essere fornito per i dispositivi mobili), interruttore di dominio (per l’implementazione del corretto lavoro di due versioni indipendenti del sito web) ecc.

Gli sviluppatori Web hanno fatto in modo che le estensioni sono rimasti non reclamati come molti proprietari di siti web hanno deciso di passare a versioni di template responsive. Pertanto, la maggior parte di questi plugin non è stata aggiornata per un periodo di tempo piuttosto lungo, il che potrebbe comportare l’incompatibilità con la versione corrente della piattaforma. L’unica eccezione è WPtouch.

Lavorare con ogni plugin avrà le sue peculiarità. Alcuni di loro offrono modelli mobili già pronti, mentre altri consigliano di scaricare estensioni di terze parti o di creare quelle proprie.

Se preferisci lavorare con una versione del sito Web mobile sul sottodominio / indirizzo alternativo, ecco le sfumature di cui dovresti essere a conoscenza:

• Questi sono diversi siti web per i motori di ricerca ed è davvero male che il loro contenuto non è unico;
• Per rendere i motori di ricerca “colla” URL e capire che questo è lo stesso sito web, tutti gli attributi di collegamento devono essere opportunamente organizzati:
• • Attributo di link rel=”alternate” href=”URL-mobile page” per le versioni desktop;
  • Attributo link rel=”canonical” href=”URL-desktop pagine web” – per il cellulare modelli.
• Se il contenuto su diverse versioni di pagine Web è diverso, si corre il rischio di ottenere sanzioni per il cloaking (per la sostituzione del contenuto).

Come creare la versione mobile del sito Web HTML

Per quanto i siti Web HTML non abbiano funzioni dinamiche, non sarà possibile analizzare una risoluzione dello schermo di un dispositivo e passare da un modello desktop al tema mobile in base al risultato. Tutto ciò che serve è ridisegnare completamente la griglia di layout e gli stili degli elementi problematici.

Abbiamo già esaminato come farlo-questo viene fatto tramite query multimediali. I layout più difficili da adattare sono quelli con larghezza fissa e posizione degli elementi.

Nulla funzionerà senza competenze di nicchia specializzate e immersione di codice CSS/HTML. Ha senso assumere un web design pro fin dall’inizio o cambiare il design in un altro che puoi acquistare o ordinare, o semplicemente sviluppare una nuova pagina Web da zero, ad esempio, utilizzando Mobirise offline website builder, ad esempio. Infine, potrebbe essere giunto il momento di passare all’infrastruttura cloud e di scegliere uno dei costruttori di siti Web online.

Siti separati per dispositivi mobili e desktop o un sito Web: quale è meglio?

Come accennato in precedenza, avere un sito web mobile è un must per qualsiasi imprenditore. Questo è un modo sicuro per garantire una presentazione aziendale di qualità sul web, generare traffico e garantire l’esperienza utente insuperabile. La domanda è: ha senso creare due versioni separate del sito Web per schermi mobili e desktop o creare un sito Web reattivo che visualizzerà grandi su entrambi i tipi di dispositivi?

In generale, l’avvio di un sito Web reattivo è una soluzione più efficace e pratica. Elimina la necessità di creare due diversi siti web con diversi domini / sottodomini, URL e struttura interna. Tali siti spesso confondono i visitatori e possono innescare problemi, quando si tratta di ottimizzazione SEO, internet marketing e altri metodi di promozione correlati. Invece, si ottiene un progetto che verrà visualizzato altrettanto bene su schermi desktop e mobili.

Quanto costa una versione mobile del sito Web?

Il costo di una versione mobile del sito Web dipende generalmente da una piattaforma con cui la si avvia. Se si sceglie un costruttore di siti web online come Wix, può essere assolutamente gratuito come il sistema consente di creare siti web che sono mobili-ready per impostazione predefinita. Tuttavia, free Wix plan non ti consente di collegare il tuo nome di dominio, il che renderà impossibile ottenere il massimo dalle prestazioni del tuo progetto.

Per quanto Wix abbia una politica dei prezzi piuttosto distintiva e versatile, puoi scegliere uno qualsiasi dei suoi piani per lanciare un sito web. Basta considerare i vostri obiettivi di web design, tipo di progetto e la specializzazione, così come il budget si è pronti a investire in esso, mentre scegliendo l’abbonamento più preferibile. Ogni piano Wix è dotato di una vasta gamma di caratteristiche speciali e termini che influenzano il costo finale. L’abbonamento al sito Web più economico ti costerà 1 13 / mese, mentre il prezzo del piano di base aziendale più conveniente parte da $23/mese.

Hai deciso di utilizzare WordPress per la creazione di siti web responsive? Quindi il costo del progetto alla fine dipenderà dal prezzo dei plugin per cui andrai. Le estensioni di WordPress sono generalmente posizionate come gratuite, ma una parte delle loro funzionalità diventa ancora disponibile dopo l’aggiornamento alla versione Pro. Ad esempio, il costo di WPtouch Pro varierà da $79 fino a $359 all’anno. Questo è esattamente il motivo per cui, sembra ragionevole passare a un modello reattivo già pronto. Tali temi vengono acquistati una volta, mentre il loro costo costituisce circa $40-80. Nel caso in cui si decide ancora di assumere uno sviluppatore web professionale per ridisegnare un tema obsoleto per voi il costo sarà discusso individualmente a seconda della complessità del progetto.

Bottom Line

Non è un segreto che qualsiasi sito web dovrebbe avere una versione mobile per rimanere richiesto con il pubblico di destinazione oggi. Ci sono quasi persone che non usano i loro dispositivi mobili per navigare sul web, cercando i servizi e i prodotti di cui hanno bisogno. Pertanto, il processo di ottimizzazione mobile del tuo sito Web dipenderà alla fine dalla piattaforma selezionata.

Se hai solo intenzione di lanciare un sito web, ha senso dare la preferenza a uno dei più popolari costruttori di siti web online. Wix funzionerà meglio per questo scopo. Nel caso in cui si esegue già un sito web alimentato dal CMS come WordPress, allora è meglio sostituirlo con un tema reattivo. I plugin che offrono supporto mobile, tuttavia, possono essere piuttosto costosi, mentre una riprogettazione completa del modello sarà una vera sfida, soprattutto se si intende far fronte all’attività in modo indipendente.

In ogni caso, non ha alcun senso creare una versione mobile separata del tuo sito web. Dovrai affrontare problemi legati allo sviluppo del progetto e al suo ulteriore supporto. Una soluzione molto più semplice e ragionevole è rendere il tuo sito web mobile-reattivo fin dall’inizio.