responsive-07

¿Cómo hacer un diseño responsive sin morir en el intento?

20 marzo, 2015 Diseño y Desarrollo web No hay comentarios
0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×

Responsive, Atomic design, Mobile first, Style tiles, Grid… Si te suenan estos términos seguramente te dedicas al diseño web. Basta con buscar cualquiera de estos términos en google para ver todo tipo de información: Beneficios del responsive en SEO, recursos para desarrolladores… pero ¿qué pasa con los diseñadores?

Muchas veces los diseñadores nos las vemos y nos las deseamos a la hora de diseñar una web por culpa del “bendito” responsive. Queremos que nuestro diseño web sea diferente a todos los demás y hacemos mil virguerías para que sea un diseño único y especial (nuestro cliente se lo merece). Y lo peor de todo es que no existe mucha información en la red de redes que nos ayude en estos casos. Por eso he decidido hacer un post que recoja algunos consejos que debemos tener en cuenta a la hora de afrontar un diseño web con comportamiento responsive.

Dicho esto, creo que la siguiente pregunta que debemos responder es ¿en qué consiste el Responsive? visita nuestra entrada

Durante mi corta (pero intensa) vida de diseñador gráfico, he podido enfrentarme a unos cuantos diseños responsive. Fruto de estos encontronazos he llegado a ciertas conclusiones que me ahorran muchos quebraderos de cabeza, a saber:

MOBILE FIRST

Piensa en móvil my friend. Cuando empieces a diseñar la web, sea cual sea tu punto de inicio, ten siempre en mente que debe acoplarse a móvil . Hoy en día (y no por mucho tiempo) los móviles son los dispositivos más pequeños donde podemos acceder a la web. Puedes empezar diseñando en formato móvil, pero tampoco es necesario, simplemente piensa siempre como se adaptará en móvil cada elemento que implementes en tu diseño.

También es importante pensar que los dispositivos móviles utilizan redes con límites de datos, así que evita añadir elementos a tu diseño que puedan elevar el tiempo de carga.

A la hora de pasar los diseños a desarrollo, es importante que tengan todas las versiones para plantear la programación responsive desde el inicio. Ellos (aunque sean seres extraños de cabezas cuadradas) también deben pensar mobile first! 

MEDIDAS RELATIVAS, (NO MORE PIXEL PERFECT)

Decirle medidas relativas a un diseñador es como decirle sarandonga a un finlandés. No se puede diseñar con medidas relativas!! Lo sé… pero podemos tenerlo en cuenta a la hora de diseñar. Se acabó el pixel perfect!! Piensa que los elementos pueden crecer y decrecer según el tamaño de la pantalla donde se visualicen.

Para hacer responsive, los programadores utilizarán medidas relativas siempre que puedan, la gran variedad de dispositivos móviles que existen en el mercado hacen imposible utilizar medidas absolutas, así que tenlo en cuenta!

LESS JPG, LESS PNG… MORE SVG

El formato SVG ha venido para quedarse . Nos permite utilizar el lenguaje vectorial (con todas sus ventajas e inconvenientes) en el diseño web.

En la medida de lo posible, es recomendable sustituir los elementos en bitmap por archivos en SVG. Logotipos, iconos, botones… pero también ilustraciones y fondos. Oh Yes!! Ademas, los archivos en SVG se pueden animar por CSS, pero eso es otro tema…

SVG

EL HOVER NO EXISTE EN MÓVIL

Pues eso, en dispositivos táctiles, no puedes hacer hover! A parte de esta obviedad, debes tener en cuenta que los efectos como el Parallax, Pop Ups, Scrolls To… no suelen funcionar en móvil y pueden provocar una muy mala experiencia de usuario en la web de nuestro cliente con consecuencias realmente devastadoras.

TEN SIEMPRE UN PROGRAMADOR A MANO

Son individuos de carácter agridulce y extrañas costumbres, pero si les prestas atención y les regalas un poco de tu tiempo, pueden convertirse en dóciles maestros de los que aprender el maravilloso arte de susurrarle a los ordenadores.

Cuando tengas dudas, pregúntales! Seguramente estén dispuestos a afrontar retos y te orienten en esa idea loca que tienes en mente. Al final, queramos o no, dependemos de ellos y ellos de nosotros, hagamos de esta sinergia una oportunidad para que brote la creatividad y fluya la magia.

0 Shares Twitter 0 Facebook 0 LinkedIn 0 Google+ 0 Pin It Share 0 StumbleUpon 0 0 Shares ×

Deja un comentario

El email es obligatorio pero no será visible para el público.

¿podemos ayudarte en algo?

Contacta con nosotros

¿Crees que podemos ayudarte con tu próximo proyecto?





Valencia