2011-12-07 4 views
11

Al momento stiamo discutendo un po 'in ufficio sull'utilizzo di CSS per riordinare visivamente gli elementi sulla pagina.Ragioni per non utilizzare i CSS per riordinare visivamente l'ordine degli elementi HTML

Su un livello di base, un membro del nostro team vuole strutturare il codice HTML come questo (la richiesta si basa esclusivamente su una prospettiva di progettazione)

<div class="secondary-content"> 
    <h2>Secondary content heading</h2> 
    <p>This is the secondary content</p> 
</div> 
<div class="main-content"> 
    <h1>Main heading</h1> 
    <p>This is the main content</p> 
</div> 

e poi usare i CSS per posizionare visivamente il main-content div prima dello secondary-content uno.

Ora, non sto chiedendo aiuto su come avremmo tecnicamente ottenuto questo, ma più sto cercando prove per sostenere l'argomento che noi non dovremmo fare lo.

Come dev front-end, le mie preoccupazioni intial sono circa l'accessibilità

  1. I lettori di schermo/tecnologie assistive colpirà il primo secondary-content. Per me, è come aprire un libro, a partire dal capitolo 4 e tornare indietro e leggere i capitoli 1, 2, 3, 5, 6 ecc.
  2. La struttura di intestazione della pagina sarà disgiunta (H2 prima di H1 ecc.)
  3. Se non v'è alcun contenuto in secondary-content che richiede informazioni da main-content al fine di essere compreso, sarà fonte di confusione per gli utenti con i CSS off/tecnologie di assistenza etc

Tuttavia, il pulsante caldo reale per le persone nel business è Google/SEO. Pertanto, qualcuno conosce argomenti/articoli validi sul perché scrivere HTML in modo non strutturato avrebbe un impatto negativo sul nostro SEO?

+1

Un div non ha alcun significato semantico, preferisco usare i tag di sezione e di lato (purtroppo questi sono tag HTML5) –

+0

html5 il supporto per ii può essere fatto con http://code.google.com/p/html5shiv/ – DGM

+0

È meno circa il significato semantico dei div e molto altro riguarda il posizionamento del contenuto secondario (e H2 associato) prima del contenuto principale (e H1) nell'HTML. Forse avrei dovuto essere più chiaro, mi dispiace. –

risposta

14

[Scrivere] l'HTML in un modo non strutturato avrebbe un impatto negativo sul nostro SEO?

Quasi sicuramente. Mentre la natura precisa degli algoritmi di ranking di ricerca è un segreto del settore gelosamente custodito, e ogni azienda è diversa, tutti guardano sfavorevolmente le differenze tra i contenuti presentati ai motori di ricerca e quelli presentati agli utenti.

Here's what Google's Webmaster Guidelines say:

  • Creare un sito utile e ricco di informazioni, e pagine di scrittura che descrivono in modo chiaro e accurato i contenuti. [Pagine il cui contenuto offusca l'ordinamento visivo attuale non sono chiaro e preciso che descrivono il loro contenuto.]

  • Fai un sito con una chiara gerarchia e collegamenti di testo. [Mettere un <h2> prima di un <h1> viola una gerarchia.]

  • utilizzare un browser di testo come Lynx per esaminare il tuo sito, perché la maggior parte i motori di ricerca vedere il vostro sito molto più modo di Lynx. [Qualcuno che usa un browser di testo sarebbe sicuramente confuso da bizzarri schemi di riordino dei contenuti.]

Così, in breve, il gioco è ingerenza con la "gerarchia chiara" che i motori di ricerca stanno cercando di indice. Questo chiaramente non è desiderabile.

Per rispondere alla tua domanda più generale:

sto cercando prove per eseguire il backup l'argomento che non dovremmo farlo affatto.

Fondamentalmente, i documenti HTML sono proprio questo: documenti, significava per il trasporto di informazioni semantiche attraverso la loro struttura.

Il tentativo di sovvertire questo ordinamento naturale non è rigorosamente verboten, ma spesso suggerisce di non aver scritto correttamente la marcatura, e porta sempre a flussi imprevisti. Ad esempio,

  • In un libro, ti aspetti che il capitolo 7 venga prima del capitolo 6?
  • In un articolo di giornale, ti aspetti che il corpo arrivi prima del titolo?
  • In un film, ti aspetti che i titoli di coda vengano prima del biglietto?

Si capisce perché, strutturalmente, sarebbe sconsigliabile riordinare gli elementi in questo modo. Un documento ha una forma naturale; distorcendo rende più difficile capire.

Ci possono essere convincenti motivi estetici o artistici per cambiare la forma di veicoli semantici come i documenti (ad esempio, un film come Memento che sfrutta questo per effetto intenzionale), ma questi di solito sono ben ponderata, e non fatto banalmente.

E sarebbe difficile stabilire un'equivalenza tra un film, progettato per intrattenere, e un documento HTML, progettato per informare.

+3

+1 per il tuo riferimento a Memento;) –

