Design Responsive: ottimizzare il sito web Kopage per smartphone e tablet

Il classico costruttore di siti web Kopage crea siti web responsive, la cui visualizzazione può adattarsi a diverse dimensioni dello schermo.

Nonostante ciò, non dovresti controllare il tuo sito web esclusivamente da computer desktop. Testi, immagini, navigazione, moduli, contenuti esterni o codice inserito individualmente possono apparire diversi su uno smartphone rispetto a un grande schermo.

In questa guida ti spieghiamo cosa significa Responsive Design, quali aree del tuo sito web Kopage dovresti controllare con particolare attenzione e come riconoscere i tipici problemi di visualizzazione su smartphone e tablet.

Breve spiegazione: Il Responsive Design significa che la struttura e la visualizzazione di un sito web si adattano allo schermo disponibile. Ad esempio, una visualizzazione desktop a più colonne può trasformarsi in una visualizzazione a colonna singola su uno smartphone.

Perché la visualizzazione mobile è importante? #

Oggi i siti web vengono visitati su dispositivi molto diversi.

Ciò include computer desktop e notebook, nonché tablet e smartphone con schermi di diverse dimensioni.

Un sito web non dovrebbe quindi funzionare solo con la precisione della dimensione dello schermo con cui è stato creato.

Un cambio tipico potrebbe ad esempio essere il seguente:

Desktop
┌──────────┬──────────┬──────────┐
│ Contenuto 1 │ Contenuto 2 │ Contenuto 3 │
└──────────┴──────────┴──────────┘

Smartphone
┌────────────────────┐
│ Contenuto 1           │
├────────────────────┤
│ Contenuto 2           │
├────────────────────┤
│ Contenuto 3           │
└────────────────────┘

In questo modo il contenuto rimane utilizzabile anche su uno schermo più stretto.

Cosa fa Kopage automaticamente? #

Il classico website builder di Kopage è progettato per siti web responsivi. Molti layout e blocchi di contenuto possono quindi adattarsi automaticamente a diverse dimensioni dello schermo.

Ciò non significa tuttavia che tu non debba più controllare il risultato.

L'adattamento tecnico di un layout può funzionare, mentre, ad esempio, un titolo molto lungo, un'immagine inadatta o un widget esterno portano comunque a una scarsa visualizzazione mobile.

Importante: „Responsive“ non significa automaticamente „perfetto su ogni dispositivo“. L'adattamento automatico costituisce la base tecnica, mentre il controllo qualità rimane compito del gestore del sito web.

Non giudicare il sito web solo nell'editor #

Mentre modifichi un sito web, ti concentri rapidamente sulla visualizzazione all'interno dell'editor.

Tuttavia, ciò che conta è l'aspetto che il sito web pubblicato assume per un visitatore reale.

Controlla quindi le modifiche importanti anche al di fuori dell'editor sul sito web pubblicamente accessibile.

Controlla desktop, tablet e smartphone #

Per un controllo di base dovresti considerare almeno tre aree di visualizzazione:

Desktop / Notebook
Tablet
Smartphone

Non si tratta di testare singolarmente ogni modello di dispositivo esistente.

Molto più importante è verificare se il sito Web si comporta in modo sensato a diverse larghezze disponibili.

Usare uno smartphone vero #

Una funzione di anteprima nel costruttore di siti web o nel browser è utile, ma non sostituisce ogni test su un dispositivo reale.

Apri quindi il tuo sito web anche sul tuo smartphone.

In questo modo, ad esempio, puoi individuare problemi di usabilità che passano più in ossequio in un'anteprima desktop ridotta.

Consiglio pratico: Testa periodicamente le pagine importanti come farebbe un nuovo visitatore: apri il sito sullo smartphone e prova, senza alcuna conoscenza di editing, a trovare un'informazione, a usare il menu o a compilare un modulo.

Controllare la navigazione sullo smartphone #

