Cell. +39 3479684755
Il Blog di Instant Websites
Siti mono-pagina specializzati: il caso di Accademia Oleòs
ACCADEMIA OLEOS è un’Associazione di Promozione Sociale nata per lo studio e la divulgazione del massaggio benessere e delle discipline bionaturali a favore della salute e dell’integrità dell’Uomo che ha scelto INSTANT WEBSITES per la propria presenza su Internet, attraverso numerosi siti: quello principale (http://www.corsimassaggio.net) ed altri dedicati specificamente alle varie proposte di formazione da essa offerte.
Recentemente sono stati progettati e sviluppati 4 siti mono-pagina specializzati, riguardanti cioè altrettanti corsi nell’ambito del trattamento posturale e delle tecniche osteopatiche.
La formula grafica e quella di funzionamento (interazione dell’utente) restano sostanzialmente invariate, a cambiare sono i contenuti ed alcune delle immagini di sfondo a tema: pur essendo come detto costituiti da una singola pagina, questi siti permettono l’inserimento di una quantità di contenuti piuttosto elevata ed una immediatezza di navigazione grazie al particolare effetto di scorrimento verticale.
La fruibilità è garantita dalla proprietà di “reattività” (anche detta “adattività”) della pagina, nel senso che le dimensioni e la disposizione dei contenuti cambiano in funzione del dispositivo su cui il sito è visualizzato.
Mini-siti di questo tipo consentono di migliorare la presenza sui motori di ricerca, sia che vengano pubblicati sul dominio del sito di base, sia che dispongano di un loro dominio specifico.
E’ fondamentale infatti tenere conto che, pur esistendo delle tecniche per ottimizzare il sito nell’ottica dei motori di ricerca (SEO – Search Engine Optimization), tecniche che INSTANT WEBSITES applica sempre in tutti i lavori che realizza, un buon posizionamento sugli stessi è innanzitutto determinato dalla ricchezza, originalità e coerenza dei contenuti.
Introduzione al design reattivo – esempi di Media Query
Premessa
In un precedente articolo di questo blog (Introduzione al design reattivo – https://lnx.instantwebsites.it/iwblog/?p=1272) abbiamo introdotto alcuni principi di base del design “reattivo” o “adattivo“.
Per approfondire il discorso, vediamo ora alcuni esempi di Media Query che consentono di subordinare l’applicazione di determinate dichiarazioni (proprietà e relativi valori), all’interno del foglio di stile, alla ricorrenza di condizioni prefissate concernenti la risoluzione video del dispositivo su cui il sito viene visualizzato e/o l’orientamento dello schermo.
Rammentiamo innanzitutto che nella sezione head della pagina occorre inserire quanto segue:
<meta name=”viewport” content=”width=device-width” />
per fare sì che il riferimento sia la risoluzione “reale” del dispositivo (dimensione della viewport) prevenendo lo zoom automatico della pagina che quest’ultimo effettuerebbe per visualizzarla interamente.
E’ anche opportuno impedire che l’utente possa materialmente effettuare lo zoom stesso, completando quanto sopra nel modo seguente:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
oppure, in modo equivalente:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no” />
Rammentiamo inoltre che per impostare le media query ci sono due modi:
1) creare diversi fogli di stile ed eseguirli a seconda del dispositivo impostando le condizioni nella sezione head (Media Feature), come nell’esempio seguente:
<!– foglio di stile comune a tutti i supporti –>
<link href=”css/common.css” rel=”stylesheet” media=”screen” />
<!– media feature compatibili con tutti gli schermi –>
<link href=”css/smartphone.css” rel=”stylesheet” media=”only screen and (max-width: 480px)” />
<link href=”css/tablet.css” rel=”stylesheet” media=”only screen and (min-width: 481px) and (max-width: 767px)” />
…
2) utilizzare un singolo foglio di stile, inserire le regole comuni, poi quelle specifiche impiegando, appunto, le Media Query come negli esempi che seguono.
L’importanza di monitorare la casella di appoggio del dominio
In sede di registrazione di un dominio, bisogna fornire un indirizzo e-mail “di appoggio” al quale il Maintainer (brevemente MNT: Aruba, Register.it ecc. ecc.) invierà la comunicazioni concernenti il dominio stesso.
Notiamo innanzitutto che questo indirizzo può essere diverso da quello dell’anagrafica cliente presso lo stesso MNT: tanto per dare un’idea, Aruba consente di fornire un indirizzo per l’anagrafica, uno per la fatturazione, uno per ciascun dominio registrato.
Le comunicazioni di cui sopra possono essere utili, ad esempio i promemoria di imminente scadenza dei servizi acquistati, oppure avere – purtroppo – carattere pubblicitario, come la promozione di nuovi servizi o altro, ma la recente adozione di procedure di verifica dei dati del registrante (cioè l’intestatario del dominio) di cui abbiamo parlato in questo articolo fanno sì che possano essere inviate anche e-mail importanti ai fini del corretto funzionamento del dominio e dei servizi associati (hosting, posta elettronica).
In caso di invio di verifica dei dati senza risposta da parte del registrante, il dominio viene sospeso, quindi il sito “sparisce” da Internet e la posta elettronica non funziona fino a quando la verifica non è andata a buon fine.