La importancia de los dispositivos móviles

Los tiempos en los que internet en el móvil era utilizado sólo para revisar el correo han quedado muy lejos… desde comprar casi cualquier cosa imaginable hasta encontrar negocios cerca de nuestra ubicación, pocas son las cosas que en hoy en día no pueden realizarse en la red desde uno de estos dispositivos.

No obstante y desafortunadamente para usuarios (y para empresas también) los dispositivos móviles no muestran las páginas web de la manera que lo haría un ordenador, llegando incluso a darse diseños web que son totalmente incapaces de ser visualizados ni utilizados en un dispositivo móvil.

Por lo tanto, es muy importante que antes de diseñar una página web se tenga en cuenta el tipo de usuario que va a visitarla y el modo en que éste accede a internet, para decidir así si la versiones móviles de una página web no van a ser una opción a considerar, sino una auténtica necesidad.

De esta manera, diseñadores y desarrolladores tienen que cambiar la forma en la que el diseño web se concibe y el modo en el que a éste se aproximan.

Lo que hoy se puede encontrar

A medida que internet ha ido evolucionando, muchas empresas y diseñadores han desarrollado las malas estrategias de diseño web móvil que hoy en día se puede encontrar. Y esto con suerte, pues son muchos los casos de páginas web que no han sido en absoluto adaptadas, haciendo la experiencia de navegación totalmente desagradable y confusa para los usuarios que acceden a ellas desde sus dispositivos móviles.

Estas estrategias, que han pretendido ser amigables para el usuario móvil, se han basado en adaptar a un formato para móvil todo el contenido que tenían en la versión original de una página web, la versión para ordenador o portátil; dejando de lado lo que realmente es importante: centrarse en mostrar sólo aquello que realmente quiere encontrar el usuario que accede desde su Smartphone

“Pensar en móvil” primero, todo ventajas

Tal y como deja patente Luke Wroblewski en su revolucionario libro sobre la importancia del diseño web para dispositivos móviles, Mobile First, “pensar en móvil” primero es esencial por una sencilla razón: la adaptación web para dispositivos móviles siempre trae problemas, mientras que realizar la versión móvil primero solo puede suponer ventajas.

¿Por qué? Básicamente, porque con sólo 320×480 pixeles en lugar de los 1024×768, los diseños web tienen que se depurados al máximo, hasta quedarse sólo con lo esencial. Diseñadores y empresas deben identificar cuales son las tareas principales que el usuario realizará en la web desde su Smartphone o tableta y deben centrar sus esfuerzos de diseño en ellas.

Realizar este trabajo no sólo será ventajoso para los usuarios, en cuanto a la experiencia de navegación se refiere, sino que también marcará unas bases excelentes para desarrollar una buena versión para ordenador de la página web en cuestión.

Además, “pensar en móvil” en primer lugar ayudará a familiarizarse con la cantidad de oportunidades que el diseño web para móviles supone. Quizás, la más destacable sería la oportunidad de poder diseñar una página que será manipulada con los dedos de los usuarios, gracias a las pantallas táctiles de los dispositivos. Las opciones que este hecho plantea son realmente alucinantes.

Cada dispositivo, una aproximación

“Pensar en móvil” es, en primer lugar, pensar en el usuario como centro del diseño, en su experiencia de navegación satisfactoria; y en segundo lugar, es pensar en diseño web para dispositivos móviles en plural, ya que para cada dispositivo el diseño de una página web deberá ser creado de forma particular, teniendo en cuenta las ventajas e inconvenientes de cada uno de ellos.

Si se diseña una web para smartphones, quizás lo más importante sería recodar que las páginas web creadas con Flash no pueden ser visualizadas en muchos teléfonos móviles, por lo que saber cómo crear una página web en HTML para versiones móviles, será toda una ventaja, ya que es un lenguaje excelente para el diseño web móvil.

Otro de los inconvenientes de los smartphones que se deben tener muy presente a la hora de realizar una web es la velocidad de carga. Las conexiones suelen ser algo lentas, por lo que si una página tarda una eternidad en cargar, los usuarios abandonarán la página e irán a otra optimizada que no les haga perder su tiempo (y la empresa detrás de esa página web pesada estará perdiendo clientes).

Si hablamos de tabletas, a pesar de tener un pantalla mayor que la de los smartphones -lo que posibilita una navegación más satisfactoria a priori-, debe intentar llevarse a cabo un diseño web lo más simple y preciso posible, que se centre en desatar todo el potencial y todas las ventajas de las pantallas táctiles de este tipo de dispositivo.

Es el momento de “pensar en móvil”

Para terminar, y según lo visto en el artículo, comentar que empresas y diseñadores web deben considerar la relevancia para sus negocios de tener una versión adecuada de su página web para dispositivos móviles; y si aun no tienen página web, deberían considerar plantearse la versión móvil de la misma en primer lugar; deberían “pensar en móvil” como primer paso para diseñar sus distintas versiones web.

La lealtad de estos dos grupos se puede convertir en un factor fundamental para que nuestro sitio repunte, debemos tener en claro que nuestros principales clientes generalmente se encontrarán en alguno de estas edades y por ello debemos prestar especial atención en ofrecerles una buena experiencia.

Diseño web para adultos

El grupo de los adultos esta compuesto por personas que han experimentado la web desde sus inicios, han estado en cada paso de la evolución del Internet por lo que son un muy buen grupo para probar funcionalidades nuevas y diseños prototipos. Es a este sector a los que les ha tocado disfrutar o incluso sufrir en algunas ocasiones con los cambios en los patrones de diseño.

