Quanto è importante il web design reattivo?

Ho sentito una varietà di opinioni sui vantaggi e gli svantaggi dell'utilizzo del web design reattivo di recente e mi chiedevo se fosse necessario per le piccole imprese che si rivolgono a piccole aree geografiche per implementare il web design reattivo?

Alcune sotto-domande che ho riguardo a questo includono:

1. È meglio utilizzare un web design reattivo invece di utilizzare un codice separato per dimensioni / dispositivi diversi?

2. Può potenzialmente influire sulla SEO (positivamente o negativamente)?

3. Quali sono i principali problemi che potrei incontrare durante l'ottimizzazione di un sito Web per un'azienda utilizzando questo metodo di progettazione?

L'utilizzo di Internet mobile è ampiamente previsto per superare l'utilizzo del desktop entro un paio d'anni, quindi una sorta di ottimizzazione mobile dovrebbe essere una seria considerazione per qualsiasi azienda.

In molti modi, questo è particolarmente vero per le piccole imprese localizzate: prevedibilmente, molte ricerche mobili tendono a concentrarsi sulla ricerca di cose nelle vicinanze - pensa a trovare un negozio, un ristorante, ecc.

A partire da maggio 2012, la progettazione reattiva è la migliore pratica consigliata da Google nel settore della progettazione per smartphone. Uno dei principali vantaggi è che stai gestendo un sito: quello è un sito per progettare, costruire, mantenere e promuovere. È efficiente.

Dal punto di vista SEO, l'hosting di un sito mobile separato, ad esempio egmexample.com, significa che devi ottimizzare 2 siti separati e dividere il valore della tua attività (PageRank, autorità, ecc.) Tra le due sedi. Sebbene sia possibile evitarlo pubblicando contenuti sugli stessi URL tramite il rilevamento dell'agente utente, ciò non affronta la duplicazione degli sforzi (sono ancora 2 siti separati) e introduce anche ulteriori sfide tecniche, ad esempio garantire il proprio agente utente il rilevamento funziona ed è aggiornato, che i motori di ricerca indicizzano il contenuto giusto nell'indice giusto, ecc.

In tutto, il design reattivo è una soluzione elegante.

Per rispondere alle altre tue domande:

1. Di cui sopra, ma considera anche la rapidità con cui si sviluppa il mercato della telefonia mobile. Più flessibile è la tua soluzione mobile, meno dovrai fare per stare al passo.

2. Dipende da cosa stai confrontando, ma come menzionato sopra, una delle altre 2 principali opzioni ha significative sfide SEO associate.

   C'è stata una certa preoccupazione sul problema del "cloaking", ovvero nascondere i contenuti dai motori di ricerca, che è inerente alla progettazione reattiva nella maggior parte delle implementazioni. Tuttavia, sebbene a mia conoscenza questo non sia stato esplicitamente risposto da nessuno dei principali motori di ricerca, il fatto che Google lo consideri come "best practice" potrebbe essere visto come un'indicazione che Google è in grado di discernere tra il nascondere legittimo contenuto per motivi di ottimizzazione del dispositivo e altri nascondigli meno legittimi, per motivi di manipolazione.

3. Penso che la sfida principale sia determinare quali contenuti mostrare agli utenti mobili. A seconda del tuo sito, potrebbe non essere un problema, ma in molti casi lo è. La considerazione chiave qui è capire cosa stanno cercando di fare i tuoi visitatori mobili. Ad esempio, qualcuno su un iPhone probabilmente desidera informazioni o transazioni rapide e facili. La stessa persona su un iPad ha maggiori probabilità di essere interessata a un'esperienza di navigazione più piacevole.

L'idea alla base è quella di offrire un'esperienza di navigazione ottimale al tuo visitatore indipendentemente dal dispositivo. Dato che il numero dei tuoi visitatori che utilizzano un dispositivo mobile aumenterà molto probabilmente invece di ridurlo, ha perfettamente senso percorrere quella strada.

C'è un certo numero di temi convenienti (per non dire economici) là fuori per Blog e CMS che puoi provare immediatamente e vedere se ti piace quello che ottieni (Verifica con tutti i tuoi dispositivi o alcuni dei tuoi clienti).

