trucchi progressive enhancement [chiusa]

Question

C'è una vera e propria arte per la progettazione di un sito web che funziona per tutti, e Progressivo miglioramento è praticamente un mantra per me ...

Quindi mi chiedo, quali sono alcuni dei migliori trucchi che hai usato per creare siti web funzionano per tutti indipendentemente dal browser, sistema operativo, javascript, flash, risoluzione dello schermo, utente disabilitato l'accessibilità, ecc.?

(so molte cose su JavaScript e trucchi del browser, ma ammettere di essere all'oscuro di flash, ecc.)

Modifica : Non sto davvero parlando del 1% dei siti che sono RIA che semplicemente non può funzionare senza javascript o flash. Non sto chiedendo come scrivere Google Docs senza js. Mi piacerebbe sapere cosa fanno le persone per i siti che possono fare cose interessanti, ma in realtà non necessità a.

Ti offro un paio di mio come una risposta ...

Answer 1

cerco di evitare i mantra, tranne il mantra che il mondo è un luogo disordinato.

Penso che un sacco di funzionalità desktop sarà sostituito da funzionalità web, e sta andando ad essere una transizione difficile che finirà con le applicazioni reali nel browser. apps reale significa JavaScript o Flash o Silverlight o Java o C # o Objective-J compilate in JavaScript.

Per me l'unico trucco è l'identificazione delle persone e dei browser che non possono utilmente usare le applicazioni e fornendo loro un po 'di contenuti alternativi.

E che include il rilevamento mobile e fornendo contenuti appropriati. Ci sono molti siti che appena cadono a pezzi su iPhone perché sono così Flash-pesanti e dipendente su monitor di computer di larghezza.

I non penso che sia OK per richiedere JavaScript per un sito web che è un sito web, ma penso che sia OK per un web che è un app. I non penso che sia OK per servire solo 960px pagine di larghezza. I non penso che sia ok per servire i video in formato Flash solo.

Answer 2

Alcuni dei trucchi nifty che uso per lavorare con i siti basata su AJAX:

1) l'intera pagina e tutti i collegamenti utilizzando un normale tag che andranno a giusta pagina con javascript disabilitato, poi "hijax" li basano su qualcosa come "rel = esterno".

2) Aggiungi tag noscript con ovunque contenuto alternativo in cui i javascript altrimenti inserire contenuti dinamici.

3) Nascondere elementi che javascript controllerà con carico DOM con javascript, invece di nasconderli nel foglio di stile e in seguito che mostra di loro con javascript in quanto l'utente non avrebbe mai arrivare a vedere loro se javascript off.

Answer 3

Controlla le tue statistiche (o installare Google Analytics se non si dispone di statistiche) e di determinare in cui gli utenti stanno andando e che cosa stanno realmente facendo.

es.

1). I vostri utenti utilizzano costantemente ricerca, perché non riescono a trovare qualcosa? se così forse si può fare il lavoro di ricerca migliore?

2.) La tua pagina 404 fornisce alcune opzioni rapide per la ricerca di termini correlati o cercare di "indovinare" che cosa stavano cercando?

3.) Il tuo sito ha una mappa del sito che fornisce un rapido accesso a parti significative del tuo sito?

4). Se tutto il resto fallisce, fa l'utente dispone di un facile mezzo per contattare un supporto / tecnica per aiutarli a trovare ciò di cui hanno bisogno?

5.) Non sono sicuro se si "vende" qualcosa sul vostro sito, ma simile a quando si raggiunge la cassa a grossi mattoni n morter rivenditore ... ti chiedono se hai trovato tutto quello che cercavate per oggi. Considerare la fornitura un'opzione dove gli utenti possono fare proposte ... forse hai un mercato non sfruttato in attesa di essere conquistato.

6.) Su usabilità, assicurarsi di navigare il sito in IE (6,7,8), Safari, ecc e assicurarsi che funziona in tutto il mondo che ti interessano.

7.) C'è un grande libro intitolato " Non mi fanno pensare ", che è una grande risorsa su usabilità realistico. Se non avete letto già ... andare prendere una copia.