Muchos diseñadores toman mucho más en cuenta a este grupo a la hora de realizar sus pruebas de usabilidad, ya que sienten que evaluarán mejor su trabajo y representan más las necesidades que buscan cubrir. Si bien esto no es ninguna mentira, puede resultar un problema, ya que olvidamos al resto de los grupos y nos enfocamos únicamente en el presente, olvidándonos de que los jóvenes de la actualidad serán nuestros clientes principales en el futuro.

El hecho de que esta generación este marcada por el crecimiento en paralelo con el Internet, no garantiza que todos los adultos estén perfectamente educados en esta materia. Aunque la mayoría tiene experiencia con la computadora, sólo aquellos que estuvieron interesados en la tecnología a temprana edad, dominan en cierta medida el tema del Internet.

Para este grupo la accesibilidad sigue siendo un factor relevante, aunque la mayoría de los usuarios en esta etapa ya no son tan dependientes de instrucciones, tienen poca dificultad para tomar decisiones y tienen bien en claro cuales son sus necesidades. Los adultos cuentan con objetivos concretos, por lo que tienden a visitar los sitios web en busca de soluciones específicas, también se caracterizan por la costumbre y fidelidad, siendo más dados a irse a sitios de confianza, antes que experimentar con un sitio nuevo.

La adaptación de un sitio web para adultos suele ser muy sencilla, ya que basta con que sea accesible y utilizable por las normas modernas, para que sea útil para este grupo de usuarios. A diferencia de los usuarios más jóvenes, los adultos son mucho menos atraídos por la animación y el sonido, y a diferencia de los usuarios mayores, se concentran más en obtener respuestas lo más rápido posible.

Diseño web para ancianos (la tercera edad)

Las personas de edad avanzada son las que menos atención reciben al momento de diseñar un sitio web, muchos estudios se realizan para poder identificar como influir y agradar a los otros grupos, incluso existen algunos que se especializan en enseñarnos como hacer sitios para que los niños aprendan a utilizar la computadora, pero nunca se hace hincapié en atender a las personas de la tercera edad. Esto nos hace olvidar que existe un gran número de personas en este grupo de edad que tampoco sabe usar la computadora y representan un buen mercado potencial.

Las personas de esta edad tienden a experimentar un declive en sus habilidades motoras, por lo que su experiencia tiende a ser distinta al momento de utilizar un sitio, esto aunado al hecho de la falta de conocimiento sobre las nuevas tecnologías puede afectar su interacción. Pero no todo es desventaja para este sector, los miembros de este grupo tienen más paciencia que el resto y acostumbran leer detenidamente, por lo que se puede optar más por un contenido textual estático.

Si bien se puede manejar más texto, este debe de tener una presentación adecuada, letras grandes y visibles, los enlaces deben de ser fáciles de accionar y la navegación debe de ser sencilla. Cuando se diseña para este grupo, debemos evitar dar a ellos toda la responsabilidad de corregir o evitar errores, tratar de reducir la confusión tanto como sea posible, y fomentar la interacción mediante una interfaz de usuario atractiva.

Conclusión

Sea cual sea la edad para la que estés diseñado un sitio web, debes tomar en cuenta las características y especificaciones de cada etapa para que las páginas puedan ser percibidas de manera adecuada y realmente utilizadas.

Siempre debemos tener en mente factores básicos como que los niños aún están en desarrollo, las personas mayores pueden confundirse rápidamente y los adultos tienen objetivos muy específicos cuando navegan por la web. Estás características base harán que cada grupo interprete la información de manera diferente, por lo que ser debe utilizar el diseño a su beneficio.

Si no queremos tener un sitio que se centre únicamente en una cierta edad, entonces debemos de tratar generar páginas que cumplan con los criterios mínimos para mantener satisfechos a los adultos, que sean accesibles para las personas mayores, que involucre a los adolescentes y que eduque lo más posible a los niños.

En esta parte estudiaremos a los dos primeros grupos, los más jóvenes de la cadena y sin duda los más influenciables.

Diseño web para niños

El impacto que tiene un sitio web sobre un niño es muy elevado y al igual que otros medios de comunicación, como la televisión, tienen gran influencia sobre el comportamiento de los infantes cuando son utilizados durante gran parte del día. No es raro que este fenómeno ocurra con más frecuencia en la actualidad, el hecho de tener habilidades de computación a temprana edad ya no es un lujo y es por ello que debemos poner especial cuidado cuando nos dedicamos a desarrollar sitios exclusivos para niños.

Hoy en día niños desde los cinco años, o incluso antes, están ganando experiencia utilizando dispositivos complejos y sitios web que quizás no se adecuan totalmente a su forma de ver el mundo, ya que más allá de la educación el principal problema para que estos niños tengan una buena experiencia al entrar a tu sitio es el desarrollo físico.

Los cuerpos de los niños y sus cerebros aún están en un estado de desarrollo, por ello sus habilidades motoras y la capacidad para utilizar el ratón y teclado de la máquina pueden resultar limitadas, nuestros diseños deben de tomar esto en cuenta y ser planeados para que los niños puedan jugar y navegar sin necesidad de estar cambiando mucho entre el ratón y el teclado, no forzarlos a llenar formularios, o escribir mucho para realizar actividades.

