93 792 27 62
  • Contacta
  • Llamar ahora Enviar whatsapp
    Publicado el 12/09/17

    Diseño web responsive



    testviews 117

    La llegada de los smartphones supuso una revolución para el mundo del diseño web. De repente todos queríamos ser los primeros en crear sitios web con un diseño web responsive. Parecía magia negra: redimensionar el navegador hacía que todo el sitio web se acomodase a la nueva resolución, cambiando incluso la estructura del sitio web.

    Cuando se lo enseñábamos a los clientes, por raro que parezca ahora, normalmente se quedaban boquiabiertos. Hablamos de no hace muchos años, y lo cierto, es que ahora es algo que ya está totalmente normalizado.

    Sin embargo, aún queda mucho trabajo por hacer dentro del diseño web responsive o adaptable. No nos podemos limitar a trabajar con un framework css como puede ser Bootstrap y esperar que éste haga todo el trabajo por nosotros. Si queremos conectar con el usuario final, deberemos brindarle una experiencia de usuario acorde con su dispositivo y en este aspecto deberemos comprender cómo el usuario interactua con su dispositivo. Será imprescindible entender la filosofía con la que nuestro visitante espera navegar.

    Si nos encontramos frente a un pc de mesa, deberemos tener en cuenta el ratón como elemento principal de navegación. Si por el contrario, estamos navegando por el sitio web con un smartphone, deberemos ser conscientes de que la forma de navegación es táctil, y por lo tanto, ofreceremos facilidades para ello en nuestro diseño web.

    Claves para un buen diseño web responsive

    Menú de navegación

    Será importante que el menú de navegación sea de fácil uso para nuestro usuario. Podemos facilitar eso, poniendo un simple botón que despliegue el menú de nuestro diseño web, ya sea desde un lateral, como desplegado hacia abajo. De esta forma, estaremos ahorrando espacio y siendo más ordenados para con el usuario.

    diseño web responsive

     

    Imágenes adaptables y coherentes

    Deberemos asegurarnos, de que las imágenes que tenga nuestro diseño sean adaptables. Deben verse correctamente tanto en una pantalla de 27″ como en un Iphone.

    Aunque lo anterior es bastante básico, lo que resulta muy importante y que muchas veces no se tiene en cuenta es la coherencia con las proporciones. Las imágenes que pongamos deberán ser coherentes con la orientación del dispositivo o pantalla. Si en el momento de diseñar la página web, en versión desktop, ponemos una imagen demasiado panorámica, en un smartphone obtendremos una imagen de dos dedos de altura y una anchura de todo el dispositivo. Lo cual, normalmente, no tendrá mucho sentido.

    Por lo tanto, lo más correcto, sería ofrecer un tamaño intermedio o hacer una sustitución de la imagen para el caso del smartphone.

    Orden y jerarquía

    El orden en que pongamos cada sección de nuestro diseño web, es vital. Puesto que seguramente al redimensionar el diseño web a una medida de smartphone, pasaremos a tener la mayoría de contenido en una sola columna, una debajo de la otra, deberemos planificar el orden en que queremos que el usuario visualice nuestras secciones, poniendo las más importantes lo más arriba posible.

    Menos es más

    Siguiendo con la lógica del punto anterior, lo más recomendable, cuando estamos diseñando para una pantalla de un smartphone, será eliminar las secciones que no sean relevantes para los usuarios que visiten desde estos dispositivos. Por ejemplo, los típicos pies de página, podemos optar por eliminarlos por completo, y como mucho, dejando únicamente una línea con la información de contacto.

    Utiliza todas las herramientas disponibles

    Si estamos diseñando la experiencia de navegación smartphone, será imprescindible tener en cuenta todas las funcionalidades extra que nos ofrece. Por ejemplo, si en la versión desktop ponemos un mapa de contacto, en la versión smartphone, deberíamos poner un click para abrir el navegador GPS. Para facilitar la tarea al usuario, también podemos crear botones de llamada directa.

    Otros datos interesantes

    Actualmente, los datos nos dicen que ya hay más usuarios visitando sitios web a través de dispositivos mobile que en desktop. Los datos son de un 51% de visitantes desde mobile frente a un 42% de visitantes a través de desktop y un 7% restante de visitantes que están usando otro tipo de dispositivos.

    diseno web responsive 2

    • 51% de visitantes desde mobile
    • 42% de visitantes desde desktop
    • 7% usan otros dispositivos
    Suscríbete y mantente inspirado
    El autor: Jordi Ensenyat
    Graphic & Web Designer + Programmer
    Jordi Ensenyat es un diseñador gráfico y web, programador y
    maquetador, ubicado en el Maresme, Barcelona.
    While I'm designing/programming don't disturb me. I could fatality you.
    www.jordiensenyatdisseny.com

    ¿Quieres empezar un proyecto?
    Trabaja con nosotros
    Mantente inspirado con nuestra newsletter
    Mejores cursos de diseño gráfico para 2021
    leer más
    Tendencias en diseño gráfico 2021
    leer más
    Tus datos Si no rellenas tus datos,
    comentarás de forma anónima
    Publicar e inscribirme a la newsletter
    Publicar y no inscribirme a la newsletter
    Recordar datos para comentar rápidamente
    Cuéntame las últimas novedades

    Blog & Proyectos

    Un espacio para todo aquel interesado en diseño web,
    diseño gráfico y marketing online.
    ¿Tienes alguna duda?

    Preguntas frecuentes

    ¿Por qué lo hacéis todo a medida y no utilizáis plantillas?

    Respuesta rápida: Como creativos hacemos todo el diseño web a medida para ofrecer un valor creativo y un diseño único. Como desarrolladores web esto nos deja libres de limitaciones y conseguimos un mejor rendimiento.

    Respuesta elaborada:

    Nuestra filosofía de trabajo ha sido desde siempre, la creación a medida de los proyectos de diseño web que desarrollamos. Esto implica que tanto el diseño como el desarrollo estén hechos a medida. Como diseñadores y como creativos, pensamos que no debería ser de otra forma, por lo que rechazamos de forma rotunda el uso de plantillas en el desarrollo de páginas web. Normalmente utilizamos WordPress como gestor de contenidos, para que el cliente pueda subir sus contenidos a través de un sencillo panel de administración al que tiene acceso mediante usuario y contraseña.

    Gracias a que WordPress es una famosa plataforma para la creación web, muchos estudios se aprovechan del poco conocimiento por parte de sus clientes y crean websites utilizando plantillas prefabricadas que pueden ser adquiridas a bajo coste, únicamente modificando los textos, imágenes, colores, y poco más. En nuestro caso, cada página web que creamos lo hacemos desarrollando nuestra propia plantilla a medida para el proyecto concreto y empezando todo desarrollo con un documento totalmente en blanco, escribiendo cada línea de código.

    Esto nos permite:

    1. Ser totalmente libres y crear todas las funcionalidades que queremos, incluso llevando el proyecto un paso más allá en caso de tener que crear funcionalidades no soportadas por las plantillas. No hay literalmente nada que se nos pueda resistir.
    2. Entregar un trabajo de diseño y desarrollo web totalmente original y con personalidad, adaptado a la imagen de tu marca.
    3. Conseguir un mayor rendimiento, ya que todas las funcionalidades están creadas a medida, sin necesidad de «atiborrar» el la página web de plugins creados por terceros que a menudo pueden dar problemas de incompatibilidades, si no es ahora, en un futuro.
    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿Qué sucede si no me gusta la propuesta de diseño presentada?

    Respuesta rápida: Si la propuesta de diseño web presentada no es la que esperas, presentaremos nuevas propuestas de diseño hasta que quedes 100% satisfecho.

    Respuesta elaborada:

    Normalmente solemos acertar a la primera en el momento de presentar una propuesta de diseño web. Evidentemente siempre hay modificaciones que hacer y que nuestros clientes nos solicitan. Estas modificaciones las hacemos y resolvemos con celeridad. Sin embargo, en los casos en los que la propuesta de diseño web presentada no se ajusta a la línea de que esperaba el cliente, presentamos nuevas propuestas con el objetivo de que quedes 100% contento con el resultado final.

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    He tenido malas experiencias con otros estudios de diseño, ¿cómo puedo estar seguro de vosotros?

    Respuesta rápida: Nuestra cantidad y calidad en los proyectos de diseño y desarrollo web que hemos llevado a cabo a lo largo de los años nos avalan. Puedes consultar nuestro porfolio de proyectos haciendo click aquí. También puedes consultar los premios que hemos recibido por nuestros proyectos.

    Respuesta elaborada:

    No es poco frecuente que en el momento de aceptar un presupuesto nuestros potenciales clientes se muestren preocupados y nos cuenten historias anteriores que han tenido con otros estudios de diseño y desarrollo web. Desde que los han dejado a medias en el desarrollo web, hasta que el desarrollador contratado ha desaparecido sin dar señales de vida dejando un proyecto sin terminar.

    Llevamos años diseñando y desarrollando páginas web para clientes de todo el mundo. Si nos has pedido presupuesto, imaginamos que esto se debe a que ya has consultado los proyectos que tenemos publicados en nuestra página web. Sin embargo, si aún no lo has hecho, te animamos a que le eches un vistazo con ojo crítico haciendo click aquí y seas tu mismo quien determine si somos o no somos dignos de tu confianza.

    Además de disponer de un inmenso portfolio de proyectos realizados, también podemos añadir a la ecuación el hecho de que hemos sido premiados en numerosas ocasiones por nuestros trabajos de diseño. Haz click aquí para ver los premios y menciones por nuestros trabajos y proyectos de diseño web y gráfico desarrollados.

     

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿El presupuesto es cerrado o vais a cargar importes extra durante el desarrollo del proyecto?

    Respuesta rápida: El presupuesto es cerrado, siempre que nos ciñamos a lo presupuestado y que el cliente no pida funcionalidades nuevas, además hay que tener en cuenta que: *hosting y dominio, *textos, *traducciones y *fotografías las ofrece el cliente. En caso de necesidad, podemos ofrecer nosotros mismos los puntos anteriores y en todo caso figuraría como punto en los detalles del presupuesto. Nuestra asesoría y guía para cualquiera de estos puntos no tiene ningún tipo de coste.

    Respuesta elaborada:

    Los presupuestos de desarrollo y diseño web que ofrecemos son siempre cerrados, y únicamente serían ampliables (bajo previa aceptación), en el caso de que el cliente nos pidiera una funcionalidad nueva a medio desarrollo, entendiendo como funcionalidad nueva, cambios o añadidos mayores en el funcionamiento de la página web.

    El cliente ofrecerá el *hosting y dominio, los *textos del website, las *traducciones y las *fotografías.

    *El hosting y dominio en caso de no ofrecerlo el cliente, podemos contratarlo con nuestro proveedor habitual, y teniendo en cuenta que el coste correrá a cargo del cliente. Nuestra asesoría y guía para cualquiera de estos puntos no tiene ningún tipo de coste.

    *Los textos del website en caso de no ofrecerlo el cliente, podemos ofrecer nuestro servicio de redacción, y teniendo en cuenta que el coste correrá a cargo del cliente.

    *Las fotografías necesarias para crear el sitio web, en caso de no ofrecerlas el cliente, las compraremos en nuestro banco de imagen habitual, resultando en un coste de 15€ por fotografía, y teniendo en cuenta que el coste correrá a cargo del cliente. Nosotros mismos te haremos la propuesta de fotografías que consideremos que van más en línea con el proyecto. Tu nos tendrás que dar el visto bueno antes de hacer cualquier compra, la cual la asumiremos nosotros y la repercutiremos en la factura del final de proyecto.

    *Las traducciones en caso de no ofrecerlas el cliente, podemos mandarlas a hacer a nuestro proveedor habitual, ofreciendo un precio cerrado según el número de palabras a traducir, y teniendo en cuenta que el coste correrá a cargo del cliente. Nuestra asesoría y guía no tiene ningún tipo de coste.

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿De principio a fin, qué pasos tiene un proyecto y cual es vuestro método de trabajo?

    Respuesta rápida: Presentaremos las propuestas de diseño web, haremos las modificaciones que nos pidas, Desarrollaremos la página web en nuestro servidor, al cual tendrás acceso para ver el progreso, pondremos el sitio web en vivo. Nuestro trabajo está garantizado, así que cualquier error que se aprecie y que sea responsabilidad del estudio será debidamente solucionado sin ningún coste.

    Respuesta elaborada:

    Fase 1 (Diseño):

    1. Programaremos una reunión o llamada para sentar las bases de tu proyecto y definir todos los puntos a tener en cuenta.
    2. Empezaremos a trabajar en tu proyecto y te presentaremos las primeras propuestas de diseño.
    3. Nos indicarás posibles cambios y modificaciones, los cuales resolveremos con celeridad.
    4. Una vez resueltos los cambios y modificaciones, te presentaremos las versiones finales para poder pasar a la siguiente fase.

    Fase 2 (Desarrollo):

    1. Empezaremos a programar tu página web en nuestro servidor de desarrollo y te iremos mostrando cómo va evolucionando.
    2. Una vez terminada, tu mismo nos podrás indicar posibles cambios y modificaciones menores (generalmente los cambios mayores, suelen darse en la fase de diseño).
    3. Haremos los testeos y comprobaciones previas al colgado de la página web.

    Fase 3 (Puesta en vivo):

    1. Pondremos el sitio web en vivo.
    2. Una vez terminado el proyecto, nuestro trabajo está garantizado así que cualquier error que se aprecie y que sea responsabilidad del estudio será debidamente solucionado sin ningún coste.
    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿Dispondré de algún manual o documentación para poder subir y editar el contenido del sitio? ¿Ofrecéis alguna formación?

    Respuesta rápida: Dispondrás de un manual y además te ofreceremos una formación de forma gratuita.

    Respuesta elaborada:

    Al finalizar el proyecto te entregaremos un manual de uso para que puedas gestionar los contenidos que hayamos definido de los cuales necesitas poder gestionar, tales como proyectos, productos, artículos, etc.

    Además te ofreceremos una sesión de formación de forma gratuita para enseñarte a utilizar el gestor de contenidos.

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla
    contacta ahora - 93 792 27 62 - info@codewebbarcelona.com
    Pedir presupuesto
    Me gusta perooo... ¿Te contactamos para
    asesorarte sin compromiso?
    Da un paso al frente. Indícanos tu teléfono o email y te contactamos
    para ayudarte a sentar las bases de tu proyecto.
    ¡Perfecto, pronto nos pondremos en contacto contigo!