La navigazione è una delle sezioni più importanti di un sito web mobile.

Su un desktop c'è abbastanza spazio per mostrare più voci di menu una accanto all'altra. Su uno smartphone la larghezza disponibile è notevolmente inferiore.

I siti web responsive utilizzano pertanto spesso una navigazione mobile più compatta.

Controlla che il menu si possa aprire e chiudere senza problemi e che tutte le voci di menu importanti siano accessibili.

Testare anche i sottomenu #

Se il tuo sito web utilizza pagine secondarie e sottomenu, non dovresti testare solo il menu principale.

Verifica anche se i livelli di navigazione secondari sono comprensibili e utilizzabili su un touchscreen.

Spiegheremo come gestire fondamentalmente la struttura delle pagine alla pagina Gestire pagine, navigazione e sottomenu in Kopage.

Evitare voci di menu troppo lunghe #

Nomi di pagina molto lunghi possono apparire disordinati, in particolare sui piccoli schermi.

Una voce di menu dovrebbe essere il più possibile concisa e tuttavia comprensibile nel descrivere dove conduce.

Invece di una lunga formulazione come:

Qui potete trovare tutto sui nostri servizi offerti

è ad esempio:

Servizi

molto più adatto alla navigazione.

Controlla le intestazioni sui piccoli schermi #

Grandi titoli che su un desktop entrano facilmente in una sola riga, su uno smartphone potrebbero richiedere più righe.

Questo è fondamentalmente normale.

La situazione diventa problematica quando le singole parole fuoriescono dallo schermo, il titolo occupa uno spazio sproporzionato o copre altri contenuti.

Controlla quindi con particolare attenzione i titoli principali molto grandi e i sottotitoli più lunghi.

I testi devono essere leggibili senza zoomare #

I visitatori dovrebbero essere in grado di leggere i normali testi di un sito web su uno smartphone senza dover ingrandire manualmente la pagina.

Caratteri molto piccoli rendono l'utilizzo difficile, così come righe di testo estremamente lunghe su schermi grandi.

Una buona visualizzazione responsive tiene quindi conto non solo della larghezza del layout, ma anche della leggibilità del contenuto.

Non allungare inutilmente i paragrafi sui dispositivi mobili #

Un paragrafo che su un grande schermo appare relativamente compatto, può sembrare molto lungo su uno smartphone.

Struttura quindi i contenuti estesi con paragrafi significativi e sottotitoli.

Questo migliora l'orientamento sui piccoli schermi e aiuta anche i visitatori da desktop.

Controlla i blocchi di contenuto #

I blocchi di contenuto possono mostrare più contenuti uno accanto all'altro su schermi più grandi e disporli in modo diverso sui dispositivi più piccoli.

Verifica quindi, dopo aver inserito o modificato un blocco, che l'ordine dei contenuti sullo smartphone sia ancora logico.

Soprattutto in caso di combinazioni di immagini e testo, dopo il riordinamento per dispositivi mobili dovrebbe essere ancora chiaro quale immagine appartiene a quale testo.

Spieghiamo il lavoro con i blocchi di contenuto su Creare contenuti con Kopage: modifica di blocchi di contenuto, testi e immagini.

Controllare le immagini responsive #

Le immagini sono una causa comune di problemi sui piccoli schermi.

Verifica che le immagini rimangano all'interno dell'area disponibile e che i contenuti importanti dell'immagine siano visibili anche dopo un'eventuale modifica o ritaglio.

Un'immagine molto ampia può apparire completamente diversa su uno smartphone rispetto a un desktop.

Scegli il formato dell'immagine in base all'utilizzo #

Un'immagine panoramica estremamente ampia può funzionare bene come grande area desktop, mentre il soggetto vero e proprio risulta quasi irriconoscibile su uno smartphone stretto.

Considera quindi già nella scelta dell'immagine dove e come verrà utilizzata.