El manejo de errores también debe ser distintos, un adulto tiene mejor comprensión de lo que esta realizando por lo que tiene mejor comprensión de cuando ocurre un error, por su parte los niños tienden a omitirlos ya que carecen de los conocimientos o simplemente no les prestan atención porque piensan que son parte normal de la página.

Un diseño para niños debe de ser colorido, sencillo y educativo, cuando un infante encuentre la manera de llegar a su objetivo la aprenderá y la seguirá siempre de la misma manera, es por ello que debemos de planear bien el mapa de nuestro sitio y donde colocaremos los enlaces que lleven a cada sección. No te preocupes por la exploración ya que un niño nunca temerá en ese sentido.

Para garantizar un buen diseño para niños debemos buscar siempre mantener limpia la interfaz de usuario, para que los niños no se distraigan con el desorden, si es posible utilizas iconos grandes que ayuden a identificar con experiencias o cosas de la vida cotidiana. Tenemos que evitar la publicidad no adecuada, y si podemos evitarla en absoluto ya que para los niños es más difícil distinguir entre lo que es publicidad y lo que es el contenido verdadero.

Si tienes habilidades en el diseño con animación y sonido, ponlas en práctica para este tipo de sitios, cualquier tipo de multimedia llama su atención y es ideal para presentarles ideas. Finalmente para darle un buen toque añade mensajes que den al niño una retroalimentación, esto refozará sus buenas acciones y aprenderá mejor lo que hizo bien.

Diseño web para jóvenes adolescentes y preadolescentes

La pubertad y la adolescencia sin duda son las etapas donde se define más nuestra personalidad, experimentamos y buscamos nuevos panoramas por explorar, las habilidades motoras y la comprensión cada vez son menos un factor limitante. La experiencia con las computadoras ya es mayor y por lógica se buscan otros ámbitos, distintos a los juegos o páginas de contenido divertido, se empieza a buscar establecer interacción con otras personas y socializar, aunque esto no significa que sepan cómo funcionan los sitios y los dispositivos en su totalidad.

Los adolescentes y preadolescentes tienden a ser más resistentes a la publicidad y no están tan dispuestos a explorar todo un sitio web, por lo que adoptan un enfoque más metódico, buscando información en vez de descubrirla. Se caracterizan por estar siempre preocupados por interactuar socialmente, ser escuchados y participar en actividades de grupo, como por ejemplo en foros de Internet o redes sociales.

Uno de los grandes beneficios que conlleva el dedicarse a diseñar para jóvenes es que cuentan con mucho tiempo libre, por lo que si les damos las herramientas para que socialicen a través de nuestro sitio pasarán gran parte de su día en nuestras páginas y empezarán a promover tu servicio con sus amigos y así más clientes podrán llegar.

Para lograr un buen diseño para adolescentes debemos tener mucho contenido gráfico y un contenido textual conciso, ya que los adolescentes tienden a leer menos entre líneas y puede perder interés si no les damos lo que buscan de manera rápida. También debemos asegurarnos de que dicho contenido no parezca infantil; en estos casos la animación también puede ser utilizada como aliada, aunque quizás deba utilizarse en menor medida que con los niños pequeños.

Para poder mantenernos a la vanguardia y satisfacer de la mejor manera las necesidades de los usuarios que visitan nuestro sitio debemos estar concientes de que clase de diseños web se adecuan mejor a sus capacidades y gustos, así como identificar el tipo de contenido que más les agrada.

En principio, esto no parece un problema ya que cuando iniciamos un sitio muchas veces nos enfocamos a un objetivo muy específico lo cual va delimitando nuestro grupo de usuarios. Pero qué pasa cuando este sector en especial se va diversificando por edades, un sitio puede estar diseñado para proporcionar un servicio a ciertos usuarios pero si queremos lograr una verdadera popularidad tenemos que pensar en proporcionar lo necesario para audiencias compuestas por distintos grupos de edad.

La edad es un factor muy influyente en la web, no sólo en términos de contenido, sino también es relevante en decisiones de accesibilidad, usabilidad y diseño de la interfaz de usuario. En este artículo nos centraremos en la diferencia de edad como variable que puede afectar el diseño y creación de un sitio web.

Internet para todos: diseño web adaptable

El factor de la diversidad nunca antes se había visto tan marcado como en la actualidad, la web empezó a popularizarse a mediados de la década de los años 1990 pero en ese entonces era más lo que se oía sobre ella que lo que se usaba, el grupo de usuarios verdaderos se reducía a gente especializada o universitarios curiosos, lo que hacía que la interfaz o el diseño web no tomará un aspecto muy relevante, aunado al hecho de que no eran muchas las herramientas y opciones con las que se contaban.

Después las empresas entraron a la red y sus empleados comenzaron a requerir servicios lo que hizo que varios sitios fueran tomando un aspecto más sobrio, fue con el tiempo que los adolescentes tomaron el poder para no dejarlo ir, ya que actualmente representan uno de los principales mercados en lo que a media se refiere, incluyendo por supuesto Internet.

Las escuelas jugaron otro papel importante para lograr esta diversidad, ya que empezaron a impartir cursos relacionados al Internet, lo que le dio acceso a varias personas que no tenían el nivel económico suficiente como para tener una computadora ni mucho menos una línea de Internet. Los modems de 56k fueron quedado atrás y cada vez más casas contaban con una conexión a Internet permanente, por lo que niños que apenas sabían hablar y escribir ya tenían acceso a una computadora conectada a la red, esto abrió otro nuevo grupo de usuarios para completar el ciclo.

