Diseño web responsive

Los diseñadores web han asumido muchos más papeles en tan sólo los últimos pocos años. Ahora es muy común encontrar diseñadores que también se especializan en el desarrollo frontend, diseño UX, e incluso un poco de desarrollo backend. Una de las últimas tendencias de diseño es el diseño responsive, elaborado en una única base de código HTML / CSS que puede verse en cualquier ventana del navegador.

Hay un complejo equilibrio entre el escritorio y los navegadores web para móviles. Ahora más que nunca, es crucial que los diseñadores web encuentren un equilibrio para todos los usuarios en todos los sitios web. El Diseño web Responsive es algo más que el apoyo a los dispositivos móviles – Es realmente la creación de diseños flexibles con elementos  que pueden cambiar y reorganizarse a sí mismos de acuerdo a la ventana gráfica en la que se abra.

En este post voy a explorar algunas ideas de diseño web que ayuden a obtener que tus jugos creativos fluyan y que te sientas listo para hacer algunos cambios a tus sitios si es necesario.

Secciones con contenidos maleables.

La naturaleza de un sitio web responsive es la fluidez. Hay diferentes puntos de vista sobre si se debe cambiar el estilo de las secciones de contenido de las páginas. Estas secciones pueden estar relacionados con las fuentes, imágenes, encabezados, barras laterales, o cualquier otra cosa que afecta a ancho de página horizontal.

Estos puntos de vista diferentes se conocen como puntos de ruptura. Los Breakpoints Responsive se crean en CSS donde se puede optar por ocultar una barra lateral después de un cierto ancho, o cambiar el tamaño de otros elementos de la página.

Echa un vistazo a la página web de noticias de The Japan Times. En la pantalla completa página web utiliza tres columnas con una amplia barra de navegación. Cada enlace tiene un montón de relleno y las cabeceras son muy claramente legibles.
Cuando cambia de tamaño y se hace más pequeño, las columnas se empiezan a romper. En lugar de tener 3 columnas de lado a lado que se conviertan en secciones de página a ancho completo apiladas una encima de la otra. La navegación también se convierte en un menú de cajón deslizante vertical con una lista de enlaces.

La clave es planear sus ideas antes de tiempo. De esta forma será mucho más fácil codificar el diseño final a la hora de construir el sitio completo. Nixon Watches es otra empresa fantástica con algunas características de diseño brillantes en monitores más amplios. El menú desplegable incorpora muchos sub-menús junto con gran tipografía extra.

Cuando cambia de tamaño y se hace más pequeño, la página se divide en secciones horizontales. Estos son los métodos más tradicionales para la reestructuración, ya que van a encajar en cualquier dispositivo smartphone con facilidad. Ten en cuenta que el objetivo es la usabilidad completa. El diseño responsive debe ser maleable pero también utilizable a partir de una perspectiva de diseño.

Tipografía fluida y Medios Digitales

Cada diseño web gira alrededor de dos componentes clave: la tipografía y los archivos media.

El texto de la página es el típico pan y mantequilla que se puede esperar en cada sitio web. pero media también se espera en cada web. Esto consistiría en fotos, diapositivas, videos incrustados, o gráficos de páginas como iconos.

Con el fin de fusionar una web para que todos los tamaños de pantalla que necesita y el contenido de la página fluido, a veces se puede simplemente eliminar el exceso de contenido, pero esto no siempre va a ser una solución. Así que en lugar de esto, necesitas manejar imágenes y tipografías redimensionandas de manera que sean lo suficientemente pequeños como para caber en la pantalla, pero lo suficientemente grande para que los visitantes lo comprendan.

J Taylor diseño utiliza un sistema gráfico de estilo de cuadrícula para mostrar los trabajos recientes. Cuando se reduce el tamaño de la pantalla y se hace más más pequeña, la página rompe cada imagen en un segmento de bloque. Estos se colocan uno encima del otro y corren por la página verticalmente. El contenido se dispone entonces de acuerdo a cada sección.