Ulteriori informazioni sono disponibili su Creare immagini, gallerie fotografiche e slider in Kopage.

Testare le gallerie sullo smartphone #

Se utilizzi una galleria fotografica, dovresti verificare quante immagini vengono visualizzate contemporaneamente su un piccolo schermo e come le singole immagini possono essere aperte o visualizzate.

Una galleria dovrebbe essere comodamente utilizzabile anche tramite touchscreen.

Non controllare lo slider solo sul desktop #

Anche gli slider possono apparire diversi sugli schermi più piccoli.

Controlla in particolare se le immagini sono visualizzate correttamente e se eventuali testi o elementi di controllo rimangono leggibili e accessibili.

Se sullo smartphone un cursore disturba più di quanto aiuti, dovresti verificare se i contenuti utilizzati o la loro struttura possono essere modificati.

I pulsanti devono essere facili da usare #

I pulsanti e altri elementi cliccabili vengono azionati sugli smartphone con il dito.

Non dovrebbero quindi essere inutilmente piccoli o posizionati così vicini l'uno all'altro da toccare accidentalmente l'elemento sbagliato.

Controlla anche l'etichetta.

Un testo del pulsante molto lungo potrebbe andare a capo in modo sfavorevole su uno schermo stretto.

Link nel testo #

Anche i normali collegamenti testuali dovrebbero essere facilmente selezionabili su un touchscreen.

Quando numerosi link differenti sono posizionati immediatamente uno accanto all'altro, l'utilizzo sui dispositivi più piccoli può diventare più difficoltoso.

Inserisci quindi i link dove sono contenutisticamente utili ed evita inutili accumuli di link.

Testare la versione mobile con particolare cura #

I moduli di contatto sono particolarmente importanti sugli smartphone perché molti visitatori si mettono in contatto direttamente tramite un dispositivo mobile.

Testa un modulo completamente e non limitarti a controllarne l'aspetto visivo.

Verifica ad esempio:

Sono leggibili tutte le etichette dei campi?
I campi di immissione sono abbastanza larghi?
È possibile selezionare ciascun campo?
Le opzioni di scelta sono utilizzabili?
Il pulsante di invio è visibile?
Il modulo può essere inviato completamente?
Compare la conferma prevista?

Trattiamo la configurazione dei moduli sotto Creare moduli e moduli di contatto con Kopage.

Informazioni di contatto sullo smartphone #

I numeri di telefono, gli indirizzi e-mail e gli indirizzi postali dovrebbero essere completamente leggibili anche sui piccoli schermi.

Indirizzi e-mail particolarmente lunghi o altre stringhe di caratteri possono fuoriuscire da un'area se la progettazione non è ottimale.

Perciò controlla anche le pagine dei contatti apparentemente semplici su uno smartphone.

Google Maps sui dispositivi mobili #

Una mappa incorporata può occupare molto spazio su un desktop, mentre su uno smartphone è disponibile solo una larghezza limitata.

Verifica che la mappa sia visualizzata correttamente e che il resto della pagina possa ancora essere utilizzato senza problemi.

Trattiamo Google Maps e altri contenuti esterni ai sensi dell' Incorporare Google Maps, YouTube e social media in Kopage.

Controllare i video di YouTube #

I video incorporati dovrebbero adattarsi alla larghezza disponibile.

Verifica che il video sia completamente visibile sullo smartphone e non fuoriesca dall'area dei contenuti.

Verifica anche se la riproduzione si avvia come previsto.

I widget esterni sono una comune fonte di problemi #

Kopage può essere strutturato in modo responsive, mentre un servizio esterno incorporato utilizza una larghezza fissa o regole di visualizzazione proprie.

Ciò può verificarsi, ad esempio, con sistemi di prenotazione, moduli esterni, funzioni di chat o altri widget.

Testa quindi tali integrazioni con particolare attenzione su diverse dimensioni dello schermo.