Es por ello que la web se ha convertido en parte tan integral en la vida de muchas personas, y precisamente por ello las diferentes generaciones de usuarios han desarrollado diferentes habilidades en la web, debemos tener en consideración a cada una de estas para poder evitar marginar a ciertos usuarios.

Si bien nuestro trabajo va a variar dependiendo del tipo de sitio que manejemos, si como diseñadores web queremos llegar a toda clase de público tenemos que aprender a realizar conjeturas razonables sobre lo que le gusta a cada sector y la manera en que navegan por la red. Si nos tomamos el tiempo para identificar como se ve afectado cada sector seremos capaces de evitar caer en la marginación de usuarios.

Importancia del diseño web para todos

La importancia de diseñar para todos los grupos de edad radica principalmente en la experiencia que generamos en los usuarios, si ponemos como base de nuestros diseños a un grupo específico y nos olvidamos del resto podemos causar malas experiencias que a futuro puedan producir mayores efectos.

Tomemos como ejemplo el caso de los ancianos, son personas que vivieron toda su vida sin un ordenador y apenas están empezando a tomar confianza en los ordenadores; el Internet les ha traído varios beneficios como a casi todo el resto de la humanidad, es por ello que han logrado establecer un vínculo en estos últimos años y han tomado el valor suficiente para empezar a navegar, sería irresponsable de nuestra parte entregarles una interfaz compleja y poco intuitiva, esto nada más los alejará y creará malas experiencias, recuerda que todos eventualmente vamos a envejecer y cuando llegues a ese punto querrás que se te tome en cuenta, pues sigues siendo la misma persona con voz y voto para decidir.

Otro caso se puede presentar con los jóvenes, entre muchos de los adolescentes y niños que entran a nuestra página se encuentran los futuros diseñadores web, si no cuidamos a este sector puede que les creemos malas experiencias y en un futuro tomen esta mala imagen como la percepción de un sitio web y empiecen a diseñar de la misma manera o peor aún se desanimen totalmente a diseñar pues crearon un concepto erróneo.

Con esto no estamos dando a entender que todo el contenido debe ser accedido por todas las edades, es claro que en muchas ocasiones será necesario agregar filtros y restricciones que permitan observar cierto contenido a los mayores de edad únicamente, pero no por ello debemos bloquear totalmente el sitio a un menor que bien puede representar un cliente en el futuro.

Si bien en este artículo estamos catalogando a los clientes en rangos de edad muy generales y simplemente estamos diciendo que existen niños, adolescentes, adultos y ancianos, vale la pena señalar que la diferencia en la capacidad de razonamiento entre un niño de cinco y un niño de diez años será ampliamente diferente, por lo que no puede dar nada por sentado.

El mejor enfoque consiste en definir los grupos de edad a los que queremos llegar y en base a ello empezar a diseñar, <strong<mientras más joven sea nuestro grupo de audiencia principal más específico debe ser el diseño. Con esto en mente, estudiemos las distintas formas de diseñar en base a un grupo de edad.

Explicaremos cada uno de los colores más cómunes en los diseños web, y cual es el significado que nuestro entorno tiende a darles, pasaremos desde un blanco sereno hasta un llamativo rojo.

El alcance del color en diseño web

El tono, la saturación, la oscuridad, la ligereza de un color puede agregar un significado y mensaje, y si un color puede significar algo, entonces tiene el poder de influir sobre aquellos que lo ven, una gran poder que debemos saber utilizar.

Existen muchas teorías sobre los colores, muchas personas tienen opiniones distintas sobre lo que expresa cada uno, pero en busca de un punto de sinergia se puede definir en términos generales lo que expresa cada uno.

A grandes rasgos y basándonos en el color, existen tres grandes grupos de sitios web, aquellos que utilizan el blanco como color principal, los que utilizan el negro y los que utilizan colores básicos como los primarios y el verde. Ahora trataremos de describir que expresan cada una de estas opciones.

El utilizar el color blanco en un diseño web es muy común, sobre todo en lo que se refiere al fondo de la página, ya que esto hace que el resto del sitio resalte más. Es un color que representa frescura y limpieza, y al menos de que el contenido del sitio diga lo contrario, al utilizarlo expresaremos orden.

Por su parte el color negro invoca una sensación más fuerte, es un color poderoso y misterioso que incluso puede tener connotaciones negativas en ciertas culturas, pero que en la actualidad es muy utilizado en sitios que quieren dar sobriedad, manejando un tono elegante y que indica profesionalidad.

Entrando a los colores primarios, tenemos al rojo que es uno de los colores más utilizados no solo en sitios web, si no en la mercadotecnia en general. El rojo generalmente esta relacionado con la pasión, pero se le puede dar otros usos ya se si se le da la tonalidad adecuada puede indicar peligro, urgencia y capta inmediatamente la atención del usuario.

Por su parte el azul es un color que representa estabilidad, sus tonalidades claras generalmente expresan creatividad, mientras que sus oscuros indican una presencia más fuerte pero sin dejar la tranquilidad. En la actualidad son muchos los sitios que utilizan el azul, en gran parte por su versatilidad, basta echar una hojeada rápida para darnos cuenta que muchos de los principales sitios web cuentan con el azul como su color base, tal es el caso de Facebook o Twitter.

