it-swarm-eu.dev

Un sito Web per risoluzioni di più client

Continuo a pensare che, sebbene la creazione di un singolo sito Web per più risoluzioni client o dimensioni dello schermo possa essere un duro lavoro, è molto più gestibile della creazione di un sito Web separato per ciascun dispositivo o risoluzione.

Quali applicazioni di modifica del design o del sito Web, se ce ne sono, posso usare per aiutare a creare CSS specifici o persino eseguire il markup su dispositivi target di una determinata dimensione?

6
Bernhard Hofmann

Dreamweaver CS5 supporta le query multimediali HTML 5 che consentono di utilizzare CSS specifici e l'anteprima per risoluzione dello schermo. Questo è l'unico che mi viene in mente ma Dreamweaver non mi è mai piaciuto e non lo consiglierei.

2
fluxd

Un singolo sito Web per più clienti è sicuramente più gestibile.

La prima cosa da fare è avere più file CSS che il browser raccoglierà in base all'attributo media :

<link rel="stylesheet" type="text/css" media="screen" href="default.css">
<link rel="stylesheet" type="text/css" media="handheld" href="handheld.css">

Puoi adattare il layout degli elementi, le loro dimensioni e persino nasconderne alcuni per dispositivi più piccoli.

Se è necessario rimuovere parti di grandi dimensioni del layout su dispositivi di piccole dimensioni, è meglio rimuoverle sul server per risparmiare un po 'di larghezza di banda.

La risoluzione dello schermo e le dimensioni della finestra possono essere determinate sul client in Javascript (questo è il più affidabile, test screen.width/screen.height e document.body.clientWidth/document.body.clientHeight), mentre sul server devi fare affidamento principalmente sul HTTP_USER_AGENT header (provalo qui insieme ad altre intestazioni).

Un'altra tecnica importante è abbandonare l'utilizzo di tabelle HTML per il layout di pagina a favore di blocchi mobili , che si adattano meglio alle diverse risoluzioni dello schermo o al ridimensionamento delle finestre.

Prenditi cura anche delle dimensioni effettive dello schermo, poiché i dispositivi di piccole dimensioni tendono ad avere una risoluzione molto più elevata (DPI, punti per pollice) che può rendere illeggibili.

Entrambe le tecniche devono essere combinate (lato client e server) per ottenere i migliori risultati. L'esempio Responsive Web Design è impressionante ma devi davvero padroneggiare le tecniche per raggiungere questo obiettivo e ci sono ancora dei limiti.

Penso che questa domanda, anche se posta a causa di nuovi dispositivi mobili connessi, dovrebbe anche essere considerata per il computer in quanto l'utente può ridimensionare la finestra del browser.

5
Mart

Questa è una presentazione da non perdere, che copre una carenza del modo in cui molti utilizzano le query multimediali: Ripensare il Web mobile .

In breve, i telefoni cellulari che non supportano le query multimediali (e ce ne sono molte) possono finire con uno stile destinato ai browser desktop. L'approccio consigliato qui, e in uso da solo, inizia con stili di base per tutti e quindi aggiunge progressivamente stili per browser che supportano le query multimediali.

Vedi la mia risposta a una domanda correlata a StackTranslate.it .

3
David Oliver

Solo i CSS non funzioneranno per questo, perché puoi avere un layout molto diverso per l'interfaccia utente mobile e per PC/Mac. Solo una piccola idea sta nel layout lato server. Ad esempio, è necessario eseguire il rendering di una parte della pagina (griglia dati, barra laterale, barra di navigazione, ecc.). Ad esempio, si utilizza ASP.NET come processore lato server. Quindi nel layout della pagina scrivi:

Per la barra di navigazione:

<acme:NavBar runat="server">
  <MenuItem Name="<%$Loc: News%>" />
  <MenuItem Name="<%$Loc: Products%>">
    <MenuItem Name="<%$Loc: Project1%>" />
    <MenuItem Name="<%$Loc: Project2%>" />
  </MenuItem>
  <MenuItem Name="<%$Loc: Support%>" />
  <MenuItem Name="<%$Loc: Contacts%>" />
</acme:NavBar>

Per datagrid:

<acme:Grid ID="grid1" runat="server">
...
</acme:Grid>

Quindi in codebehind:

grid1.DataSource = dao.GetProducts(filter);
grid1.DataBind();

e così via.

