Diseño – Diblet

Pros, Contras y alternativas al menú hamburguesa

Enzo Vergara — Mon, 14 Nov 2016 13:37:55 +0000

El menú hamburguesa (≡), ha sido una de las tendencias más usadas y recurrentes por diseñadores web en estos últimos dos años, principalmente en interfaces móviles, pero, ¿cómo afecta este a la experiencia del usuario?

Pros y Contras

Probablemente la principal causa defendida por los partidarios a terminar con el uso de este tipo de menú, es que puede convertirse en un obstáculo para usuarios inexpertos, que desconozcan la función de estas tres líneas. Además de que los ítems están por defecto ocultos, lo cual puede disminuir la probabilidad de que los usuarios hagan clic en ellos y así estén impedidos de hacer uso de las funcionalidades de nuestros sitio lo que finalmente resultaría en perder oportunidades de conversión

Pros

Es una de las tendencias más usadas para adaptar el contenido a dispositivos móviles.
El menú soluciona una de los problemas principales en el diseño responsivo que es la ubicación de los enlaces de la cabecera del sitio, dejándonos un área limpia y minimalista.
Todos lo están usando! La mayoría de los frameworks de maquetado adoptan este tipo de menú lo que los hace mucho más sencillo de aplicar.

Contras

Puede convertirse en un obstáculo para usuarios muy inexpertos.
Requiere un click adicional antes de que el usuario pueda utilizarlo. Lo cual añade tiempo y esfuerzo que la persona quizás no quiera tomar, especialmente si es solamente uno de tantos sitios que esté visitando en esa sesión.
La posición del menú en la parte superior es pobre en usabilidad puesto que es la posición más lejana respecto al dedo pulgar para usuarios en su teléfono móvil.
Algunos test de usabilidad han demostrado que los items ocultos dentro de estos menús son bastante menos clickeados que si mostramos las opciones directamente dentro de nuestra web o aplicación.

Alternativas

Pestañas

La principal alternativa suelen ser las pestañas o tabs, es muy conveniente si tus secciones principales no son demasiadas y están bien definidas. Cada item esta representado con texto, iconos o ambos. Pueden estar en la parte de arriba o abajo del sitio.

También puede haber un ítem de donde alistemos los demás ítems con menor relevancia.

Menú Adaptable

Otra alternativa es un menú adaptable, cuyos ítems se oculten en una sección de “más”, dependiendo del tamaño disponible.

Pestañas scrollables

Esta alternativa consiste en una lista en línea de nuestras opciones, las cuales podemos mover horizontalmente para ir descubriendo las siguientes opciones. Principalmente funciona cuando tenemos muchas opciones sin una gran diferencia de prioridad, como en sitios donde se pueda explorar entre categorías o etiquetas.

Botones Flotantes

Botones caracterizables con iconos flotando, en alguna esquina inferior.

Menú Hamburguesa

El mismo menú hamburguesa no es siempre una mala opción como navegación secundaria. Siempre y cuando nuestras opciones primarias estén disponibles y destacadas en pantalla

En diblet.com, desarrollamos e implementamos todos estos tipos de menú para las aplicaciones que desarrollamos. A elección del cliente. Conozca más de nosotros ingresando aquí.

Fuentes:

The post Pros, Contras y alternativas al menú hamburguesa appeared first on Diblet.

De la guerra de navegadores, a los navegadores modernos

Enzo Vergara — Thu, 15 Sep 2016 13:21:38 +0000

Primer Guerra de navegadores

La primera y más sangrienta guerra de navegadores fue entre Internet Explorer y Netscape entre 1996 y 2001.

En el lanzamiento de Internet Explorer 4.0 en Octubre de 1997 apareció un logo de IE en las oficinas de Netscape, que prontamente tiraron al suelo, colocando sobre el una figura gigante de su mascota sosteniendo un cartel que decía: “Netscape 72, Microsoft 18”, representando la distribución del mercado.

La Web era nueva y las aplicaciones evolucionaban rápidamente de un mes al otro. Llegó CSS y Javascript y los navegadores competían en cual tenía la característica más novedosa.

Era común ver en sitios webs “best viewed in Netscape” o “best viewed in Internet Explorer”, y claro, también los partidarios de los estándares de la W3C con “Viewable with any browser”.

Aunque Netscape comenzó con cerca del 80% del mercado, Microsoft tenía puntos a favor, ya que tenía el 90% del mercado de los sistemas operativos, la balanza se inclinaría cuando IE 4.0 comenzó a venir integrado como navegador por defecto en Windows.

Eventualmente, Internet Explorer ganaría. Para el 2001 ya tenía una couta del mercado del 95%

La Segunda Guerra de navegadores

Microsoft se vería nuevamente amenazado en el mercado de los navegadores, pues surgirían nuevos competidores:

Opera: El navegador tenía un feroz seguimiento, pero pocas personas estaban dispuestas a pagar por el, más aun cuando IE y otras opciones eran gratuitas.
Opera sería conocido por traer innovadoras características, como la navegación por pestañas, además de ser un navegador ligero pero con muchas funcionalidades.
Mozilla Suite: El motor de renderizado “Gecko” era una reescritura mejorada del antiguo Netscape HTML, pero estaba ofuscado entre el correo electrónico, noticias, IRC y demás funcionalidades que venían con el navegador.