El amarillo es un color más cálido, puede significar energía y juventud, ya que por lo general se le considera un color alegre y nos brinda la sensación de energía sin caer en el estrés o el peligro. Es decir, este color puede ser utilizado para recrear la sensación de positivismo.

Finalmente se encuentra el verde, un color que quizás no es tan utilizado como debería y que puede llegar a expresar seguridad, pero que generalmente se vincula con la naturaleza. Es por ello que es más utilizado en sitios relacionados al ambiente o compañas ecológicas, la manera en que el verde transmite la energía será más tranquila incluso que el amarillo.

Conclusión

El color puede tener un profundo impacto en el diseño de nuestros sitios web, siempre debemos tomarlo en cuenta como parte fundamental de la planeación y debemos manejarlo con cuidado una vez que elegimos uno como tonalidad principal.

El hecho de escoger un color es igual de importante como el hecho de desechar otros, debemos tener bien en claro la idea que queremos expresar y el mensaje que queremos dar. Recuerda siempre que el color es uno de los conceptos más poderosos en el diseño, y puede influir mucho en como se percibe tu sitio.

La búsqueda de una paleta de colores adecuada y correcta para nuestros proyectos puede resultar ser una tarea que consuma bastante tiempo, ya que por alguna u otra razón podemos sentir que ciertas tonalidades no van con lo que queremos expresar. Podemos elegir primero un tipo de color para después darnos cuenta que no era lo que buscábamos y así estar cambiando cada cinco minutos, hasta llegar a un punto donde estemos conformes.

También pueden existir ocasiones en que sintamos que encontramos una combinación de colores muy buena, pero no sabemos como lograr hacer que trabajen juntos, es decir en que lugar de la página colocar cada color, definir cual será el principal y los secundarios, determinar si son muchos o pocos los colores con los que contamos, o definir si combinan o no.

¿Cómo llegar a encontrar una buena combinación de colores?

Son muchos los que nos hacemos esta pregunta, vemos sitios web bastante bien diseñados y nos es imposible no plantearnos la duda, cómo es posible que el diseñador haya encontrado tan buena combinación. Si bien no existe una metodología bien definida para determinar cual es el color adecuado para cada sitio, trataremos de dar algunos consejos que ayuden y faciliten este paso de elección.

Muchas veces la respuesta esta en lo básico, explorar algunos de los estilos más popular que se utilizan en el diseño moderno, esto nos da la esperanza de entender por qué ciertos colores se utilizan en ciertas temáticas o enfoques de sitios web.

La importancia del color en diseño web

Como ya definimos el color es un factor muy importante y de gran influencia en el mundo, cada color ha establecido una relación que es muy difícil de cambiar por lo que todos tenemos una idea bien definida de lo que representan. La cultura, la educación y nuestra propia personalidad se han encargado de definirnos cual es nuestro color favorito, que representa y con que relacionamos el resto.

Por ejemplo, es inevitable pensar en un lugar o clima frío sin que vengan a nuestra mente los colores azul claro y blanco, lo mismo pasa con lugares cálidos y los colores amarillo y naranja, todo esto se logra gracias a la influencia que tienen los colores sobre nuestro subconsciente.

Al igual que con los climas, la imagen de cierta empresa se puede cambiar rápidamente en base al color de su logo, ya que las emociones que se evocan al ver un blanco en un logo de una empresa de limpieza no serán las mismas que se logren al ver un gris, ya que el gris lo podemos relacionar con suciedad, polvo, entre otras cosas.

Los colores toman tal importancia en el diseño, que ya no son únicamente vistos como un factor estético, si no que son utilizados como herramientas para transmitir mensajes, que si bien es algo que la mercadotecnia viene manejando desde hace mucho tiempo, en el diseño web no se le había dando tanta relevancia.

Cuando el color no debe de importar en diseño

Si bien plantemos las razones por las que el color toma tal relevancia e importancia en un diseño, la mayoría no tomamos en cuenta o tenemos conocimiento de esos factores, la importancia se la damos por naturaleza, ya es nuestro propio sentido del gusto el que nos hace modificar una y otra vez el diseño hasta encontrar el color que nos agrade más.

Modificamos tonalidades, agregamos brillo, lo hacemos más oscuro, algunas sombras o simplemente cambiamos todo de nuevo, en este punto el color ya se convirtió en una obsesión. Es aquí cuando este tema debe dejar de importar, ya que nos hará perder tiempo valioso y nuestra productividad se puede estancar.

Cuando nos esforzamos por alcanzar una perfección que es imposible, el color se torna en un tema de vanidad, y siempre vamos a encontrar un defecto que nos haga replantearnos nuestras decisiones.

Para estos casos no hay nada mejor que ir con el instinto, ya que suele elegir el color que más se asemejará a la perfección que buscas, es por ello que el primer color que eliges, es por lo general el color con el que estarás más conforme.

En la segunda parte de este artículo escribiremos más detalladamente el significado que puede expresar cada color, incluyendo los mensajes que podemos darle a nuestros usuarios al usarlo dentro de nuestras páginas.

La tipografía, es decir, la fuente o el formato de las letras que conforman el texto, tendrá un impacto directo en como la página será recibida por sus lectores.

Una tipografía enrevesada y poco legible agotará a quien visite el sitio web; los mensajes no son claros y por tanto el visitante prefiere salir del sitio.

Si bien es cierto que no hay un método establecido sobre cómo elegir una tipografía adecuada para una web, sí hay ciertos criterios fundamentales a ser tomados en cuenta.

