Estudio de caso: actualización de lynnandtonic.com 2017

En los últimos diez años, hice diez versiones diferentes de mi sitio web. Yo lo llamo mi portafolio anual "actualizar" ya que el contenido generalmente permanece igual. Siempre comienzo con un archivo CSS en blanco.

algunas iteraciones pasadas de lynnandtonic.com

Hago esto cada año por algunas razones:

  • para asegurarme de completar al menos un proyecto que no sea de trabajo
  • experimentar y aprender nuevas técnicas (algunas actualizaciones destacadas fueron mis primeros intentos de diseño receptivo, flexbox y este año, CSS grid)
  • un año es la cantidad de tiempo adecuada para que exista una versión en la que no me sienta triste una vez que me siento a cambiarla

Además, una gran cosa acerca de rehacer mi propio sitio es que es completamente mío y puedo hacer lo que quiera.

Un porcentaje muy pequeño de los visitantes de mi cartera son entusiastas del aeropuerto, espectadores de Top Chef y familiares (hola, mamá). Pero el público principal es abrumadoramente diseñadores web, desarrolladores y reclutadores de tecnología. Estas son personas que saben cómo se crean los sitios web y pueden tomar un minuto extra para inspeccionar las cosas. Quería diseñar alrededor de eso.

Concepto e inspiración

Durante años le hemos estado diciendo al mundo que un sitio web no necesita verse exactamente igual en cada navegador para cada usuario. Con un diseño receptivo y una mejora progresiva, los usuarios verán las cosas de manera diferente. No todos necesitan experimentar la totalidad del sitio.

¿Pero podría hacer que la gente quiera experimentarlo todo? ¿Podría sorprenderlos llevando estos conceptos a un extremo absurdo?

Me encanta cambiar el tamaño de mi navegador y ver cómo responde el diseño y cómo decidió el diseñador cuándo cambian las cosas y qué se cae o se agrega. Sé que muchas otras personas también hacen esto. Inicialmente pensé que podría subvertir las expectativas al hacer que los puntos de interrupción omnipresentes del teléfono, la tableta y el escritorio activen diseños completamente diferentes con estilos, colores y tratamientos de tipo únicos. Tres sitios en uno.

Los cambios, tan dramáticos como podrían haber sido, todavía se sentían demasiado convencionales. Ya espera que suceda algo en el tamaño de una tableta y luego nuevamente para los teléfonos.

Recientemente vi un video de YouTube sobre el efecto Kuleshov, un término en la edición de películas que describe "un fenómeno por el cual los espectadores obtienen más significado de la interacción de dos tomas secuenciales que de una sola toma aislada". Una campana metafórica sonó. mi cabeza.

Existe un significado preexistente para que un sitio tenga tres (o algunos más) diseños distintos: compatible con dispositivos comunes. Pero, ¿qué significaría que haya 10, 15 o, en última instancia, 21 diseños distintos que se "sientan" uno al lado del otro para descubrir uno a la vez, uno tras otro. Cada uno puede ser irrelevante por sí solo, pero son las relaciones (y las diferencias) con las de la izquierda / derecha y las otras 18 las que hacen que valga la pena mirarlas.

Una vista previa de lynnandtonic.com

Ejecutando la idea

Ya sabía que era posible usar CSS para convertir el marcado básico en algo extraordinario. CSS Zen Garden nos mostró esto repetidamente durante años. Otro proyecto paralelo mío, a.singlediv.com, lleva este concepto a extremos ridículos (siento un patrón aquí).

Entonces, la ejecución de este rediseño comenzó con HTML básico. Una cosa que aprendí a lo largo de los años de experimentar con CSS es que puedes lograr mucho sin tener que sacrificar el marcado limpio. Esto es lo que aterricé. Los s dentro de

y

me permitirían diseñar cada línea de manera diferente si lo necesitara y el elemento permitiría una imagen receptiva además de proporcionar: antes y: después de pseudo-elementos (que no permite).


  
  

     Lynn Fisher      artista y diseñador de Phoenix, Arizona   

  

     Hago cosas para la web y para paredes.      Me especializo en proyectos alegres que hacen que la gente diga: "No lo entiendo".      Sí, he oído hablar de SVG.   

                 una foto del artista   

También creo que debería agregar un descargo de responsabilidad aquí. Soy el único que toca este código, así que configuré las cosas de la manera que funcionó para mí. Por supuesto, hay formas diferentes y seguramente mejores de hacer todo esto.

