Responsive Design nel mondo aziendale
Quando hai già una vasta gamma di clienti, può essere difficile entrare nelle nuove tecnologie. Il responsive design è una grande frase in questo momento, ma non è necessario forzarlo su un client a meno che i suoi utenti ne vedano un beneficio.
Al 352 Media Group, abbiamo visto di recente l'opportunità di creare un sito completamente reattivo per un cliente, Purple Communications. Fanno software per le persone con problemi di udito che altrimenti non sarebbero in grado di fare una telefonata. Usando il loro computer, telefono, videotelefono o altri dispositivi elettronici, possono comunicare con gli altri utilizzando un servizio di ritrasmissione video.
Purple Communications offre app per più piattaforme telefoniche, quindi una parte sostanziale del traffico web proviene da dispositivi mobili. Guardando il loro traffico, divenne chiaro che la soluzione migliore per il cliente era quella di creare un sito completamente reattivo. La nostra azienda ha già realizzato siti per dispositivi mobili, ma questa era la prima volta che un sito poteva servire sia gli utenti mobili che quelli desktop. Se sei interessato a incorporare alcune funzionalità di web design reattivo nella tua azienda o nel sito Web del cliente, ecco alcuni suggerimenti da tenere a mente:
Non scendere a compromessi sul design
Ci sono design che si prestano a un layout fluido e reattivo molto più di altri. Un design minimalista con uno sfondo semplice potrebbe richiedere solo alcune modifiche per diventare fluido. Quindi può essere molto allettante spingere questo tipo di design sul client, poiché renderebbe lo sviluppo del sito notevolmente più semplice.
Uno dei vantaggi competitivi di 352 Media Group è il nostro design pluripremiato. Così, mentre inizialmente stavo cedendo alla tentazione di un design minimalista, ho cambiato idea e ho deciso di capire come utilizzare il design che volevamo in modo reattivo.
Esistono tre modi diversi per sviluppare un design reattivo. Ho creato dei nomi per loro in modo che siano più facili da discutere:
Layout a step
Questa tecnica utilizza le query multimediali per servire fogli di stile diversi a risoluzioni fisse. Tradizionalmente si creano tre diversi disegni: uno per i desktop, uno per i tablet e uno per i telefoni.
Questo metodo è stato molto interessante a causa della mia decisione di progettare un sito che sarebbe potenzialmente complicato da rendere fluido. In sostanza, potremmo prendere il nostro attuale processo di sviluppo di un sito e moltiplicarlo per tre. Potremmo persino utilizzare il rilevamento lato server per assicurarci di avere solo il file CSS necessario per la risoluzione.
Il problema con questa tecnica è che devi scegliere le risoluzioni per le quali ottimizzerai il tuo sito. La maggior parte delle persone utilizza numeri basati sui dispositivi iOS: 768 px per il design del tablet e 320 px per il design mobile. Ma con tutti i diversi smartphone e tablet disponibili, ci sono tonnellate di risoluzioni diverse. Poiché le app Purple Communications sono disponibili per molti telefoni diversi, volevamo assicurarci che ogni utente potesse avere un'esperienza ottimale. Quindi, anche se penso che questa tecnica sarebbe perfetta per un sito web di app per iPhone, non sarebbe stata adatta alle nostre esigenze per questo progetto.
Griglia fluida
Un altro modo per rendere reattivo il tuo sito consiste nell'utilizzare le larghezze percentuali in modo che tutto si ridimensiona con il viewport fino a 0. Con questo metodo, si imposta la griglia basata sulla percentuale che farà il gioco principale. Passato, si utilizzano le query multimediali per modificare le cose per schermi diversi. Questo metodo ha un netto vantaggio rispetto al metodo passo-passo perché il sito sarà ottimizzato per ogni singola risoluzione, al contrario di una manciata.
Lo svantaggio qui è che alcuni progetti possono essere esponenzialmente più difficili da sviluppare. Ho considerato questo metodo per un lungo periodo, cercando di capire come codificare aree problematiche. Utilizziamo un metodo comune indicato come tecnica delle porte scorrevoli ciò può consentire di utilizzare una singola immagine per creare un contenitore di larghezza fluido con bordi intricati. Se non lo stai usando, sicuramente guardalo perché è una tecnica fantastica. Ma anche con questo e alcune altre cose nel nostro arsenale, sarebbe stato comunque piuttosto difficile da realizzare.
Ibrido fluido / a gradini
Alla fine, ho deciso una combinazione dei due metodi. Utilizzeremmo la tecnica a gradini per realizzare un design per desktop, e quindi un grande passo in avanti verso un design fluido a 960 px di larghezza. Ciò significava che per il desktop, il nostro processo era quasi lo stesso di un normale progetto. Supportiamo risoluzioni 1024 × 768 e versioni per desktop, quindi realizziamo i nostri siti con una larghezza standard di 960 px (che consente una barra di scorrimento verticale e altri browser e Chrome OS). Qualsiasi viewport sotto quella larghezza normalmente mostrerebbe solo una barra di scorrimento.
Invece di cercare di scegliere quale risoluzione avesse più senso per le dimensioni di un tablet, l'abbiamo semplicemente installata dove qualsiasi cosa sotto la larghezza del sito di 960 px avrebbe attivato il layout fluido. In questo modo nessuno avrebbe mai avuto la temuta barra di scorrimento orizzontale.
Come un piccolo vantaggio aggiunto, un tablet (che è largo almeno 960px) che visualizza il sito in modalità orizzontale ottiene la versione desktop completa. Tieni presente che probabilmente vorrai apportare alcune piccole modifiche con le query multimediali per rendere i collegamenti e i pulsanti più facili da toccare.
Prima il cellulare
Se hai fatto qualche ricerca sul design reattivo, hai sicuramente sentito prima il motto di sviluppo per dispositivi mobili, che è sicuramente qualcosa che dovresti tenere a mente. Dal momento che siamo stati tutti nella mentalità di sviluppare siti per computer desktop per così tanto tempo, è molto semplice guardare le domande dei media nel modo sbagliato. Potresti pensare: "Tutto quello che devo fare è creare alcune nuove immagini e inserire qualche nuovo CSS in una query multimediale, e il mio sito funzionerà anche sui telefoni". Anche se questo è vero, è anche completamente arretrato.
Per quanto incredibili siano diventati gli smartphone, non sono ancora potenti quanto i computer desktop. Inoltre, il contenuto è spesso consumato in viaggio. Ma seguendo la nostra logica precedente, stiamo ottimizzando un sito per dispositivi meno potenti su connessioni lente aggiungendo CSS e immagini. Una volta che ci pensi, ti rendi conto che devi modificare il tuo flusso di lavoro.
La parte più difficile è rendere questo lavoro per img tag. Se segui le best practice, avrai immagini ottimizzate per risoluzioni diverse. La parte difficile è assicurarsi di scaricare solo l'immagine che ti serve. Questo problema potrebbe essere un articolo tutto da solo, ma per fortuna Jason Grigsby ha già compilato un elenco di metodi di immagine reattivi e i loro pro e contro.
Passato questo, tutto ciò che dobbiamo lavorare è il CSS. Con la nostra mentalità "mobile first", creeremo un file mobile.css che contiene tutti i CSS necessari per i dispositivi mobili. Questo sarà l'unico file scaricato dai telefoni. Quindi, creeremo un secondo file chiamato desktop.css che si baserà su e sovrascriverà gli stili di base stabiliti in mobile.css. Per fare in modo che telefoni / tablet abbiano solo mobile.css e desktop sia mobile.css sia desktop.css, i nostri link hanno il seguente aspetto:
Questa combinazione ha funzionato finora per tutto ciò che ho provato tranne che per le versioni di Internet Explorer prima delle 9. Poiché il nostro standard aziendale è quello di supportare IE7 +, abbiamo dovuto fare un ultimo aggiustamento. Noterai che il mio codice sopra è in esecuzione sul server. Sul backend, stiamo controllando la versione di IE e, se è inferiore a 9, cambiamo l'attributo multimediale su "schermo, proiezione". Questo ha funzionato al meglio per noi, ma se non stai eseguendo nulla lato server, potresti usare answer.js invece.
Ciò significa che il nostro desktop CSS non sarà ottimizzato come sarebbe su un normale sito. Ma l'unico sacrificio che stiamo facendo è scaricare un file CSS leggero che poi sovrascriviamo dove è necessario. Avevamo bisogno di scendere a compromessi da qualche parte, e poiché continuiamo a cantilenare, "prima il cellulare", sappiamo che è meglio dell'alternativa.
Ancora offrendo il controllo del cliente
Al 352 Media Group, crediamo nel dare al cliente il pieno controllo del proprio sito. Dopo aver completato lo sviluppo, passiamo tutto il codice sorgente. Forniamo anche un CMS personalizzato che consente al cliente di gestire le pagine, la navigazione e la mappa del sito. Come il design, questo è uno standard su cui non volevamo scendere a compromessi, quindi abbiamo avuto alcuni ostacoli aggiuntivi.
Una delle interfacce più difficili da trasferire al mobile è la navigazione. Questo è un problema perché è anche una delle interfacce più importanti di un sito. La prima domanda che devi porre è se gli utenti mobili debbano avere accesso rapido all'intera navigazione o se sono interessati solo a pochi. Se hanno bisogno di tutta la navigazione, e ci sono più di quattro elementi di livello principale, penso che una delle migliori soluzioni sia raggrupparli in un elemento. Questo utilizzerà il sistema operativo del telefono per un'interfaccia ottimizzata a cui l'utente è già abituato.
Su Purple Communications, c'erano solo due elementi di livello principale che gli utenti di dispositivi mobili guardavano principalmente a: Prodotti e servizi e Chi siamo. Quindi sui telefoni, mostriamo solo questi due elementi, quindi raggruppiamo il resto in un menu a discesa "Altro".
Ma una delle cose che offriamo al cliente è il controllo sulla loro navigazione. Per questo sito, l'unica cosa su cui non avrebbero avuto il controllo era quali elementi collassassero nel menu, quindi abbiamo fatto in modo di eliminarlo prima con loro. Ma oltre a ciò, possono aggiungere qualsiasi elemento o sottovoce che vogliono. Per fare ciò, abbiamo utilizzato una seconda copia della navigazione nidificata nell'ultimo elemento denominato "Altro". Lo nascondiamo sui desktop e sui dispositivi mobili nascondiamo gli elementi di livello superiore che non vogliamo visualizzare. Nell'elenco nidificato, nascondiamo "Prodotti e servizi" e "Informazioni" quindi gli utenti non li vedono due volte. Ciò garantisce al nostro cliente il pieno controllo senza dover gestire una navigazione mobile separata (che diventerebbe un lavoro ingrato con articoli duplicati).
Per le aree di contenuto, abbiamo fornito formazione al cliente in modo che conoscessero i modi migliori per strutturare il loro contenuto. Abbiamo anche creato alcune classi da utilizzare su cose come video, pulsanti e inviti all'azione di YouTube, che hanno assicurato che le cose aggiunte fossero ottimizzate per tutte le risoluzioni.
Creare un framework riutilizzabile
L'ultima cosa da tenere a mente quando si esplorano nuove tecnologie come il responsive design è assicurarsi che la propria azienda sia meglio preparata per il futuro. Desidererai che tutti coloro che lavorano al progetto non solo pensino al cliente e ai suoi utenti, ma anche a quali lezioni possono essere applicate ad altri progetti. State sempre alla ricerca di progetti come questo in grado di farvi entrare nella porta di nuove aree in modo che la vostra azienda continui a progredire insieme all'industria.
Al 352 Media Group, abbiamo già stabilito framework per i nostri programmatori e i nostri sviluppatori front-end. Ad esempio, abbiamo diviso tutti i nostri CSS in più file per compartimentare i componenti e mantenere tutti organizzati. Disponiamo di file separati per struttura, tipografia, moduli, widget, ecc. Quando ti stai spostando verso nuove tecnologie, puoi prendere quella che sembra la strada facile e abbandonare cose che non sembrano adattarsi e creare nuove cose per il futuro. Ma così facendo, stai abbandonando anni di esperienza che finora hanno funzionato bene per te.
Ho semplificato eccessivamente il nostro codice in precedenza che collega i file CSS. Avremmo potuto richiedere che i siti responsive usassero questi due nuovi file CSS invece del normale framework. Invece, con un po 'di creatività, abbiamo capito quali file dovrebbero essere applicati ai dispositivi mobili, che dovrebbero essere applicati al desktop e che dovrebbero essere suddivisi tra i due. Siamo stati in grado di adattare ciò che abbiamo già lavorato in qualcosa che funzionerà bene per noi in futuro.