El navegador de Mozilla fue lanzado inicialmente como “Phoenix” en Septiembre de 2002, refiriéndose a la mítica ave de fuego que, triunfalmente, resurgía de las cenizas de su predecesor, en este caso de Netscape, sin embargo, debido a disputas legales con “Phoenix Technologies” tuvieron que cambia su nombre a “Firebird”, lo cual los llevó a más disputas por lo que finalmente cambiaron su nombre en 2004 al que hoy todos conocemos: “Firefox”.

Internet Explorer le envío un pastel a Firefox, por su lanzamiento de Firefox 2 y Firefox 3

Firefox inmediatamente se convirtió en un hit entre los desarrolladores frustrados con la complacencia de Microsoft.

Mientras tanto, Internet Explorer llegaría la version 7 que incluía la navegación por pestañas, barra de búsqueda, filtro anti-phishing, soporte de PNG, claro, todas estas funciones ya eran muy bien conocidas para los usuarios de Opera y Firefox.
Firefox finalmente ganó alrededor de un tercio del mercado en 2010, pero el Explorer seguía en primer lugar.

El tercer competidor

Google lanzó Chrome en 2008, usando el motor Webkit, el mismo que Safari. Con la premisa de hacer un navegador minimalista para que los usuarios se focalizen en el contenido que desean ver. La posibilidad de que venciera al aún dominante Explorer se hizo evidente, especialmente cuando el navegador de Microsoft se transformó en una broma de todo lo que estaba mal en la industria.

Según StatCounter, entre Diciembre de 2009 y Enero de 2010 Firefox 3.5 fue el navegador más popular del mundo.

Chrome sobrepaso a Internet Explorer en Junio de 2012 y ha mantenido su puesto hasta el día de hoy. La competencia tomó nota y en lugar de competir en características, comenzó a simplificar sus aplicaciones. (Solo el reciente Vivaldi esta tratando de romper la tendencia)

En 2016 quizás pocas personas noten la diferencia entre Chrome, Firefox, Edge, Safari, Opera. Son todas excelentes aplicaciones con motores de renderizado capaces. El mercado a madurado y se ha estabilizado. Las grandes innovaciones son cada vez menos frecuentes, pero los usuarios se ven felices más allá de su elección.

Fuentes:

The post De la guerra de navegadores, a los navegadores modernos appeared first on Diblet.

Como incluir correctamente un favicon para múltiples resoluciones

Enzo Vergara — Thu, 12 May 2016 14:33:19 +0000

Los favicon son pequeñas imágenes, generalmente de 16×16 pixeles, usado por la mayoría de los navegadores en la parte izquierda de las pestañas de los sitios web. Nacieron allá por 1999 en Internet Explorer 5 como una pequeña imagen que represente el sitio y tiempo después fue estandarizado por W3C

Como crear un favicon

Existen múltiples herramientas en la web para crear e incluir favicons como:

Y mucho más que se pueden encontrar con una simple búsqueda en google.

Incluir

El código que normalmente usamos para incluir un favicon (en el caso de que sea una imagen PNG) es el siguiente y va ubicado antes de que cierre nuestra etiqueta HEAD en nuestro html

Resoluciones

El problema de incluir una sola imagen de 16×16 es que esta no se visualizará correctamente en otros lugares en el que puede mostrarse nuestro favicon, por ejemplo, como icono en nuestro escritorio o en nuestra barra de navegación. Una de las soluciones es incluir nuestro icono como archivo .ico el cual soporta varios tamaños. Existen muchas herramientas que nos ayudarán a convertir nuestros archivos PNG o cualquiera sea el formato en el que tengamos nuestra imagen original, en un archivo .ico de varias resoluciones, y lo podemos incluir en nuestro código de la siguiente manera:

Lo que estamos haciendo aquí es incluir un archivo .ico que tiene 5 diferentes resoluciones.

Los archivos .ico funcionan, sin embargo están mayormente en desuso, por esto recomendamos utilizar en cambio diferentes imágenes PNG.

Otros usos

Nuestros iconos pueden ser utilizados por nuestros dispositivos móviles, Android, iOS o Windows.
Para cumplir con las exigencias de estos dispositivos necesitamos imágenes de incluso más tamaño, en el caso de que alguien quiera añadir nuestro sitio como icono en su tablet con Windows necesitamos una imagen de 144×144, al igual que necesitamos una imagen de mayor tamaño en el caso de que nuestro dispositivo tenga una alta densidad de píxeles.

Incluyendo nuestro favicon para dispositivos Apple Touch

A pesar de que principalmente incluimos estos iconos para dispositivos Apple Touch, estos tambien suelen ser utilizados por otras aplicaciones como Chrome en Android

Incluyendo nuestro favicon para dispositivos con Windows 8

Una herramienta perfecta

Real Favicon Generator es una de las mejores herramientas para crear nuestro favicon permitiendonos múltiples personalizaciones para los diferentes dispositivos, generando nuestro código HTML a partir de una sola imagen, en segundos.

The post Como incluir correctamente un favicon para múltiples resoluciones appeared first on Diblet.