Uso Stylus para el preprocesamiento de CSS (y lo haré en los siguientes ejemplos). Primero creé un home.styl donde se importarían un restablecimiento y variables, se declararían estilos de página básicos y se configurarían las consultas de medios. Esto, más las otras páginas, se importaría en un main.styl que se compila y minimiza. La estructura se ve así:

 _styl
   componentes
   globales
   páginas
     about.styl
     home.styl
     pensamientos.styl
     work.styl
   main.styl

Planeé usar la cuadrícula CSS para este rediseño, así que creé un diseño de respaldo súper básico para mostrar de forma predeterminada (separado en su propio archivo en un directorio de inicio) y coloqué todo lo demás dentro de una declaración @supports.

 _styl
   páginas
     inicio
       fallback.styl
     home.styl
   main.styl
/ * home.styl * /
@importar 'inicio / reserva'
@supports (display: grid)
  body.home
    [estilos base aquí]

Si un navegador no es compatible con display: grid, representará el respaldo, que se ve así:

Con un respaldo en su lugar, ahora podría centrarme en los muchos diseños diferentes. Para mantener las cosas manejables, dividí cada diseño en su propio archivo junto con fallback.styl en el directorio de inicio (no importa mi ridículo nombre).

 _styl
   páginas
     inicio
       b-and-w-and-gold-all-over.styl
       big-nav.style
       big.styl
       blockhead.styl
       bolt.style
       cutout.styl
       diagonal.styl
       disguise.styl
       fallback.styl
       cincuenta-cincuenta.stilo
       half.styl
       L-Y-N-N.styl
       landscape.styl
       movie.styl
       pop-out.styl
       rotate.styl
       stranger.styl
       third.styl
       triangle.styl
       white-bars.styl
       white-box.styl
       x.styl
     home.styl
   main.styl

Luego pude importar cada diseño en su propia consulta de medios:

/ * home.styl * /
@supports (display: grid)
  body.home
    [estilos base aquí]
  @media screen y (ancho máximo: 400px)
    @importar 'inicio / diagonal'
  @media screen y (min-width: 401px) y (max-width: 500px)
    @import 'home / L-Y-N-N'
  @media screen y (ancho mínimo: 501px) y (ancho máximo: 600px)
    @import 'home / blockhead'
  + 18 más (2300 px es la consulta de medios más amplia)

Esto elimina cualquier colisión que pueda ocurrir y elimina la necesidad de realizar anulaciones masivas. Hay algunos estilos repetidos en varios diseños, pero me pareció aceptable mantener las cosas claras y organizadas. Cada punto de interrupción solo usa el CSS que necesita para su diseño específico.

Aprendizaje adicional

Si está interesado en profundizar un poco más en el CSS o inspeccionar diseños individuales, hice público mi repositorio en GitHub.

No voy a entrar en cómo usar la cuadrícula aquí, ya que Rachel Andrew y Jen Simmons han escrito y hablado extensamente sobre el tema. Vea Rachel's Grid by Example y Jen’s Experimental Layout Lab como buenos lugares para comenzar.

Patrick Brosset de Mozilla creó un video que desglosa el uso de la cuadrícula para uno de los diseños de mi sitio, lo cual es bastante bueno:

Planeaba desarrollar algunas de mis partes favoritas del rediseño aquí, pero creo que quiero que las personas se sorprendan mientras exploran. Entonces, si aún no lo ha verificado, hágalo en lynnandtonic.com.

Respuesta

Siempre espero que mi trabajo inspire a las personas a pensar de manera diferente sobre su medio y sus herramientas y les aliente a experimentar con lo que es posible.

La respuesta ha sido abrumadora y es realmente maravilloso ver a las personas descubrir y disfrutar el sitio. Estoy muy agradecido por las palabras amables y alentadoras de todos.

Un comentario que recibí es que muchas personas no cambian el tamaño de sus navegadores. ¡Es verdad! Y está totalmente bien. El sitio sigue funcionando incluso si no sabe que existen otros diseños. Bueno, para ser justos, hay un diseño que sería una experiencia súper confusa (los fanáticos de Stranger Things podrían saber de qué estoy hablando). Pero con mi audiencia en mente, supuse que el riesgo era bajo.

Con la mayor parte de mi trabajo, hay personas que preguntan "¿Por qué hacer esto?". Tengo otra publicación en proceso que analiza las muchas razones, pero por ahora: a veces es divertido hacer cosas que son raras.

Gracias por visitar el sitio. Significa el mundo.

Hasta el próximo rediseño,
❤ Lynn

Publicado originalmente en blog.andyet.com el 9 de enero de 2018.