3

Questa sembra una pessima idea. Principalmente a causa della leggibilità. Non ha senso logicamente avere il secondario prima del primario. Se fossi uno sviluppatore del web a guardare il codice di una pagina e l'ho visto, l'unica cosa che penserei a quel punto è "cosa".

Anche questo sembra del tutto inutile se si spostano comunque le immagini con i CSS. Non è che ti sia richiesto di mettere il secondario prima del primario per quanto riguarda il codice.

+1

Mi sembra che tu non abbia mai elementi 'float'? Questa è una situazione in cui la tua affermazione, "Non è che ti venga richiesto di mettere il secondario prima del primario per quanto riguarda il codice," non è corretto. Vedere l'esempio nella mia risposta. – ScottS

+0

In realtà non sono molto uno sviluppatore Web, quindi le specifiche del genere tendono a scivolare oltre me. – MGZero

1

Questa non è una domanda che ha una risposta definitiva. Il motivo è che alcune forme di layout necessitano della sorgente riordinata. Se secondary-content deve essere fatto fluttuare con lo main-content che scorre attorno ad esso (sul lato e sotto di esso), , deve essere prima collocato nell'ordine di origine. Non c'è scelta in materia.

È consigliabile inserire il contenuto nell'ordine di origine, se possibile, sì. È sempre possibile, no.

Vedere esempio: http://jsfiddle.net/ceHGX/3/

1

risposta Assecondare da John Feminella, WCAG 2.0 ha qualche Techniques circa (contro) riordino dei contenuti.
Ecco alcuni link relativi all'accessibilità:

Da un Punto di vista CSS, cosa intendi per

posizionare visivamente il div principale contenuto prima del secondario-contenuto uno

Sono colonne galleggianti (o display: inline-block o table-cell, qualunque) o uno sopra l'altro? In quest'ultimo caso, qualsiasi zoom di testo (IE7, IE6, ZoomText users, tutti gli utenti che disabilitano lo zoom grafico per evitare lo scorrimento orizzontale e necessitano di molto zoom) si romperà gravemente. Se gli affari sono interessati solo da Google/SEO, dì loro quanti PARZIALMENTE gli utenti vedenti ci sono nel tuo paese. Credo che dieci volte il numero di utenti non vedenti. Non parlo di anziani come i nostri (grand) genitori.
Li vogliono come clienti o forse la vostra azienda è abbastanza ricca e non ha bisogno di/cura di loro e dei loro soldi? ;)

+0

"Dal punto di vista dei CSS, cosa intendi con ..." Voglio dire che faremo galleggiare gli elementi in modo tale da riordinarli visivamente quando gli utenti leggono L-R. Come ho detto, le mie preoccupazioni non derivano da un POV tecnico, ma piuttosto dalla questione della semantica (contenuto secondario prima del contenuto principale ecc.) –