El fin de semana vimos la Conferencia de Mejorando.la, organizada por Christian van der Henst (más conocido como @cvander), Freddy Vega (o @freddier), y Stephanie Falla (@stephaniefalla). En los 2 días que duró hubo varios expositores, entre ellos David Kadavy (que estuvo en Webprendedor 2011), el fotógrafo Iván Castro, la emprendedora Celeste North, entre otros. Una exposición que nos pareció muy útil fue la de Miguel Álvarez (a.k.a. @alvarezmiguelan) que expuso sobre diseño para dispositivos móviles.
Si les interesa el tema y se perdieron la charla, sigan leyendo porque seleccionamos los mejores tips que dio ese día.
Algo de contexto
– Actualmente el uso móvil llega a un 7%, pero con el crecimiento que tiene, se puede prever que en el futuro se accederá más con dispositivos móviles que con pcs de escritorio.
– Casi el 22% de las páginas web del ranking Alexa no están optimizadas para sitios móviles. Esto contrasta con otra estadística: 85% de los usuarios confía más en sitios optimizados para móviles.
– El 86% de los usuarios usa algún dispositivo móvil mientras ve TV.
– Los dispositivos móviles son para walking users: para personas que están haciendo otra cosa mientras miran su celular.
Las claves para armar un sitio web para móviles
– En el caso de los dispositivos móviles “+ es –”, porque cuanto menos tengas en el sitio es mejor para las personas que se conectan.
– Un tema muy importante es la usabilidad del diseño web. Es clave el tamaño de las pantallas. Los sitios web para dispositivos móviles pueden tener una columna o 2, y como máximo 3. Por lo mismo, no hay que cargar imágenes tan pesadas.
– La navegación no tiene por qué ser igual que en sitios web de escritorio. Aquí el usuario quiere entrar a algo específico rápido y tener que hacer scroll hacia abajo es un poco molesto. Por eso es bueno poner arriba el enlace al home.
– Como la mayoría de los smartphones tienen pantalla touch, a la hora de diseñar hay que tener en cuenta que lo que uno ve en pantalla se puede deslizar, ampliar, reducir, etc.
– Y también hay que asegurarse que los enlaces no sean demasiado pequeños, sino lo suficientemente grandes para poner el dedo encima y que uno no pase a llevar otro enlace que esté al lado.
– No utilizar plugins!
– Configurar viewport para que la imagen se vea en tamaño de pixeles real.
– Optimizar los documentos en HTML5.
Qué hacer si hay formularios
– Minimizar la entrada de texto.
– Minimizar el número de campos para rellenar.
– Poner la opción de ver la clave escrita en el campo de password.
– Alinear las etiquetas arriba en la pantalla en vez de al lado.
– Usar campos input de HTML5.
– Recordar los datos que se han introducido antes.
Así se vio Mejorando.la el día sábado
¿Dos sitios distintos o uno que funcione bien en todos los dispositivos?
– Tener 2 sitios distintos tiene un inconveniente del punto de vista del SEO por duplicación de contenidos.
– No es muy conveniente tener que desarrollar un sitio para cada nuevo dispositivo que se crea.
– Responsive web design es la tecnología que permite que los sitios web se adapten automáticamente a los dispositivos en los que se está visualizando.
– El Responsive Web Design está basado en 3 elementos:
1- CSS3 media queries. Hacer que el navegador se pregunta cómo eres: cómo es la pantalla.
2- Rejillas fluidas. Se adaptan a pantalla de dispositivo.
3- Imágenes fluidas. Entregan al navegador la imagen que está más adaptada al tamaño de su pantalla.
Algunos sitios útiles para revisar
Para que cada uno descubra el que más se adapte a sus necesidades, Miguel Álvarez recomendó:
– Lessframework.com: sistema de rejilla CSS para diseñar sitios web que se adaptan.
– Cssgrid.net
– Stuffandnonsense.co.uk
– Getskeleton.com
– Github.com
– Sencha.com: Sencha Touch está focalizado en hacer apps web. Tienen un software de escritorio que permite realizar animaciones para móviles.
– Jquerymobile.com: está focalizado en hacer sitios web.
– Jqtouch.com es otro de los productos más destacados.
– Desarrolloweb.com: tenemos framework explicado y vamos a seguir explicándolo en los próximos meses.
¿Qué les parecieron los tips? Ojalá que les hayan servido!
Link | Mejorando.la
Link | Miguel Álvarez
Link | DesarrolloWeb