Legibilidad de la tipografía

La legibilidad es un principio básico y necesario cuando se va a elegir la tipografía para una página web.

Parece obvio, pero no es poco común entre diseñadores web poco experimentados que privilegien una tipografía aparentemente más interesante, original o compleja sobre tipografías tradicionales y cuyo uso es casi generalizado en el mundo web.

Ahora bien, las tipografías del primer tipo tienden a tener dos problemas: por un lado, son poco legibles pues están llenas de adornos. En este sentido demandan un mayor esfuerzo y una mayor atención de parte del lector. Por otro lado, suelen distraer al lector del mensaje que se trata de transmitir.

Fuentes tradicionales como Arial, Verdana, o Helvética son las más utilizadas, justamente, porque son fácilmente legibles. De nada sirve parecer original o tratar de que la web se destaque por el uso de fuentes complejas si la información no se transmite fácilmente.

A parte está, el hecho de que tipografías poco comunes no se verán igual en diferentes ordenadores. En el ordenador donde no estén instaladas, se sustituirán automáticamente por una tipografía que sí tenga el sistema. Si quieres que una tipografía se vea igual en todos los ordenadores, la tengan o no instaladas, tendrías que usar el reemplazo de imágenes, nada recomendable por la sobrecarga de imágenes que puede generar en una web, o alternativas más modernas y óptimas como Google Web Fon Directory y font-face.

Combinaciones de tipografías

Una página web no se hace con una sola tipografía. Ciertamente se puede pero no es lo deseado ni lo recomendable.

Generalmente se utilizan distintas tipografías dentro de un mismo sitio web. Se diferencia con la tipografía y el tamaño de la misma a los títulos, o encabezados, del cuerpo del texto o de la barra de menú, por ejemplo.

Debido a esto es que es muy importante el que se hagan combinaciones adecuadas en donde las fuentes utilizadas no sean discordantes entre sí.

Para que esto no suceda es recomendable utilizar distintas tipografías de un mismo diseñador. Así, si se utiliza para el cuerpo del texto la fuente Meta Sans para los títulos y encabezados, se podría utilizar Meta Serif para el cuerpo del texto.

Lo importante en las combinaciones es crear un contraste notorio pero no al punto en el que las tipografías parezcan radicalmente distintas.

El Sentido del Texto

Para elegir una tipografía adecuada para la web es indispensable prestarle especial atención al sentido del texto. Es decir, a quien se dirige y a nombre de quien lo hace.

Hay fuentes que tienden a asociarse a un contenido serio mientras que hay otras asociadas más a un texto lúdico o juvenil. Ejemplos del primer caso sería la tipografía Times New Roman, mientras que para el segundo caso podría funcionar una tipografía como Impact.

Si se está diseñando la página web de una aseguradora o institución financiera, por ejemplo, la tipografía a utilizar será aquella que sea más formal pues será mejor recibida por quienes se interesan en los servicios de este tipo de empresas. La tipografía no puede estar desligada del texto que con ella se escribe y el contexto del mismo.

La Interfaz de la página web

La interfaz, o el “molde” de la página web, influye directamente en la tipografía. Ambos aspectos deberían ser trabajados en conjunto pues la interfaz definirá cómo la tipografía es presentada en cuestión de espacios, locación, y diseño.

Una interfaz mal diseñada, desproporcionada o desordenada, podría arruinar la tipografía por más cuidado que haya habido en su selección.

Por esto, es recomendable trabajar la tipografía junto con la interfaz a ser desarrollada en la página web.

No ha pasado mucho tiempo desde que para promocionarte o promocionar tu negocio y estar al día, solamente necesitabas tener una buena página web. Ahora, con lo rápido que ha avanzado la tecnología, hace falta mucho más que eso, hace falta tener actividad en las principales redes sociales y, sobretodo, contar con un sitio web compatible con dispositivos móviles.

Actualmente un alto porcentaje de las búsquedas en motores tales como Google y Yahoo, se hacen desde dispositivos móviles como iPads y smartphones, y solamente el 1% de los sitios web del mundo pueden ser visualizados en un dispositivo móvil sin ningún problema.

En la Parte 1 de este artículo, dimos algunos consejos para que tu sitio web sea totalmente compatible con dispositivos móviles, a continuación te damos algunos más que harán que tu sitio web móvil sea aún mejor:

• Olvida el auto-play y la auto-descarga:
  Los dispositivos móviles tienen menos capacidades técnicas que los ordenadores y no pueden manejar el mismo flujo de datos. La regla de oro es hacerlo simple.
• Evita la sobrecarga de imágenes:
  Si utilizas menor cantidad de imágenes será mejor para tu sitio web móvil, ya que esto no solamente facilitará la rapidez de las descargas, sino también hará que las imágenes que si sean necesarias sean mucho más fáciles de ver. ¿Quieres un dato técnico? Mantén tus imágenes aproximadas a los 72 dpi, 640px en 960 de altura.
• Ajustar los elementos visuales:
  Reducir los tamaños de los textos y el tamaño de las imágenes para que tu sitio web móvil tenga un correcto funcionamiento y sea rápido al cargar no es lo único que necesitas. También es importante que utilices imágenes de menor resolución, videos más cortos y elementos visuales mucho más sencillos.
• Navegación vertical:
  Siempre utiliza una misma dirección para el scrolling, pues si ya es bastante incómodo manejar un scrolling en doble dirección en una página web estándar, lo será mucho más en un sitio web móvil.
