• Articles
• admin

A medida que lanzamos proyectos más nuevos, es fácil olvidarse de actualizar blogs y sitios web más antiguos. En este artículo quiero presentar 30 ideas sólidas que puedes implementar rápidamente para hacer que tu sitio web sea mucho más fácil de usar. No todos ellos se basan únicamente en el diseño frontal. También analizaré técnicas de codificación HTML5 populares que pueden ayudar a los analizadores web y arañas a categorizar sus datos de manera adecuada.

No será necesario actualizar todos los sitios web, y no con todas las técnicas disponibles en esta publicación. Estas ideas están aquí para que los desarrolladores piensen en términos de diseño y cómo hacer que los sitios web se vean más bonitos. Ahora es más fácil que nunca crear diseños de sitios web adaptables y escalables que se vean bien en cualquier pantalla digital, así que vayamos a mejorar nuestros sitios.

1. Pruebas de UX

Soy culpable de no ejecutar siempre pruebas en los lanzamientos de mi sitio web, pero siempre que es posible, esta es una de mis actividades favoritas. Puedes aprender mucho sobre las interacciones típicas de los usuarios estudiando cómo juegan con tu sitio web. Los estudios de experiencia de usuario se pueden realizar únicamente a través de herramientas como Google Analytics o utilizando otros recursos de terceros.

Los beneficios potenciales que puede encontrar son enormes. Las pruebas de experiencia de usuario son útiles para que los desarrolladores web aprendan qué áreas de su sitio web son molestas, están rotas o podrían mejorarse. Considera usar no solo herramientas digitales, sino también a tus amigos y colegas. Escuchar algunos comentarios humanos reales en su sitio web puede proporcionar resultados que no pudo obtener a través de la pantalla de una computadora.

2. Espacios en blanco

Podemos pensar en los espacios en blanco como la cantidad de espacio entre los elementos de tu página. A algunos usuarios no les importará un diseño estrecho si ya están acostumbrados a esto. Pero considere a su público objetivo, y considere cuántos de ellos no son tan alfabetizados en computadoras como la generación más joven.

Puede determinar las áreas que necesitan espacio adicional a través de pruebas A/B divididas y retener los comentarios del usuario. ¡O simplemente improvisar y ver qué se te ocurre!

3. Fuentes web

Las fuentes web dinámicas permiten a los diseñadores crear páginas web sin estar restringidas a las familias de fuentes típicas. Esta tendencia se ha vuelto cada vez más popular ahora que la mayoría de los usuarios promedio de Internet tienen una conexión DSL/T1/fibra óptica decente. Incluir referencias a hojas de estilo de fuentes de terceros ya no producirá un retraso importante en sus velocidades de DL.

Es muy posible que el mejor proveedor de fuentes sea a través de Google Webfonts. Puede acceder a la aplicación incluso si no tiene una cuenta de Google, aunque hay ventajas para registrarse. El proceso de configuración completo toma solo 3 pasos y puede tener fuentes de Google personalizadas ejecutándose en su sitio web en cuestión de minutos.

4. CSS3 Sombras

Cuando hablo de usar sombras para mejorar su diseño, en realidad estoy haciendo referencia a dos propiedades distintas. La siempre popular sombra de caja es realmente genial para divs y cajas dentro de su diseño. Agregar este efecto en su contenedor, envoltura o cajas de páginas internas proporcionará un efecto 3D adelgazante a su página web.

Pero también vale la pena considerar la propiedad de sombra de texto CSS3 para tipografía que salta de la página. Apple es una de las primeras empresas en implementar sombras de texto en gran medida alrededor de su diseño. Puede crear un efecto desalentador agregando sombras de texto que sean opuestas al color de sus fuentes (sombras blancas para texto oscuro, sombras negras para texto claro).

5. Texturas & Patrones repetitivos