Quindi è necessario scrivere diversi renderer per risoluzioni diverse (mobile/ecc ...). * Per una risoluzione di grandi dimensioni è possibile eseguire il rendering di intestazioni, cercatori, filtri, sorter, contenuti scorrevoli ordinabili, plug-in JQuery, ecc. * Per una risoluzione di piccole dimensioni si esegue il rendering di un semplice HTML.

Spero che l'idea principale sia chiara.

0
Genius

Non hai bisogno di più "siti Web" per client diversi (non credo che nessuno lo faccia), ma dovresti avere più portali per diversi segmenti di visitatori, ad esempio desktop/laptop, netbook/ipad/smartphone e altri mobile.

Mentre i CSS ti consentono di specificare fogli di stile diversi per diversi tipi di dispositivi, questo è un problema pratico. Molti smartphone non afferrano il foglio di stile mobile o usano sia il foglio di stile mobile sia il foglio di stile dello schermo.

In secondo luogo, i diversi segmenti di pubblico cercheranno informazioni diverse. Ad esempio, un utente mobile probabilmente non sarà interessato a leggere lunghi articoli o a visualizzare immagini o video ad alta risoluzione. Quindi un portale separato con un'esperienza utente mirata sarebbe ottimale ed è per questo che i servizi più popolari offrono portali separati per gli utenti mobili.

In terzo luogo, la manutenibilità riguarda l'organizzazione e la semplicità più che la quantità. Certo, potresti avere un unico grande foglio di stile che utilizza un sacco di hacking a cascata e browser per calzare il tuo sito principale in tutti i client. Ma è probabile che sia più difficile da mantenere rispetto al mantenimento di 2-3 fogli di stile più semplici, ciascuno su misura per una particolare classe di clienti.

Infine, se l'applicazione viene modularizzata correttamente utilizzando l'isolamento del dominio e progettata con separazione dei problemi, dovrebbe essere abbastanza semplice impostare nuovi portali personalizzati per diverse classi di dispositivi. Se si utilizza un modello MVC, è sufficiente aggiungere nuove visualizzazioni e continuare a utilizzare gli stessi modelli e controller. Se stai progettando un'applicazione AJAX, puoi persino riutilizzare la maggior parte delle visualizzazioni creando servizi web.

0
Lèse majesté

Dipenderebbe dai tuoi contenuti ma potresti modulare i tuoi contenuti.

Ogni elemento di contenuto può essere visualizzato in un modulo stretto che può essere visualizzato in tre colonne su uno schermo ampio, per risoluzioni inferiori è possibile utilizzare meno colonne.

Un buon esempio di ciò è: http://colly.com/ Ci sono tre regolazioni del layout mentre diminuisci la larghezza della pagina. Usando questo come linea guida per il proprio sito, è possibile progettare un singolo modulo e layout di pagina con 3 varianti per soddisfare ciascuna di queste larghezze.

Per implementarlo potresti avere moduli di dimensioni fisse (forse come li) all'interno di un contenitore che regola le dimensioni. È possibile regolare le dimensioni dei contenitori utilizzando jquery per rilevare la larghezza dello schermo (e la modifica della larghezza), quindi aggiungere/rimuovere la classe. È possibile creare variazioni sugli elementi nel contenitore, ad esempio: ul.product_list li e ul.product_list_wide li

0
Leah

Come altri hanno già detto, utilizzerei le query multimediali CSS3 per indirizzare più risoluzioni. A seconda del sito/dell'applicazione, ciò potrebbe non essere possibile. Ciò presuppone che utilizzerai lo stesso contenuto per tutte le esperienze, semplicemente visualizzandolo in modo diverso in base alle dimensioni dello schermo (questo non è sempre ottimale per un'esperienza mobile).

Alcune risorse per l'utilizzo di questa tecnica sarebbero:

Un articolo a parte su Responsive Web Design: http://www.alistapart.com/articles/responsive-web-design/

Ripensare la slide del Web mobile: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib

JavaScript per abilitare le query multimediali CSS3 per i browser che non lo supportano in modo nativo: http://code.google.com/p/css3-mediaqueries-js/

Una selezione di media query per dispositivi e dimensioni diverse: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Alcuni altri esempi: http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your- sito web /

Sfortunatamente, non esiste un WYSIWYG per fare questo tipo di cose: hai bisogno delle conoscenze e delle abilità per poterlo implementare a mano.

Anche se suggerirei contro di loro, esistono servizi come Mobify se sei preoccupato solo per le visualizzazioni desktop/mobile. http://mobify.me/

0
RussellUresti