Este es uno de tantos artículos de este sitio que son inspirados a partir de vivencias, experiencias y conversaciones con otras personas que comparten el mismo oficio.
El comienzo
Típico proyecto web, se hizo la etapa de AI, wireframming, diseño de propuestas, se aprobó un estilo gráfico, se hicieron mejoras en el diseño y se comenzó a maquetar las páginas. Lo siguiente es una variación (más simple) del wireframe de la home (por motivos de privacidad, omito el nombre del proyecto/cliente y detalles):
Hasta aquí todo medianamente normal, pero al hacer funcionar la parte de Noticias, nos topamos con un pequeño gran detalle: en el wireframe y en el boceto se muestra que hay tabs por tipo de noticias, y además hay resumen de 3 noticias (según tipo) con fotografias a desplegarse, según pases el mouse sobre cada texto:
El análisis
¿Dónde veo un problema? Veámoslo según cada disciplina
- Usabilidad: técnicamente, intervienen 2 tabs: por noticias, que al desplazar el cursor sobre cada resumen se reemplaza por su imagen respectiva; y por tipo de noticia, que son 3 tabs. Este doble tab puede crear confusión al usuario.
- Experiencia de usuario: En total, son 9 imágenes cargadas: 3 tipos de noticias, 3 noticias por tipo; cada imagen, por el tamaño, es probable que pese cada una 20kb, lo que en total se debe cargar 180kb. Quizás no es mucho peso, pero hay que tomar en cuenta que además se cargan los banners, que son bastante grandes y pueden llegar a ser pesados…
- Accesibilidad: Para conexiones lentas, no debemos pedirle tanto al usuario si es poco probable que vaya a necesitar de esas 9 imágenes. Para conexiones desde celulares, sería un abuso.
- Desarrollo: para aminorar esa carga, podríamos cargar las noticias en los tabs según el usuario vaya haciendo click en ellas mediante AJAX; pero esto involucra un desarrollo extra que no estaba estimado.
Sinceramente, podríamos haber continuado con la construcción del sitio y ya. Pero es importante tomar en cuenta estos detalles, que al fin y al cabo hacen que un proyecto marque la diferencia.
La solución
Aún se está trabajando en ello, pero se intervendrá el diseño y probablemente se quitarán las imágenes asociadas por cada noticia, y se dejará sólo 1 imagen principal por tipo de noticia, lo que reduce la carga a sólo 3 imágenes:
Como ven, no impacta mayormente en el diseño final, pero sí será necesario cambiarlo y transparentarle esta modificación al cliente, siempre argumentando que es para mejor.
Esto es todo, como aún el proyecto está en proceso no hay desenlace (favorable o no), aún así me encantaría leer sus opiniones.
]]>
Your flexible fixed layout / Tu estructura fija, flexible
Selecciona tu idioma / Select your language:
EN
Coding liquid layouts for your website can become a major problem due to many factors to be taken into when the user resizes the browser: images that doesn’t fit the width, texts wrapping as not expected, columns breaking… not to mention that working with percentages in CSS is problematic among different browsers. With a fixed layout this should not happen, because you have more control over the structure itself and the box model behaves as you expect if you use a good CSS reseter.
With jQuery browserSizr you’ll have more control over CSS styles when there is a significant change in browser size. It has 4 of the most common screens width:
- smartphones (310px or less)
- less than 1024px (from 311px to 1023px)
- greater than 1024px (from 1024px to 1279px – including 1024px)
- greater than 1280px (from 1280px and higher – including 1280px)
Specifically, browserSizr detects the current width of your browser or it’s resize and injects a specific class when it is in the range you’ve activated. Through CSS and a bit of specificity, you can define what happens when the browser is in each resolution:
#container {
width: 960px; /* normal width */
font-size: 14px;
}
#container.lower1024 {
width: 740px; /* width for less than 1024px */
font-size: 12px; /* smaller font-size */
}
#container.over1280 {
width: 1200px; /* width for over 1280px */
font-size: 16px; /* bigger font-size */
}
Configuration:
- Include the jQuery library and this humble plugin:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.browserSizr.js" type="text/javascript"></script>
- Inicialize-it with the default parameters:
<script type="text/javascript"> $(function(){ $().browserSizr(); }) </script> - Or configure it as preferred
$().browserSizr({ containerDiv: '#container', //containerDiv - value: any HTML tag or #id, default to #container debug: 'off', //debug- value: on | off, default to 'off' smartphones: 'off', //smartphones - value: on | off, default to 'off' lower1024: 'on', //lower1024 - value: on | off, default to 'on' over1024: 'on', //over1024 - value: on | off, default to 'on' over1280: 'off' //over1280 - value: on | off, default to 'off' });
ES
Crear estructuras líquidas para tu sitio web puede llegar a ser un gran problema debido a los muchos factores que se deben tomar en cuenta cuando el usuario escala el browser: imágenes que se pueden pasar del ancho, textos que no se cortarán como esperabas, columnas que pueden llegar a quebrarse… sin hablar de que trabajar con porcentajes es problemático entre los diferentes navegadores. Con un layout fijo esto no debería ocurrir ya que tienes más control sobra la estructura misma y el modelo de caja se comporta como esperas si haces uso de un buen reseter de estilos CSS.
Con jQuery browserSizr podrás tener más control sobre los estilos CSS cuando existe una variación significativa la dimensión del browser: en cuántos pixeles quedaría el tamaño de la tipografía del menú a 1280x1024px, o que las imágenes queden a 80% de su tamaño en resoluciones de 800x600px por ejemplo. Tienes los 4 anchos de pantallas más comunes:
- smartphones (310px o menos)
- menor que 1024px (de 311px a 1023px)
- mayor que 1024px (de 1024px a 1279px – incluye 1024px)
- mayor que 1280px (de 1280px o más – incluye 1280px)
En específico, browserSizr detecta el actual ancho del navegador ó su redimensionado e inyecta una class específica cuando se encuentra en el rango que hayas activado. A través de CSS y un poco de especificidad, puedes definir qué quieres que ocurra cuando el browser se encuentre en cada resolución:
#container {
width: 960px; /* ancho normal del sitio web */
font-size: 14px;
}
#container.lower1024 {
width: 740px; /* ancho para resoluciones menores que 1024px */
font-size: 12px; /* menor tamaño de fuente */
}
#container.over1280 {
width: 1200px; /* ancho para resoluciones mayores que 1280px */
font-size: 16px; /* mayor tamaño de fuente */
}
Configuración:
- Incluye la librería jQuery y luego, este humilde plugin:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.browserSizr.js" type="text/javascript"></script>
- Inicialízalo con los parámetros por defecto:
<script type="text/javascript"> $(function(){ $().browserSizr(); }) </script> - O configúralo como más prefieras:
$().browserSizr({ containerDiv: '#container', //containerDiv - id o etiqueta donde se inyectará la class debug: 'off', //debug - ventana debug on | off, por defecto off smartphones: 'off', //smartphones - valores: on | off, por defecto 'off' lower1024: 'on', // valores: on | off, por defecto 'on' over1024: 'on', //over1024 - valores: on | off, por defecto 'on' over1280: 'off' //over1280 - valores: on | off, por defecto 'off' });
Bajar/Download plugin (.zip 1kb)
Bajar/Download plugin+demos (.zip 22kb)
browserSizr logo by toledopasarin
Little extension as Jorge Sousa required, now it detects just the height of the browser window within 2 values: less than 600px and over 600px.
Pequeña extensión como solicitada por Jorge Sousa, donde ahora detecta sólo el alto de la ventana dentro de 2 rangos: menor que 600px y mayor a 600px.
]]>
Mi principal preocupación al momento de gestar y planificar un proyecto web, es cómo éste afectará al usuario. Así logro definir qué elementos tendrá, qué tecnología y lenguajes aplicaré, etc. No me refiero a hacer un estudio de qué tipo de usuarios navegarán, o una estadística de qué plataformas y resoluciones de pantalla utilizan; me refiero a sentarme como usuario e imaginarme cómo sería su experiencia a través de esa web. Ponerme en su lugar y darme cuenta si realmente vale la pena utilizar alguna ventana modal, o validación de formularios con :focus, menú con tabs, 2 ó 3 columnas, etc. Todo eso influye en cómo se ordenará y finalmente entregará la información a quien la desee.
Se define como experiencia de usuario (UX) a la experiencia que ha tenido una persona como resultado de su interacción con un producto ó servicio en particular, su entrega y relacionados de acuerdo a su diseño. En este campo convergen oficios como el diseño, los negocios y la psicología.
Muchas veces me han preguntado: "Jorge, ¿Qué haces? ¿En qué trabajas?". Bueno, mi respuesta -y la de más de algunos que recorren CSSLab, asumo- es "Soy diseñador gráfico pero frustrado; ya no diseño, sino que desarrollo". Pensando, tampoco desarrollo mucho; más que nada defino y construyo elementos de interacción directa con el usuario, lo que se suele denominar en la era digital "Desarrollo Front-End". Así, me denomino un"Diseñador de Interacción, lo que en países de primer mundo es un oficio muy común pero aún no es conocido y reconocido por estas latitudes que intentamos salir del tercer mundo. Me gusta diseñar experiencias, provocar emociones y quizás cambiar comportamientos al momento de utilizar la web; que ésta no sea una herramienta, sino una verdadera experiencia (como surfear para un surfista, esquiar para un esquiador, cocinar para un chef… entienden a lo que voy). Así, con todo ese tema primero definido, pongo manos al Photoshop y a diseñar, pero siempre teniendo claro los objetivos finales de cada elemento con los que el usuario interactuará.
El Diseño UX (de Experiencia de Usuario) incluye sub-oficios, los que se desprenden del sistema particular de interacción que se proveerá. Algunos de estos son:
- Mapas de Navegación y Mapas de Flujo (AI, Arquitectura de la Información)
- Comportamiento de Usuario
- Wireframes
- Prototipado (para simulación de interacción)
- Especificaciones (descripción del comportamiento)
- Bocetos visuales
- Usabilidad
- Accesibilidad
- SEO (Search Engine Optimization)
Este Diseño UX frecuentemente define una secuencia de interacciones entre un usuario y un sistema desarrollado para, en una primera instancia, dar soporte a necesidades u objetivos, y luego satisfacer los requerimientos del sistema y los objetivos para los cuales fue creado.
¿Y para qué tanto?- se preguntarán. Bueno, tiene sus beneficios, claro (caso contrario no perdería tanto tiempo especializándome en el tema):
- Se reducen los elementos que excesivamente distraen al usuario de sus necesidades en el sitio web.
- Aumenta considerablemente la usabilidad del sistema.
- Se definen mejores estándares de diseño y desarrollo, y se automatizan tareas.
- Incorpora elementos de negocios y marketing que atraen y fidelizan a más usuarios.
Los invito a estudiar y profundizar más sus conocimientos; sólo así entregaremos mayor calidad y podremos aumentar el valor de nuestro trabajo, y aumentar nuestra lista de clientes, claro.
]]>