Che dire dell'utilizzo di MVC come modo per fornire responsive Web Design?

Question

Che dire dell'utilizzo di MVC come modo per fornire responsive Web Design?

#1 da (11 voti)
#2 da (0 voti)

1

Il design web reattivo mostra all'utente diversi elementi - o elementi disposti in modi diversi - utilizzando le query multimediali (se il dispositivo è un desktop o un laptop, mostrale a questo, se un tablet, mostralo così; telefono, "mostra loro l'altra cosa) o altre metodologie.

Che dire, però (soprattutto se l'app / sito utilizza MVC in ogni caso), sfruttando MVC per restituire visualizzazioni diverse in base al tipo di dispositivo / agente utente?

Ciascuna coppia di modelli / controllori può avere almeno tre viste (desklaptop, tablet, telefono, nonché gradazioni più granulari e / o viste su misura per dispositivi più grandi) e, in base alle dimensioni del settore immobiliare dell'utente, invoca la vista appropriata.

Penso che questo potrebbe essere un metodo più naturale e più facile da implementare per ottimizzare l'esperienza per tutti gli utenti, almeno per coloro che hanno dimestichezza con MVC. Come esattamente questo è implementato (come viene determinato il programma utente e viene richiamato il Controller ActionResult appropriato) Non sono sicuro, comunque ... pensieri?

UPDATE

Risposta al commento e risposta:

Sto pensando più alla linea di questo scenario, per il quale, IMO, le domande dei media non saranno gestite in modo soddisfacente:

La tua app / sito ha come fulcro una mappa. Ci sono dei pezzi secondari ma vitali che sono posizionati attorno alla mappa (in alto, in basso e di lato) che si adattano perfettamente a un tablet (a malapena) ea dispositivi più grandi. Su un telefono, però - in nessun modo - c'è solo spazio per la mappa, e anche allora la mappa è quasi troppo banale.

L'unico modo in cui riesco a pensare a questo è mostrare la mappa a schermo intero sul telefono, con pulsanti o collegamenti in stati come Wyoming, Montana e Nevada che invocheranno le parti che circondano la mappa su più grandi dispositivi, ma monopolizzerà lo schermo su un telefono. In ogni caso, la vista correntemente visualizzata avrà bisogno di collegamenti per [re] aprire le altre parti dell'app / sito.

Altrimenti, l'unico modo in cui potrebbe essere utilizzabile con un telefono è se l'utente porta con sé una lente d'ingrandimento (o lo zoom e lo scorrimento sullo schermo come un matto, ma IMO è un dolore nel grande gluteo).

E così, in uno scenario del genere, mi sembra che Views sarebbe più facile da implementare che modificare il CSS, in quanto si tratta di un importante rinnovamento dello schermo, non solo di una riorganizzazione dei mobili.

user-interface mvc responsive-design

posta B. Clay Shannon 27.08.2013 - 23:13

fonte

2 risposte

Leggi altre domande sui tag user-interface mvc responsive-design

Dovrei costringere gli utenti ad aggiornare un'applicazione? Dovresti scrivere un elenco di problemi o risolvere i problemi mentre si presentano? [chiuso]

score 11 · Answer 1

Implemento la progettazione reattiva visualizzando larghezza, non dispositivo o tipo di browser. In questo modo è a prova di futuro e utile in scenari imprevisti. Ad esempio, quando un nuovo telefono esce con uno schermo enorme e una risoluzione i miei siti saranno comunque ottimizzati per usarlo bene.

Inoltre, il mio codice HTML è identico per ogni dispositivo / risoluzione. Nell'architettura MVC solo il mio CSS è responsabile del design reattivo. Non c'è nulla sul lato server che si preoccupa, rendendo l'implementazione molto più semplice. L'unico vantaggio possibile di spingere parte del lavoro nei controller potrebbe essere quello di non preparare i dati che non sono visibili su schermi più piccoli, ma questo è raro nella mia esperienza e non vale la complessità aggiunta. Quindi aggiungi il fatto che il rilevamento di browser / dispositivo non è affidabile e stai introducendo bug.

Per riassumere, la progettazione reattiva è solo una responsabilità della vista in MVC e quindi è gestita al meglio solo da CSS.

Aggiorna

In risposta all'aggiornamento, il problema è ancora limitato alla sola visualizzazione. Potresti ancora risolvere questo esempio con solo media query e javascript. Puoi anche suddividere il codice HTML in componenti che vengono caricati separatamente. Tuttavia, le funzionalità di base del tuo sito rimangono invariate, mantenendo il modello, il controller e la maggior parte della tua vista uguali su tutti i dispositivi.

Considera anche che su una richiesta HTTP per la tua app web non si conosce la risoluzione dello schermo. È possibile caricare una pagina vuota, quindi utilizzare JS per ottenere la risoluzione corrente e AJAX per caricare il resto della pagina (con la risoluzione dello schermo come parametro), ma ciò è inefficiente e dovrebbe essere rieseguito al ridimensionamento di ogni pagina.

score 0 · Answer 2

Dai un'occhiata a Sencha Touch.

link

Non ti dice esattamente come farlo, ma implementa una versione molto potente di "profili", che utilizza non solo la dimensione / risoluzione dello schermo del tuo dispositivo, ma anche il tipo di dispositivo (es. , telefono, ecc.) e il sistema operativo del dispositivo (Windows Phone 8, iOS, Android, ecc.) e si adatta al layout del dispositivo.

È molto più potente del semplice tentativo di creare un sito Web utilizzando le query CSS e Media per determinare cosa costruire, dove crearlo e se costruirlo. Certo, sono sicuro che utilizza un wrapper per avvolgere un sacco di quelle funzioni e astrarle dallo sviluppatore. Tuttavia, fornisce un modo semplice, pulito e semplice per creare un'applicazione che si estende su più dispositivi e tipi di dispositivi diversi.

Nel caso dell'esempio di mappa, è possibile implementare qualcosa di simile a Sencha Touch in modo che su un dispositivo a schermo più grande (tablet o anche un browser desktop compatibile con HTML5) sia definita una finestra a schermo intero in cui si trova la mappa la maggior parte dello schermo, con una barra di navigazione ancorata alla parte sinistra dello schermo con le varie funzioni critiche tra cui scegliere e una possibile struttura di navigazione in alto. Se si desidera spostarlo su un tablet più piccolo (iPad Mini, ad esempio), è possibile eliminare alcune parti della navigazione in modo che non occupino lo spazio necessario sullo schermo, ma potrebbe essere accessibile invece da un "menu". "Pulsante che si sovrappone all'angolo della mappa o scorre verso l'alto dalla parte inferiore tramite una barra di ancoraggio nascosta.

Le opzioni sono davvero infinite con ciò che potresti voler fare. Penso che la soluzione migliore sarebbe utilizzare un qualche tipo di framework (non devi usare Sencha Touch - è solo quello che uso e mi piace, ma sono sicuro che ci sono molte altre buone opzioni là fuori), quindi che non è necessario passare attraverso il lavoro di reinventare la ruota e tentare di fare questo tipo di cose da soli. Complessivamente, penso che vorrete sicuramente andare con una soluzione che offre molto di più oltre alle semplici regole CSS e / o JavaScript / jQuery.

Buona fortuna!