Verifica il tuo HTML, CSS e JavaScript #

Il codice inserito individualmente non diventa automaticamente responsive per il fatto di essere utilizzato all'interno di un sito web Kopage.

Soprattutto larghezze fisse, posizionamenti fissi ed elementi esterni possono causare problemi sui piccoli schermi.

Se usi codice personalizzato, dovresti controllare ogni modifica anche da dispositivo mobile.

Ulteriori informazioni sono disponibili su Utilizzare HTML, CSS e JavaScript personalizzati in Kopage.

Attenzione: Se un singolo elemento sullo smartphone sporge lateralmente dal sito web, verifica in particolare i contenuti incorporati individualmente e il codice personalizzato. La causa non deve necessariamente risiedere nel layout generale di Kopage.

Cosa significa scorrimento orizzontale? #

Su un normale sito web mobile, il contenuto principale dovrebbe essere fondamentalmente visualizzato all'interno della larghezza dello schermo disponibile.

Se il visitatore deve scorrere l'intera pagina lateralmente per poter vedere i contenuti, spesso un elemento fuoriesce dalla larghezza prevista.

Le possibili cause includono, ad esempio:

elemento incorporato troppo largo
specifica di larghezza fissa
stringa molto lunga non a capo
HTML o CSS personalizzato
widget esterno

Le tabelle possono essere difficili sugli smartphone #

Le tabelle larghe con molte colonne sono difficili da visualizzare sugli schermi piccoli.

Se desideri presentare informazioni dettagliate in formato tabellare, dovresti quindi verificare se la tabella rimane effettivamente comprensibile sui dispositivi mobili.

In alcuni casi, una struttura dei contenuti diversa può essere più facile da leggere per i visitatori da dispositivi mobili.

Testare i download sullo smartphone #

Se offri file PDF o altri documenti, dovresti anche controllarne la fruizione sui dispositivi mobili.

Il link per il download stesso deve essere facilmente utilizzabile e il documento dovrebbe poter essere utilizzato in modo sensato dai visitatori.

Ulteriori informazioni sono disponibili su Gestire file e offrire download sul sito web.

Testare completamente il negozio online da cellulare #

In un negozio online non basta visualizzare solo la pagina del prodotto sullo smartphone.

Testa l'intero processo di acquisto.

Selezionare il prodotto
        ↓
Verificare i dettagli del prodotto
        ↓
Aprire il carrello
        ↓
Controllare quantità e prezzo
        ↓
Inserire le informazioni di ordine
        ↓
Selezionare le opzioni disponibili
        ↓
Completare il processo d'ordine

Spiegheremo come configurare fondamentalmente il negozio Kopage su Creare un negozio online con Kopage e gestire i prodotti.

Testare siti web multilingui da dispositivi mobili #

Le traduzioni possono essere notevolmente più lunghe o più brevi del testo originale.

Ciò può fare sì che una pagina in una lingua appaia perfetta sullo smartphone e causi problemi in un'altra lingua.

Controlla quindi ogni versione linguistica importante separatamente.

Particolarmente rilevanti sono la navigazione, la selezione della lingua, i pulsanti e le intestazioni.

Trattiamo il plurilinguismo sotto Creare un sito web multilingue con Kopage.

Controlla l'intestazione sullo smartphone #

L'intestazione contiene spesso il logo, la navigazione e altri elementi importanti.

Verifica che il logo appaia di dimensioni adeguate e che la navigazione rimanga facilmente accessibile.

Un logo molto grande non dovrebbe occupare una parte sproporzionatamente grande dello schermo dello smartphone.

Non dimenticare il footer #

Il footer viene facilmente trascurato nel controllo da mobile perché appare solo alla fine di una pagina.

Verifica anche lì testi, link, informazioni di contatto ed eventualmente altri elementi.

Soprattutto diverse sezioni di piè di pagina disposte una accanto all'altra possono essere visualizzate una sotto l'altra sullo smartphone. Controlla se la sequenza che ne risulta ha ancora senso.