• Olvídate del Flash o Javascript:
  No todos los dispositivos móviles son compatibles con Flash o Javascript, así que la recomendación es que toda tu información se encuentre en HTML / CSS para lograr la mejor funcionalidad de tu sitio web en los dispositivos móviles. Hay que primar la usabilidad y accesibilidad más si cabe que en un ordenador.
• Decide correctamente los colores que usarás:
  En una web estándar los colores son de importancia para resaltar el contenido de tu información, pero recuerda que la pantalla de algunos dispositivos móviles puede ser de bajo contraste y eso hará que los colores y, por consiguiente, tu sitio web no se visualice tal como lo esperabas. Asegurate de que los textos y colores que utilizas son los adecuados y tengan un buen contraste.

Teniendo en cuenta que la tecnología WAP está en constante desarrollo y crecimiento, es inevitable que requiera de sitios web diseñados cumpliendo todos los requisitos básicos para complacer a la creciente cantidad de usuarios que día a día se hace más extensa.

Diseñar sitios web para dispositivos móviles exige un gran desafío y requiere un enfoque estratégico del diseñador web y el desarrollador.

La mayor ventaja del internet móvil es que puedes acceder a él desde cualquier lugar que te encuentres: desde el coche, el autobús, el supermercado, el campo de fútbol o los lugares menos pensados. Por esta razón estamos seguros que, en poco tiempo, aquel 1% de sitios web totalmente visibles en dispositivos móviles crecerá de tal manera, que llegará el momento en que la gran mayoría de accesos a internet será mediante estos dispositivos y entonces el porcentaje de sitios web móviles será incluso mayor al de sitios webs convencionales. Y este futuro no es lejano.

Entender la web móvil

La web móvil requiere saber condensar la información en espacios pequeños, primar la usabilidad y saber comprender qué es lo verdaderamente importante en una web. Hay una gran diferencia entre diseñar una página web que será visible en un ordenador y diseñar una que será visible en un dispositivo móvil. Esta diferencia es cuantiosa ya que no se puede establecer un formato específico para móvil, debido a la gran cantidad de modelos, tamaños y grandes diferencias de resolución en los diferentes tipos de dispositivos móviles.

Ante esta situación, la mejor opción es que tomemos como referencia a la hora de diseñar nuestro sitio web para móviles, la mayor cantidad posible de dispositivos móviles, de tal manera que nuestro diseño pueda ser visto desde casi cualquiera de estos dispositivos. Para ello debemos asegurarnos principalmente de hacer un diseño fluido, que pueda adaptarse a diferentes anchuras sin romperse o desaprovechar espacio.

Consejos de diseño web para móviles

En el futuro, se espera que la navegación web en teléfonos móviles se convierta en la plataforma más importante de acceso a internet, por lo que recomiendo tener en cuenta algunos consejos que harán nuestro trabajo más simple, fácil y atractivo para los usuarios:

• Resolución de pantalla:
  Como hemos indicado, la resolución de pantalla cambia según el dispositivo móvil en el que vayamos a visualizar una web, por lo tanto necesitamos adecuarnos a un estándar de resolución para que la web móvil se adapte a la mayoría de pantallas.
• Asegurarnos que el desarrollo del contenido sea el adecuado:
  Debemos utilizar lenguajes de programación comunes y formatos de documentos conocidos por los usuarios, asegurarnos de la correcta codificación de los caracteres y utilizar hojas de estilo.
• Es conveniente no poner mucha información en una pantalla:
  Se recomienda dividir el contenido de la página en pequeñas porciones fáciles de entender, resumir textos y hacer bien visibles las llamadas a la accion, tales como botones y enlaces.
• Desarrollar un diseño sencillo para facilitar el uso:
  Es muy importante que la visualización de la web en un dispositivo móvil sea simple y claro, pues esto significará que el usuario vea atractivo y fácil navegar por la web.
• Dinamismo en los enlaces:
  Darle al usuario la opción de poder volver a la página inicial de la web, haciendo clic en un botón que aparecer en cada página a la que acceda. Esto hará que el usuario retome rápidamente el rumbo de la navegación en caso de haberlo perdido.
  Además que el usuario pueda siempre diferenciar, por ejemplo mediante un color diferente, los enlaces que ya haya visitado de lo que no, para que la navegación sea más clara y dinámica.
• Que el usuario necesite escribir lo mínimo:
  Para hacer más ágil la navegación web en un dispositivo móvil, es conveniente que el usuario no se vea obligado a escribir texto.
  Lo recomendable es utilizar opciones de menú desplegable que muestren las diferentes alternativas de acceso a los diferentes niveles del recorrido web
• No utilizar páginas emergentes (pop-us):
  Los navegadores móviles no soportan las ventanas emergentes y si así fuera, el espacio para mostrarlo sería muy reducido. Se recomienda no utilizarlos para la comodidad del usuario y para una mejor estética del diseño web móvil.
• Ser lo más claro posible en la navegación del usuario:
  Esto es muy importante. El usuario debe encontrar las mayores facilidades tanto en la navegación web como en el sentido de esta. Para ello, debemos tener muy clara la distribución del contenido en el desarrollo de la web, logrando el correcto equilibrio entre la estética y la funcionalidad.

Cuando el usuario accede a internet a través de un dispositivo móvil, busca algo específico y urgente, por lo tanto el diseño que desarrollemos debe ser mucho más simple que el desarrollado para un sitio web estándar. De esta manera podremos contribuir en el presente al desarrollo del futuro, un futuro llamado Web móvil.

