Con la evolución que han experimentado los sitios web actuales, el diseño web adaptativo es crucial. Cada vez son más los usuarios los que utilizan sus teléfonos móviles para acceder a los contenidos; por ello, el webmaster debe de pensar en adaptar la web a los terminales, sin olvidarnos de tablets, de ordenadores de sobremesa, incluso hasta a las resoluciones de las televisiones inteligentes actuales.

Cada proyecto de diseño responsive tiene su trabajo y habrá que seguir una serie de pasos para concluirlo con éxito.

diseño-web-adaptativo Cómo hacer un diseño web adaptativo

¿Qué diferencias hay entre un diseño web estático y adaptativo?

Esto es lo primero que nos debe quedar claro antes de empezar. Hace tan sólo unos pocos años, la gran mayoría de páginas se basaban en un sistema estático. El cliente se encontraba con diseños basados en wireframeso aquellos que se basaban prácticamente en una plantilla de Photoshop.

El diseño web adaptativo, en cambio, sigue las fases de investigación, diseño, desarrollo y entrega, consiguiendo una resolución que se adapta al dispositivo en cuestión desde el que se visualiza la web.

Cómo hacer un diseño web adaptativo? Paso a paso

Presentación del proyecto

Inicialmente se hará una presentación del proyecto para conocer que necesidades se intenta cubrir con el mismo. Se establecen las vías de comunicación, se conocen a los interlocutores, las fechas de entrega a cumplir, horarios, los objetivos que debe cumplir, la audiencia a la que tiene que alcanzar, así como cualquier otro detalle relevante.

Estudio del proyecto

Esta fase comprende una mejor comprensión de la idea; se estudian a los competidores, si los objetivos que se pretenden cumplir son realistas, y se establecen objetivos a largo plazo.

Habrá que formular las clásicas preguntas del tipo: ¿Para qué? ¿Para quién? ¿Dónde se va a hacer?Incluso hasta resulta interesante crear un perfil del usuario objetivo si se pretende cubrir varios nichos.

Estudio de la competencia y estrategia

Nos metemos en la piel de nuestro cliente objetivo y estudiamos la competencia, intentando entender cómo se han posicionado. Con toda esta información ya podemos empezar a trabajar.

Creamos un mapa de nuestro sitio web, con la estructura de secciones y planificamos bien los contenidos.

diseño-web-adaptativo Cómo hacer un diseño web adaptativo

Diseño

  • Plantilla: Empieza por una plantilla simple, aunque esto no significa que deba ser insulsa. Cuanta más clara sea, mucho mejor. Considera el espacio que hay disponible en los diferentes dispositivos (en una pantalla de ordenador cabrán hasta 3 columnas verticales, pero en la pantalla del móvil sólo cabe uno).
  • Quita todo lo que no haga falta: Animaciones Flash, efectos de jQuery, así como otro cualquier código que pueda ralentizar la web debería ser eliminado. Ten en cuenta que, a menor contenido, más rápido cargará la web.
  • Define estilos por tamaño: Este “tip” te permitirá controlar mejor los diferentes tamaños. Puedes crear, por ejemplo, un archivo llamado tiny.css, otro small.cssy otro big.css. La idea es crear una función que identifique el dispositivo desde el que se ejecute la web, y asigne la hoja de estilos correspondiente.
  • Determina las resoluciones más utilizadas y trabaja sobre ellas (estas son 320, 480, 720, 768, 900 y 1024px).
  • Tipografía: El tipo de letra y el tamaño determinan la legibilidad de la web, lo que también es crucial. Elige un tipo de fuente fácil de leer y que esto no cambie cuando varíe el tamaño. Dedica el tiempo suficiente a elegir la letra correcta.
  • Imágenes: Optimiza la web para que tus imágenes se vean al completo, y que no se corten por ninguna parte.
  • Integración: Trabaja sobre el mismo dominio y olvida los subdominios; tan sólo sobrecargarán la web. Integra todo en el mismo dominio.

Estas claves te ayudarán a crear un diseño adaptativopara tu página.

Reader Interactions

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Share This