{"id":22861,"date":"2026-08-29T10:34:25","date_gmt":"2026-08-29T08:34:25","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&p=22861"},"modified":"2026-08-29T10:34:26","modified_gmt":"2026-08-29T08:34:26","password":"","slug":"design-responsive-kopage","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/it\/hilfe\/website-baukasten\/kopage-responsive-design\/","title":{"rendered":"Design Responsive: ottimizzare il sito web Kopage per smartphone e tablet"},"content":{"rendered":"

Il classico costruttore di siti web Kopage crea siti web responsive, la cui visualizzazione pu\u00f2 adattarsi a diverse dimensioni dello schermo.<\/p>\n\n\n\n

Nonostante ci\u00f2, 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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\n

Breve spiegazione:<\/strong> 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\u00f9 colonne pu\u00f2 trasformarsi in una visualizzazione a colonna singola su uno smartphone.<\/p>\n<\/blockquote>\n\n\n\n

Perch\u00e9 la visualizzazione mobile \u00e8 importante?<\/h2>\n\n\n\n

Oggi i siti web vengono visitati su dispositivi molto diversi.<\/p>\n\n\n\n

Ci\u00f2 include computer desktop e notebook, nonch\u00e9 tablet e smartphone con schermi di diverse dimensioni.<\/p>\n\n\n\n

Un sito web non dovrebbe quindi funzionare solo con la precisione della dimensione dello schermo con cui \u00e8 stato creato.<\/p>\n\n\n\n

Un cambio tipico potrebbe ad esempio essere il seguente:<\/p>\n\n\n\n

Desktop\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Contenuto 1 \u2502 Contenuto 2 \u2502 Contenuto 3 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n\nSmartphone\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Contenuto 1           \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 Contenuto 2           \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 Contenuto 3           \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/code><\/pre>\n\n\n\n
In questo modo il contenuto rimane utilizzabile anche su uno schermo pi\u00f9 stretto.<\/p>\n\n\n\n
Cosa fa Kopage automaticamente?<\/h2>\n\n\n\n
Il classico website builder di Kopage \u00e8 progettato per siti web responsivi. Molti layout e blocchi di contenuto possono quindi adattarsi automaticamente a diverse dimensioni dello schermo.<\/p>\n\n\n\n
Ci\u00f2 non significa tuttavia che tu non debba pi\u00f9 controllare il risultato.<\/p>\n\n\n\n
L'adattamento tecnico di un layout pu\u00f2 funzionare, mentre, ad esempio, un titolo molto lungo, un'immagine inadatta o un widget esterno portano comunque a una scarsa visualizzazione mobile.<\/p>\n\n\n\n
\n
Importante:<\/strong> \u201eResponsive\u201c non significa automaticamente \u201eperfetto su ogni dispositivo\u201c. L'adattamento automatico costituisce la base tecnica, mentre il controllo qualit\u00e0 rimane compito del gestore del sito web.<\/p>\n<\/blockquote>\n\n\n\n
Non giudicare il sito web solo nell'editor<\/h2>\n\n\n\n
Mentre modifichi un sito web, ti concentri rapidamente sulla visualizzazione all'interno dell'editor.<\/p>\n\n\n\n
Tuttavia, ci\u00f2 che conta \u00e8 l'aspetto che il sito web pubblicato assume per un visitatore reale.<\/p>\n\n\n\n
Controlla quindi le modifiche importanti anche al di fuori dell'editor sul sito web pubblicamente accessibile.<\/p>\n\n\n\n
Controlla desktop, tablet e smartphone<\/h2>\n\n\n\n
Per un controllo di base dovresti considerare almeno tre aree di visualizzazione:<\/p>\n\n\n\n
Desktop \/ Notebook\nTablet\nSmartphone<\/code><\/pre>\n\n\n\n
Non si tratta di testare singolarmente ogni modello di dispositivo esistente.<\/p>\n\n\n\n
Molto pi\u00f9 importante \u00e8 verificare se il sito Web si comporta in modo sensato a diverse larghezze disponibili.<\/p>\n\n\n\n
Usare uno smartphone vero<\/h2>\n\n\n\n
Una funzione di anteprima nel costruttore di siti web o nel browser \u00e8 utile, ma non sostituisce ogni test su un dispositivo reale.<\/p>\n\n\n\n
Apri quindi il tuo sito web anche sul tuo smartphone.<\/p>\n\n\n\n
In questo modo, ad esempio, puoi individuare problemi di usabilit\u00e0 che passano pi\u00f9 in ossequio in un'anteprima desktop ridotta.<\/p>\n\n\n\n
\n
Consiglio pratico:<\/strong> 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.<\/p>\n<\/blockquote>\n\n\n\n
Controllare la navigazione sullo smartphone<\/h2>\n\n\n\n
La navigazione \u00e8 una delle sezioni pi\u00f9 importanti di un sito web mobile.<\/p>\n\n\n\n
Su un desktop c'\u00e8 abbastanza spazio per mostrare pi\u00f9 voci di menu una accanto all'altra. Su uno smartphone la larghezza disponibile \u00e8 notevolmente inferiore.<\/p>\n\n\n\n
I siti web responsive utilizzano pertanto spesso una navigazione mobile pi\u00f9 compatta.<\/p>\n\n\n\n
Controlla che il menu si possa aprire e chiudere senza problemi e che tutte le voci di menu importanti siano accessibili.<\/p>\n\n\n\n
Testare anche i sottomenu<\/h2>\n\n\n\n
Se il tuo sito web utilizza pagine secondarie e sottomenu, non dovresti testare solo il menu principale.<\/p>\n\n\n\n
Verifica anche se i livelli di navigazione secondari sono comprensibili e utilizzabili su un touchscreen.<\/p>\n\n\n\n
Spiegheremo come gestire fondamentalmente la struttura delle pagine alla pagina Gestire pagine, navigazione e sottomenu in Kopage<\/a>.<\/p>\n\n\n\n
Evitare voci di menu troppo lunghe<\/h2>\n\n\n\n
Nomi di pagina molto lunghi possono apparire disordinati, in particolare sui piccoli schermi.<\/p>\n\n\n\n
Una voce di menu dovrebbe essere il pi\u00f9 possibile concisa e tuttavia comprensibile nel descrivere dove conduce.<\/p>\n\n\n\n
Invece di una lunga formulazione come:<\/p>\n\n\n\n
Qui potete trovare tutto sui nostri servizi offerti<\/code><\/p>\n\n\n\n
\u00e8 ad esempio:<\/p>\n\n\n\n
Servizi<\/code><\/p>\n\n\n\n
molto pi\u00f9 adatto alla navigazione.<\/p>\n\n\n\n
Controlla le intestazioni sui piccoli schermi<\/h2>\n\n\n\n
Grandi titoli che su un desktop entrano facilmente in una sola riga, su uno smartphone potrebbero richiedere pi\u00f9 righe.<\/p>\n\n\n\n
Questo \u00e8 fondamentalmente normale.<\/p>\n\n\n\n
La situazione diventa problematica quando le singole parole fuoriescono dallo schermo, il titolo occupa uno spazio sproporzionato o copre altri contenuti.<\/p>\n\n\n\n
Controlla quindi con particolare attenzione i titoli principali molto grandi e i sottotitoli pi\u00f9 lunghi.<\/p>\n\n\n\n
I testi devono essere leggibili senza zoomare<\/h2>\n\n\n\n
I visitatori dovrebbero essere in grado di leggere i normali testi di un sito web su uno smartphone senza dover ingrandire manualmente la pagina.<\/p>\n\n\n\n
Caratteri molto piccoli rendono l'utilizzo difficile, cos\u00ec come righe di testo estremamente lunghe su schermi grandi.<\/p>\n\n\n\n
Una buona visualizzazione responsive tiene quindi conto non solo della larghezza del layout, ma anche della leggibilit\u00e0 del contenuto.<\/p>\n\n\n\n
Non allungare inutilmente i paragrafi sui dispositivi mobili<\/h2>\n\n\n\n
Un paragrafo che su un grande schermo appare relativamente compatto, pu\u00f2 sembrare molto lungo su uno smartphone.<\/p>\n\n\n\n
Struttura quindi i contenuti estesi con paragrafi significativi e sottotitoli.<\/p>\n\n\n\n
Questo migliora l'orientamento sui piccoli schermi e aiuta anche i visitatori da desktop.<\/p>\n\n\n\n
Controlla i blocchi di contenuto<\/h2>\n\n\n\n
I blocchi di contenuto possono mostrare pi\u00f9 contenuti uno accanto all'altro su schermi pi\u00f9 grandi e disporli in modo diverso sui dispositivi pi\u00f9 piccoli.<\/p>\n\n\n\n
Verifica quindi, dopo aver inserito o modificato un blocco, che l'ordine dei contenuti sullo smartphone sia ancora logico.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Spieghiamo il lavoro con i blocchi di contenuto su Creare contenuti con Kopage: modifica di blocchi di contenuto, testi e immagini<\/a>.<\/p>\n\n\n\n
Controllare le immagini responsive<\/h2>\n\n\n\n
Le immagini sono una causa comune di problemi sui piccoli schermi.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Un'immagine molto ampia pu\u00f2 apparire completamente diversa su uno smartphone rispetto a un desktop.<\/p>\n\n\n\n
Scegli il formato dell'immagine in base all'utilizzo<\/h2>\n\n\n\n
Un'immagine panoramica estremamente ampia pu\u00f2 funzionare bene come grande area desktop, mentre il soggetto vero e proprio risulta quasi irriconoscibile su uno smartphone stretto.<\/p>\n\n\n\n
Considera quindi gi\u00e0 nella scelta dell'immagine dove e come verr\u00e0 utilizzata.<\/p>\n\n\n\n
Ulteriori informazioni sono disponibili su Creare immagini, gallerie fotografiche e slider in Kopage<\/a>.<\/p>\n\n\n\n
Testare le gallerie sullo smartphone<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
Una galleria dovrebbe essere comodamente utilizzabile anche tramite touchscreen.<\/p>\n\n\n\n
Non controllare lo slider solo sul desktop<\/h2>\n\n\n\n
Anche gli slider possono apparire diversi sugli schermi pi\u00f9 piccoli.<\/p>\n\n\n\n
Controlla in particolare se le immagini sono visualizzate correttamente e se eventuali testi o elementi di controllo rimangono leggibili e accessibili.<\/p>\n\n\n\n
Se sullo smartphone un cursore disturba pi\u00f9 di quanto aiuti, dovresti verificare se i contenuti utilizzati o la loro struttura possono essere modificati.<\/p>\n\n\n\n
I pulsanti devono essere facili da usare<\/h2>\n\n\n\n
I pulsanti e altri elementi cliccabili vengono azionati sugli smartphone con il dito.<\/p>\n\n\n\n
Non dovrebbero quindi essere inutilmente piccoli o posizionati cos\u00ec vicini l'uno all'altro da toccare accidentalmente l'elemento sbagliato.<\/p>\n\n\n\n
Controlla anche l'etichetta.<\/p>\n\n\n\n
Un testo del pulsante molto lungo potrebbe andare a capo in modo sfavorevole su uno schermo stretto.<\/p>\n\n\n\n
Link nel testo<\/h2>\n\n\n\n
Anche i normali collegamenti testuali dovrebbero essere facilmente selezionabili su un touchscreen.<\/p>\n\n\n\n
Quando numerosi link differenti sono posizionati immediatamente uno accanto all'altro, l'utilizzo sui dispositivi pi\u00f9 piccoli pu\u00f2 diventare pi\u00f9 difficoltoso.<\/p>\n\n\n\n
Inserisci quindi i link dove sono contenutisticamente utili ed evita inutili accumuli di link.<\/p>\n\n\n\n
Testare la versione mobile con particolare cura<\/h2>\n\n\n\n
I moduli di contatto sono particolarmente importanti sugli smartphone perch\u00e9 molti visitatori si mettono in contatto direttamente tramite un dispositivo mobile.<\/p>\n\n\n\n
Testa un modulo completamente e non limitarti a controllarne l'aspetto visivo.<\/p>\n\n\n\n
Verifica ad esempio:<\/p>\n\n\n\n
Sono leggibili tutte le etichette dei campi?\nI campi di immissione sono abbastanza larghi?\n\u00c8 possibile selezionare ciascun campo?\nLe opzioni di scelta sono utilizzabili?\nIl pulsante di invio \u00e8 visibile?\nIl modulo pu\u00f2 essere inviato completamente?\nCompare la conferma prevista?<\/code><\/pre>\n\n\n\n
Trattiamo la configurazione dei moduli sotto Creare moduli e moduli di contatto con Kopage<\/a>.<\/p>\n\n\n\n
Informazioni di contatto sullo smartphone<\/h2>\n\n\n\n
I numeri di telefono, gli indirizzi e-mail e gli indirizzi postali dovrebbero essere completamente leggibili anche sui piccoli schermi.<\/p>\n\n\n\n
Indirizzi e-mail particolarmente lunghi o altre stringhe di caratteri possono fuoriuscire da un'area se la progettazione non \u00e8 ottimale.<\/p>\n\n\n\n
Perci\u00f2 controlla anche le pagine dei contatti apparentemente semplici su uno smartphone.<\/p>\n\n\n\n
Google Maps sui dispositivi mobili<\/h2>\n\n\n\n
Una mappa incorporata pu\u00f2 occupare molto spazio su un desktop, mentre su uno smartphone \u00e8 disponibile solo una larghezza limitata.<\/p>\n\n\n\n
Verifica che la mappa sia visualizzata correttamente e che il resto della pagina possa ancora essere utilizzato senza problemi.<\/p>\n\n\n\n
Trattiamo Google Maps e altri contenuti esterni ai sensi dell' Incorporare Google Maps, YouTube e social media in Kopage<\/a>.<\/p>\n\n\n\n
Controllare i video di YouTube<\/h2>\n\n\n\n
I video incorporati dovrebbero adattarsi alla larghezza disponibile.<\/p>\n\n\n\n
Verifica che il video sia completamente visibile sullo smartphone e non fuoriesca dall'area dei contenuti.<\/p>\n\n\n\n
Verifica anche se la riproduzione si avvia come previsto.<\/p>\n\n\n\n
I widget esterni sono una comune fonte di problemi<\/h2>\n\n\n\n
Kopage pu\u00f2 essere strutturato in modo responsive, mentre un servizio esterno incorporato utilizza una larghezza fissa o regole di visualizzazione proprie.<\/p>\n\n\n\n
Ci\u00f2 pu\u00f2 verificarsi, ad esempio, con sistemi di prenotazione, moduli esterni, funzioni di chat o altri widget.<\/p>\n\n\n\n
Testa quindi tali integrazioni con particolare attenzione su diverse dimensioni dello schermo.<\/p>\n\n\n\n
Verifica il tuo HTML, CSS e JavaScript<\/h2>\n\n\n\n
Il codice inserito individualmente non diventa automaticamente responsive per il fatto di essere utilizzato all'interno di un sito web Kopage.<\/p>\n\n\n\n
Soprattutto larghezze fisse, posizionamenti fissi ed elementi esterni possono causare problemi sui piccoli schermi.<\/p>\n\n\n\n
Se usi codice personalizzato, dovresti controllare ogni modifica anche da dispositivo mobile.<\/p>\n\n\n\n
Ulteriori informazioni sono disponibili su Utilizzare HTML, CSS e JavaScript personalizzati in Kopage<\/a>.<\/p>\n\n\n\n
\n
Attenzione:<\/strong> 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.<\/p>\n<\/blockquote>\n\n\n\n
Cosa significa scorrimento orizzontale?<\/h2>\n\n\n\n
Su un normale sito web mobile, il contenuto principale dovrebbe essere fondamentalmente visualizzato all'interno della larghezza dello schermo disponibile.<\/p>\n\n\n\n
Se il visitatore deve scorrere l'intera pagina lateralmente per poter vedere i contenuti, spesso un elemento fuoriesce dalla larghezza prevista.<\/p>\n\n\n\n
Le possibili cause includono, ad esempio:<\/p>\n\n\n\n
elemento incorporato troppo largo\nspecifica di larghezza fissa\nstringa molto lunga non a capo\nHTML o CSS personalizzato\nwidget esterno<\/code><\/pre>\n\n\n\n
Le tabelle possono essere difficili sugli smartphone<\/h2>\n\n\n\n
Le tabelle larghe con molte colonne sono difficili da visualizzare sugli schermi piccoli.<\/p>\n\n\n\n
Se desideri presentare informazioni dettagliate in formato tabellare, dovresti quindi verificare se la tabella rimane effettivamente comprensibile sui dispositivi mobili.<\/p>\n\n\n\n
In alcuni casi, una struttura dei contenuti diversa pu\u00f2 essere pi\u00f9 facile da leggere per i visitatori da dispositivi mobili.<\/p>\n\n\n\n
Testare i download sullo smartphone<\/h2>\n\n\n\n
Se offri file PDF o altri documenti, dovresti anche controllarne la fruizione sui dispositivi mobili.<\/p>\n\n\n\n
Il link per il download stesso deve essere facilmente utilizzabile e il documento dovrebbe poter essere utilizzato in modo sensato dai visitatori.<\/p>\n\n\n\n
Ulteriori informazioni sono disponibili su Gestire file e offrire download sul sito web<\/a>.<\/p>\n\n\n\n
Testare completamente il negozio online da cellulare<\/h2>\n\n\n\n
In un negozio online non basta visualizzare solo la pagina del prodotto sullo smartphone.<\/p>\n\n\n\n
Testa l'intero processo di acquisto.<\/p>\n\n\n\n
Selezionare il prodotto\n        \u2193\nVerificare i dettagli del prodotto\n        \u2193\nAprire il carrello\n        \u2193\nControllare quantit\u00e0 e prezzo\n        \u2193\nInserire le informazioni di ordine\n        \u2193\nSelezionare le opzioni disponibili\n        \u2193\nCompletare il processo d'ordine<\/code><\/pre>\n\n\n\n
Spiegheremo come configurare fondamentalmente il negozio Kopage su Creare un negozio online con Kopage e gestire i prodotti<\/a>.<\/p>\n\n\n\n
Testare siti web multilingui da dispositivi mobili<\/h2>\n\n\n\n
Le traduzioni possono essere notevolmente pi\u00f9 lunghe o pi\u00f9 brevi del testo originale.<\/p>\n\n\n\n
Ci\u00f2 pu\u00f2 fare s\u00ec che una pagina in una lingua appaia perfetta sullo smartphone e causi problemi in un'altra lingua.<\/p>\n\n\n\n
Controlla quindi ogni versione linguistica importante separatamente.<\/p>\n\n\n\n
Particolarmente rilevanti sono la navigazione, la selezione della lingua, i pulsanti e le intestazioni.<\/p>\n\n\n\n
Trattiamo il plurilinguismo sotto Creare un sito web multilingue con Kopage<\/a>.<\/p>\n\n\n\n
Controlla l'intestazione sullo smartphone<\/h2>\n\n\n\n
L'intestazione contiene spesso il logo, la navigazione e altri elementi importanti.<\/p>\n\n\n\n
Verifica che il logo appaia di dimensioni adeguate e che la navigazione rimanga facilmente accessibile.<\/p>\n\n\n\n
Un logo molto grande non dovrebbe occupare una parte sproporzionatamente grande dello schermo dello smartphone.<\/p>\n\n\n\n
Non dimenticare il footer<\/h2>\n\n\n\n
Il footer viene facilmente trascurato nel controllo da mobile perch\u00e9 appare solo alla fine di una pagina.<\/p>\n\n\n\n
Verifica anche l\u00ec testi, link, informazioni di contatto ed eventualmente altri elementi.<\/p>\n\n\n\n
Soprattutto diverse sezioni di pi\u00e8 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.<\/p>\n\n\n\n
Il design e il responsive design vanno di pari passo<\/h2>\n\n\n\n
Colori e caratteri possono essere tecnicamente corretti e tuttavia apparire inadatti su uno smartphone.<\/p>\n\n\n\n
Caratteri molto grandi, bassi contrasti o layout complessi possono rendere difficile l'uso da mobile.<\/p>\n\n\n\n
Trattiamo le impostazioni generali di design sotto Modificare template e design di Kopage: colori, caratteri, intestazione e pi\u00e8 di pagina<\/a>.<\/p>\n\n\n\n
Considerare il formato verticale e orizzontale<\/h2>\n\n\n\n
Gli smartphone e i tablet possono essere utilizzati in modalit\u00e0 verticale o orizzontale.<\/p>\n\n\n\n
Non \u00e8 necessario progettare ogni pagina separatamente per ogni orientamento possibile. Tuttavia, per aree importanti o complesse, un breve test in entrambi gli orientamenti pu\u00f2 evidenziare eventuali problemi.<\/p>\n\n\n\n
Testare diversi browser<\/h2>\n\n\n\n
I browser moderni visualizzano le tecnologie Web standardizzate in modo ampiamente uniforme, ma possono comunque verificarsi differenze.<\/p>\n\n\n\n
Per i siti web importanti o dopo modifiche importanti, pu\u00f2 quindi essere utile controllare il sito in pi\u00f9 di un browser aggiornato.<\/p>\n\n\n\n
Questo \u00e8 particolarmente utile per le integrazioni esterne e il codice personalizzato.<\/p>\n\n\n\n
Utilizzare l'anteprima del browser sul computer<\/h2>\n\n\n\n
Anche senza diversi smartphone, puoi prima controllare la visualizzazione al computer.<\/p>\n\n\n\n
Molti browser moderni dispongono di strumenti per sviluppatori che consentono di simulare diverse larghezze dello schermo.<\/p>\n\n\n\n
Questo \u00e8 utile per individuare rapidamente problemi evidenti di layout.<\/p>\n\n\n\n
\n
Nota:<\/strong> Una dimensione dello schermo simulata \u00e8 un buon strumento di test, ma non sostituisce completamente l'utilizzo su un vero dispositivo touch.<\/p>\n<\/blockquote>\n\n\n\n
Responsive Design e tempo di caricamento<\/h2>\n\n\n\n
Un sito web mobile non dovrebbe solo essere esteticamente gradevole, ma anche caricarsi in modo efficiente.<\/p>\n\n\n\n
I visitatori da smartphone non si trovano sempre in una rete Wi-Fi veloce.<\/p>\n\n\n\n
Grandi immagini, numerosi video e molti widget esterni possono quindi farsi notare particolarmente sui dispositivi mobili.<\/p>\n\n\n\n
Usa i media in modo consapevole e ottimizza i file inutilmente grandi.<\/p>\n\n\n\n
Visualizzazione mobile e SEO<\/h2>\n\n\n\n
Un sito mobile ben utilizzabile \u00e8 rilevante anche per la qualit\u00e0 e la reperibilit\u00e0 di un sito web.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Trattiamo le basi generali della SEO in SEO con Kopage: titolo della pagina, metadati, URL e ottimizzazione per i motori di ricerca<\/a>.<\/p>\n\n\n\n
Nessun sito web mobile separato necessario<\/h2>\n\n\n\n
In un layout responsive, fondamentalmente lo stesso sito web viene adattato a diverse dimensioni dello schermo.<\/p>\n\n\n\n
Non devi quindi gestire per ogni pagina desktop una pagina separata per smartphone con gli stessi contenuti.<\/p>\n\n\n\n
Questo riduce l'impegno di manutenzione e garantisce che le modifiche non debbano essere apportate in parallelo su due siti web separati.<\/p>\n\n\n\n
Verificare nuovamente sui dispositivi mobili dopo le modifiche al contenuto<\/h2>\n\n\n\n
Una pagina che oggi si presenta bene sui dispositivi mobili, potrebbe presentare nuovamente problemi in seguito a una modifica successiva.<\/p>\n\n\n\n
Ad esempio, un nuovo titolo pi\u00f9 lungo, un'altra immagine o un widget aggiuntivo possono modificare la visualizzazione.<\/p>\n\n\n\n
Controlla quindi in particolare dopo modifiche importanti le pagine pi\u00f9 importanti.<\/p>\n\n\n\n
Dare priorit\u00e0 alle pagine particolarmente importanti<\/h2>\n\n\n\n
Con un sito web di grandi dimensioni, non \u00e8 necessario testare completamente tutte le sottopagine su pi\u00f9 dispositivi dopo ogni piccola correzione di testo.<\/p>\n\n\n\n
Dai priorit\u00e0 alle pagine e alle funzionalit\u00e0 che sono particolarmente importanti per i visitatori.<\/p>\n\n\n\n
Ci\u00f2 include spesso:<\/p>\n\n\n\n
Pagina iniziale\nimportanti pagine di servizio\npagina di contatto\nmoduli\nnegozio e processo d'ordine\nlanding page centrali\nnavigazione<\/code><\/pre>\n\n\n\n
Cosa fare se viene visualizzata in modo errato solo una singola area?<\/h2>\n\n\n\n
Se il resto del sito web funziona correttamente sui dispositivi mobili, dovresti prima esaminare l'area interessata.<\/p>\n\n\n\n
Verifica ad esempio se l\u00ec viene utilizzato un'immagine insolitamente grande, un widget esterno, codice HTML personalizzato o CSS individuale.<\/p>\n\n\n\n
Non modificare immediatamente l'intero design del sito web se il problema riguarda chiaramente un singolo elemento.<\/p>\n\n\n\n
Cosa fare se l'intero sito web presenta problemi da dispositivi mobili?<\/h2>\n\n\n\n
Se sono interessate numerose aree, dovresti verificare se sono state apportate modifiche importanti al modello, al design o al codice personalizzato.<\/p>\n\n\n\n
Non rimuovere contenuti singoli a caso, ma cerca prima di determinare da quale modifica esiste il problema.<\/p>\n\n\n\n
Nel caso di codice inserito individualmente, pu\u00f2 essere utile annullare l'ultima modifica a titolo di prova.<\/p>\n\n\n\n
Errori tipici nella visualizzazione mobile<\/h2>\n\n\n\n
I problemi comuni sono intestazioni troppo lunghe, immagini sovradimensionate, navigazione difficile da usare, pulsanti troppo piccoli e widget esterni con larghezze fisse.<\/p>\n\n\n\n
Anche tabelle lunghe, moduli non adattati e codice inserito individualmente possono causare difficolt\u00e0 sugli smartphone.<\/p>\n\n\n\n
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 \u00e8 stato completamente completato.<\/p>\n\n\n\n
\n
Consiglio pratico:<\/strong> Controlla la visualizzazione mobile gi\u00e0 durante la fase di creazione. I problemi sono molto pi\u00f9 facili da risolvere se li noti subito dopo la modifica in questione.<\/p>\n<\/blockquote>\n\n\n\n
Controllo qualit\u00e0 mobile prima del rilascio<\/h2>\n\n\n\n
Aprire la pagina iniziale\n        \u2193\nTestare la navigazione\n        \u2193\nTestare i sottomenu\n        \u2193\nControllare le intestazioni\n        \u2193\nLeggere i testi\n        \u2193\nVerificare immagini e slider\n        \u2193\nTestare pulsanti e link\n        \u2193\nCompilare i moduli\n        \u2193\nControllare i contenuti esterni\n        \u2193\nVerificare il footer\n        \u2193\nAprire le sottopagine importanti\n        \u2193\nTestare lo shop \/ i download\n        \u2193\nVerificare secondo dispositivo o browser<\/code><\/pre>\n\n\n\n
Il responsive design \u00e8 un controllo di qualit\u00e0 continuo<\/h2>\n\n\n\n
L'ottimizzazione per i dispositivi mobili non \u00e8 un'attivit\u00e0 una tantum che si conclude per sempre dopo la creazione del sito web.<\/p>\n\n\n\n
Nuovi contenuti, immagini, moduli, servizi esterni e personalizzazioni possono modificare la visualizzazione.<\/p>\n\n\n\n
Un breve test mobile dovrebbe quindi rientrare nei controlli normali dopo importanti modifiche al sito web.<\/p>\n\n\n\n
Come procediamo?<\/h2>\n\n\n\n
Quando il contenuto del tuo sito web \u00e8 stato strutturato, progettato e testato su diversi dispositivi, segue il controllo finale prima o dopo la pubblicazione.<\/p>\n\n\n\n
Durante questo processo, dovresti testare non solo il design, ma anche la navigazione, i link, i moduli e altre funzioni importanti.<\/p>\n\n\n\n
Si prosegue quindi con Pubblicare il sito web su Kopage e risolvere i problemi tipici<\/a>.<\/p>\n\n\n\n
Riepilogo<\/h2>\n\n\n\n
Il classico website builder di Kopage \u00e8 progettato per siti web responsive e pu\u00f2 adattare i contenuti a diverse dimensioni dello schermo.<\/p>\n\n\n\n
Nonostante ci\u00f2, dovresti controllare il tuo sito web su desktop, tablet e in particolare su uno smartphone reale.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
I widget esterni e il codice HTML, CSS o JavaScript personalizzato richiedono particolare attenzione, poich\u00e9 questi elementi potrebbero non essere automaticamente adattati in modo ottimale alla visualizzazione responsive di Kopage.<\/p>\n\n\n\n
Verifica nuovamente la visualizzazione mobile dopo modifiche importanti.<\/p>\n\n\n\n
Un sito web responsive non \u00e8 semplicemente una versione rimpicciolita della pagina desktop. Contenuti, navigazione e funzionalit\u00e0 devono rimanere comprensibili, leggibili e utilizzabili su ogni schermo rilevante.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"
Der klassische Kopage Website Builder erstellt responsive Websites, deren Darstellung sich an unterschiedliche Bildschirmgr\u00f6\u00dfen anpassen kann. Trotzdem solltest du deine Website nicht ausschlie\u00dflich am Desktop-PC kontrollieren. Texte, Bilder, Navigation, Formulare, externe Inhalte oder individuell eingef\u00fcgter Code k\u00f6nnen auf einem Smartphone anders wirken als auf einem gro\u00dfen Bildschirm. In dieser Anleitung erkl\u00e4ren wir dir, was Responsive […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[84],"doc_tag":[],"class_list":["post-22861","docs","type-docs","status-publish","hentry","doc_category-website-baukasten"],"year_month":"2026-09","word_count":2991,"total_views":"4","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/it\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"Website-Baukasten","term_url":"https:\/\/www.curiaweb.ch\/it\/hilfe-kategorie\/website-baukasten\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/comments?post=22861"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22861\/revisions"}],"predecessor-version":[{"id":22863,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/docs\/22861\/revisions\/22863"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/media?parent=22861"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/doc_category?post=22861"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/it\/wp-json\/wp\/v2\/doc_tag?post=22861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}