Hay muchos sitios web que se pueden obtener simplemente utilizando esquemas de color estándar. Pero para que su sitio web realmente se destaque entre la multitud, puede considerar agregar texturas y repetir azulejos en su fondo. Una de las aplicaciones web gratuitas más geniales es Noise Texture Generator, que se puede ejecutar en cualquier navegador.

Simplemente elija el color BG y la cantidad de ruido que desea usar, luego esta aplicación creará una imagen de fondo en mosaico de forma dinámica. Si estás buscando patrones y azulejos, te recomendaría Patrones sutiles. Tienen una gran colección de texturas utilizables que puedes descargar de forma gratuita.

6. Fondos degradados CSS3

Mientras hablamos de fondos, debería mencionar los siempre populares degradados CSS3. Estos proporcionan a los desarrolladores web un enorme beneficio al mantenerlos fuera de Adobe Photoshop para fondos web. Y estos degradados pueden funcionar en algo más que el cuerpo, aplicados en barras de navegación, pies de página y otras áreas importantes de su diseño.

7. Boostrap

Bootstrap de Twitter es posiblemente el mejor marco de interfaz de usuario para desarrolladores web. Esto incluye botones, entradas de formulario, enlaces, columnas y toneladas de otros objetos de página preformateados. El uso más común de Bootstrap es dentro de las páginas de destino para aplicaciones nuevas.

Pero los desarrolladores de código abierto también utilizan Bootstrap al crear páginas de demostración para las bibliotecas, complementos o mini scripts que publican.

Siento que Bootstrap ha crecido hasta tal punto que se puede aplicar en cualquier sitio web en estos días. Sin embargo, los desarrolladores que encuentran el mayor beneficio están usando Bootstrap como un reemplazo rápido para implementar sus propios diseños de interfaz de usuario. Considere esta biblioteca de frontend la próxima vez que lance una página web con un solo propósito concreto: página de destino, demostración de producto, sitio web de aplicaciones móviles, etc.

Relacionados:

• Primeros pasos con Twitter Bootstrap
• Bootstrap 201: Complemento de Ventana Modal

8. HTML5 Kickstart

La mayoría de los desarrolladores web aún no han oído hablar de HTML5 Kickstart creado por 99Lime. Esta es otra biblioteca de interfaz de usuario de frontend que se centra más en una estética de diseño agradable que en diseños HTML5 comunes. Pero hay ejemplos de código para generar ambos en picas. Puede elegir entre conjuntos de elementos predeterminados, como botones de degradado y menús desplegables. No diría que esto tiene la misma popularidad que Bootstrap, pero de nuevo, ¿qué tiene?

Si tiene tiempo y paciencia, le recomendaría simplemente hacer una prueba rápida de esta biblioteca. Cree un pequeño diseño de caja de arena y vea si disfruta de la sensación predeterminada de cada elemento de la interfaz de usuario. Kickstart ciertamente no es para todos los proyectos, pero puede ser un gran ahorro de tiempo cuando se encuentra en un aprieto.

9. Interfaz de usuario de jQuery

Las animaciones, los deslizadores y los elementos de desvanecimiento generalmente se ejecutan fuera de la biblioteca de jQuery. Esta es la biblioteca JavaScript de código abierto más común para desarrolladores de frontend, pero también tiene una interfaz de usuario jQuery de biblioteca complementaria. Los desarrolladores pasan por alto esto, pensando que no puede proporcionar mucho a cambio de los KB adicionales.

Pero incluir la biblioteca de interfaz de usuario significa que puede actualizar la llamada easing para cualquier animación de página dinámica. Esto significa que puede personalizar el tipo de animación jQuery para cualquier menú desplegable, elementos que se desvanecen, presentaciones de diapositivas con desplazamiento y todo lo demás dinámico.

El sitio web de jQueryUI tiene una página de demostración de facilitación donde puede probar las muchas variaciones y ver si le gustan los tipos de animación específicos.

Relacionados:

• Cómo diseñar Acordeón de interfaz de usuario de jQuery
• Controlador de volumen con Deslizador de interfaz de usuario de jQuery
• Personalizar y tematizar el Datepicker de interfaz de usuario de jQuery
• Arrastrar y Soltar con Interfaz de usuario de jQuery

10. Extravagantes Fotos BG

Hoy en día hay innumerables sitios web que han utilizado el efecto de imagen de fondo de pantalla completa. Si puede encontrar una muestra de fotos de alta resolución que se vea bien como imagen de fondo, entonces vale la pena agregar esta técnica a su diseño. Los fondos grandes hacen un excelente trabajo de captar la atención de su usuario al tiempo que implican el género de su sitio web.

Si está buscando una solución rápida, consulte el complemento de estiramiento trasero de jQuery. Esto solo requiere una sola línea de código para que los fondos nuevos se escalen de forma adecuada y responsable utilizando cualquier resolución. Pero para los desarrolladores que están en contra de los métodos JavaScript, recomiendo la técnica de imagen de página completa CSS3 publicada en CSS-Tricks.

11. Iconos de menú

Para atraer más atención de los visitantes, puede valer la pena incluir un pequeño conjunto de iconos en su página web. Los enlaces de menú estándar a menudo son suficientes para funcionar correctamente y ayudar a los usuarios a navegar entre las páginas.

Sin embargo, a menudo me impresiona ver iconos personalizados diseñados para cada enlace de menú. Puedes encontrar montones de conjuntos de iconos gratuitos que se verían perfectos en tu área de navegación superior, barra lateral o pie de página.

12. Combinación de colores actualizada

En realidad no me refiero a cambiar el diseño general de la combinación de colores, sino más bien a agregarle nuevos colores. Después de ejecutar el mismo diseño durante meses tras meses, es bueno actualizar áreas más pequeñas y atrapar a los visitantes recurrentes por sorpresa.

Algunos elementos de interés pueden incluir enlaces de anclaje, encabezados, fondos y barras de herramientas. Considera usar herramientas en línea, como el Diseñador de combinaciones de colores, para mejorar tu trayectoria.

13. Soporte mejorado para navegadores

Es difícil crear un sitio web que sea totalmente compatible con todos los principales navegadores heredados. Aunque muy pocas personas ejecutan Internet Explorer 6, todavía aparece en algunos de mis informes de Google Analytics. Los desarrolladores que buscan ideas pueden considerar hacer una pequeña prueba de las pruebas del navegador.

Los navegadores principales más importantes incluyen la última versión de IE9, Mozilla Firefox, Opera, Chrome, Safari y posiblemente Camino/SeaMonkey. Pero Internet Explorer 6-8 también se usa ampliamente entre las empresas y los laboratorios de computación más antiguos. Puede ejecutar pruebas de renderizado rápidas utilizando el software IETester. De manera similar, IE8 tiene un modo de herramienta de desarrolladores donde puede cambiar a motores de renderizado más antiguos para la depuración.

14. Tipografía ajustada

Es posible que sus diseños antiguos sigan utilizando estilos de texto de manera eficiente, pero este no siempre es el caso. Siento que la tipografía grande encajará en los diseños mucho más fácilmente. Sin mencionar que es más fácil de leer y ocupará más espacio en resoluciones de pantalla más grandes.

La idea de» tipografía ajustada » es diseñar el texto para que se ajuste perfectamente a su sitio web. Puedes revisar algunas páginas y actualizar estos estilos en 10-15 minutos.

15. Compartir en redes sociales

Por ahora estoy seguro de que la mayoría de los desarrolladores están familiarizados con las insignias para compartir utilizadas en sitios web de redes sociales populares. Facebook, Twitter, Reddit, Pinterest, Dzone y muchas otras redes externas proporcionan códigos que puede incrustar en su sitio web. Luego, los visitantes pueden compartir su enlace en estas redes sin necesidad de salir de su sitio web.

