Pregunta

Hay un verdadero arte de diseñar un sitio web que funcione para todos, y la consolidación progresiva es prácticamente un mantra para mí ...

Así que me pregunto, ¿cuáles son algunos de los mejores trucos que ha utilizado para construir sitios web funcionan de todos independientemente del navegador, sistema operativo, javascript, flash, resolución de pantalla, accesibilidad de los usuarios con discapacidad, etc.?

(sé mucho acerca de Javascript y trucos del navegador, sino que admitir que ni idea de flash, etc.)

Editar : No estoy hablando del 1% de los sitios que son RIAs que simplemente no pueden funcionar sin JavaScript o Flash. No estoy pidiendo a escribir Google Docs sin js. Me gustaría saber lo que hace la gente para sitios que pueden hacer cosas interesantes, pero en realidad no necesidad a.

voy a ofrecer un par de mi misma como una respuesta ...

¿Fue útil?

Solución

Trato de evitar los mantras, excepto el mantra de que el mundo es un lugar desordenado.

Creo que mucha de la funcionalidad de escritorio será reemplazado por funcionalidad de la web, y va a ser una transición difícil que terminará con las aplicaciones reales en el navegador. aplicaciones reales significa JavaScript o Flash o Silverlight, o Java o C # o de Objective-J compilados en JavaScript.

Para mí el único truco es la identificación de las personas y de los navegadores que no pueden utilizar provechosamente las aplicaciones y les proporciona algo de contenido alternativo.

Y eso incluye la detección móvil y para proporcionar el contenido apropiado. Hay muchos sitios web que simplemente caen a pedazos en el iPhone porque son tan Flash pesada y dependiente de los monitores de ordenador de ancho.

No Creo que está bien para requerir JavaScript para un sitio web que es un sitio web, pero creo que está bien para una web que es una aplicación. I no Creo que está bien para servir sólo 960 páginas de ancho. I No Creo que está bien para servir vídeos en formato Flash solamente.

Otros consejos

Algunos de los trucos ingeniosos que utilizo para trabajar con sitios basadas en AJAX:

1) toda la página y todos los enlaces utilizando un tag normal que va a ir a la página derecha con JavaScript desactivado, entonces "Hijax" ellos basan en algo así como "rel = externo".

2) Añadir etiquetas noscript con contenidos alternativos en cualquier lugar donde Javascript otro modo insertar contenido dinámico.

3) Ocultar elementos que Javascript controlarán a carga DOM con javascript en lugar de ocultarlos en la hoja de estilo y más tarde muestra con javascript ya que el usuario nunca llega a ver si tienen Javascript desactivado off.

Compruebe las estadísticas (o instalar de Google Analytics si usted no tiene las estadísticas) y determinar donde los usuarios van y lo que están haciendo en realidad.

por ejemplo.

1.) ¿Sus usuarios utilizan constantemente la búsqueda porque no pueden encontrar algo? Si es así tal vez se puede hacer el trabajo de búsqueda mejor?

2.) ¿Su página 404 proporciona algunas opciones rápidas para buscar términos relacionados o tratar de "adivinar" lo que estaban buscando?

3.) ¿Su sitio web tiene un mapa del sitio que proporciona un acceso rápido a partes significativas de su sitio?

4.) Si todo lo demás falla, tiene el usuario de un medio fácil para contactar con usted soporte / técnica para ayudarles a encontrar lo que necesitan?

5.) No estoy seguro de si "vender" algo en su sitio, pero similar a cuando llegue a la comprobación en cualquier ladrillos principales n mortero minorista ... te preguntan si has encontrado todo lo que estabas buscando en la actualidad. Considere proporcionar una opción donde los usuarios pueden hacer sugerencias ... ¿quién no tiene un mercado no-aprovechado la espera de ser conquistado.

6). Por la facilidad de uso, asegúrese de navegar por su sitio en IE (6,7,8), Safari, etc., y asegurarse de que funciona en todas partes que le interesan.