In aggiunta, garantire tutte le altre piccole cose sono presi cura di ... per esempio fate buon uso di caching (JS, CSS, immagini)

Answer 4

Di solito quello che faccio è scrivere l'intero sito web senza alcuna javascript. Una volta che questo è funzionale, è possibile "marcare in su".

Detto questo, ci sono alcuni buoni blocchi di partenza:

Il pattern PRG di solito è essenziale per una buona accessibilità.

Si vuole garantire che vi sia un menu jumplink abilitato vicino all'inizio del codice HTML. Se non siete sicuri, provare a eseguire il vostro sito web in link, o un browser di testo o discorso simile base. Se si ottiene infastidito, così anche gli utenti accessibili.

Accertarsi di applicare tag alt alle immagini solo quando sono significativi. E 'legittimo per dare un alt image = "" quando è solo per scopi di progettazione. Allo stesso modo, l'impostazione title = "" in grado di soddisfare gli utenti di Firefox desiderano per i tooltip al passaggio del mouse senza fastidiosi tuoi utenti accessibili.

Spero che questi semplici consigli aiutano! L'accessibilità è una responsabilità di tutti!

Answer 5

Prova a fornire contenuti di fallback quando si usano i plugin o altri contenuti che possono essere difficili da rendere accessibili. Mettere video sulla pagina, per esempio. Se si dovesse andare via HTML5:

<video>
    <source src="video.ogv" type="video/ogg" /><!-- OGG for Mozilla/Opera -->
    <source src="video.mp4" type="video/mp4" /><!-- h.264 for Apple/Google -->
    <object><!-- Fall back to Flash/h.264 for older browsers -->
            <!-- And in the event the UA can't handle any of those, all you can do is provide a link to the media -->
            <p><a href="video.ogv">Download the video</a>.</p>
    </object>
</video>

[Pseudocodice, ma si ottiene l'idea]

Per una soluzione più completa per quel particolare problema, controlla video di Kroc Camen per tutti .

Answer 6

progressive enhancement non è complicato.

Si considerino i tre principali preoccupazioni:

• Content (HTML)
• Presentazione (CSS)
• Behavior (JS)

Si inizia con il contenuto e il tuo lavoro attraverso le preoccupazioni facendo in modo che ogni nuova preoccupazione non impedisce al precedente o cercare di imitare un'altra preoccupazione; JavaScript non deve essere la generazione di contenuti; CSS non dovrebbe essere la manipolazione comportamento; HTML non deve essere la manipolazione di presentazione ecc ecc.

Answer 7

ok, quando si tratta alla domanda di sito web, la cosa migliore è, per sostenere sempre un gran numero di formati, in un modo RESTful ... HTML, XML, JSON, RSS, Atom (in cui ha senso) e perché non altri ... a farlo, hai bisogno di un'architettura MVC pulita sul server ... beh, non ha bisogno di essere MVC, ma diciamo, lo strato di rendering dovrebbe essere muto come il pane, e una logica di business ben scritto in esecuzione sotto ... il controller frontend dovrebbe scegliere il formato giusto per tornare in risposta a una richiesta e ci si va ... la logica di business tutto per recuperare i dati / aggiornamento, impaginazione, ecc è implementata una volta, e poi basta solo rendono in un modello HTML, o convertono in JSON, o fare quello .. .

ora un'idea sarebbe, per fare un punto di vista dell'attuazione, che restituirà solido come una roccia, semantico e semplice HTML ... e fare uno, che sarà pesantemente utilizzano JavaScript ... renderli accessibili in percorsi diversi, e effettua il javascript non scansionabili ... metti una riga di JavaScript, all'inizio del vostro principale HTML-modello, che causerà un redirect alla versione javascript di quel sito ... si può fare la stessa cosa per il flash pure ... ecc ... poi, nella versione "sporco" delle applicazioni, si può fare davvero nulla, ti piace ... modelli di carico per HTTP, e poi i dati in JSON, e fare il rendering sul client, la creazione di un persistente clientside stateful javascript app ... perché no?

Io personalmente penso, è meglio, che iniziare con una bella e chiara HTML, e di ripieno in tonnellate di javascript, che non anche lavorare per tutti gli utenti ...

greetz

back2dos