Il design e il responsive design vanno di pari passo #

Colori e caratteri possono essere tecnicamente corretti e tuttavia apparire inadatti su uno smartphone.

Caratteri molto grandi, bassi contrasti o layout complessi possono rendere difficile l'uso da mobile.

Trattiamo le impostazioni generali di design sotto Modificare template e design di Kopage: colori, caratteri, intestazione e piè di pagina.

Considerare il formato verticale e orizzontale #

Gli smartphone e i tablet possono essere utilizzati in modalità verticale o orizzontale.

Non è necessario progettare ogni pagina separatamente per ogni orientamento possibile. Tuttavia, per aree importanti o complesse, un breve test in entrambi gli orientamenti può evidenziare eventuali problemi.

Testare diversi browser #

I browser moderni visualizzano le tecnologie Web standardizzate in modo ampiamente uniforme, ma possono comunque verificarsi differenze.

Per i siti web importanti o dopo modifiche importanti, può quindi essere utile controllare il sito in più di un browser aggiornato.

Questo è particolarmente utile per le integrazioni esterne e il codice personalizzato.

Utilizzare l'anteprima del browser sul computer #

Anche senza diversi smartphone, puoi prima controllare la visualizzazione al computer.

Molti browser moderni dispongono di strumenti per sviluppatori che consentono di simulare diverse larghezze dello schermo.

Questo è utile per individuare rapidamente problemi evidenti di layout.

Nota: Una dimensione dello schermo simulata è un buon strumento di test, ma non sostituisce completamente l'utilizzo su un vero dispositivo touch.

Responsive Design e tempo di caricamento #

Un sito web mobile non dovrebbe solo essere esteticamente gradevole, ma anche caricarsi in modo efficiente.

I visitatori da smartphone non si trovano sempre in una rete Wi-Fi veloce.

Grandi immagini, numerosi video e molti widget esterni possono quindi farsi notare particolarmente sui dispositivi mobili.

Usa i media in modo consapevole e ottimizza i file inutilmente grandi.

Visualizzazione mobile e SEO #

Un sito mobile ben utilizzabile è rilevante anche per la qualità e la reperibilità di un sito web.

I motori di ricerca devono essere in grado di indicizzare tecnicamente i contenuti sui dispositivi mobili e i visitatori dovrebbero poter utilizzare il sito senza ostacoli inutili.

Trattiamo le basi generali della SEO in SEO con Kopage: titolo della pagina, metadati, URL e ottimizzazione per i motori di ricerca.

Nessun sito web mobile separato necessario #

In un layout responsive, fondamentalmente lo stesso sito web viene adattato a diverse dimensioni dello schermo.

Non devi quindi gestire per ogni pagina desktop una pagina separata per smartphone con gli stessi contenuti.

Questo riduce l'impegno di manutenzione e garantisce che le modifiche non debbano essere apportate in parallelo su due siti web separati.

Verificare nuovamente sui dispositivi mobili dopo le modifiche al contenuto #

Una pagina che oggi si presenta bene sui dispositivi mobili, potrebbe presentare nuovamente problemi in seguito a una modifica successiva.

Ad esempio, un nuovo titolo più lungo, un'altra immagine o un widget aggiuntivo possono modificare la visualizzazione.

Controlla quindi in particolare dopo modifiche importanti le pagine più importanti.

Dare priorità alle pagine particolarmente importanti #

Con un sito web di grandi dimensioni, non è necessario testare completamente tutte le sottopagine su più dispositivi dopo ogni piccola correzione di testo.

Dai priorità alle pagine e alle funzionalità che sono particolarmente importanti per i visitatori.

Ciò include spesso:

Pagina iniziale
importanti pagine di servizio
pagina di contatto
moduli
negozio e processo d'ordine
landing page centrali
navigazione