7.) Hay un gran libro llamado " No haga que creo ", que es un gran recurso en la usabilidad realista. Si no lo ha leído ya se ... ir a tomar una copia.

Además, asegurar que todas las otras pequeñas cosas son atendidos por ejemplo ... hacer un buen uso de la memoria caché (JS, CSS, imágenes)

Normalmente lo que hago es escribir todo el sitio web sin ningún tipo de Javascript. Una vez que esto es funcional, puede "marcar hacia arriba".

Dicho esto, hay algunos buenos tacos de salida:

El patrón PRG suele ser esencial para una buena accesibilidad.

Usted quiere asegurarse de que hay un menú jumplink habilitado cerca del inicio de su HTML. Si no está seguro, pruebe el funcionamiento de su sitio web en los enlaces, o un navegador de texto o de voz similar basada. Si le molesta, también lo harán sus usuarios accesibles.

No olvide aplicar etiquetas alt a las imágenes sólo cuando son significativos. Es de fiar para dar una imagen alt = "" cuando es sólo para fines de diseño. Del mismo modo, el establecimiento title = "" va a satisfacer sus Firefox usuarios desean para información sobre herramientas libración sin molestar a sus usuarios acceso.

Esperamos que estos sencillos consejos ayudan! La accesibilidad es responsabilidad de todos!

Trate de proporcionar contenido de reserva cuando se utiliza plugins ni otros contenidos que pueden ser difíciles de hacer accesible. Poner video en la página, por ejemplo. Si se va a ir por el camino de 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>

[Pseudocódigo, pero se entiende la idea]

Para una solución más completa a este problema en particular, echa un vistazo de Kroc Camen de vídeo para todo el mundo .

mejora progresiva no es complicado.

Considere las tres preocupaciones principales:

  • contenido (HTML)
  • Presentación (CSS)
  • Comportamiento (JS)

Se empieza con el contenido y su forma de trabajo a través de las preocupaciones asegurándose de que cada nueva preocupación no impide la anterior o tratar de imitar otro motivo de preocupación; JavaScript no debe ser la generación de contenido; CSS no debe manejando la conducta; HTML no debe manipulación Presentación etc, etc.

bien, cuando se trata de la aplicación Tipo de sitio web, lo mejor es, para apoyar siempre una multitud de formatos, en un manera REST ... HTML, XML, JSON, RSS, Atom (donde tiene sentido) y por qué no a otros ... para ello, se necesita una arquitectura MVC limpia en el servidor ... bueno, no tiene por qué ser MVC, pero digamos, la capa de representación debe ser mudo como el pan, y una lógica de negocios bien escrito que corre por debajo ... el controlador de interfaz debe elegir el formato adecuado para volver en respuesta a una solicitud y hay que ir ... su lógica de negocio conjunto para recuperar datos / actualización, haga paginación, etc. se implementa una vez, y luego sólo la hacen en una plantilla HTML, o lo convierten en JSON, o hacer lo .. .

Ahora una idea sería, para hacer una vista de la implementación, que devolverá sólido como una roca, y la semántica HTML plano ... y crea uno, que va en gran medida el uso de JavaScript ... que sean accesibles en diferentes caminos, y sacar el javascript no rastreable ... poner una línea de javascript en el comienzo de su principal plantilla HTML, que provocará una redirección a la versión JavaScript de ese sitio ... se puede hacer lo mismo para el flash, así ... etc ... entonces, en la versión "sucia" de las aplicaciones, se puede hacer realmente nada, te gusta ... plantillas de carga por HTTP, y luego los datos en JSON, y hacer la representación en el cliente, creando una persistente del lado del cliente con estado javascript aplicación ... ¿por qué no?

Yo personalmente creo, es mejor, que a partir de agradable y claro HTML y de relleno en toneladas de Javascript, que ni siquiera va a trabajar para todos los usuarios ...

greetz

back2dos

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top