En caso de que no hayas leído la primera parte de esta serie te recomendamos que la consultes antes de empezar a leer este artículo.

No uses estilos en las etiquetas HTML

Trata siempre de evitar utilizar la declaración de estilos dentro de las etiquetas HTML. Hasta hace relativamente poco el incluir atributos relacionados al diseño y estilo de los elementos era una práctica común en el desarrollo de aplicaciones para la Web, por ello no es de extrañarse encontrarnos con tutoriales que aún manejan este tipo de declaraciones en el código.

Con la introducción y expansión de CSS esta costumbre ha ido quedando obsoleta. La definición de los estilos, colores y el diseño estético de un sitio quedaron como función exclusiva de las hojas de estilo, por lo que los atributos que fueron definidos en los inicios de HTML para llevar a cabo estas tareas han dejado de ser utilizados.

En el pasado era muy común encontrar sentencias como la siguiente:

<body bgcolor="#000000"></body>

La cual se utilizaba para definir el color de fondo de nuestra página, en la actualidad para realizar esto se debe definir, en una hoja de estilo, un bloque de código como el siguiente:

body{

background: #000000;

}

De esta manera nos evitamos utilizar el atributo “bgcolor” para definir un aspecto correspondiente únicamente al diseño.

Existe otra manera de definir estilos la cual también debemos evitar, aunque sea en menor medida, esta es la definición de estilos dentro de las etiquetas HTML mediante el atributo “style”. Es muy común que por cuestiones de comodidad o simplemente por no conocer el correcto uso y estandarización del código, definamos una sentencia de estilo de la siguiente forma:

<body style="background: #000000;"></body>

Como se puede apreciar, en esta ocasión sí utilizamos lenguaje CSS para definir el color del fondo de nuestro sitio, sin embargo seguimos manejando la definición dentro de una etiqueta lo cual puede causar conflicto con el código que establecimos por separado en la hoja de estilo. Es mejor mantener tus asuntos en orden y simplemente saber crear un entorno de trabajo más adecuado.

Maneja el código CSS en archivos separados del HTML

Desde un punto de vista técnico tú puedes colocar un bloque CSS en cualquier parte del código HTML que desees, funcionará de manera correcta y similar a cualquiera de las otras opciones que puedes eligir. Al final no habrá repercusiones en el resultado ya que el código será el mismo sea donde sea que se coloque, ejecutará las mismas acciones e instrucciones que tu diste por lo que cumplirá su función técnica por igual, sin embargo si habrá variación en el tiempo de respuesta.

Se recomienda manejar el código de estilo es un archivo por separado para mantener una mejor organización del sitio, comúnmente el manejar archivos únicos y exclusivos para las hojas de estilo hace que se facilite su edición y administración, además de que muchos editores de código pueden hacer una mejor depuración.

Entre los principales beneficios de manejar un archivo externo para depositar nuestro código CSS, se encuentra el hecho de que este archivo se puede utilizar para varios sitios y páginas de manera simultánea, sin necesidad de transcribir el código de un lado a otro, bastando con su adherencia entre las etiquetas “head” para su correcto funcionamiento.

De igual manera, el manejar un archivo CSS representa un ahorro tiempo al momento de la ejecución y despliegue de las páginas HTML. Al utilizar únicamente un archivo para todo el sitio, este se guarda en el caché del navegador lo que conlleva a un tiempo menor de respuesta y una carga más rápida.

Es importante recalcar el hecho de que las hojas deben incluirse dentro de las etiquetas “head”, de la siguiente manera:

<head>

<title>Mi sitio de prueba</title>

<link rel="stylesheet" type="text/css" href="mi_estilo.css" />

</head>

Ya que esto también influye para mejorar el tiempo de respuesta, o por lo menos eso nos hace creer. El hecho de llamar a los estilos en la etiqueta “head” hace que la página se cargue progresivamente, lo que crea la impresión de que el sitio se carga más rápido.

Coloca los scripts al final del HTML

Antes se acostumbraba cargar los archivos relacionado a JavaScript en el mismo espacio donde se incluían las hojas de estilo, es decir entre las etiquetas “head” del código, esto provocaba una demora en el tiempo de respuesta del sitio, ya que el navegador debía cargar primero todos los scripts con sus funciones antes de empezar a desplegar los elementos del sitio.

Es por esta razón que en la actualidad se recomienda agregar esta clase de archivos al final de nuestro código HTML, con esto lograremos que la página se cargue más rápido y el usuario obtenga una respuesta casi inmediata.

<body>

<p>Este es mi sitio de prueba</p>

<script type="text/javascript" src="mi_script.js"></script>

</body>

Como puedes apreciar hasta ahora hemos mencionado el uso de archivos externos para crear los scripts, si deseas incluirlos en el mismo código HTML, también es válido, pero eso sí, no lo hagas dentro de una etiqueta HTML, no cometas errores como este:

<img id="miImg" src="mi_imagen.png" onclick="alert('hola usuario');"/>

Trata de aplicar el uso de funciones y eventos por separado para llamar al script, o mejor aún haz uso de frameworks como jQuery para crear códigos claros y bien estructurados como este:

jQuery('#miImg').click(function() {

  alert('hola usuario');

});

Donde mediante un evento “click” mandamos llamar la misma funcionalidad que en la sentencia pasada.