Cosa fare se viene visualizzata in modo errato solo una singola area? #

Se il resto del sito web funziona correttamente sui dispositivi mobili, dovresti prima esaminare l'area interessata.

Verifica ad esempio se lì viene utilizzato un'immagine insolitamente grande, un widget esterno, codice HTML personalizzato o CSS individuale.

Non modificare immediatamente l'intero design del sito web se il problema riguarda chiaramente un singolo elemento.

Cosa fare se l'intero sito web presenta problemi da dispositivi mobili? #

Se sono interessate numerose aree, dovresti verificare se sono state apportate modifiche importanti al modello, al design o al codice personalizzato.

Non rimuovere contenuti singoli a caso, ma cerca prima di determinare da quale modifica esiste il problema.

Nel caso di codice inserito individualmente, può essere utile annullare l'ultima modifica a titolo di prova.

Errori tipici nella visualizzazione mobile #

I problemi comuni sono intestazioni troppo lunghe, immagini sovradimensionate, navigazione difficile da usare, pulsanti troppo piccoli e widget esterni con larghezze fisse.

Anche tabelle lunghe, moduli non adattati e codice inserito individualmente possono causare difficoltà sugli smartphone.

Un errore particolarmente comune consiste nel creare un sito web esclusivamente su computer e aprirlo per la prima volta su uno smartphone solo dopo che è stato completamente completato.

Consiglio pratico: Controlla la visualizzazione mobile già durante la fase di creazione. I problemi sono molto più facili da risolvere se li noti subito dopo la modifica in questione.

Controllo qualità mobile prima del rilascio #

Aprire la pagina iniziale
        ↓
Testare la navigazione
        ↓
Testare i sottomenu
        ↓
Controllare le intestazioni
        ↓
Leggere i testi
        ↓
Verificare immagini e slider
        ↓
Testare pulsanti e link
        ↓
Compilare i moduli
        ↓
Controllare i contenuti esterni
        ↓
Verificare il footer
        ↓
Aprire le sottopagine importanti
        ↓
Testare lo shop / i download
        ↓
Verificare secondo dispositivo o browser

Il responsive design è un controllo di qualità continuo #

L'ottimizzazione per i dispositivi mobili non è un'attività una tantum che si conclude per sempre dopo la creazione del sito web.

Nuovi contenuti, immagini, moduli, servizi esterni e personalizzazioni possono modificare la visualizzazione.

Un breve test mobile dovrebbe quindi rientrare nei controlli normali dopo importanti modifiche al sito web.

Come procediamo? #

Quando il contenuto del tuo sito web è stato strutturato, progettato e testato su diversi dispositivi, segue il controllo finale prima o dopo la pubblicazione.

Durante questo processo, dovresti testare non solo il design, ma anche la navigazione, i link, i moduli e altre funzioni importanti.

Si prosegue quindi con Pubblicare il sito web su Kopage e risolvere i problemi tipici.

Riepilogo #

Il classico website builder di Kopage è progettato per siti web responsive e può adattare i contenuti a diverse dimensioni dello schermo.

Nonostante ciò, dovresti controllare il tuo sito web su desktop, tablet e in particolare su uno smartphone reale.

Fai attenzione alla navigazione, alle intestazioni, ai testi, alle immagini, ai pulsanti, ai moduli, ai contenuti esterni, ai download e, se necessario, all'intero processo di acquisto del tuo negozio.

I widget esterni e il codice HTML, CSS o JavaScript personalizzato richiedono particolare attenzione, poiché questi elementi potrebbero non essere automaticamente adattati in modo ottimale alla visualizzazione responsive di Kopage.

Verifica nuovamente la visualizzazione mobile dopo modifiche importanti.

Un sito web responsive non è semplicemente una versione rimpicciolita della pagina desktop. Contenuti, navigazione e funzionalità devono rimanere comprensibili, leggibili e utilizzabili su ogni schermo rilevante.