1. Finché devi ragionare in modo particolare, cerca sempre di concentrarti su una base di codice. Un motivo potrebbe essere che desideri offrire un sito Web specializzato come una "app Web".

2. SEO: no. Buono e cattivo come un layout non responsive.

3. Devi fare un po 'più di pianificazione all'inizio. Quale contenuto deve essere visualizzato sul dispositivo più piccolo, come dovrebbe essere l'ordine dei contenuti? Cose del genere. Oppure: il mio contenuto ha un bell'aspetto in ciascuna delle mie dimensioni supportate? Potresti anche voler ottimizzare le dimensioni delle tue immagini per ciascuna delle dimensioni per offrire non solo immagini ridimensionate del browser, ma anche quelle ridimensionate. Se il tuo CMS non supporta questo è un po 'più di lavoro.

Se prevedi di includere annunci da una fonte esterna, devi anche verificare se i formati indicati vengono riprodotti correttamente insieme.

Modificare:

Consentitemi di aggiungere che se sono disponibili dati storici di analisi web (ad esempio Google Analytics), è possibile cercare facilmente il numero di utenti Mobile vs Non mobile, identificare i dispositivi utilizzati (fino all'hardware effettivo) e dare un'occhiata alle risoluzioni dello schermo ("Vedono effettivamente le mie pagine o solo una parte di esse e devono scorrere?").

Seconda modifica:

Secondo questo post "Siti Web mobili e Responsive Design: qual è la soluzione giusta per la tua azienda?" "sul blog di Google Analytics un sito progettato pensando a Responsive Design ha questi vantaggi:

• Facilità di aggiornamento
• Ottimizzato per i motori di ricerca
• Aggiunta di codici di conversione e reindirizzamento

I pro del sito mobile separato:

• Progettare per le esigenze degli utenti mobili
• Creazione del sito Quicke
• Grandi opzioni fai-da-te

L'articolo "Responsive design - sfruttando il potere delle query dei media" sul blog ufficiale di Google Webmaster Central offre una buona introduzione su come il "Responsive Design" è effettivamente implementato.

"Creazione di siti Web ottimizzati per dispositivi mobili" su Google Developers afferma:

"Google consiglia ai webmaster di seguire le migliori pratiche del settore nell'uso del web design reattivo, ovvero lo stesso HTML per tutti i dispositivi [...]"

Penso che sia importante capire innanzitutto che "responsive design" (RD) è un termine di moda (se metto Larghezza: 100% su un elemento che ho un RD proprio lì, per esagerare) e quindi la sua importanza appare più importante di esso è davvero come alla fine è condizionato come tutto il resto.

È necessario implementare RD?

Per rispondere è necessario indicare alcune definizioni:

1. Chi è il tuo pubblico di riferimento
2. Che tipo di pubblico è il tuo obiettivo
3. Qual è lo scopo del tuo sito web
4. Da dove si accederà al tuo sito Web (nella maggior parte dei casi)
5. eccetera.

Questo è molto simile all'analisi di marketing. Si tratta di avere il mezzo giusto per il pubblico giusto (forse il tuo pubblico si siede davanti a un computer quasi tutto il giorno, oppure sono in viaggio con l'ultimo iPhone e così via). Fanno entrambi, quindi ovviamente RD è centrale.

È meglio utilizzare un web design reattivo invece di utilizzare un codice separato per dimensioni / dispositivi diversi?

Dipende dalla complessità dell'interfaccia utente e da come la userete. Nella maggior parte dei casi è possibile eseguire il rendering di una pagina tipica utilizzando diversi set di CSS per i vari display. Tuttavia, le UI più complesse o sofisticate potrebbero richiedere approcci diversi, quindi può essere saggio presentare una struttura e una strategia di pagina diverse a seconda del dispositivo utilizzato (mappe di Google, ad esempio, interfaccia multi-touch ...).

Può influenzare la SEO (positivamente o negativamente)?

La SEO riguarda più il contenuto che il design. Solo Google sa se pesa il design, ma il design / layout, ma in generale se i tuoi contenuti sono di alta qualità, questo sarà ponderato più del design reale.