En algunos blogs o revistas web notarás que estas insignias te seguirán desplazándote por la página. Esta es una técnica excelente, ya que a menudo puede tenerlos flotando justo fuera del área del cuerpo donde no bloquean ningún contenido importante. También recomiendo navegar por nuestra publicación en las barras de herramientas de las redes sociales, que pueden tener un efecto similar.

16. Discusión de usuario

Si está ejecutando un CMS como WordPress o Drupal, entonces tiene la capacidad de incluir formularios de comentarios de forma predeterminada. Sin embargo, al crear páginas web estáticas, necesitará configurar su propio sistema de base de datos para imitar esta funcionalidad. Pero con el aumento de la tecnología de código abierto, los desarrolladores ahora pueden implementar mejores soluciones como Disqus.

Con este método, no está tratando constantemente de limpiar el spam y la basura del área de discusión. Los usuarios que aún no tengan una cuenta de Disqus pueden conectarse rápidamente mediante perfiles de redes sociales populares o registrarse directamente desde su página. Incluso los usuarios de WordPress que están hartos de Akismet pueden cambiar usando el complemento del Sistema de comentarios Disqus.

17. Ampliar el área de pie de página

La mayoría de los diseños de sitios web más pequeños serán muy conservadores con la sección de pie de página inferior. Esto puede incluir información básica de derechos de autor y algunos enlaces a la página principal. Pero las tendencias modernas de diseño web apoyan la idea de pies de página grandes con muchos enlaces meta.

Estos se ven comúnmente en sitios web de empresas emergentes y grandes empresas con mucha información adicional. Ciertamente, no intente forzar esto a un diseño donde no pertenece, sin embargo, vale la pena un poco de contemplación si abrir un área de pie de página más grande puede mejorar su experiencia en el sitio web.

18. Responsify Images

Las imágenes de páginas web dinámicas, fluidas y receptivas se han convertido en una tendencia en sí mismas. Ahora es casi ridículo que las imágenes sigan ajustándose a anchos fijos, saliendo de la envoltura del contenedor a medida que se redimensionan las ventanas. La técnica más común es aplicar width: 100% usando CSS en todos los elementos img.

Pero también puede considerar algunos otros métodos de código abierto que pueden resultar útiles en un enlace. ResponsiveImg es uno de esos complementos de jQuery con un tamaño de archivo muy pequeño. Solo tienes que incluir esto en tu página y ejecutar el código de una sola línea dirigido a todas las imágenes de la página. Esta es una excelente adición a los diseños móviles que aún utilizan contenido basado en el escritorio.

19. Accesibilidad al menú

No diría que esto es algo que deberías intentar actualizar constantemente en tus diseños, pero es algo que los desarrolladores y diseñadores no hacen bien la primera vez. Creo que vale la pena mirar hacia atrás en sus sistemas de navegación y lluvia de ideas si hay mejores formas de implementar enlaces de submenú.

Las barras laterales y las áreas de contenido a menudo contienen menús de acordeón, ya que hay suficiente espacio verticalmente. Pero piensa en barras de navegación horizontales con menús desplegables o submenús deslizantes. Siempre que los enlaces de tu menú sean rápidos y de fácil acceso, no debería haber ningún problema entre tu base de usuarios.

20. Microformatos/Microdatos semánticos

Los microformatos y la especificación de Microdatos más reciente se utilizan para ampliar los metadatos dentro de su código HTML. Estos atributos proporcionan información adicional sobre tu contenido y cómo se relaciona con otros contenidos de la página. Y, en última instancia, estos resultados ayudan a Google a determinar el rango de tu sitio web para palabras clave individuales y dentro de otros motores, como la búsqueda de imágenes y videos.

La versión documentada de Microdatos más destacada se llama Schema.org. Su sitio web proporciona toda la información que necesitará para volver y editar su contenido HTML con marcado de esquema semántico. Esta sintaxis de esquema está respaldada y respaldada por todos los principales motores de búsqueda, y probablemente evolucionará hacia el futuro del diseño de metadatos semánticos.

