Archivo de la etiqueta: retina

Aspectos a tener en cuenta en un proyecto web responsive

Vamos a analizar en que pensar cuando queremos hacer una web responsive como dios manda.

Por supuesto en el Diseño. A la hora de pensar en el diseño debemos tener en cuenta que debe poder adaptarse a los diferentes dipositivos como móviles, tablets, etc.. en algunos casos encontramos frameworks en los que primero se diseña la versión móvil, luego se va a la versión tablet y es al final cuando diseñamos la versión desktop.

Pero claro, luego están los diferentes formatos de pantalla a tener en cuenta, con lo que que debemos saber que podríamos mostrar vídeos o fotografías de mayor tamaño a mayor tamaño de pantalla, o ajustar un diseño específico para laptops.

Y que pasa con los SO?
Podemos mostrar contenido sólo para iOS o sólo para android o Windows Phone  sabiendo que los “selects” funcionan de manera diferente en cada caso y teniendo en cuenta que algunos efectos que van bien en desktop como los “mouseover”,”rollovers” o “dropdowns” en “mobile” no van bien.

Y los iconos o gráficos?
Pues éstos se tienen que hacer para cada dispositivo, porque un icon para iphone 3G no tiene el mismo tamaño y resolución que un icon para “iphone retina” o “ipad retina”, incluso ahora que hay macbook retina hay que hacer el ícono adaptado a su tamaño. Además todos los íconos deben estar en un sprite para que la web cargue una sola imagen con todos los elementos. Este sprite se va mejorando y editando mientras se maqueta.

Por otro lado, es una buena opción es usar fonticons, lo que permite controlar los íconos como si fuesen fuentes tipográficas, controlando así su tamaño, color o permitiendo algún efecto CSS3 o de animación de forma mas fácil. Aunque esto no remplaza el usar íconos de imágenes para casos donde no exista una fonticon aplicable. Algo que por ejemplo se debería preparar para diferentes resoluciones de pantalla sería el logotipo de tu página o algún simbolo especialmente diseñado.

OJO: Esto no se aplicaría a las fotos que se suban al sistema, es decir al repositorio de Media del mismo WP, sólo a las fotos que se carguen desde el CSS y no desde el CMS.

Debemos también saber que hay dos tipos de slider, fluidos y responsive.

  • En el fluido el alto del slider se ajusta según el ancho de la imagen que varía según el ancho de la pantalla del dispositivo. Ej: Orbit de foundation.
  • En el responsive el alto no varía y se ve mas o menos imagen según el ancho de la pantalla. Ej: Ver spacebox.

 

Importante la tipografía. Aquí entramos en un aspecto complejo ya que no sólo hay que controlar el tamaño de las fuentes, sino decidir el tamaño adecuado según el tamaño de monitor. Teniendo en cuenta que la distancia que tiene la pantalla de un portátil a los ojos del usuario no es la misma que la distancia que hay con la pantalla de un móvil, una tablet o de un monitor en sus diferentes tamaños, sin hablar ya de una SmartTV.

Por otro lado y como una buena opción podemos usar webfonts, las cuales se pueden cargar desde servicios de terceros o desde el mismo CSS como archivos de fuentes usando @font-face.  

Elegir un Framework con el que te sientas cómodo Debemos intentar encontrar un framework que nos aporte un entorno agradable a fin de usarlo también en futuros proyectos los que nos facilitará bastante la vida. Una vez que nos hemos familiarizado con uno en concreto podemos evolucionar con él y usarlo de la forma mas efectiva.

Yo cada vez me decanto mas por foundation, para íconos Font-Awasome, jQuery, Less, Sass y algún que otro minified (reductores de peso de archivos).

Usar foundation no nos limita a fijar el ancho de la web a 960px ni a sólo 12 columnas con un espaciado de 30px cada una, podemos definir nuestro grid y crearlo. Ej: 18 col, 10px gutter, fluid + fix.

Foundation Icons Fonts - ZURB Playground - ZURB.com

Nunca olvidemos el Contenido & SEO Esencialmente todo el contenido será gestionable, TODO, aunque luego al cliente le demos acceso a unas partes y otras no. Podemos crear todo tipo de campos y funcionalidades, pero hay que definir bien que creamos y como funcionará.

El análisis SEO del contenido se debe aplicar en el Theme, y es necesario que el diseño indique que tipo de tag usa, H1, H2, a, ul, ol, etc. Necesitaríamos el informe de análisis SEO para aplicar las keywords también en el código si así lo indica el analista.

Sin olvidar los PSDs Un psd bien organizado ahorra mucho tiempo.

Enlaces: