Entradas etiquetadas ‘css’

Diseño minimalista de páginas web

26 de Noviembre de 2008

Con el aumento de la asequibilidad de espacio web y ancho de banda, el creciente uso de módems de alta velocidad, y la abundancia de la aplicación de tecnologías como Flash, audio y video, viene la tentación de la sobreexplotación en el diseño web.

Una característica importante que siempre ha diferenciado a los buenos diseñadores de los malos es el limitar cada nueva tecnología que viene. Los buenos diseñadores deben centrarse en primer lugar en la funcionalidad y asegurarse de que la página web logre los objetivos para los que fue creada, mientras que los malos diseñadores hacer uso gratuito de elementos como gráficos, animaciones flash y javascript, simplemente “porque pueden” o porque ” se ve bien “.

“Minimalismo” es un término acuñado en el arte y la literatura para describir un movimiento hacia la extrema simplificación de forma y color. Extrapolando el concepto a las páginas web, se refiere a diseño, colores y otros aspectos de la presentación, a la que la dimensión de la usabilidad se ha añadido.

Del minimalismo es la estética y la funcionalidad de trabajar juntos. En diseño web, el minimalismo implica la eliminación de todos los adornos innecesarios, centrándose en el usuario, y la creación de una interfaz que es al mismo tiempo agradable a la vista, fácil de navegar, intuitiva y eficaz en ayudar a los usuarios alcanzar sus objetivos de manera rápida y sin esfuerzo.

Minimalismo se aplica a muchos aspectos de diseño web. Por ejemplo:

  • La codificación de las páginas: cuando se trata de escribir código para páginas web, el uso de hojas de estilo en cascada es un buen ejercicio en el minimalismo, por la concentración de las definiciones de estilo en un archivo externo y, a continuación, la vinculación a la misma de cada página web, eso reduce la cantidad de código en cada página, y, en consecuencia, las páginas serán más pequeñas, se cargaran más rápido y será más fácil de mantener.
  • El uso de gráficos: Se utilizaran los gráficos sólo cuando sea absolutamente necesario, eso es otro buen ejemplo de diseño minimalista web. Los Gráficos deben añadir valor a lo que se presenta, en lugar de ser sólo decoración. El uso de los gráficos, y utilizarlos con moderación, eliminan el desorden en una página, hará que el contenido sea más fácil de entender, y permitirá que la página tenga una descarga rápida, que en definitiva es lo que los usuarios quieren.
  • El uso del color: buen uso de colores para separar la página en diferentes categorías, y hacer hincapié en lo que es importante. Por ejemplo, cada sección de un menú de navegación se puede dar un color diferente para indicar que las tareas están relacionadas. Además, el uso de colores brillantes para los botones en los que queremos que los usuarios hagan clic es una buena manera de subrayar la importancia de esa tarea. Si todo en una página tiene color, nada hará hincapié en la página y será un lío.
  • El uso de un amplio espacio en blanco: algunas páginas web se asemejan a los anuncios caóticos que vemos en algunas revistas con cantidad de gráficos e información que parece que nos quieren gritar. La lectura de la pantalla de un ordenador es mas difícil, por lo que debemos esforzarnos por hacerla lo más fácil posible para nuestros visitantes. Podemos mejorar la legibilidad de pantalla por la separación de las diferentes secciones de la página con un montón de espacio en blanco. Eso va a hacer la visita de los usuarios mucho más cómoda, y que tienden a quedarse en nuestro sitio durante más tiempo.
  • Legible y de fuentes lo suficientemente grandes: el minimalismo no significa que las fuentes sean pequeñas. Una buena página minimalista debe usar una fuente fácil, como por ejemplo Verdana, en un tamaño lo suficientemente grande como para ser leído sin esfuerzo. Además, el número de tipos de fuente por página debería limitarse a dos o tres: una para los titulares, otra para los contenidos y, posiblemente, el resto para los botones de navegación. Eso es todo. El uso de más fuentes hará ver la página ocupada y poco atractivo.
  • Search Engine Optimization: los motores de búsqueda no reconocen las imágenes. Reconocen texto. El texto es la comida favorita de las arañas de los motores de búsqueda. Los motores de búsqueda también tienen problemas con Flash y Javascript. Si desea que sus páginas sean indexadas rápidamente, recuerde tener un diseño minimalista en mente: mantener las cosas simples y reducir en lo posible el uso de Flash, Javascript y la carga de imágenes.

