Contenido
- Diseñando para lo desconocido
- Un enfoque pragmático del diseño
- Convertirse en un diseño agnóstico
- Codificando progresivamente
- Zambullirse en el margen de beneficio
Parece que todos están hablando de diseño web receptivo en estos días, y con razón; a medida que la cantidad de dispositivos habilitados para la Web continúa creciendo, cada uno con diferentes capacidades y características, ya no es sensato crear sitios web de ancho fijo.
La verdad es que nunca lo fue. Sin embargo, hasta ahora se consideraba una buena práctica diseñar experiencias que tuvieran una serie de suposiciones, ya sea en torno a la resolución de pantalla, el ancho de banda o el método de entrada. Si alguna vez ha diseñado un sitio web de 960 píxeles de ancho, solo para verlo en la netbook de pantalla pequeña de un amigo (y sí, estoy escribiendo desde una experiencia dolorosa aquí), comprenderá por qué este no fue un enfoque particularmente inteligente. Ahora, con los teléfonos inteligentes y las tabletas incorporados, está claro que nuestros métodos tradicionales ya no son adecuados para su propósito.
Afortunadamente, el advenimiento de las consultas de medios CSS y un creciente reconocimiento de que la web es un medio por derecho propio, significa que estamos comenzando a adoptar la verdadera naturaleza de la plataforma, aceptando que su universalidad es una fortaleza, no una debilidad.
Durante los próximos cinco días, lo guiaré a través de una técnica que reconoce este hecho: diseño web adaptable. Desarrollado por Ethan Marcotte, combina diseños fluidos, imágenes flexibles y consultas de medios para ayudarnos a crear sitios que se adapten con elegancia a cualquier entorno que encuentren.
Demostraré este enfoque mostrándole cómo crear una galería de medios simple. En mis ejemplos, crearé un pequeño sitio web para documentar un viaje por carretera reciente que hice por los Estados Unidos, pero siéntase libre de personalizar el código y el diseño para satisfacer sus propias necesidades.
Diseñando para lo desconocido
Gran parte de este tutorial se centrará en el aspecto de desarrollo del diseño receptivo. Pero antes de profundizar en cualquier código, tomemos un momento para pensar cómo podríamos diseñar un sitio web que posiblemente tenga diseños infinitos.
Ahora, tengo la suerte de poder diseñar interfaces y Desarrolle el código frontend que los haga reales. Por supuesto, esta no es una habilidad única; si trabajas por tu cuenta, probablemente seas igual. Pero ciertamente es ventajoso comprender cómo el contenido puede adaptarse y reajustarse al crear diseños fluidos.
También trabajo como parte de un equipo más grande donde mi función es más especializada. En tal entorno, el diseñador visual puede centrarse únicamente en traducir wireframes en composiciones atractivas y atractivas (firmadas, con píxeles perfectos). Y no es inusual que los desarrolladores se ubiquen por separado, lo que traduce estos diseños en un marcado y CSS esbeltos y eficientes.
Sin embargo, estos flujos de trabajo lineales y segregados se rompen rápidamente una vez que comenzamos a evaluar cómo se adaptarán los diseños a los diferentes entornos. Tanto como cualquier nueva herramienta o tecnología, también deberíamos considerar formas de trabajo más colaborativas y ágiles. Muchos de los problemas más complicados que se encuentran al diseñar sitios web receptivos se pueden resolver simplemente a través de la conversación, la experimentación y la iteración.
Un enfoque pragmático del diseño
Eso no quiere decir que no haya margen para que los diseñadores piensen en cómo un diseño puede funcionar fuera de los confines de un dispositivo en particular.
En Clearleft, iniciamos el diseño visual desde la perspectiva del escritorio. Comenzamos por definir un lenguaje de diseño global y una estética visual, a menudo basando las exploraciones iniciales en una pieza central de contenido. Por ejemplo, si estamos diseñando un sitio de comida, comenzaremos con una página de recetas; para un sitio de noticias, una página de historias.
Esta no solo es una página importante en el sitio, sino que probablemente incluye suficiente contenido estructurado para que podamos construir una paleta tipográfica. También pensaremos en cómo se puede adaptar el diseño, incluso si está en el fondo de nuestras mentes en esta etapa.
Una forma útil de realizar una prueba de esfuerzo de un diseño es tomar una página de este tipo y adaptarla para una pantalla más estrecha (~ 320px de ancho). Es probable que descubra que algunos aspectos del diseño deberán repensarse para que funcionen con este ancho. Aquí hay unos ejemplos:
- Tipografía: Los encabezados grandes pueden funcionar bien en diseños más amplios, pero en pantallas más pequeñas pueden ocupar mucho espacio vertical y, por lo tanto, requieren un desplazamiento adicional. A medida que cambian las longitudes de las líneas, también debe considerar las alturas de las líneas y otros tratamientos tipográficos.
- Enlaces: ¿Cómo funcionará su diseño en dispositivos con pantalla táctil? Si bien todavía no tenemos una manera fácil de detectarlos (lo que significa que debemos tener en cuenta el tacto en todos los aspectos de nuestro diseño), diseñar para una pantalla más estrecha puede darnos la oportunidad de pensar en las áreas de destino de los enlaces y otros elementos interactivos. . Las pautas de iOS recomiendan que sean de al menos 44 píxeles / puntos cuadrados, lo que es una buena cifra a la que aspirar.
- Navegación: Este será probablemente el componente más incómodo de cualquier diseño receptivo, especialmente si su sitio tiene muchas secciones y una jerarquía profunda. Brad Frost ha escrito un resumen de algunos enfoques diferentes de navegación que se están considerando actualmente.
- Contenido superfluo: ¿No se requiere algún contenido? ¿Es necesario mostrar otro contenido solo en determinados escenarios? No abogo por ocultar el contenido en función del dispositivo que esté usando un usuario, pero técnicas como la carga condicional (que veremos más adelante esta semana) pueden ayudarnos a publicar páginas más pequeñas que solo cargan contenido complementario cuando es necesario.
El diseño de dos diseños contrastantes refuerza la idea de que un diseño se adaptará, al tiempo que soluciona posibles problemas desde el principio. Si bien esto suena a duplicar el trabajo, tenga en cuenta que no estamos diseñando cada página con una precisión de píxeles perfecta. En cambio, nos enfocamos en construir un lenguaje de diseño escalable, uno que evolucionará a medida que comencemos a implementarlo en el código, y uno que se base en módulos y componentes individuales.
Convertirse en un diseño agnóstico
Como era de esperar, para una industria que históricamente ha tratado la web como impresa, los diseños de ancho fijo han impregnado muchos de los entregables que producimos. A medida que comenzamos a diseñar para un medio adaptable, se están considerando nuevos enfoques que nos permitan resolver problemas y comunicar ideas reconociendo la naturaleza fluida del medio. Éstos son algunos de mis favoritos:
- Diagramas de descripción de página: Si bien los wireframes a menudo pueden implicar un diseño (y, por lo tanto, asumir un cierto tipo de dispositivo), los diagramas de descripción de página eliminan esta suposición y en su lugar describen los componentes individuales, organizados en el documento en términos de prioridad.
- Azulejos de estilo: Cuando comunicamos ideas de diseño con los clientes, podemos encontrarnos presentando "pinturas de sitios web". Si no tenemos cuidado, los clientes pedirán con razón ver conceptos que demuestren cómo se verá un diseño en otros dispositivos también. Esto puede llevarnos a una situación insostenible de producir varias páginas para varios dispositivos. Samantha Warren ha pensado en este problema y ha creado mosaicos de estilo. Estos se ubican en algún lugar entre un panel de estado de ánimo (pero menos vago) y composiciones completamente realizadas (pero menos precisas), y nos ayudan a comunicar la tipografía, los estilos de botones y los tratamientos de cabecera. También fomentan un nivel de discusión más maduro con nuestros clientes.
- Mobilify juego de diseño: Este ejercicio puede funcionar muy bien durante los talleres de diseño colaborativo. En este ejercicio, todos escriben en notas adhesivas los elementos que pueden aparecer en una determinada página. A continuación, se pegan a la pared por orden de importancia, como si aparecieran linealizados en un teléfono móvil. La discusión resultante puede generar algunas conclusiones sorprendentes. Por ejemplo, puede darse cuenta de que la navegación no es el componente más importante de la página. Esto podría seguir hasta el diseño, donde un enlace de salto en la parte superior de la página enlaza con la navegación en el pie de página.
Por supuesto, todavía hay espacio para las herramientas que ya estamos usando, pero al diseñar un sitio web en términos generales, debemos tener en cuenta que el diseño ya no es conocido.
Codificando progresivamente
Afortunadamente, no tenemos que preocuparnos por el diseño visual en el ejemplo en el que estamos trabajando, ¡ya que el trabajo duro ya está hecho por nosotros! En cambio, podemos concentrarnos en codificar nuestro diseño en un sitio web totalmente receptivo.
Una cosa más antes de empezar. Es importante recordar un principio fundamental del medio con el que estamos trabajando: la universalidad. Eso significa no solo crear para los dispositivos habilitados para la web de hoy, sino también garantizar la compatibilidad con los de ayer y mañana. John Allsopp describió por qué este principio es importante en su publicación The Next 6 Billion:
"Los próximos seis mil millones son niños en zonas rurales de India, África, China, donde el acceso a la energía y las redes puede ser intermitente. Es alguien en Sumatra en una caja Wintel de una década. Son personas que hablan cientos de idiomas diferentes, con docenas de sistemas de escritura. Son las personas las primeras en su familia en saber leer y escribir. Es el 20 por ciento de las personas en todo el mundo que no saben leer ni escribir. Sin embargo.’
Podemos rastrear nuestra comprensión de la web mirando las diferentes modas (a falta de una palabra mejor) que se han arraigado en nuestra profesión: estándares web, accesibilidad, JavaScript discreto… todas son variantes sobre el mismo tema: mejora progresiva. Lo mismo ocurre con el diseño web adaptable. Para construir un realmente sitio web receptivo es crear un sitio que no solo sea compatible con versiones anteriores, sino que también sea compatible con el futuro.
Zambullirse en el margen de beneficio
De acuerdo, basta de preámbulos, es hora de abrir un editor de texto.Nuestro diseñador nos ha proporcionado un diseño orientado al escritorio y ha tenido la amabilidad de proporcionar ejemplos de cómo esto podría aparecer también en una ventana de visualización más estrecha.
Puede ser tentador codificarlos por separado, pero voy a sugerir un enfoque diferente. Al colocar los componentes separados, o patrones, que componen el diseño en una sola página, podemos crear un portafolio de patrones. Esto nos permite desarrollar componentes fuera de los límites de cualquier diseño de página y nos dará algo a lo que referirnos más adelante para cualquier prueba de regresión. Veamos el marcado inicial en algunos dispositivos diferentes:
Ver nuestra cartera de patrones marcados
Bueno, que me jodan, ¡ya tenemos un sitio web adaptable! Nuestro contenido se adapta a los límites de cada dispositivo, ya sea un iPad nuevo y elegante o un teléfono con funciones descartadas. Incluso funciona en un navegador de solo texto como Lynx.
Gracias a los principios subyacentes de universalidad, la web es receptivo por defecto. Eso es genial, pero también significa que cualquier cosa que hagamos al código de ahora en adelante puede comprometer esta adaptabilidad nativa.
Mañana: Caminaremos con cuidado y comenzaremos a aplicar el primer aspecto del diseño receptivo: tipografía y cuadrículas fluidas.
