Puntos de interrupción y el futuro de los sitios web

 

 

 

  • Clase magistral de tipografía, con Elliot Jay Stocks
  • SmashingConf UX y diseño, Amberes 2024

  • Índice
    1. Dinámica de umbral
    2. Los puntos de ruptura de hoy
      1. Consultas sobre Medusa
    3. Los nuevos puntos de interrupción
      1. Puntos de interrupción en el diseño web contextual
    4. Los nuevos métodos
      1. Tres tantos
      2. ABRIGO De Muchos Colores
      3. Relacionar
      4. Poniendolo todo junto
    5. El estilo Polyfill
      1. Restivo.JS

    El diseño web responsivo ha resultado ser una especie de estudio de caso sobre la ley de las consecuencias no deseadas, siendo una de ellas la paranoia del punto de ruptura. Pero incluso sin la influencia indebida que ejercen las consultas de los medios sobre la selección de estos puntos de interrupción, es posible que estos no sean los droides que estamos buscando. En este artículo, Obinwanne Hill analizará los puntos de interrupción más allá del tamaño de la pantalla y explorará diferentes posibilidades y enfoques prácticos para utilizarlos para crear experiencias verdaderamente adaptables en la web.

     

    Cuando salió el iPhone en 2007, la demostración de su navegador web realizada por el difunto gran Steve Jobs dio la impresión no tan sutil de que a Apple no le molestaba demasiado que sus usuarios pellizcaran para hacer zoom y deslizaran el dedo para desplazarse como parte de la navegación. experiencia. El diseño web responsivo tenía como objetivo resolver este problema mediante la aplicación inteligente de cuadrículas flexibles, diseños fluidos y, por supuesto, consultas de medios.

    Sin embargo, el diseño web responsivo ha resultado ser una especie de estudio de caso en la ley de las consecuencias no deseadas, siendo uno de los efectos perversos e inesperados la paranoia de punto de ruptura. Pero incluso sin la influencia indebida que ejercen las consultas de los medios en la selección de estos puntos de interrupción, después de mucha introspección, te das cuenta de que estos podrían no ser los droides que estamos buscando.

     

    En este artículo, analizaremos los puntos de interrupción más allá del tamaño de la pantalla y exploraremos diferentes posibilidades y enfoques prácticos para usarlos para crear experiencias verdaderamente adaptables en la web.

    Dinámica de umbral

    Un umbral es el punto o nivel en el que algo comienza o cambia. Los umbrales se pueden encontrar y sentir prácticamente en todas partes del mundo físico: detenerse en un semáforo, elegir leche desnatada en lugar de crema entera, dos azúcares en lugar de tres, optar de manera grosera por no participar en el paseo en taza de té en Disney World, etc.

    Los umbrales nos definen porque definen acciones y las acciones determinan los resultados . Ser capaz de identificar los umbrales correctos lo encamina hacia mejores resultados, especialmente cuando sabe exactamente qué se debe hacer dentro de cada umbral. Es similar a hacer lo correcto en el momento adecuado.

    Nuestra previsión de conceptualizar (y habilitar) nuevos umbrales donde no los había abrirá una nueva perspectiva de acciones frente a los resultados. La libertad y flexibilidad que adquirimos a partir de esto sólo ayudarán a satisfacer nuestro deseo innato de asombro incremental, lo que nos impulsará a crear sitios web aún mejores que brinden mejores experiencias de usuario.

    Los puntos de ruptura de hoy

    En el diseño web actual, los umbrales en los que más nos fijamos se relacionan casi exclusivamente con el tamaño de la pantalla. El mayor desafío en los últimos años ha sido el diseño para dispositivos móviles y, siendo el tamaño de la pantalla el punto focal obvio, nuestra intención principal ha sido adaptar el diseño de nuestras páginas web para que coincidan con las características de visualización específicas del entorno de destino. .

    En el diseño web responsivo, el método predominante para definir estos puntos de interrupción es establecer consultas de medios.

    @media screen and (min-width: 240px) and (max-width: 320px){ body { background: red; }}

    El marcado anterior identifica claramente dos umbrales (240 píxeles y 320 píxeles) que constituyen un rango dentro del cual se activará una acción (en este caso, cambiar el color de fondo a rojo). Es bastante sencillo en concepto.

    Consultas sobre Medusa

    "A medida que aumentamos las capacidades de las personas para realizar sus tareas, debemos tener cuidado de no limitar innecesariamente lo que pueden hacer". -Jeremy Keith

    Resulta que las consultas de los medios son extremadamente rígidas. Por lo general, se ve obligado a emplear puntos de interrupción de formas que no son exactamente intuitivas ni están en línea con su aspiración central de diseño. En otras palabras, debe adaptar su aspiración de diseño a sus capacidades. Por lo tanto, es posible que tengas una imaginación vibrante sobre tus propios umbrales, pero lo más probable es que las consultas de los medios no te permitan aplicarlos de la manera que imaginas.

     

    Los defensores de las consultas de los medios deben comprender que la eficiencia es lo que hace que cualquier esfuerzo eficaz sea loable. Pasar muchos minutos o incluso horas modificando esas molestas directivas y luego tener que volver a modificarlas cada vez que quieras hacer un ajuste es nada menos que una pesadilla recursiva. ¿Qué tiene de malo establecer puntos de interrupción basados ​​en categorizaciones amplias de dispositivos móviles (como teléfonos inteligentes, tabletas, etc.)?

    En el artículo " Diseño para puntos de interrupción ", Stephen Hay sugiere definir puntos de interrupción según las clases de dispositivos. Estimulado por algunas afirmaciones, me embarqué en un miniproyecto de investigación que luego convertí en una publicación de blog para demostrar que esto estaba bien o mal. Y en una encuesta reciente que realicé sobre si las consultas de medios deberían apuntar a clases de dispositivos, alrededor del 54% de los encuestados dijo que sí. Pero no existe una manera intuitiva de hacer esto con las consultas de medios, incluso si así lo quisieras.

    En mi humilde opinión, desde el punto de vista del diseñador web, el conjunto de funciones de las consultas de medios está incompleto. Y es así porque los diseñadores tienen imaginación y apetito por muchos más puntos de interrupción de los que las consultas de los medios pueden proporcionar actualmente (y probablemente lo harán en el futuro).

    Los nuevos puntos de interrupción

    Como se mencionó un poco antes, nuestra capacidad para encontrar y establecer nuevos umbrales determinará nuestra capacidad para conceptualizar nuevas acciones que podamos desencadenar. Al hacerlo, podemos introducir más ajustes en un entorno inherentemente estático e inflexible.

    Puntos de interrupción en el diseño web contextual

    Los sitios web del mañana tienen que ser más que responsivos: también tienen que ser contextuales. Estos conceptos de flexibilidad y fluidez deben trascender el tamaño de la pantalla. La era de los sitios web únicos tendrá que llegar a su fin y ser sustituida por sitios web que también se adapten a las necesidades y expectativas de los usuarios.

    Para habilitar esta característica, tenemos que conceptualizar más umbrales, pero primero debemos averiguar qué parámetros rastrear. En la reveladora presentación de Nick Finck sobre “ La Web Contextual ”, destaca cuatro aspectos del contexto en el diseño web: usuario, tarea, entorno y tecnología . Por supuesto, los cuatro son un tesoro de extrapolaciones, pero ¿en qué deberíamos centrarnos realmente?

    Podríamos hacer literalmente cientos, incluso miles, de preguntas sobre los usuarios, sus tareas, su entorno y a qué tecnología tienen acceso. Sin embargo, tenemos que basar estas preguntas en nuestras capacidades actuales y manifiestas para obtener datos sobre estos cuatro parámetros. Algunas posibles preguntas podrían ser:

     

    • ¿Cuáles son las capacidades físicas del usuario? Si el usuario tiene problemas de visión o audición, necesitaríamos agregar más funciones de accesibilidad que mejorarían su experiencia.
    • ¿Dónde está la ubicación general del usuario? Saber dónde está el usuario nos da una buena idea de su cultura, situación económica, demografía, etc.
    • ¿Qué hora es en la ubicación del usuario? Las personas suelen ser criaturas de hábitos y probablemente es más probable que realicen determinadas acciones en un momento determinado.
    • ¿Cuál es el dispositivo del usuario? Un teléfono no es una tableta y una tableta no es una PC. Diferentes dispositivos tienen diferentes capacidades y se utilizarán para diferentes tareas.
    • ¿A qué tiene afinidad el usuario? Lo que le gusta (y lo que no le gusta) al usuario desempeñará un papel importante a la hora de ayudarnos a priorizar y entregar contenido.

    Hay formas de responder a las preguntas anteriores con la tecnología disponible en los navegadores actuales. Y si no, entonces realmente necesitamos trabajar más duro para incorporarlos, especialmente considerando un tema tan importante como la accesibilidad.

    Entonces, ¿cómo diseñaríamos un sitio web para que fuera contextual? ¿Cómo visualizaríamos los puntos de interrupción en un sentido contextual? He aquí un escenario.

    Supongamos que son las 6:00 de la mañana y suena tu alarma. Te diriges cojeando a la cocina para desayunar, antes de prepararte y salir a trabajar. Te apetece huevos, pero abres la nevera y no hay huevos. Entonces, te decides por otra cosa, pero quieres pedir algunos alimentos para que estén listos para recogerlos cuando regreses del trabajo. Para hacerlo, inicia el sitio web de una cadena de grandes almacenes extremadamente grande desde su refrigerador conectado a Internet.

    ¿Está impresionado simplemente porque este sitio web responde? ¿Conseguir la mejor oferta en electrónica es una prioridad para usted en este momento? ¿Realmente quieres que te recuerden que algunos de los pocos artículos que “viste recientemente” en dicho sitio web fueron Lincoln Logs y un portacepillos de dientes de Spider-Man? Quiero decir, son las 6:18 am y estás mirando desde un refrigerador. ¿Se necesita ser un genio para darse cuenta de que tal vez los artículos comestibles deberían ser una categoría que valga la pena priorizar?

    Estoy seguro de que existen muchos otros escenarios como este, y es fácil para alguien que no está familiarizado con la tecnología web sentirse frustrado por cómo los sitios web todavía parecen no cumplir con sus expectativas. Pero aquellos de nosotros que sí lo hacemos, ¿deberíamos seguir poniendo excusas o deberíamos intentar ir más allá?

    Los nuevos métodos

    "Las consultas de medios permiten a los autores probar y consultar valores o características del agente de usuario o dispositivo de visualización, independientemente del documento que se esté procesando". – Borrador del editor, W3C (3 de junio de 2014)

    Recientemente estuve examinando el borrador de la especificación “Consultas de medios nivel 4” para tener una idea de hacia dónde se dirigen las cosas. Debo decir que no estoy muy entusiasmado con la dirección y simplemente no parece haber mucha innovación aquí.

     

    Del resumen del documento, obtenemos una definición clara de qué son las consultas de medios como método. Sin embargo, no puedo entender por qué no hay una evolución de las características de los medios para reflejar las realidades presentes (y posibles futuras).

    ¿Qué hay de malo en tener funciones multimedia de tipo dispositivo como phoneo tablet? Parecen opciones obvias y, según la encuesta mencionada anteriormente, los diseñadores web quieren ese conjunto de características. Algunos dirían que es posible que esas no sean “cosas” en el futuro, pero eso es difícil de creer, dado que los automóviles, los televisores, las computadoras, los refrigeradores, los relojes y las gafas siguen siendo “cosas” que la gente encuentra útiles hoy en día. ¿Y cuándo veremos realmente una resolución a la cuestión de las consultas de elementos ?

    En mi opinión, las consultas de medios (como herramienta para el diseño web en un mundo multidispositivo) simplemente no pueden mantener ningún tipo de equilibrio con la trayectoria creativa de los diseñadores web contemporáneos, y son un estándar moralmente indefendible para el diseño web en el futuro. . Quizás deberíamos buscar enfoques alternativos; Me gustaría sugerir algunos. No son tan complicados y lo único que necesitaríamos es un SOMBRERO, un ABRIGO y una CORBATA.

    Tres tantos

    Probablemente todos estemos familiarizados con los selectores de clases CSS en este momento. Son uno de los selectores más utilizados en diseño web .

    .muttley .do_something {…}

    Lo que no entiendo es por qué no utilizamos estas clases más que consultas de medios para crear sitios web optimizados para dispositivos móviles.

    Me parece que diseñar sitios web para muchas situaciones diferentes sería mucho más fácil y rápido si los navegadores emplearan el etiquetado de atributos HTML (HAT). Básicamente, esto implicaría que el navegador coloque parámetros específicos en el classatributo de la htmletiqueta (en el proceso de carga de la página), lo que permitiría al diseñador web aprovechar estas clases en su marcado CSS.

    Algunos de estos parámetros podrían incluir los siguientes:

    • grupo de dispositivos fijo, móvil, hogar, desgaste, automóvil, etc.
    • clase de dispositivo . PC, teléfono, tableta, TV, frigorífico, coche, reloj, etc.
    • dispositivo de entrada grueso, fino
    • ancho de banda alto, medio, bajo
    • orientación vertical, horizontal
    • ancho y alto de la ventana gráfica en píxeles independientes del dispositivo, redondeado al múltiplo de 40 más cercano, con un prefijo alfabético para cumplimiento
    • fecha y hora locales en ddmmyyyyformato de fecha y representación de 24 horas para la hora
    • desplazamiento de zona horaria UTC
    • códigos generales de continente y país de ubicación geográfica

    Se podrían agregar más parámetros según la necesidad anticipada. Además, todos los parámetros se resumirían en el objeto de la ventana DOM para que sean fácilmente accesibles a través de JavaScript. Accesorios para Jeep

     

    Entonces, supongamos que alguien estuviera usando un teléfono Nexus 5 a través de una red móvil 4G LTE. El navegador agregaría las etiquetas relevantes a la página, dejándonos con esto:

    html

    Y si cambiaran la orientación del teléfono a horizontal, el navegador actualizaría la etiqueta con el estado, dándonos esto:

    html

    Si esto sucediera, el diseñador web tendría muchas opciones para adaptar rápidamente sus páginas web a través de numerosos puntos de interrupción lógicos literalmente a la velocidad del pensamiento. Consideremos un ejemplo práctico.

    Recientemente estuve probando una tabla de precios que no se diferencia de las tablas que se ven en muchos sitios web SaaS en estos días. La tabla tiene tres columnas y está construida usando uletiquetas con lietiquetas flotantes.

    Debajo de la tabla de precios hay contenido de preguntas frecuentes, también con un diseño de varias columnas.

    Obviamente, estos elementos de varias columnas no se verían tan bien en todos los dispositivos móviles como en una computadora de escritorio. Entonces, en el espíritu del diseño web responsivo, tendríamos que adaptarlos a las dimensiones de una pantalla más pequeña. Y la forma en que haríamos esto es mostrando estos dos componentes visuales en todo su esplendor de varias columnas solo cuando la página web se ve en una tableta en orientación horizontal.

    La lógica detrás de esto es que esperaríamos que una tableta en esa orientación tuviera suficiente espacio en pantalla para que toda la mesa se viera como se esperaba. Si esas condiciones no se cumplen, colapsaremos las columnas para que sean lineales y verticales.

    El CSS básico para nuestra tabla de precios es este:

    ul { margin: 0; padding: 0; list-style: none; }ul li { float: left; width: 33%; }

    Entonces, aprovechando HAT, implementaríamos estas características usando el siguiente marcado:

    .mobile ul li { float: none; width: 100%; }.mobile.tablet.landscape ul li { float: left; width: 33%;}

    ¡Eso es todo! Simplemente deshabilite los elementos de diseño flotante para todos los dispositivos móviles y luego vuelva a habilitarlos para tabletas en orientación horizontal. Aspiración simple, solución simple. ¿Quieres intentar hacer lo mismo con las consultas de medios? ¡Saluda al Dr. StackOverflow de mi parte!

    Claramente, emplear este enfoque tiene beneficios. La eficiencia es un beneficio importante ; Pasaría menos tiempo creando sitios web porque no perdería cantidades ridículas de tiempo elaborando consultas de medios, sin mencionar todas las pruebas de dispositivos móviles que conlleva. En segundo lugar, mantener su marcado sería más fácil porque todo estaría en línea y no habría duplicaciones innecesarias. En tercer lugar, tendría la oportunidad de explorar muchos más casos de uso porque habría más parámetros que servirían como umbrales para puntos de interrupción más lógicos.

    ABRIGO De Muchos Colores

    Todo el mundo parece estar fascinado por la analítica. Los programas de análisis de sitios web, como Google Analytics y MixPanel, intentan brindar una buena imagen de quién visitó su sitio web, cuánto tiempo permanecieron, de qué sitios web vinieron, qué dispositivos utilizaron, etc. Lo que estos datos no dirán usted es el contenido por el que los visitantes tienen afinidad.

     

    Por supuesto, podría utilizar cookies para rastrear a los visitantes de su sitio web, pero entonces sólo podrá determinar qué les gusta de su sitio web ese día, semana o mes. No podrá determinar con precisión el contenido específico que les interesa, ni podrá hacer nada al respecto antes de que se vayan.

    Realizar un seguimiento de la afinidad del contenido y adaptar el contenido a dicha afinidad realmente podría ayudarnos a crear sitios web que realmente se adapten a los deseos de las personas. Sin embargo, para obtener realmente estos datos, el mecanismo de recopilación de datos debe trascender cualquier sitio web. Es decir, todos los sitios web necesitarían construir este perfil de afinidad de forma colaborativa y transparente.

    COAT significa " etiquetado de afinidad abierto y acumulativo ". Es simplemente un método compartido para comprender las cosas por las que los visitantes tienen afinidad y luego construir un perfil de esa afinidad. Así es como funcionaría:

    • Alguien visita varios sitios web con regularidad. Algunos son sitios web de noticias, otros son sitios web de deportes y otros son blogs. Cada página web tendría una COATmetaetiqueta.
    • El navegador (a través de un submotor COAT) leería esta metaetiqueta y almacenaría incrementalmente su valor en una variable localStorage reservada, protegida y de solo lectura (que podría tener cualquier nombre) en un formato delimitado por comas. Entonces, para los sitios web que visita nuestro usuario, el valor podría ser news:info:1,sports:soccer:2,blog:tech:3.
    • Si la persona visita otro sitio web relacionado con deportes, el sitio web leerá (y actualizará) su etiqueta de afinidad desde localStorage. Ve que la persona está dispuesta al fútbol y por eso da más prioridad al contenido futbolístico en la página de inicio.

    Armados con esta información, podríamos modificar la página de inicio de un sitio web para atender mejor las diferentes necesidades de los usuarios de una manera altamente especializada.

    Los datos COAT consistirían en una única cadena delimitada por comas en el siguiente formato:

    {category_1}:{sub_category_1}:{popularity_1},…,{category_n}:{sub_category_n}:{popularity_n}

    Aquí categoryse encuentra la clasificación amplia de un tipo de contenido; sub_categorypermite una mayor clasificación; y popularityes una medida de la frecuencia de las visitas. Entonces, si nuestro usuario visitara un blog de tecnología 30 veces al mes y visitara la sección de fútbol de un sitio web de deportes 5 veces al día, terminaríamos con esta etiqueta:

    blog:tech:30,sports:soccer:150

    Esto es simplemente un ejemplo; el sistema de clasificación sería definido y mantenido por la comunidad web en general. También se implementarían una serie de salvaguardias. Por ejemplo, si un sitio web no definiera una COATmetaetiqueta, tampoco podría leerla. Además, si el usuario estuviera navegando en modo privado, COAT estaría deshabilitado.

    COAT no rastrearía ninguna información personal. La intención no es descubrir quién es una persona y dónde podría estar, sino obtener una imagen amplia del tipo de contenido que le gusta (y cuánto le gusta), para que los sitios web puedan personalizar su experiencia de navegación.

     

    Relacionar

    Seamos realistas: JavaScript es fantástico. No es muy accesible para la mayoría de los diseñadores web, pero sus capacidades son simplemente inmensas y tiene la clave para que los sitios web hagan grandes cosas en el futuro, incluso cuando su contribución a la funcionalidad del sitio web hoy no está en duda.

    HTML y CSS son un gran dúo para crear sitios web, ya lo han sido desde hace bastante tiempo. Sin embargo, parece que sólo a HTML se le permitió mantener una relación con JavaScript. Por supuesto, CSS es "un lenguaje de hojas de estilo utilizado para describir el aspecto y el formato de un documento". Pero tal como están las cosas hoy en un mundo dominado por dispositivos habilitados para la web, muchos de los factores que determinan la apariencia de un sitio web han ido más allá del ámbito de CSS .

    Como resultado, es necesario permitir que CSS sea "amigo" de JavaScript y solicite su ayuda para realizar determinadas tareas. Realmente debería haber una manera de vincular la funcionalidad de Javascript directamente con las reglas CSS en línea. Una forma sería mediante expresiones en línea trascendentes (TIE). TIE proporcionaría un mecanismo para vincular reglas CSS con expresiones JavaScript, abriendo oportunidades aún más sorprendentes para la funcionalidad del sitio web.

    Veamos un ejemplo sencillo. Supongamos que tuviéramos un componente de testimonios en la barra lateral de nuestra página de inicio:

    Queremos colocar este mismo componente en el área de contenido principal de otra página, en algún lugar donde tengamos más ancho para trabajar:

    Esto se llama diseño modular y conceptualmente es una idea muy simple. Sin embargo, nos resultaría bastante difícil implementar esto en CSS ( como descubrió Ian Storm Taylor ), porque no existe una manera sencilla de aplicar estilos CSS al componente de testimonios según el tamaño de su contenedor.

    Este escenario es lo que ha provocado el clamor por las consultas de elementos, siendo la necesidad primordial una forma de definir módulos reutilizables que se adapten al tamaño de sus contenedores. Si CSS implementara de forma nativa algún tipo de funcionalidad TIE, entonces podríamos escribir una expresión simple en CSS para que esto suceda:

    .testimonial { … }.testimonial[expr="if @parent:width less than 200px"] { … }.testimonial[expr="if @parent:width between 200px and 500px"] { … }

    Para el primer conjunto de reglas, aplicaríamos el estilo .testimonialhabitual. Para el segundo conjunto de reglas, la expresión podría significar que, cuando el ancho del elemento principal .testimoniales menor o igual a 200 píxeles, se aplican las declaraciones correspondientes a ese elemento DOM (es decir, el elemento principal). Lo mismo ocurre con el tercer conjunto de reglas, según el cual las declaraciones se aplican cuando el elemento principal tiene un ancho de 201 a 500 píxeles.

    Básicamente, CSS simplemente proporcionaría orientación sobre qué hacer, mientras que JavaScript haría el trabajo pesado para el que CSS no es adecuado. En lugar de escribir los conjuntos de reglas CSS para estilos y luego pasar a JavaScript para activarlos, simplemente haríamos ambas cosas mediante una expresión en CSS. Debido a que estamos trabajando en el mismo elemento DOM, tiene sentido que haya alguna forma fácil e intuitiva de diseñarlo y activarlo (es decir, el elemento DOM) directamente desde CSS.

     

    Cualquier implementación de TIE de este tipo debería ser lo suficientemente sólida como para permitir a los diseñadores web implementar funciones prácticamente a la velocidad de su creatividad. En otras palabras, si pueden imaginarlo, los diseñadores deberían poder lograrlo (o algo parecido) casi instantáneamente.

    Poniendolo todo junto

    Consideremos un escenario que muestra cómo encajarían los tres al crear un sitio web.

    Para cuando lea esto, la Copa Mundial habrá comenzado y los fanáticos del fútbol de todo el mundo se habrán reunido en Brasil para experimentar la emoción de la Copa Mundial. Supongamos que usted es uno de esos fanáticos y se encuentra en Sao Paulo, habiendo traído su teléfono inteligente y sus Google Glass.

    Un popular destino deportivo en línea que cubre el evento normalmente cubriría su sitio web con artículos de la Copa Mundial a expensas de otros eventos deportivos que se llevan a cabo en otras partes del mundo. El sitio web empleará las tres metodologías explicadas anteriormente para brindar una experiencia de usuario muy especial.

    Después de crear varios componentes de contenido, los desarrolladores del sitio web deberían poder hacer algunas cosas sin mucho estrés:

    • Optimice el sitio web exclusivamente para Google Glass, proporcionando una interfaz más simple y delgada para una navegación más sencilla. Además, adapte el contraste de color a la hora del día (es decir, cambie a texto claro sobre un fondo oscuro por la noche), utilizando los parámetros de clase de dispositivo de HAT.
    • Proporcionar más contenido sobre atracciones locales en diferentes ciudades de Brasil (por ejemplo, bares deportivos, otros centros de visualización, etc.) solo si el dispositivo de acceso es un teléfono inteligente o tableta y se encuentra en Brasil (usando los parámetros de ubicación de HAT).
    • Liderar con análisis previos al juego, perfiles de equipos y jugadores, y productos si el usuario visita el sitio web dentro de las seis horas posteriores al próximo partido (utilizando los parámetros de tiempo de HAT en combinación con TIE).
    • Liderar con momentos destacados del partido y análisis posteriores al juego si el usuario visita el sitio web dentro de las 12 horas posteriores a la finalización del partido. Proporcione diferentes diseños de diseño para momentos destacados de partidos en teléfonos inteligentes y tabletas usando la misma base de código (usando los parámetros de clase de dispositivo en HAT).
    • Liderar con funciones de golf en un lugar más destacado que el fútbol si determinamos (a través de COAT) que al usuario le gustan más las primeras que las segundas. Pero aún muestra los aspectos destacados de las coincidencias en una barra lateral con un ancho de píxel más estrecho (diseñado de forma modular utilizando las funciones TIE en CSS).
    • Utiliza de forma predeterminada el formato normal de contenido si no podemos determinar si el usuario prefiere el fútbol u otro deporte.

    Como puede ver, las permutaciones y oportunidades de una experiencia de usuario altamente personalizada y cuidadosamente ponderada son abundantes y fácilmente implementables si se consideran las tres metodologías. No necesariamente tendríamos que usarlos todos, pero es bueno saber que están ahí si quisiéramos.

    El estilo Polyfill

    “No siempre puedes conseguir lo que quieres. Pero si lo intentas algunas veces, es posible que encuentres lo que necesitas”. - Los Rolling Stones

    ¿Dónde estaría la comunidad de diseño web sin los polyfills? Incluso la tecnología mejor intencionada no siempre funciona según lo previsto y, a veces, presenta lagunas en su funcionalidad. "Simplemente relájate y polyfill" sería el mantra operativo en estas situaciones, y los últimos años han sido de hecho una verdadera palooza de polyfill .

    Todas las características descritas hasta ahora en este artículo son meras ideas y no están previstas en ningún próximo borrador de especificaciones de CSS o consultas de medios, por lo que no podría usarlas en este momento incluso si quisiera. Sin embargo, eso no significa que no podamos hacer algo al respecto mientras tanto.

    Restivo.JS

    Mencioné anteriormente que estaba usando un complemento para crear un sitio web. Bueno, ese sería Restive.JS , un complemento jQuery que desarrollé hace aproximadamente un año y que adopta e implementa el principio HAT. Usando las opciones integradas de breakpointsy classesuna característica especial llamada turbo_classes, Restive.JS completa sus atributos de clase htmlo bodyetiqueta con valores que le facilitan adaptar el diseño de una página web a través de CSS en línea a señales de diseño más naturales.

    Una vez que tenga la idea básica, usarla para crear nuevos sitios web adaptables y responsivos es bastante fácil, al igual que agre






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Puntos de interrupción y el futuro de los sitios web

    Puntos de interrupción y el futuro de los sitios web

    Clase magistral de tipografía, con Elliot Jay Stocks SmashingConf UX y diseño, Amberes 2024 Índice Din�

    programar

    es

    https://pseint.es/static/images/programar-puntos-de-interrupcion-y-el-futuro-de-los-sitios-web-852-0.jpg

    2024-04-04

     

    Puntos de interrupción y el futuro de los sitios web
    Puntos de interrupción y el futuro de los sitios web

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20