21. Reorganizar los enlaces de navegación

Para algunos sitios web, ejecutar la navegación de contenido fijo puede no ser un problema real. Pero he encontrado en algunos sitios web o carteras de negocios más grandes que ciertos enlaces de navegación tienen demasiada prioridad. ¡Y del mismo modo, hay algunos artículos que rara vez se pueden encontrar! Tómese el tiempo para navegar por su sitio web y compórtese como si fuera cualquier otro visitante.

Considere qué enlaces le interesan más y, posiblemente, cualquier enlace que le gustaría que se agregara. Estos pueden incluir un breve historial de su sitio web, información sobre el equipo, detalles de contacto, preocupaciones de privacidad, comunicados de prensa, etc. También puede ayudar a recopilar comentarios de los usuarios y ver si hay correlaciones entre sus deseos y la demanda de páginas nuevas o actualizadas.

22. Volver al principio Enlace

Si su sitio web publica páginas de contenido muy largas, este es un elemento imprescindible en su diseño. Los enlaces de desplazamiento hacia arriba se pueden encontrar casi en todas partes en estos días. Los usuarios no piensan en presionar la tecla de inicio y puede ser molesto desplazarse todo el camino hacia arriba. La mejor ubicación para este enlace es flotando junto a su contenedor, o sentado justo en el pie de página como hemos implementado en Hongkiat.

23. Personalizar código / etiquetas pre

Al crear por primera vez una hoja de estilo de sitio web, muchos desarrolladores pasarán por alto los elementos típicos de la página. Los encabezados y párrafos son muy comunes, pero ¿qué pasa con las etiquetas pre o las etiquetas de código en línea? Se utilizan para encapsular sintaxis de código fuente preformateada como se vería en un archivo de texto / NFO. Algunos sitios web no necesitan estos elementos, pero todavía se considera una buena práctica tenerlos estilizados por si acaso.

24. Agregar atributos de Ancho/Alto de imagen

Ahora bien, esta tarea podría llevar un tiempo, dependiendo de cuántas imágenes tenga que pasar. Pero si encuentra imágenes en su sitio web sin un ancho/alto definido, puede valer la pena actualizarlas.

Normalmente, las imágenes que carecen de estos atributos se mostrarán como un cuadrado de 1×1 px antes de cargarse por completo. Esto hará que las páginas web y la barra de desplazamiento salten a medida que se cargan nuevas imágenes. Una vez más, esto no será útil para todos, pero vale la pena señalarlo como un solucionador rápido en algunos casos. Y todavía hay técnicas CSS para imágenes responsivas que utilizan atributos fijos.

25. Notificaciones de JavaScript

Cualquier desarrollador que haya trabajado en JavaScript conoce los cuadros de diálogo típicos. Puede configurar un cuadro de alerta que ofrece al usuario un botón ACEPTAR, simplemente mostrando información. Pero también hay alertas de confirmación con botones sí/no junto con el cuadro de aviso que solicita la entrada del usuario.

Todos estos pueden personalizarse utilizando alertify.js. Esta es una biblioteca de código abierto muy pequeña para diseñar sus propias cajas de alerta de frontend. Es muy rápido de configurar y fácil de personalizar si necesita combinar sus propios estilos CSS.

26. Consultas de medios receptivos

Esto puede no parecer un poco de código rápido para agregar, sin embargo, realmente no toma mucho tiempo. Las consultas responsivas se pueden agregar a su hoja de estilos existente o agregar a una nueva respuesta.documento css. De cualquier manera, puede configurar rápidamente estilos recurrentes para manejar varios tamaños de pantalla desde monitores, tabletas y teléfonos inteligentes.

Las consultas adaptativas no siempre tienen que responder por completo a su diseño. A veces, pueden ocultar partes de contenido, como la barra lateral alargada o el pie de página más grande. A continuación, puede mostrar un mini pie de página totalmente sensible que está oculto originalmente en el diseño del escritorio. Puede obtener más información sobre consultas de medios en nuestra colección de tutoriales web adaptables.

