Design reattivo rispetto a applicazioni / viste separate

3

Sono coinvolto in un progetto per la riprogettazione di un sito esistente. Il team di designer ci ha consegnato - il team di progettazione - quattro prototipi HTML / CSS separati di come dovrebbe apparire il sito:

  • Su un browser desktop.
  • Su un dispositivo da tavolo, un design simile ma semplificato della vista desktop
  • Uno smartphone high-tech, il design è simile a quello delle app per dispositivi mobili e molto diverso dai design per desktop e tablet. Inoltre, viene mostrato meno contenuto.
  • Uno smartphone di fascia bassa, una versione semplificata del precedente design ma ancora molto simile.

Il mio primo impulso è stato quello di creare un prototipo HTML / CSS utilizzando Responsive Web Design e unire i prototipi creati dal team di progettazione, ma ora ho alcuni dubbi:

  • La fusione di diversi prototipi potrebbe produrre codice di bassa qualità.
  • Potremmo inviare codice / file ad alcuni dispositivi mobili di cui non hanno bisogno.
  • Dobbiamo gestire la situazione in cui, ad esempio, alcune opzioni devono essere presenti nei tablet ma devono essere nascoste in Smartphone. Usare CSS per nascondere può essere uno spreco di larghezza di banda, quindi forse c'è bisogno di un codice lato server.

Per questo motivo, l'idea di creare due diverse applicazioni Web - o anche meglio, gestire due viste in una stessa applicazione web utilizzando un lato server Framework come Spring Mobile - era in fase di valutazione. Non sono un esperto di Responsive Design, quindi non voglio sapere qual è l'approccio migliore è questa situazione o il modo standard per affrontare questo problema.

PS: Se vale la pena di dire, sto costruendo un portale usando WebSphere Portal come portlet Container e costruendo i portlet usando Spring Portlet MVC.

    
posta Carlos Gavidia 23.07.2013 - 17:15
fonte

1 risposta

5

Seguirò il tuo primo impulso e diventerò reattivo. Sento che, se implementato correttamente, migliora l'esperienza dell'utente. Utilizza una libreria CSS reattiva e alcuni framework JavaScript / librerie MVC javascript per fare il tuo lavoro sul lato client.

Affrontare le tue preoccupazioni:

Codice di bassa qualità dalla gestione di prototipi disparati

Penso che usare le librerie JS e CSS testate in battaglia e le migliori pratiche dovrebbero aiutarti qui. Pensa lungo le linee di backbone, knockout o angular per fornire il tuo codice clientide con la struttura.

Invio di file di codice non necessari ai dispositivi mobili

Non penso che questo sarà un grosso problema. Costruisci prima le funzionalità mobili e vai da lì. Ciò ti garantirà di ottenere la funzionalità principale creata e ti consentirà di costruire i dispositivi più grandi da lì. Usa solo le scarse necessità per mantenere le cose chiare. Se usi i motori di template puoi ridurre la quantità di HTML che stai inviando sul filo. Combina e minimizza i file JS e CSS sul lato server per ridurre al minimo ciò che stai inviando ai dispositivi mobili.

Sprecare i CSS quando si nascondono elementi HTML

Utilizza un motore di template. Questi possono essere incorporati nei framework MVC lato client o separati (Moustache, Handlebars). Ciò ti impedirà di inviare troppo HTML in più. Inoltre, puoi caricare alcune sezioni pigre se questo fa galleggiare la tua barca.

Conclusione

Un responsive Web Design reattivo dovrebbe essere in grado di evitare o minimizzare ciascuno dei problemi. Un sacco di lavoro è stato fatto nella comunità open source per aiutare a negare questi problemi. Consiglio vivamente di cercare queste soluzioni e vedere se sono utili con il tuo progetto.

Alla fine la decisione del tuo team, ma assicurati di considerare il vasto numero di librerie ed eletti per la migliore esperienza utente che il tuo team può supportare all'interno dei requisiti non funzionali (timeline, costi, conoscenza dello staff) del tuo progetto.

Librerie popolari

JS MVC: backbone + libreria di modelli (vedi sotto), Knockout, Angular, Ember

Templating: Handlerbars, Moustache

CSS: Twitter Bootstrap, Foundations, Skeleton

Strumenti di Minificazione / Combinazione: Yahoo YUI, UglifyJS

JS vario: sottolineatura, richiede

Questi sono gli esempi che sento di più. Ho usato personalmente Knockout e Twitter Bootstrap. Sto cercando di giocare anche con backbone e Foundations. C'è molta ricerca da fare in quest'area e non abbastanza spazio in una singola risposta. Penso che se inizi a cercare queste librerie e questi strumenti dovresti trovare molte informazioni per raggiungere l'endpoint giusto.

    
risposta data 23.07.2013 - 18:46
fonte

Leggi altre domande sui tag