Otro ejemplo brillante se puede encontrar en la página Websto. Hay docenas de pequeños iconos, gráficos e incluso texturas de fondo que se repiten a través de la página. Cuando la web cambia a un tamaño más pequeño, los gráficos cambian de tamaño con la página.

Es un ejemplo excelente de como mantener un diseño coherente sin sacrificar muchos elementos de la página.

También el sitio web Xigen Studio tiene un montón de elementos multimedia, incluyendo elementos animados. Están todos aún plenamente presentes en el diseño responsive e incluso corren perfectamente en mi viejo iPhone 4.  El contenido de vídeo incorporado también se escala de forma natural y se puede jugar en los navegadores móviles compatibles con HTML5.

La mejor manera de manejar los archivos multimedia es comenzar con el móvil cuando empiezas a diseñar. Determinar cómo el diseño móvil se adaptará al contenido cuando se haga más grande, va a hacer tu trabajo mucho más fácil y el proceso será menos estresante.

Navegación adaptable.

La navegación de una web es sin duda uno de los rasgos más importantes para el diseño adaptable. Una solución obvia podría ser la de cambiar el tamaño de texto del enlace más pequeño, pero entonces se podría llegar a ser tan pequeña que los usuarios de smartphones no pueden ni siquiera aprovechar los vínculos.

La mayoría de los diseñadores optan por ir con una opción donde los vínculos cambian de tamaño y se hacen más grandes. Echa un vistazo a la página web para Florian Wacker, que sólo tiene un par de enlaces en la cabecera. A medida que la página se hace más pequeño cada enlace se mantiene en el mismo tamaño, pero organizan más juntos.

Los diseñadores pueden llevar a cabo este efecto cuando la navegación no requiere un enorme montón de enlaces. Pero los diseños más complicados como Favorido.pl eligen en vez de utilizar el menú horizontal el de cajón deslizante.

Los usuarios de smartphones estarán familiarizados con el menú horizontal porque es utilizado en cientos de aplicaciones móviles nativas para Android e iOS. Esta técnica se ha adaptado para web con enorme éxito por parte de los diseñadores.

Diseño con consistencia

Cuando alguien accede a tu web generalmente va a ser desde un solo dispositivo. Alguien en su iPhone no es probable que cambie a un escritorio y reanude la navegación de tu web. Pero cuando alguien crece familiarizado con tu diseño, éste debería dar una vibración similar, con independencia de que se considera punto de interrupción.

Mi ejemplo favorito absoluto de esto se puede encontrar en el sitio web de Apple. Su diseño de pantalla completa es exactamente como era de esperar. Limpio, mínimo, y muy fácil de navegar. Lo que es interesante es que este estilo de diseño se fija incluso cuando el sitio se cambia el tamaño más pequeño hacia abajo.

Vale la pena mencionar que el sitio web de Apple no es verdaderamente responsive porque no va a cambiar al tamaño de un escritorio. El sitio web no se reescala en absoluto. En su lugar, reconoce cuando el usuario está visitando desde un teléfono móvil y muestra diseños completamente separados.

Esto va en contra de la idea de diseño responsive, que quiere construir un solo código que se ajuste a cualquier pantalla. Pero el diseño centrado de Apple es tan representativo que tenía que incluirlo en este post.

Manipulación Formulario Entradas

Los formularios no son necesarios en todos los sitios web, pero son bastante comunes. La forma más general es un sencillo formulario de contacto donde los visitantes pueden enviar un correo electrónico al webmaster. Los campos de entrada HTML están diseñados para ser totalmente compatibles con dispositivos de pantalla táctil.

Sólo asegúrate de que compruebas sus formas en el diseño de un sitio web responsive. Los visitantes que accedan a tu sitio en un dispositivo móvil también deberían poder inscribirse, hacer inicio de sesión, o enviarte un mensaje de contacto. Técnicas de diseño responsive apropiadas conseguirán que sus formas funcionan perfectamente en todos los navegadores con un solo juego de código HTML / CSS.