27. Enlaces de afiliados

Siempre habrá sitios web similares para crear contenido en línea relacionado con su campo. Rara vez se crean nuevas ideas; la mayoría de ellas son ramificaciones y parodias de contenido existente. Pero en lugar de convertir la web en una competencia, ¿por qué no crear un ambiente agradable? Si tienes espacio extra en tu diseño, envía algunos correos electrónicos a sitios web relacionados en tu nicho (busca en Google) pidiendo que te afilies.

Puede intercambiar enlaces y ayudarse a atraer tráfico entre sí. Esto abre las puertas para que los nuevos usuarios encuentren su sitio web mucho más rápido, y para ver que también está incluido dentro de la comunidad de otros sitios web. Además, obtener backlinks de sitios web con autoridad en Google solo puede ayudar a la credibilidad de tu dominio.

28. Fuentes basadas en iconos

Recientemente estaba leyendo un artículo sobre 24ways en el que se discutían las fuentes de iconos y los atributos de datos. Esto me hizo pensar en el futuro del diseño web y en cómo HTML/CSS ha afectado drásticamente la codificación del frontend. Las fuentes basadas en iconos son perfectas para una serie de razones, incluidos los menús de navegación, las listas ordenadas/desordenadas e incluso el contenido básico de la página.

Muchas de estas fuentes se pueden agregar rápidamente a su sitio web utilizando @font-face. Esto significa que no necesita confiar en un servicio de terceros como Typekit para alojar sus fuentes. También significa un estilo de diseño más semántico en lugar de solo usar iconos PNG.

29. Sombras de cuadro de imagen

Si quieres mantener a los visitantes en tu página por más tiempo, necesitas ofrecer contenido de calidad real. Este puede ser el caso de tu sitio web, sin embargo, si tus estilos son suaves, la gente buscará en otro lugar. La atmósfera y la estética son enormes en un buen diseño web.

Recomiendo crear una clase de imagen rápida que envuelva un borde alrededor de las imágenes de su página. Esto puede incluir una sombra de caja pequeña junto con bordes y relleno, también. Cualquier cosa para ayudar a que tus imágenes salten de la pantalla y destaquen en los párrafos de texto.

30. Hojas de estilos alternativas

Tenga en cuenta todos los estilos multimedia que debe incluir al crear un diseño de sitio web único. Esto tendría que verse bien en monitores de escritorio, computadoras portátiles, tabletas y posiblemente incluso teléfonos inteligentes. Y no olvide la proyección y los medios impresos, que no siempre son compatibles.

Si tiene una gran audiencia que utiliza estos tipos de medios oscuros, le recomiendo que diseñe sus propias hojas de estilo alternativas. Estos se pueden etiquetar en función del tipo de papel, como la impresión.css, o añadido a tus hojas de estilo existentes. Si hay suficiente demanda, sus visitantes estarán eternamente agradecidos. Y honestamente, no toma mucho tiempo editar el diseño predeterminado de su sitio web para impresoras comunes.

Pensamientos finales

Los diseñadores creativos y especialmente los desarrolladores web de frontend encontrarán algunas técnicas útiles entre esta lista. La mayoría de estas ideas no deben tardar más de 1-2 horas en implementarse, mientras que muchas se pueden lograr en tan solo 15-30 minutos.

Reevaluar los diseños de su sitio web y actualizarlos con nuevas tendencias de vez en cuando suele ser una buena idea, especialmente con las versiones más recientes de las propiedades de CSS3 que permiten sombras, animaciones y esquinas redondeadas nativas del navegador. Esta es una excelente colección de ideas que vale la pena echar un vistazo si necesita algunas actualizaciones rápidas.

Además, si tiene preguntas o ideas sobre el artículo, no dude en compartirlas con nosotros en el área de discusión posterior.