En resumen, un diseño web minimalista requiere:

  • Singularidad
  • Fácil Navegación
  • Simplicidad
  • Sencillez con elegancia
  • Funcionalidad
  • Uso de elementos fundamentales y necesarios
  • Pequeño número de formas
  • Texturas y colores naturales
  • Limpieza y buenos acabados
  • A veces el uso de contraste de colores para la estética, o para hacer hincapié en lo que es importante
  • El uso de CSS (hojas de estilo en cascada) para hacer las páginas más pequeñas y más rápidas en la carga
  • El uso de gráficos sólo cuando sea absolutamente necesario

Cómo mantener tu HTML limpio

21 de Noviembre de 2008

Durante el desarrollo de un proyecto surgen nuevos elementos o cambios que se van añadiendo al código que generamos. Con el avance del proyecto se tiende a no ser muy metódico, lo que provoca que se el resultado final sea igual de funcional y que cumpla los requisitos pero que para nosotros mismos, los desarrolladores, sea un verdadero caos mantener y comprender el proyecto. El caos que estoy comentado se agrava cuantas más personas están dedicadas al proyecto.

Estos consejos o puntos a tener en cuenta son específicos para el HTML, pero si bien, la mayoría de estos casos pueden ser aplicados a otros lenguajes.

1. Usa el doctype STRICT

Si ya dispones de algo más de soltura, usa siempre que sea posible el modo STRICT en el doctype.

Recursos:

2. Usa la codificación correcta para los caracteres especiales

Los caracteres especiales deben ir codificados según el estándar, nos evitaremos problemas con las validaciones de la W3C.

Recursos:

3. Indentación del código

Con la indentación se consiguen dos cosas:

  • Mantener el código de alguna manera mas ordenado y poder visualizar los condicionales e iteraciones más rápido de un vistazo. Además que se facilita toda la comprensión al poder ver “bloques” de código de forma clara.
  • Que dentro de 3 meses otra persona o nosotros mismos pueda entender el código. Más vale dedicarle a este aspecto un tiempo durante la fase de desarrollo que no después.

4. Separa los archivos CSS y de JavaScript del HTML

Mantener separados los archivos CSS y de Javascript es una buena idea, pero siempre pensando en que mantener muchos archivos “externos” también puede suponer un problema, hay que encontrar la justa medida en función de la envergadura del proyecto.

La idea es poder hacer modificaciones sin necesidad de modificar TODOS los archivos del proyecto.

5. Usa los TAGS de forma correcta

Es fundamental conocer las propiedades de los tags HTML, aunque los navegadores consigan mostrar lo que queremos mostrar hay que tener en cuenta la estandarización, si todos cumplimos con dichos estándares nuestro proyecto Web se podrá visualizar dentro 10 años sin problemas, de lo contrario nadie te puede asegurar que si ahora se ve “bien” se siga viendo en el futuro.

6. Elimina los elementos que no necesites

Cuando hemos trabajado siempre con tablas y empezamos a trabajar en una estructura con capas (divs), nos puede suceder que entremos en lo que los desarrolladores profesionales llamamos “divitis”. Esto produce un uso excesivo de div’s para todo, lo cuál no es bueno. Hay que tratar de mantener la estructura simple y clara.

Recursos:

7. Usa nombres para las clases con sentido

Claros y descriptivos, así deben ser los nombres de las clases. Cómo las variables en los lenguajes de programación, se debe tratar de aplicar un sentido semántico a lo que se refiere ese nombre. Lo ideal seria poder identificar dentro de un archivo CSS a que aplica dicha clase sólo con leer su nombre.

8. Validar, Validar, Validar

La validación de nuestro trabajo es mucho más que para poner el icono en el pie de página. La validación implica mantener una mínima calidad en lo que producimos, no implica que esté mejor o peor hecho, pero si nuestro código valida con el estándar nos aseguramos de que funcionará dentro de un tiempo igual que el primer día.

Recursos:

9. Usa la lógica para la estructura

La lectura de un código se hace de forma natural, de arriba hacía abajo. No tiene mucho sentido colocar el píe de página antes que el contenedor principal o menú de navegación. Funcionar, funcionará seguro.

10. La experiencia es un grado

Por poco que te esfuerces, notarás que aplicando unos sencillos pasos en la fase de desarrollo, los futuros cambios pueden hacerse más llevaderos ya que todo tendrá lógica. Es una gran ventaja trabajar sobre un código limpio y ordenado.

La primera vez costará seguir al pie de la letra muchos de los aspectos comentados. Requieren pararse a pensar un poco más antes de ponerse manos a la obra, pero con el tiempo todo se hace más sencillo y con el tiempo llega la recompensa.

Vía: www.smashingmagazine.com y www.anieto2k.com