Quali sono i principali problemi che potrei incontrare durante l'ottimizzazione di un sito Web per un'azienda utilizzando questo metodo di progettazione?

Progettandolo per il pubblico sbagliato. Analizza il tuo obiettivo e fornisci, se possibile, dati tecnici aggiornati (ad es. Registri dei visitatori che forniscono informazioni sulla piattaforma, ecc.)

La nuova tecnologia è sempre rischiosa, rif. il problema HTML5 per Facebook. A questo punto non è completamente maturo e invita vari problemi simili a quelli di IE6 rispetto a quelli standard.

Mantenerlo il più semplice possibile. Le pagine Web di fantasia hanno valore solo in brevissimo tempo fino a quando l'utente non deve effettivamente utilizzare la tua pagina. Se deve attendere 1/2 secondo per terminare una dissolvenza per ogni clic, l'utente verrà perso piuttosto rapidamente. Cose del genere.

Ho scremato le altre risposte, perdonami se sono ridondante ... Sto facendo un design reattivo ogni giorno per 8 + ore al giorno a questo punto ... I miei clienti lo vogliono perché vogliono che gli utenti mobili abbiano un "unico" esperienza, i miei datori di lavoro lo vogliono perché è vantato da Google come metodo preferito e ottimizza bene. (e se vantato da Google come il modo per fare qualcosa che molto probabilmente funziona meglio per il SEO)

È meglio utilizzare un web design reattivo invece di utilizzare un codice separato per dimensioni / dispositivi diversi?

Direi che è meglio, sì. La maggior parte del tuo codice è lo stesso codice con conseguente meno lavoro rispetto alla scrittura di un'app per iPhone, un'app droide, un'app per iPad, un'app kindle .... hai capito.

Può potenzialmente influire sulla SEO (positivamente o negativamente)?

Da un punto di vista del design, penso che sia neutro; tuttavia, da un punto di vista statistico i miei progetti reattivi stanno andando davvero bene. I clienti li adorano e i clienti adorano usarli.

Quali sono i principali problemi che potrei incontrare durante l'ottimizzazione di un sito Web per un'azienda utilizzando questo metodo di progettazione?

All'inizio è un po 'difficile ... devi fare qualche ricerca sulle query multimediali e preferibilmente avere alcuni dispositivi mobili su cui testare. Tieni presente che il ridimensionamento della finestra sul desktop è vicino, ma il modo in cui i dispositivi mobili rendono Internet a volte è diverso da quello che ti aspetteresti. Ad esempio, ho progettato un sito reattivo in cui ho usato una ripetizione bg per l'intestazione e sul desktop si estende su tutta l'area visualizzabile; tuttavia, su iOS si interrompe per qualche motivo ...

Consiglio di imparare e provare un design reattivo. controlla questo sito per iniziare subito: http://html5boilerplate.com

Per rispondere alla domanda nel titolo: è importante e ti dovrebbe essere consapevole di come e come progettare per esso, e se dovessi decidere di non usarlo dovresti essere pronto a difendere quella posizione come il tuo cliente potrebbe essere impostato di avere questo disegno. In base alla mia esperienza, sia i clienti che i clienti amano il design reattivo. Clienti felici e clienti felici sono una ragione sufficiente per me per perseguirlo :)

Il responsive web design è fondamentale: se stai creando un nuovo sito DEVI renderlo reattivo. Già, il 50% del traffico proviene da dispositivi mobili e tablet e non solo sta per crescere, ma diventerà la forma chiaramente dominante dell'uso di Internet.

Per le piccole imprese che si rivolgono a piccole aree geografiche, è ancora più critico: la SEO sarà molto difficile per una nuova piccola impresa, ma se il tuo prodotto è buono puoi massimizzare quante persone condividono ciò che stai facendo.

Quando si tratta di leggere i social media, le persone utilizzano principalmente dispositivi mobili ora - generalmente a letto la mattina e a letto la sera.

