Cómo planificar la ausencia de JavaScript
Aunque los métodos utilizados para recopilar estadísticas de tráfico del sitio web cuestionan la validez de las estadísticas en sí mismas, el hecho es que algunos de los visitantes de su sitio web tendrán JavaScript desactivado .
Puede dividir sus fuentes de tráfico en cuatro amplias categorías:
Los motores de búsqueda, los visitantes móviles, los visitantes que usan lectores de pantalla y los visitantes que tienen JavaScript desactivado .
Cuando planifique su arquitectura y diseño de información, debe averiguar cómo tratar con estos grupos especiales.
He reunido algunos escenarios recientes del mundo real para encontrar claridad sobre el tema.
Cuando desee ocultar contenido largo detrás de un desplazador animado, o rotar productos o testimonios en secuencia, o presentar contenido categorizado de nivel de página limpiamente, podría usar acordeones, carruseles o cualquier otra solución imaginativa.
Si se mantiene al día con las mejores prácticas de JavaScript o utiliza cualquiera de la miríada de bibliotecas de JavaScript, probablemente ya esté familiarizado con JavaScript discreto, que es la técnica de presentar interactividad de JavaScript solo cuando JavaScript está habilitado.
Este principio también debería extenderse a la presentación: construya su (s) característica (s) dinámica (s) y configure sus valores de visualización y visibilidad solo después de que el documento esté listo y solo si el visitante tiene JavaScript habilitado, en lugar de establecer las propiedades en su código HTML o definir ellos del lado del servidor.
Al igual que muchos lectores de pantalla, el rastreador de Google tiende a ignorar el contenido envuelto en un conjunto de elementos para display: none , mientras rastrea cualquier contenido configurado en display: visible .
Por lo tanto, su tarea como diseñador es planificar el espacio y el diseño en torno a sus funciones dinámicas , y también prepararse para las instancias cuando "dinámico" no es una opción.
Si el contenido de una de sus páginas siempre estará visible en los navegadores de ciertos usuarios, ¿cómo debería mostrarse? ¿El contenido oculto debe permanecer oculto incluso si JavaScript está desactivado? ¿Debería estar disponible todo el contenido para los lectores de pantalla y los motores de búsqueda? Si una parte del contenido se vuelve visible solo después de una llamada AJAX, ¿cómo se llena adecuadamente ese espacio cuando JavaScript está desactivado?
El acordeón
Un acordeón es una estructura que generalmente consiste en un patrón de pares de encabezado y contenido. Los bloques de contenido se expandirían uno a la vez, en respuesta a un evento desencadenado en el encabezado.
Acordeón de Hulu
Recientemente ayudé a un cliente a superar el problema de tener páginas muy largas. Este cliente tenía un catálogo en línea de cursos de capacitación y estipuló que toda la información para un programa en particular debe estar disponible por adelantado: sin saltos de página o ventanas emergentes para descripciones de cursos centrales o definiciones de programas.
Toda la información del programa debe estar disponible para el visitante en la misma página, sin tener que navegar de ida y vuelta en el catálogo del curso.
La solución correcta aquí fue un acordeón , colapsando las descripciones de los cursos debajo de los títulos de cada área de estudio (matemática o histórica, por ejemplo). Una implementación deficiente habría sido establecer la visibilidad de las descripciones de cursos colapsados antes de que el HTML se representara en la pantalla.
Si el contenido estaba oculto antes de la representación, algunos visitantes y motores de búsqueda perderían gran parte del contenido importante.
Usando jQuery, apunté al contenido para colapsar y configuré el acordeón para que se disparara después de que la página se hubiera cargado y el documento estuviera listo. Para este cliente, hacer el contenido disponible para todos los públicos fue extremadamente importante. Parte del contenido podría durar mucho tiempo, por lo que se necesitaba un diseño que permitiera una expansión vertical extrema.
El carrusel
Verá carruseles con bastante frecuencia en carteras y focos de productos.
Por lo general, en los carruseles, el contenido se desplazará en respuesta a un intervalo de tiempo de espera o a alguna interacción del usuario (consulte "Su historial reciente" en Amazon). Me gustan los carruseles por su flexibilidad y porque le permiten corregir al menos una dimensión del contenedor.
Carrusel de Amazon
Otro cliente recientemente preguntó sobre el área "Noticias y aspectos destacados" de su página de inicio. Como muchos otros bloques de contenido de este tipo, este presentaba las ocho adiciones más recientes a sus páginas de noticias (aunque ese número podría variar).
Los teasers en este bloque contenían un resumen del artículo y una imagen. Las imágenes pueden ser grandes y el contenido largo, por lo que un carrusel que gira entre los avances fue la solución correcta aquí.
De nuevo, usando jQuery, apunté al contenedor DIV para el carrusel y, después de que la página se había cargado y el documento estaba listo, apliqué el carrusel y establecí mis transiciones. Con JavaScript habilitado, la página de inicio se procesó correctamente: cada 15 segundos, el carrusel se movió al siguiente avance. De forma predeterminada, todos los avances fueron visibles, pero oculté todos menos el primero cuando creé el carrusel.
Para este cliente, nuevamente elegimos mostrar todo el contenido oculto si JavaScript estaba deshabilitado . En ese caso, la página de inicio se expandiría verticalmente para acomodar el contenido adicional.
Sin embargo, teníamos alternativas. Teniendo en cuenta las cuatro categorías de usuarios que identificamos al principio de este artículo, la prioridad para este contenido fue la accesibilidad, con el ranking de los motores de búsqueda muy cerca. Podríamos haber satisfecho estos dos grupos dejando visibles todos los avances, pero arreglando las dimensiones del contenedor DIV y configurando overflow a scroll , auto o hidden .
Cualquiera de estas opciones habría conservado las dimensiones del diseño. Y los lectores de pantalla y los motores de búsqueda también habrían recogido el contenido, porque el contenido no se ocultaría con el display o visibility propiedad.
El Swapper de contenido
Esta técnica es similar al carrusel en que el contenido en un bloque se rota usando alguna animación.
La principal diferencia es que la animación de interpolación no se usa; en cambio, una parte del contenido se desvanece mientras otra se desvanece (o puede tener una transición difícil sin desvanecimiento). El swapper es lo suficientemente similar al carrusel que las soluciones alternativas sin JavaScript mencionadas anteriormente son ciertas.
Sin embargo, otro cliente vino a mí con la tarea de mostrar un número indefinido de testimonios en su sitio web. Optamos por un swapper de contenido en este caso porque no necesitábamos la paginación típica de los carruseles (el usuario no necesitaría retroceder un testimonio ni saltar al final).
Para los visitantes que tenían JavaScript desactivado, respetamos el diseño. Después de una cuidadosa consideración, el cliente determinó correctamente que los testimonios tendrían un efecto tan pequeño en los visitantes que establecer el display a none no sería perjudicial
La decisión me proporcionó un poco más de libertad en la planificación de la columna de la derecha del sitio web, donde iban a aparecer los testimonios.
El clasificador
Cualquiera que haya ajustado su cola Hulu ha visto el clasificador de arrastrar y soltar. Este fragmento de JavaScript permite a los usuarios arrastrar y soltar filas (filas de tablas, elementos de lista, DIV independientes, etc.) en un orden diferente.
Clasificador de Netflix
Tome un último cliente mío como ejemplo, que tenía un conjunto de procedimientos estándar que todos los empleados tenían que seguir.
Cada procedimiento consistió en cualquier cantidad de tareas. Un administrador podría agregar o eliminar tareas y podría cambiar el orden de las tareas.
Este fue un ejemplo de clasificación de libros de texto, una implementación de reordenamiento de arrastrar y soltar .
Gracias a Scriptaculous y Prototype.js, crear la lista ordenable fue fácil. Cuando se escribió el código y la página fue en vivo, tuvimos una interpretación perfectamente operable de la composición del diseño. Luego nos dimos cuenta de que, sin JavaScript, solo teníamos el equivalente HTML de un peso en papel. No se realizó ninguna operación de "arrastrar y soltar" o sobre la marcha.
Algunas ideas rápidas y una ligera modificación del diseño nos dieron el mismo conjunto de filas que teníamos anteriormente, pero con la adición de cuadros de entrada de texto que podrían acomodar el ingreso de orden de fila (tenga en cuenta que sin JavaScript, nos vimos obligados a agregar validación significativa del lado del servidor para estos cuadros de entrada). Perdimos el reordenamiento sobre la marcha, pero al menos recuperamos la funcionalidad de clasificación.
Luego volvimos a los navegadores habilitados para JavaScript y escondimos los cuadros de texto mencionados anteriormente; después de todo, teníamos la función de arrastrar y soltar para este grupo. En este punto, tuvimos una interpretación perfectamente funcional de la composición del diseño que también era útil para los visitantes que tenían JavaScript desactivado. La próxima vez, sabré planear para esta condición.
Conclusión
La evolución de la web continuará, y los visitantes de nuestros sitios web deberían poder seguir disfrutando de un estilo dinámico.
Continuar planificando respuestas interactivas con interpolaciones animadas: atenuar, atenuar, colapsar, expandir, deslizar las cosas. Dada toda esta animación, piense en cómo su sitio web aparecerá a los visitantes que no pueden ver la animación debido a las limitaciones de JavaScript. Tus clientes serán más felices y serás mejor diseñador para eso.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Jason Corns es un desarrollador web independiente y desarrollador de GUI de tiempo completo para Systems Alliance, Inc., que se especializa en usabilidad para todos los públicos.
¿Cómo planifica USTED la ausencia de JavaScript? Por favor comparte tus consejos con nosotros ...