Sentiamo tutti questa parola “responsive” nel dominio del web design molto al giorno d’oggi. La gente consiglia vivamente e andare ga-ga sopra l’importanza di utilizzare responsive design. Ma i neofiti nei campi del blogging professionale e webmastering spesso prendono un po ‘ di tempo per entrare in possesso di tutto questo ronzio su ciò che è un sito web reattivo e come svilupparne uno.
Le persone spesso creano i temi dei loro siti Web basati su un file immagine (ad esempio PSD). Mentre tutti i disegni del sito web iniziano come un’immagine, si dovrebbe essere molto attenti che il loro design sia conforme ai principi di reattività e sia mobile-friendly. Facciamo un tuffo nell’argomento e scopriamo tutto su questo problema.
Bene, la reattività di un sito web si riferisce alla sua capacità di regolare la visualizzazione in base al dispositivo su cui viene visto. Sono finiti i giorni in cui la maggior parte delle persone utilizzato per utilizzare i PC desktop –ora ci sono tutti i tipi di dispositivi là fuori. Desktop, computer portatili, netbook, tablet, mini tablet, lettori di e-book, smartphone e non-così-smart phone! Uff! Troppi per non essere preoccupati!
Tutti questi dispositivi hanno le loro specifiche dimensioni dello schermo e risoluzioni. Un sito web “rigido” non sarà in grado di adattarsi (o diciamo, rispondere) alle diverse dimensioni dello schermo. L’aspetto della barra di scorrimento orizzontale nel browser è uno dei segni più evidenti che il sito Web non è reattivo.
Al contrario, il sito web con un tema reattivo sarà in grado di adattarsi e farà in modo che il contenuto sia facilmente leggibile di qualsiasi dimensione dello schermo.
Non proprio. Un tema reattivo regolerà la visualizzazione con l’obiettivo principale che il contenuto del sito web possa essere utilizzato dal visitatore. Per raggiungere questo obiettivo, il sito web può nascondere alcuni dei suoi componenti accessori (come la barra laterale) e modificare le dimensioni di altri componenti (ad es.)
E ‘ abbastanza facile sapere come reattivo è il tema del tuo sito web. Basta aprirlo su diverse dimensioni di monitor di computer e schermi di telefoni cellulari. Se vedi bene il tuo sito web e tutto il contenuto è leggibile, il tuo sito web è reattivo. Se non si dispone di diversi tipi di dispositivi per testare il tuo sito web, è anche possibile utilizzare il test online per la reattività.
La risposta generale è che sì è molto importante. Ma prima di prendere una decisione di fare un restyling del tuo sito web per trasformarlo in uno reattivo –si dovrebbe guardare i dati sul traffico web. Da questi dati, prova a trovare la quantità di traffico che il tuo sito Web riceve dai dispositivi mobili. Di solito i siti Web sono progettati per essere utilizzati su desktop / laptop, ma se stai ricevendo traffico significativo da dispositivi come tablet / telefoni cellulari, dovresti vedere come il tuo sito Web sta guardando su tali dispositivi.
Attualmente, i siti asiatici ricevono in media il 27% del loro traffico da dispositivi mobili. Questa percentuale sarebbe molto più alta per i siti Web in aree come l’Europa e le Americhe perché i dispositivi mobili sono relativamente molto più popolari.
Sarete sorpresi che la reattività può essere facilmente raggiunto utilizzando solo CSS. Gli attuali standard CSS ti consentono di stilizzare il tuo sito Web per diversi tipi di schermo. Ciò significa che puoi avere regole CSS separate per diverse dimensioni dello schermo. Ad esempio:
@schermo multimediale e (larghezza massima: 320px) {
.primario-barra laterale { display: none } //nascondi barra laterale quando la dimensione dello schermo è 320px o meno
}
@media screen and (min-width:1024px) {
body { font-size: 12px } //imposta la dimensione del carattere per le dimensioni dello schermo più grande di 1024px
}
Tali personalizzato CSS regole di controllo del tuo sito web a seconda dello spazio disponibile sullo schermo.
Se si decide di andare per responsive design per il tuo sito web o blog, ci si può aspettare di avere i seguenti vantaggi:
- Il traffico aumenterà sul tuo sito web perché gli utenti di dispositivi mobili saranno in grado di utilizzarlo e potrebbero decidere di tornare per nuove informazioni. Se gli utenti mobili non possono utilizzare il contenuto di un sito web –non torneranno!
- Se usi pubblicità sul tuo sito web per guadagnare soldi online, le tue entrate potrebbero aumentare perché un sito Web reattivo sarà in grado di mostrare bene anche gli annunci sui dispositivi mobili.
- Non avrai bisogno di sviluppare versioni diverse del tuo sito web o blog per piattaforme diverse. Ciò farà risparmiare tempo sulla manutenzione anche perché più versioni richiedono più tempo di manutenzione.
- Se sviluppi più versioni per diversi tipi di dispositivi, rischi di indicizzare gli URL duplicati di Google. URL diversi che puntano allo stesso contenuto sono chiamati URL duplicati. Google mette una pesante penalità sugli URL duplicati credendo che anche il contenuto sia duplicato. Responsive website design ti protegge da tale sanzione.
- Non dovresti preoccuparti del corretto rilevamento dell’agente perché lo stesso sito Web funzionerà per tutti gli agenti del browser.
- La condivisione degli URL sui siti Web dei social media diventerà più semplice perché ogni pagina del tuo sito Web avrà un solo URL associato ad esso.
Non ci sono svantaggi significativi del responsive design tranne che le regole CSS aggiuntive potrebbero aumentare le dimensioni del file CSS e di conseguenza il tempo di download aumenterà. Ma con Internet più veloce diventando disponibile in tutto il mondo –Non credo che questo pone alcun problema reale.
Nel responsive design, immagini diverse non vengono utilizzate per diverse dimensioni dello schermo. Invece, la stessa immagine viene ridimensionata tramite CSS per adattarsi allo schermo del dispositivo. Quindi, i dispositivi mobili dovranno anche scaricare le stesse immagini ad alta risoluzione che vengono servite su connessioni desktop.
Ora, sappiamo che il responsive design può mettere un piccolo onere in più sulla connessione Internet mobile, è importante che tu sia in grado di testare la velocità con cui funziona il tuo design attuale (reattivo o non reattivo). Il miglior strumento online per testare questo fuori è PageSpeed da Google. Questo strumento può segnare il tuo sito web sia su dispositivi desktop e mobili.
La maggior parte dei siti web di Google sono ora reattivi. Ad esempio, il sito Web Chromebook utilizza il design reattivo. Ma Google è una società pionieristica di tutto ciò che riguarda Internet. Mentre sempre più altre aziende stanno riconoscendo l’importanza del responsive design, i siti web si stanno spostando verso questo nuovo paradigma. Guarda i siti web della catena di ristoranti di Wendy, della società di marketing inbound HubSpot e del giornale Boston Globe per ottenere qualche ispirazione.
Sì, ci sono molti siti web importanti che non hanno ancora abbracciato il responsive design. Gli esempi includono CNN e BBC. Questi sono enormi siti Web e una riprogettazione completa per incorporare la reattività può richiedere investimenti significativi. Questo potrebbe essere il motivo per cui queste case dei media devono ancora rispondere.
No, non è molto costoso. Se possiedi un sito web / blog basato su WordPress, ci sono molti temi reattivi disponibili. Il tema predefinito di WordPress (cioè TwentyThirteen) è anche progettato per essere reattivo. La maggior parte dei temi gratuiti offerti da WordPress e Blogger sono reattivi. Ma se si utilizza un tema di terze parti-è necessario verificare la sua reattività.