Se il tuo sito è inutilizzabile su un dispositivo mobile, tutte le condivisioni che colpiscono il tuo pubblico rilevante vanno sprecate. Non vuoi questo. È fondamentale evitare che ciò accada.

Per quanto riguarda il codice reattivo o separato: il principale svantaggio del design reattivo è che non è veloce come basi di codice separate. Questa perdita di velocità sarà trascurabile, certamente nel caso di una piccola impresa locale quando altri fattori possono apparire nella mente degli utenti sul perché il sito è 0,2 secondi più lento di altri.

Il grande vantaggio del design reattivo è che si mantiene la stessa base di codice. Ciò riduce i costi di manutenzione, i costi di test e i costi di sviluppo.

Oggigiorno la cosa più importante della SEO è la "qualità del sito" - la qualità del sito è difficile da misurare, ma in generale google usa la frequenza di rimbalzo e il tempo sul sito per misurare questo. Se il tuo sito fa schifo sui dispositivi mobili, il 50% del tuo traffico avrà una frequenza di rimbalzo elevata e un alto numero di visitatori con un basso coinvolgimento (meno di 10 secondi sulla pagina).

Questo ti mette a rischio di penalità di Google - guarda Google Panda e le nuove penalità di Exact Match Domain (la scorsa settimana) , che penalizzano entrambi i siti per avere "bassa qualità".

I principali problemi che potresti incontrare quando ottimizzi un sito Web per un'azienda usando questo metodo sono che si tratta di una nuova parola d'ordine, tutti ne hanno bisogno, quindi ci sono cowboy là fuori che fanno pagare prezzi ridicolmente alti per qualcosa di incredibilmente facile da fare.

Ad esempio, di recente ho realizzato un sito Web che ha un negozio, un forum, una sezione Domande e risposte, nonché varie altre pagine, blog, ecc. Completamente rispondenti a tutti i dispositivi in ​​circa un giorno.

Ecco le basi di ciò che devi fare:

1. Regola l'imbottitura e i margini del corpo
2. Sposta invece i menu a sinistra o a destra in menu a discesa, magari nascondili sotto un pulsante di opzioni in alto.
3. Ridimensiona i contenitori, usa la larghezza al 100% dove puoi
4. Cambia tutte le immagini in larghezza 100%
5. Decidi quali cose non sono necessarie sul telefono (pubblicità?) E rimuovile (display: nessuna)

Ecco un po 'di codice di esempio:

@media screen and (max-width:480px) {
body {
margin:5px;
padding:0px;
}
.advertbox {
display:none;
}
}

Ciò che fa è rimuovere qualsiasi cosa con una classe di "advertbox" dagli smartphone (con larghezza massima 480px) e ridurre il margine corporeo.

Se stai creando un nuovo sito, questo è ancora più facile da integrare poiché puoi assicurarti di creare un design pulito con belle classi pulite e un buon stile per adattarsi a tutti i dispositivi.

Spero che aiuti!

Vorrei solo entrare in una prospettiva diversa:

No, non è obbligatorio o addirittura raccomandato. Dipende da chi è il tuo target di riferimento. Guarda le tue analisi e vedi quale percentuale proviene da dispositivi mobili e tra quelli che arrivano su dispositivi mobili c'è un calo significativo rispetto agli utenti desktop?

Per fare un esempio in cui lavoro il nostro sito non è reattivo. Il 90% del nostro traffico proviene da utenti desktop e le frequenze di rimbalzo e le percentuali di completamento degli eventi sono pressoché identiche su desktop, dispositivi mobili e tablet.

Fino a quando non c'è una giustificazione dei costi per cambiarlo, semplicemente non c'è un incentivo finanziario per farlo. Dire affermazioni generali come il 50% degli utenti è su dispositivo mobile o qualcosa è applicabile solo se tutti gli utenti sono il tuo pubblico di destinazione. Altrimenti la sua logica completamente irrilevante e cattiva da seguire.

Devi solo guardare la% di utenti su dispositivo mobile a cui ti rivolgi. Soprattutto per le applicazioni B2B, la maggior parte delle persone non guarderà i loro telefoni nel tempo libero. Riceverai traffico dal lunedì al venerdì su computer desktop.